/Bootstrap – How to edit a bootstrap template

Bootstrap – How to edit a bootstrap template

Video: Bootstrap – How to edit a bootstrap template


Hi Guys this is Jamie from http://www.system22.net and http://www.great-webdesign.com/ here's a little video we're going to show you how to edit a bootstrap template so say you've downloaded or found a nice bootstrap template that you'd like to edit and you've unzipped it and here it is in the folder where you've done it you go take a look at it I think yeah yeah that's what I like I like that but what do we do with how do I edit all this and and use it for my own needs well it's not difficult first thing you're going to want to do is get a text editor and I recommend a bracket it's free it's a brackets dot IO and I use it for all kind of editing it'll do HTML CSS JavaScript whatever you need it to edit it really is good it's lightweight so you can go ahead and download that like I say it's free and once it's downloaded go ahead and install it once you actually install there if you look at your index.

html file there right click on it now you've got brackets installed it'll give you the option to open it with bracket so I'll go ahead and do that of course like any other program brackets you can open it first and open a file and navigate to your index.html file or whatever far course if it's a multi-page site you'll have index.html file about HTML contact HTML etc etc etc it's the same process for it all so here's our main page here for the site like I say I'm going to just briefly go over this I'm not going to go into too much depth but it should give you enough to be able to edit the template so this is where you change change your name up here with the title you know whatever your title happens to be it's just like any program just type in what you want to just make sure you don't get rid of any of those tags at the end because that will mess things up and put a description in there these are just links to the style sheets where you can change all the style we'll go over that a little bit in a minute these than the favor cons for various devices Apple devices and it's the little little symbol that appears in your browser tab as well the actual fabric on there than the first one shortcut icon' so if we go on down let's have a look back at last site and see what we want to change first okay obviously the first thing we're going to want to change is the logo right here so go ahead and create your new logo off you're doing this for a customer obviously they've got one already to send you and let's see I've got one already here somewhere there's my new logo I'm just going to copy it across to the images far which is right here there's the original logo so I'll just put mine in here as well mine's called new logo so if we go back to our brackets and you'll find your logo here usually below the nav if you're worried you can't find it hit ctrl F and you can just type in a logo and it'll highlight the first logo word there which makes it easy easier to find things sometimes if you're not used to looking through code like this now we just need to change that name to our new image name which I think was a new logo new logo and it's a PNG so it's just new it's actually prompted us to do it there so I'm going to click on that hit ctrl s to save and if we go back to our site and refresh it it should change our logo up here there we are to put in our new logo there and next thing we want to do is change the put some slider images in here because that's just a image placeholder that we've got going on there so again if I go back to my folder I've prepared a couple of images obviously you'll have to do your own and I'll take those too I'll copy them over and put them in the slider folder here that's where the originals are that are there you don't have to as long as you type the URL they dress where they actually are doesn't really matter now again if we go back to our brackets we want to go down to the slider this is quite nice because it's nicely marked with the slider text here and here's the image background and again you can do a search if you can't find it by by if I was you I'd look through so you get used to all this stuff okay and we want to replace this zero one jpg with our new slide which I believe is slide one dot jpg what's going to put the the image type there else it won't work and we'll do a ctrl s to save it or you go up there and hit save whichever you prefer back to our site to a reload or refresh and there we are it's put our new image in there obviously you repeat that for all the slides that you want to put in here we'll just do one more which is the second one down here slide two and your ctrl s to save and I reload once we're back at the site and hit the next button there's our next new image there so you get the idea that's how we replace an image or a slider now you're going to want to change this text or customize this text obviously that's on the slide will quickly do one of those if I go back to our brackets so here is our text section each one is for heading and h2 is also heading any H tags for heading one is the the largest two is slightly smaller and it goes down to six and they get smaller as you go down so we need to do is type in your new heading here make sure you don't clip off those brackets at the beginning and end there because that will not display correctly new title and subtitle out new description and we've got that I'd keep it to a similar length here because we know that works in the slider for aesthetic purposes so I keep it to a similar length you can add more or less but you may have to adjust it with some CSS code so let's have a look at that ctrl s to save and back to our site of course we'll do a refresh there it is there's our new title and our new subtitle and a new description down the bottom there so scrolling on down we've got our services section obviously we just edit it the text the same way so I'm not going to go over that again but if we go down here's our services section just say new services just so you get the gist one more thing up here at the slider if you decide there's too many slides you can just delete one and if you click on a div tag at the top here you'll see it highlights the corresponding closing tags you should start to recognize these are all in little set here and each one corresponds to a new slide so you can just select from a beginning of the div tag there to the closing div tag when I say a closing div tag it's got that little forward slash there that'll close it out and just delete that hit save and that last slide will be gone and if you don't want to do that hit ctrl Z and it'll be back again and also if you decide well I want more slides you can copy that section ctrl C just return and make a line underneath it and paste it underneath it'll paste that slide underneath and all we have to do is change put your new picture in and put your new text in there as well I just thought I'd cover that anyway back to the services section you know how to edit the text no problem new services we've just done that the other thing there if I just still quick save and back to our site and reload and now it says new services this is all text this is all text these little icons here are called font awesome and they're very easy to change well if you go to font awesome cheat sheet or font awesome I'll show you up here font awesome dot IO similar address and cheat sheet or just google cheat cheat you come up with this there's a list of all our font awesomes here showing you the icons you can just change and do what you need as you need to do it we'll just change one to show you just click the name there from the beginning of the fa until the end of it copy it now we go back to our brackets and you want to look for FAS and that will be where your font awesome as you see it says FA there for an awesome fun awesome now it's important you want to let go of this one forget that one the first one it's just the second one to the end of it and just paste in your new one there hits a control s now if we go back to our site again there's the original this should now change the new one we've put in there which was an arrow I believe to the left and do a reload and there we have it you've changed that and you can go through putting put in whatever makes sense to you again what you want to remember when you're editing these little boxes here unless you know a bit about CSS and min and max height selected you want to keep it you want to keep these similar number of lines three lines four lines fine lines it doesn't matter how many but you want to keep them all the same RS the boxes will be slightly out of alignment just bear that in mind again if we go down you know how to add a new picture and that that overlay there is just it's a line of text underneath that's the – just change your overlay there or your new title there it's same I'll just quickly show you that should have changed that overlay text now from web development to what I just typed in quick refresh there it is new title very simple pricing all the same this is all text that you just want to change their pictures text no problem same thing here button text button obviously where's it go at the moment it doesn't go anyway it just brings it back to the top I'll show you how to add a link – well this button and also these buttons here to go back to our brackets so go down to pricing I'll do the pricing 1cu BTN there's button that's about class in bootstrap and you see the href were the two lots of inverted commas there that's where you want to put your link where it is you want to want a link to if you look at the top here this is the menu structure this is where where our links are going to they're using CSS IDs there so which will just send it to the contact section I just paste that in there between the two inverted commas ctrl V and you can obviously you know how to change text then so ctrl s to say back to our site and now if i refresh this should now take us down to the contact section which it does which is what you want to do obviously any links buttons links you can put any a link in there or each ref in there for instance if I wanted to link to my site or an external link by this I just go ahead and copy the link we'll go back to the bracket and again just paste that link in there make sure not to clip off those inverted commas there or if you do put them back in and hit save ctrl s back to our site to quick reload and once we have reloaded that that should now take us to our site there we go that took it to my site there which is what we wanted it to do a quick tip that actually took us in the same window to my site and if you didn't want them to leave this site you wanted to open up in a new tab what you need to do is just add a vine attribute on the end of that which you use add target ta car it should prompt us for a target there it is it's prompted us to and just hit blank so hecha as you all you have to type as the tea it'll find it but is target blank and it's put that attribute after that link there hit the save back to our site quick reload now I'm when we hit this it should open up the link in a new tab over here yep there we go no problem at all so it's all falling into place it's quite easy to do again there's a parallax image right there parallax means it Scrolls at a different rate there you know how to change the image text that's all easy enough to do there again text these are font awesome now here's one this is here's your contact form and to make this work it won't work until it's on a live server because it uses what they call a PHP script and the only thing you need to change is the address that you want this form to be sent to so if we go to our folder with our site in it here hopefully there's a PHP form with it let's look here yep PHP sometimes it's just loosing in the root folder here this is that you've got a folder within there that's it there the send contact will open it with our brackets and here it is there on line 10 it says your domain comm so this is where you need to put in the address that you want reforms to be sent to whatever that may be John Smith at yahoo.

READ  DJI Osmo Mobile 2 Cinematic Moves Android

com or my business at your domain comm once you replace that and upload the site the form will send and it'll send it to this address here this is the confirmation confirmation message that will pop up once the form has been sent so you can change that if you want to but that looks pretty it that's pretty much all you need to change on that and once you've done that save it and once it's uploaded to the live server like I say it'll work absolutely fine and of course the other thing you may want to change on this site and this is digging a little bit deeper and you want to know a bit of CSS and what-have-you to be able to do this so you want to change the background color you want to change this color here to a different color it's for the C let's say we want to change that to a light blue or something like that the inspection tab is something I'm using Google Chrome here I suggest you do too it's great for anything if you just right click and hit inspect or hit f12 it it'll show you you might need to hit inspect again on the area that you want to change it will show you that area here's the colors this is a great way of editing because it's non-destructive you can change things and and once you hit refresh it'll go go back to how it was but you can get a great idea of how you'd like things to look before you've actually done that the editing in the brackets now just put the new color in there I'll just all I did was there was the color I clicked on that and just pasted my new color in there and now let's change that background color and you can do that with all this all these things there's that background color there that's the actual hover so let's see if that lets you change it yeah there you go but of course once we refresh this it'll go back to how it was so if you want to make that change permanent we need to do that with CSS so if we go back to our folder here's the CSS folder and it's usually in something called main or style these are the bootstrap ones the one that you go on edit is usually called the style or the main folder but have a look around in fact if we go back to our site and hit the inspector on that again it should tell us where it is yeah there you go it's in the style dot CSS so that's the one we want to edit to make this permanent so let's go back there and again right-click and open with brackets and here's our style okay so easy way of doing this if you wanted to change all those sections is if we go back to that site again and let's see the color that we want to change what I'll do is copy that control C back to our editor now if I do ctrl F or what we're doing is we've all got fine and we can replace the whole lot and I go to replace and I'll type in our original one there and what I want to replace it with is that light blue color so if I go ahead and put that in there it'll replace every instance of that with our new color there so I hit batch because it's a bunch of them and then hit replace now hit save ctrl F and we'll go back to our site now if i refresh your site all our little grey areas like this that colors should have changed that kind of light blue color there we go to change it and that's permanent it'll stay like that now yeah let's change or everything with that color it's changed to the new light blue color flat it really you can dig in you can change colors on all kinds of stuff with CSS I would encourage you to experiment just make a copy of your downloaded site if you're not sure what you're doing I don't if you notice once I've made an edit on something like this this little dot appears up here if you see that little dot usually means you've made it edit and not save something so just hit ctrl s and that will save it because if you don't save it it won't change anything so that's a brief overview of how to edit the HTML and the CSS in a bootstrap site of course this will work for any HTML site same way and I hope this has been helpful to you once again this has been jamie from system 22 thank you for watching and have a great day bye bye now.

READ  Build & Scale Your IoT Project with Google Cloud Platform