Creating a phpList Landing Page

welcome back to writing done right well today we want to revisit php lists because i had some requests to go a little bit deeper so on our original installation video on php list which you can find in the description to this video we talked about installing it but then if you get it installed it's functional but it doesn't look all that pretty today we're going to go a little bit more detail and talk about how you can get your system set up right so thanks for coming along to this writing done right video i am tom morosky an author and a technology consultant and today we're going to go a step further on our php list series and we're going to look at how you can get your landing pages set so with php list this is of course the newsletter application you do need to have some considerations we talked about all those in the previous installation video so go ahead and watch that video if you haven't already at least watch the introduction so you hear a little bit more about what it is how it works and the limitations but if you know you're wanting to use it and you're wanting to go ahead and and use that system for your platform today we're going to go in and we're going to do a step further now we're not going to do all the template setups and stuff like that we'll do that on a separate video what we're going to do today though is we're gonna go through and take your boring and bland setup and then we are going to modify this so that the landing page looks the way we want it to look this is going to affect the landing pages where you sign up to your newsletter lists it's gonna manage your unsubscribe boxes it's going to manage your um your managing subscription system so this one landing page is used it's all done inside of the settings and we're going to show you how to do that on today's video all right so here we are over on the computer and what we're going to do is first i want to show you what's possible to do and then we're going to kind of get started on some things and then i'll probably stop and recut a little bit more footage at the very end i'm just going to show you a few basics because there's always going to be some back and forth there's always going to be a few errors that pop up and i'm going to eventually you know i'm going to want to stop recording the video work on this the best i can and then kind of show you at the very end i'm just going to show you the basics about how to do things with the newsletters just for the simplicity of time but um first thing we want to do is i want to show you the uh the things that are possible with php list now as you may have noticed i'm not on my regular writing done right computer i'm actually on my web design computer because you do need some web design skills to do this if you're not comfortable enough with working with websites and web design you're probably going to want to hire somebody if you want to customize it but in the case you are and you're just looking for some brief tips or if you're in interested in learning how to do do some coding stuff this might be a useful tutorial so of course right now we are on the writing done right page and as far as the writing done right newsletter sign up i just simply added a banner and really nothing else um so this one's not particularly edited other than just changing the banner so that's not exactly the best idea of what we're going to be looking at when we are doing anything with our lists now where things start getting interesting is in the synaptorgy book so of course this is the book here and if you click in on the newsletters you're gonna get to this page here which is fairly simple still it is a very simple uh methodology here but at the same time it's not um it's not as boring as the original layout is where i actually start getting into really good development is for my christian site now this is my my main author site as far as being an author and you can kind of see what the site design of this site happens to be just to give you an idea and when it came to doing the newsletter for this site this is what the newsletter page looks like so the footer is going to be a little bit different but i do have all the links the social media the headers are very similar i believe this goes back to the main site these go back to the main the various main pages that you might they're not in the same order that they were on the site i might want to change that down the road later but you can really kind of see what the newsletter sign ups look like it's very consistent all of the theming does match the original site you can see if i click in on a on one of the subscribers here there's only a single mailing list here so we don't have a variety different mailing lists but you can see here that you enter your email address here into your name you select your preferred so we can actually go back to let's go back a page to the newsletter list there's update your preferences so these guys here all look uh all look the same so what our task is going to be here is we have a um we have a new site here and what we're doing is we are opening up my publishing company llc as being open for basically open for business and we're going to be collecting mailing lists we're going to be doing a lot of things working with christian authors we are going to be an indie company so we are not selling services we are publishing books and helping you sell those books that's what our task happens to be so if you're interested in any of that you can head on over to owicpub.com and hit on the schedule a meeting button and you can schedule a meeting and a consultation pitch what your book happens to be but what we're going to do today is i want to get a newsletter list which i have just gone through and i did our i just simply did the install i did do the back end like i've added my newsletter subscribers so everybody that's already was on the old mailchimp system is now imported into this platform i have my lists built out i have all my settings done but as far as all the front end pages everything is all default so here is the options where you can select what you want to uh what you want to join or not my guess is the the way these have changed these might actually change on me on my other newsletter page when i look into it uh this is a newer version of it i don't know we'll see we'll see what happens um but anyway everything is horrendous and boring and what we want to do is we want to make our landing pages and our subscribe pages reminiscent of this so we might want this background picture we're going to want this logo we might want this individual independent publisher maybe we want the independent publisher going back to maybe back to the website or something i don't know exactly what we're going to want there and then of course our main portions over here all of our buttons should look like our our default button here so this is kind of the goal that we are going to be looking for so how do you actually pull this off well what you're going to want to do is you want to get logged into your back end here now there's a few things here we're not going to be looking in this video we're not going to be looking at what the newsletters actually look like we'll do a separate video on that but what we're going to do is just get the landing pages and that is all inside of i believe it's on your side of your system since inside of our settings we've got to find out where our settings happens to be so let's see initialize settings sometimes he's got to figure out where things happen to be uh config settings that's what we needed all right so inside of this setting here you can kind of see where everything is is set up um these are your your various systems here and what we are going to do is we are going to come down and what we want to do is here's our default footer um and our uh for when a sending a campaign for when we are forwarding a campaign eventually we are going to want to change those but we do not want to change those right this second what we are going to want to change though is our basic landing page settings which are a little bit further down so subscription ui so if there's only one visible list should it be hidden the answer is yes this basically means if there's a single list just hide the list make it a little bit less complicated if there's multiple lists that's the case now this is the part we're going to be editing so this is the header and this is the footer you can see that we have some javascript in the footer which is the appropriate place to put it you can see up at the top we happen to have the basic information up here and all this is kind of your default stuff so any changes made inside of here are what's going to go inside your platform you can see here organization name this is auto filling your the information from your site so that's actually let me go back to my subscriber page that's this right here and then everything else basically what's going to happen is it's going to get up to this spot here and then there's going to be a break in the code it's going to drop whatever happens to be in here whether it's the public page and uh so everything there ends right here so if i actually look at the code for this page and we have a look at what this looks like we can see here's our header here's our um this is what our header part happens to be here's our container main container content and then this is our content well div class content well that is this line right here so what the code is going to do is it's going to take basically everything above this code and then everything below the code and have those two separate things and then what you're going to do then is whatever page you're on is just going to get dropped in here so in this case here we are on the subscribe page you might be on this default page you might be on the contact administrators page i think that's just an email though here's the unsubscribe page so you can kind of see what what all you happen to have over here so with all that being said then what we're going to do is we're going to work with customizing this how we're going to do this well we're going to start with the code for this and we're going to show you how to override some of this and i don't think yes i did all right so here i opened up in bluefish editor which is my preferred my preferred editor here for um for linux this guy here is basically our site now all this down here this was actually modeled off of the old version of the site which i took down to put a single page up so really everything inside of this guy here this is all just commenting out i can literally that just doesn't mean anything just throw it away scrap it kill it nuke it everything else here is pretty standard so all really what we need to do is we have to figure out how to merge this content in with the other content that we had so having a look at what we are looking at here we have some font awesome in here i'm probably not going to need font awesome so let's just leave that out we have a couple fonts i'm not going to worry about the fonts in this tutorial here eventually i am going to pull these fonts in or change them to something i mean open sans i have that font meriwether i'll see if i can get that font we have bootstrap men which already should be loaded into here um let's see if it does or not it may not be so it may not be loading in bootstrap let's go ahead and have a look at this page and let's see if it's actually loading bootstrap it might be it might be putting that in with something if if not though i don't know we do have bootstrap men specifically for php lists down at the bottom so since this is just going to be a basic content wrapper let's go ahead and not worry about putting that in at the start but we might put it in later if we have problems with the site we'll go ahead and put it in the big thing that we do need is we need our main styles sheet which is this guy here now remembering in cascading style sheet is that whatever is since it cascades whatever's below in the code is going to take precedence all right so what we're going to do what that basically translates into is figuring out where this is our main admin css so if i were to kill this css code here on the fly and just kill it you can see that it just completely breaks the code all right so what we're going to do is we're going to go into our server and we're going to make sure that the style sheet for this is uploaded into the system and then we're going to go ahead and add it on in so let's go ahead and pull up this guy here let's figure out where that guy happens to be at so in our code that is under our just under our css and it's the creative min is the one that we want so i already have the server pulled up let's go with our newsletters here and i'm just going to drop it into this styles page the you saw that the other one's not in styles but it's just easier to call these styles so we're just going to go ahead and drop this guy into styles there's probably more css in here than we need but that's going to be good enough let's go ahead and edit this guy here and then what we're going to do is we're going to link in another style sheet so i'm just going to copy that and instead of this whole url here though all i'm going to need is is it style or is it styles so it's called styles and then i'm going to want the name of this so we'll just copy that name there and we're going to save changes so this may not notice any major changes but we'll kind of see what it happens to do all right so it didn't actually cause any changes because we don't actually have any code in here that it would but let's go ahead and verify that this is in here so we can kind of see that it's in there you can see that it's actually pulling all the code so that's exactly what we need excellent so now let's go into here and now that we have that we have to decide or determine rather in our main page here where is this uh background banner being inserted from so is that being inserted in the body or is that being inserted in something else and i'm not actually sure where it is so we're just gonna have to hunt for it i think it might actually be in the body code maybe it's in the header code i bet it's in the header code all right so here it's in the header code so the css is going back it's looking for image header as what it's looking for so let's make sure that that is in the system here and we have a couple options one option is we could change the css code to say images where we already have some images or the second is we could simply add a directory called img now adding the directory might make updating php list harder later but for the sake of this here um i don't know what should we do well you know what let's let's just uh let's see what line's at how big is this thing it is a minified css um that might actually give bluefish editor a chat a problem but let's go ahead and see oh like that's right i can't drag and drop onto that let's just go ahead and uh open up like this and let's see if we can figure out where that image header is so we're going to find image okay so right there image header see that we're just going to change this to images save that and we're going to go ahead and upload this file i'm going to move things around here so i can more easily work all right so styles re-overwrite that one that should have slightly changed and still we should not see any changes when we go ahead and update because again we're just making small changes to things all right so now let's go ahead and look at our index here now that was inside of the header code which is right down here we have navigation code up here we have body code up here the body code should not make any difference the navigation code we can go ahead and delete this because i don't need any of that in there all right so we're gonna do that so now we're gonna grab navigation we're gonna go down to header let's see okay so we're gonna want our content inside of here so let's just go ahead and grab from the start of our navigation down to the end of our let's see that's not where we want to go though let's go ahead down to header container auto row okay so this row here is kind of where we start text so let's go here we're gonna copy this once again make some edits now here is body class fixed and visible we might have to change that around later but now what we're actually going to do is we're going to copy this and we're actually going to go down and paste it over writing all of this information all right so we're going to save that now the footer we're going to want to do some changes to the footer right away as well because this will otherwise cause some issues since we went to there this is the closing div tag for that all i want is this closing div tag and the header and then we're going to pretty much ignore everything else for now although we might want to put some of that back in later because this might cause a dumpster fire and everything that we are doing so we're going to get rid of all this let me make sure there's nothing in here it's important which i don't see anything save changes and now let's see if we've completely killed our system or if it actually works out well let's have a look all right so you can kind of see that there's some things that aren't working it's not loading our key image so let's go ahead and start investigating some of what might be wrong here all right so here's our nav so first thing is we're going to go ahead and see if we can figure out what's up with the images so it's not finding the images oh you know why because we never put our header image in the file didn't we we need to drop that image in that file so that was our header and we need to drop that into images go ahead and do that all right so now it can find our header so now though we see this spot up here that's because this class fixed so this class fixed up here is actually going to mess with stuff so let's go ahead and change that to i think it's just called page top let's uh let's just kind of match whatever we have over here i think it's an id page top i don't think that there's any styles attributed to the id page top but we're going to go ahead and do it anyway just in case it is you never quite know with some of these templates that i borrowed from so let's go ahead and do that okay and there's going to be something else up here that's causing that uh that change okay so looks like it's probably our navigation is actually causing some of the issues here so this is the part that we'll have to dig in and figure out what the issues happen to be what this most likely is speaking from a lot of bootstrap experience is they're probably loading a different version of bootstrap than what i'm doing or maybe i just need to drop in the rest of my bootstrap code it does appear that we do have some bootstrap but i don't know for sure so let's go ahead and just test that and we're going to test that by dropping our bootstrap css into here so let's go ahead and pull up our css and where is it i think it's under is it under vendor bootstrap css i think let's see where this is at vendor bootstrap css bootstrap man so let's just go ahead and grab our bootstrap men we're going to drop that into our styles okay now we're going to edit this guy here now bootstrap needs to be above the other ones so we'll go ahead and drop this one up here and should be called bootstrap dot men save changes on that and let's see what that does okay so we have some more bootstrap going we have some of our code going we don't have our images quite right and our uh our navigation up here is still being a little bit wonky all right so what's going on here i think we have yeah see there's where that is there all right so this is going to be the part maybe what we do is we just drop this but i still need to get that page logo in there too so this is the part where i'm gonna have to uh pause out the video and track down what the issue is that i'm having and then we'll also fix some of the list items over here i'm gonna fix the button so the button actually should be something we can actually fix pretty quick let's see what we got so we're using button primary we're going to we don't need the js scroll trigger but these are the three lines of code in the button that's that's doing that wow you know what actually there's a little bug that i'm going to have that i'm i am going to have to fight with this what we're going to have to do with this input button here is i'm actually going to have to um get in and see if i can't override some of the code in that and get that guy fixed up should be possible i just gotta figure out exactly how to do that again so uh we're on the right track a little bit here that's kind of the process we're gonna do this up here um it's likely either a bootstrap mismatch with whatever php list is giving us or uh something else over here where we're getting uh basically you can kind of see what this guy's doing here is not giving me this background transparent and it's not moving up the banner here so let me show you that over here so doing this guy here so you can see it's not giving us the background transparent that we needed that's the part that i need to need to get figured out there so once i get that figured out that'll be that'll be there so we'll go ahead and pause the video for now and we will see what i can do with that so that was a very quick easy uh easy change there so what we actually did is we put the bootstrap over since they do cascade this guy here the style css does actually contain a lot of the bootstrap code so what i wanted it to do is i want php lists to have its own bootstrap code but then i want to override it with anything specific so i just moved my bootstrap underneath their bootstrap code and then that fixed that now you can see this guy here is we didn't transfer the publishing logo over yet so let's go ahead and drop that into the image folder and that actually should be changed to say images folder not image just like the other ones so we'll go ahead and do that so that is the image logo there and let's go ahead and re-edit this and we're going to find that line of code which is it's got to find that line of code there it should be up here somewhere here it is so change that from img to images now refresh we should have our logo there now all right so there we have our logo one of the things that i'm noticing right now is it really scaled down the size of my page for some reason i have no idea why that is we'll go ahead and look into that um that's probably um when i change the bootstrap order um i bet that they have the the required code to reset the size of the uh they reset the size of the the viewing window i bet that they manipulated that in their css and we're overriding that is probably what that happens to be but i'll look into that one and be back in a minute all right so we're going to land on this one for now i'm probably going to go ahead and make a few other adjustments eventually so let's kind of look at this we got our sizing font sizing right so this was something that was actually inside of the the default style sheet that i had to overwrite you'll see kind of like the orange highlights orange over here that's actually because of my operating system as you noticed is uh defaulting to a lot of orange that's just the theming that i've done for this because my business colors are black and orange um this system is themed to my business uh so you can come down here and select whatever newsletters you want to be part of you can see that i have my buttons set up now to match the original site i might need to increase the size there a little bit of the font but that's actually pretty easy to do and i do actually have everything is is centered out i said i'd probably like to space a few things out a little bit better i might want to change this to my my blue color and put the white background i'm still not one hundred percent happy with how these look um i wanna uh they just they're just a little harder to read it was just all blending together when everything was was white so i wanted to do something different on those i'm going to experiment with those a little bit but you can see now that we have our landing page uh pretty well created let's go back to our default again this one here i'm going to go through and and fix up this page here as well probably just make these these very large links and do whatever i end up doing to these subscribe lists there so how do we manage all of these well the uh the types of things i put in um this guy here ended up being what was messed up inside of the uh the banner system that was causing everything to get really small is the style sheet default of php list actually wanted to default the height of that to a maximum of 45 pixels so i overrode that here by doing the max height of none that way the logo would determine the size of the banner which is more preferable you can see this big input block here i could have probably streamlined this a little bit and i'll probably go back through and streamline it a little bit more there's probably some duplicates basically what i did here is uh there's no way to actually change the styles inside of the the the default auto-generated code so what i had to do instead is i had to target the submit button specifically so i called input with the type equals submit and then i just grabbed all of the code so like because i'm doing this on firefox it's going to give me the mods user select but i'm going to have to go back and and grab all of the code for the other ones as well like the webkit ones and whatever else i need to drop in there and then just kind of fix it up like i said there's gonna be some things duplicated we'll go ahead and fix those but i just copied the the content of all of the original css from the original site and just pasted it all in and a big blob i'll go ahead and fix that later the information this is the one that um i end up uh just adding that to just give me a little bit more space i think that was here gave me a little bit more space in between a few items which i felt was very necessary for readability and then i got rid of the list item bullet points by targeting the ui list and then the table there's a table um right here the these are actually inside of a table and the best way to center that was actually just to force the table at 100 width so that's why i align the tables at 100 width and then the label bolds that's actually what i'm doing um in fact maybe something to try here real quick to see what this does is what if we give it the blue backdrop the blue shadow with keep the text white not something i was thinking might actually work and that's something we can test real quick let's do that and then refresh the page that's actually sticks out that's a lot better you can kind of see a faint blue in fact though with that i might actually go back and add a little bit more a little bit more depth to that so let's see what happens if we do a one pixel on that as well so we're just going to go in and just kind of make the blue a little bit more uh stick out a little bit more there i think that that's something i can do give it a little bit of a glow i think that's actually pretty good there so we'll do zero zero and five that gives it a little bit of a blue glow there so we'll go ahead and make that adjustment here real quick and then then what we're going to do let's see that was 5 there and then 0 0. and then we'll go ahead and adjust these on the um on the front of the the front page there as well so let's see what that looks like so it looks pretty good all right let's go back to our main page kind of give you a little bit of insight about how we did this so i'm just using my developer tools in this case i use an older version of the browser so i can still use firebug which was an infinitely better developer tool than the stuff they give us now so here we have um oh this is gonna be harder to do because it's all set up in p tags with no aids hmm i'm going to think about this because that's actually going to mess up a lot of other things so i'm going to play around with that a little bit there the the problem is let me show you what the problem is with that the problem is um these guys here you know what like this guy here is the same code anything i do to that is going to do this code actually no it won't do that one all right i have an idea just the quark of php list ideally these should have class tags i don't know why phplist does not give us class tags in these but they should have separate class tags but since they don't but this is the only place i'm seeing an a inside of a p tag then what we're gonna do is we're just gonna go ahead and target p a and inside of this we're going to do our color we're actually going to style it exactly the same way let me just copy this we're going to style it exactly the same way as this and we'll see if that fixes makes that makes that a little bit more pronounced and it does so that's actually very nice so you can kind of see that uh there we are now we have nice tools there if we go back to just the basic newsletter page this is a lot easier to read so everything over here is nice we're gonna have to fix up some of some of these guys here i'm gonna move this button down and stuff but we'll get there this is the part where um the unsubscribe button now is a little bit bigger than i would like but uh that's some nothing much we can do about that because it's not giving us anything specific that we can we can target and it's not giving us anything inside of here that we can so we'll go in through through and do that we'll probably also make some changes to the h3s uh there and uh from there it's uh pretty much uh pretty much good so we'll call this uh we'll call this good for now of course i'm gonna fix up a few of these other items but that'll give you a little bit of insight as to how you can adjust your php list default landing pages to look a lot more attractive so have a look at this after this video is posted and uh we'll actually have uh i'll probably have this finalized by then so thanks for coming along guys and i hope that we have taught you how to get your writing done right

Channel: Writing Done Right

Views: 668

Keywords: WritingDoneRight, Authors, Book Production, Book Distribution

Id: B2Y2VI1s3dQ

Length: 36min 20sec (2180 seconds)

Published: Wed Aug 05 2020