Create a Joomla Bootstrap Template From Scratch

in this video what we're going to be doing is taking a bootstrap template actually we're going to be taking one of the example templates from the get bootstrap website and we're going to convert it into a Joomla template and there's a few things we're going to do we're going to we're going to use a couple modules from this bootstrap Joomla comm this is my site and it's just basically I take some of the bootstrap components and puts them into a Joomla module so you can easily customize it and so forth so we have a couple modules the first one is the navbar module you can basically install this and you can choose things like the the coloring you can make it darker light you can make it fix to the top or the bottom you can float it there's a couple different customization options and it also offers drop-down functionality then we have the jumbotron module which is basically just like a showcase area you can add your headings you can change the colors of the text you can add a background and a foreground image things like that and then we have the carousel module which is a JavaScript bootstrap carousel or slider right now you can have up to three slides but I will be making it so you can add more than that and then we have the block module which is basically just a like a bootstrap block we can actually have the the glyphicon the icons that come with bootstrap things like that we can change the text colouring okay so those are the four modules that I have so far so the template we're going to be using if you go to get bootstrap comm and go to getting started and over here on the right you want to click on examples and the one we're going to be building is the Jumbotron template so if we click on that very basic the reason I'm doing I chose one of these example templates is because of how simple it is my goal isn't to teach you how to design a great bootstrap template it's to show you how you can how you can integrate a bootstrap template and these modules so basically we'll have the navbar module the Jumbotron module will be the main showcase and then we have these bootstrap block modules we're not going to use the carousel because we're using the the Jumbotron which is basically a static showcase area all right so let's go ahead and create a folder and I'm going to call this just TPL underscore Jumbotron and now we need our basic bootstrap files so let's get that if we go to go back to the homepage and click download bootstrap and we want to click this one and you should get a folder like this the distribution folder and basically going to empty I'm going to take all of these and put them into our folder all right so that is the we get the CSS we don't need all this okay we just want the bootstrap dot CSS so I'm going to delete all these and fonts we're going to keep because these give us our glyphicon that we can use in the block module JavaScript I'm going to get rid of this minified one all right so now we need an index file so create an index dot HTML so what I'm going to do right now is just get the static site finished and then we can just convert it to a jeweler template all right so that's all we need for our static site or our template so I'm going to open this up and what we want to do is go back to that example and I'm going to do ctrl you to see the source and I'm just going to copy that paste that in the HTML file and let me see we need this Jumbotron CSS file as well so let's go let's go Bend view the source again and click on this Jumbotron CSS link which is basically just some padding but and I'm not going to actually call it Jumbotron CSS I'm going to create a custom CSS file and this is where all all our custom CSS will go because we're not going to touch this bootstrap CSS file just paste that in there save that all right so our index.html we need to do a few things you can see here I'm going to get rid of this description author and shortcut we'll do that within Joomla title we will get rid of the title when we convert it we'll just keep it for now and this here this link to the bootstrap minified we want to change this we want this just to go to CSS slash bootstrap CSS and our custom this will be our custom which is in CSS instead of Jumbotron we're just going to say custom CSS okay you can get rid of this stuff for the JavaScript they put it at the bottom but I actually like to put them up top okay so I'm going to grab the bootstrap CSS file I'm sorry link and good to get rid of this SG jQuery CDN because we're going to download it locally okay so up here we'll put in our JavaScript again we need to get rid of this path and it should just be bootstrap J s and we'll put a comment in there as well now we want to include jQuery as well so I'm going to go ahead and go to jquery.com and click the download' jQuery button and I'm going to get the just get the compressed 1.11 obviously this may be different depending on when you're watching it Kabul we're going to select all this copy it and go back to our JavaScript folder create a new file called jQuery j/s all right so open that paste that in save and close okay now we just need to include it here we're going to include it above the bootstrap JS file all right so that takes care of the head while these for the static site and we should be good let's go ahead and save this and take a look okay I'm going to open our index file and there's our static template alright so that looks good now what we need to do is convert this to a Joomla template okay so let's see what we're going to do is rename this index.html we're going to name it index.php and we're going to keep the CSS and fonts and JavaScript folder we need to create a couple more folders okay we're going to create a folder called HTML and this is going to be an override folder so let's say we install a certain module let's say we install the jumbotron module and we want to change some maybe we want to add another paragraph or some line breaks or something to the to the output so in our HTML folder we could create another folder called whatever the module name is and then put a file in there a view file and that's what will be used to to output that module on our site all right so that's what HTML the HTML folder is for alright so we're also going to create in an images folder and I think yeah I think that's it we're not going to use language strings to make this a multi-language template that I think that goes a little beyond the scope so we're not going to do that maybe I'll make another video doing that but I just want to just keep everything basic for now so we get our index file the most important file to have is the de manifest okay for our template which is going to be called template details dot XML and this is where we'll put all of our meta info this is where we define our module positions and things like that so let's open that up now I'm just going to paste some stuff in here I'm going to paste all the metadata alright so I'll start from the top first we just have our XML declaration we use an XML 1.0 we have our doctype and then we're going to open up a tag an extension tag and that's going to take a few attributes okay the first is the version now this template I want to work on joomla 2.5 as well as joomla 3 so you want to put the earliest version which is going to be 2.5 the type is a template method we're going to say upgrade because we want to be able to when this template updates when we update it I want to just be able to install it over the the current template so that's why we're using upgrade here instead of install the client is going to be the site it's not going to be an administrative template it's a front-end template and then we just have the name creation date author author email URL copyright license version I'm just going to put 1.0 in a description all right so that's them that's the basic metadata that we need so down here what we want to do is we need to define all of our core files all right files and folders and what I mean by core is everything that's directly in the template folder we don't have to name these files in these subfolders just what's here okay and I think we have everything yeah that's actually I'm going to bring over this favicon just going to use the bootstrap icon as a favicon alright so what we want to do is open up a files tag and close it and then in between here let's do our folders first so we need a folders tag okay I'll just copy this and what do we have five all right so we have our CSS folder we have fonts HTML images and JavaScript okay so now we'll do our files file name give me three of those I actually you know what one thing I did forget is in every directory in Joomla you should have an index dot HTML file and it can be blank it can have anything but the read the reason we do this is so that people can't browse your directories from in a browser okay so it stops them from doing that so let's create index dot HTML and common a common practice with this is just to have the dot you put a doctype and then just some title tags okay so save that and then we want to copy this and paste it into all these directories well and you'll find if you browse any Joomla core modules or folders you'll see this index file in all of them alright so we do need to include that in our manifest as well okay so we got index dot PHP index dot HTML favicon dot ICO and we need our details all right so that looks good so the next thing we need to do is define our module positions and we're not going to have that many I don't think all right so to figure this out let's look at our template okay so we know we'll need a menu module for our navbar and by the way I don't think I'm going to keep this form here uh in the Joomla template so we'll just have the title and links I will need a Jumbotron module position which I usually call showcase and we get some blocks okay so I'll call these box one box two box three and that's it really this footer I'm going to we're going to use a template parameter where we can enter our copyright text from the back end so that's not going to be a module all right so we have menu we have showcase and our box modules and you can call these anything you want a lot of templates we'll call it call these user 1 user 2 but I never really liked doing that I think blocks are blocked it makes more sense all right so that's our positions alright so next we want our parameters and we're not going to have too many pretty much just the copyright I think all right I apologize for my voice and kind of lose my voice so some a little hard to understand I apologize alright so we're going to have some con fig tags and then inside that we want fields and actually this needs to have a name attribute and it's going to be named params okay and then inside here we'll create a field set and that's going to have a name call it general and this is also going to have a label say general and finally we want a field tag so field and then the name actually know what we're going to have a couple parameters because I want I want the user to be able to change this okay the brand name and we'll create a parameter for that okay so we'll do that first we'll say logo logo text okay so let's let's see that's the name then we have to do a type and the type is going to be text and then we need a label say logo text you could also make an image parameter or a media parameter where they could upload their image but I'm not going to I'm not going to do that because this is going to take long enough as it is description and I think that's it yeah that's it so we can close this with a forward slash and then a greater than so that's one field let's copy this and we'll change this name to copyright call it copyright text and change the label all right so that's our two parameters I think that's all we need yeah the last thing we need to do is just close out our extension tag so you can see that all this information goes inside of the extension tag all right and that's it that completes our details manifest now the last thing really to do here is to convert the index dot PHP file because right now we have all static content all right what we want to do is add our module positions and our component dynamic code and stuff like that but before we do that I want to install this onto our site and then work work on it from there so that we can see our changes all right so what we're going to do is we're going to package this okay and the way that we package it is just to put it all in a zip file and the template details is very important you want to make sure that all the folders and files are listed in there or it won't install correctly all right so let's go ahead and just going to use WinRAR to zip this and you're going to do is zip all right so now we should be able to install this now what I have here is just a brand new Joomla 3.2 installation I haven't created any content or I haven't done anything so it's brand new all right so let's sum and this is actually going to be my demo site for bootstrap Joomla alright so we're going to we're going to install this right on this live site so let me login here all right so here's our back end the first thing I do it's uh all right so here's the front end the first thing I do when I install Joomla is get rid of this title I don't want this home here alright so we can do that by just going to the menu item the home page menu item and on their page display we just want to set this to no and I'm just going to give the page title I'll say bootstrap Joomla demo alright so get rid of that home and we have a title now what I'm going to do is I'm going to enable what I'm going to enable i template well we have to install it and then we'll enable it and we'll change all the static text to dynamic content so let's go to template manager and I'm sorry extension manager and we want to choose the zip file we created where is it okay all right so we have an issue here um demo templates CSS um let's go back to our xml file CSS oh we made a mistake this should be folder not folders all right so sorry about that we're going to save that and I'm just going to open up the zip file and just throw that in there all right so now we'll go and try that again all right so now it's installed so let's go extensions template manager and you can see our jumbotron 2 template right here let's enable that I'm sorry set it as default right now if we reload all right so this looks a little messed up because it's not it's not including ours our temp our Joomla template CSS alright so let's go ahead and go back to notepad now what I'm going to do is I have my notepad plus plus FTP client set up so that I can directly edit files on on this domain alright so I'm going to do that all right so what I'm going to do is go to my templates directory and bootstrap Joomla okay and let's see I called that bootstrap Joomla you just check this um not sure why it's called bootstrap Jim aware that came from huh oh I'm sorry I mean no I'm in the wrong directory I'm not in my demo site alright so I want to go to demo all right so now templates jumbotron alright so this is our template this these files here so let's open up index.php alright so we need to do a couple things here well actually we need to do quite quite a bit here we want to get rid of this title tag because Joomla will create the titles for us but norther for Joomla to do that we need to add a little snippet here and we do that with the with a J doc statement okay so once a J doc include and then type the type is going to be head alright so let's see now the reason that the the CSS isn't working for us is that the way we have it in the CSS folder it's looking for this folder inside of the root alright and it's not in the root it's inside of our template directory so we need to add a couple things here alright the first thing we want to do is that go out our base URL and Joomla gives you a handy function to do that so say PHP echo this base URL all right close up that so this basically is going to echo out this okay our base URL now from there we want to go into our templates directory so slash templates slash and then what we want to do is we want to include the name of the template and Joomla we can do that with saying this template alright so that's going to give us the template name and then we want to go to the CSS so slash CSS and then the file alright so let's just copy this we'll go up to the slash and copy and then here we'll do the same thing what not sure what happened there okay copy all right so that looks good same thing here with the JavaScript files all right so let's save that now it should read our CSS in JavaScript alright so simple as that right now this looks good but it's all static content we don't want that so what we're going to do here is we'll do the navbar first so we're going to need to install our navbar module alright first what I'm going to do is we need to get rid of this okay so actually I'm going to cut it and I'm going to put it in another file just in case we need to look at it so in place of that we need to pet we need to add our menu module position right so it's a menu and the way we do this is with j-dog statements so we're going to say J dot include type is going to be modules okay name is going to be whatever the position name which is going to be menu and then style and in style we're going to put none you could put XHTML and what that will do it is it allows your module to have a title an h3 title by default but we don't want our menu to have a title so it's just going to be none you can also create custom styles there actually it's I've actually called chrome module chrome but I'm not going to get into that in this video all right so if I save that and if we reload this it's going to just disappear all right because we don't have a module in that position so we want our mark our bootstrap module there so we need to install that first so I'm going to go to extension manager choose file and all these modules I'm installing you can get at bootstrap Joomla comm all right so let me just find where I have them all right so I'm going to install the bootstrap nav I'm just going to install them all right right now the bootstrap I'm sorry the mod Jumbotron and the bootstrap block all right so now let's go to module manager and the bootstrap nav and click on that and we want this assign to all pages all right now here we want to want to choose the menu which is going to be the main menu navigation type you want to make sure is now far you can also have the list group which is a vertical menu color is going to be docked and fixed see is it fixed here well we can't tell I think it is so we're just going to say fixed top float we're just going to leave branding type all right so this is going to be text you can also use a logo if you want and we can choose our brand text here instead of the template parameters so we'll do that we'll call this just calling Jumbotron template all right so we want to publish this select the position which is going to be menu and now let's click Save and close and with some templates you may want it like I said create an override if you want to change the way it's displayed let's just see what we got here alright so there's our navbar these easy as that now when we create menus in the backend they'll show here all right so let's actually do that let's create an article and let's just say about and for a text let's just get some sample texts from alarm if some generate some dummy text okay I'm going to copy that and go ahead and paste this inside of the source code as I want paragraphs all right so we'll save that and of course we need to create a menu item for it and we're going to select articles single article choose the about article all right so now if we go to our front-end and reload we have our boat page now if we click on it it's going to take us to the page but this is still static content so the page the pages text isn't going to show yet all right so our menu is now all set okay so the next thing we want to do is the Jumbotron all right so for that's from here to here so again I'm going to cut that out and just paste it in here and basically we're going to use the J doc again and we'll call this showcase module okay so we want to change the name to showcase style we'll keep at none now the Showcase is just going to be on the homepage so we need to create an if statement saying that we only want to show this if it's enabled if the showcase module is enabled on that page all right so we can say PHP if and we want to save this count modules alright so we'll say if this count modules and then inside there as a parameter we want to put the position name in our case of showcase all right and this is the this is PHP shorthand if so we're not using a curly brace we're using this colon and then when we want it to close will say PHP and DEF okay alright so basically like I said it's just saying if the showcase isn't enabled on that page I'm sorry if it is enabled then show it so let's save that and if we reload the Jumbo trying to disappear okay now we're going to go to module manager and click on the jumbotron module ok menu assignment we're going to say only on page is selected and then we'll unselect all the pages and just select home all right it's going to be published the position should be showcase ok now the text let's go to go to our little snippet here and the text will say hello world for the heading I'm just going to copy the paragraph paste that in here all right so set our text I don't think we wanted to center it no you can change the color if you'd like show button we're going to say yes button text is going to be learn more and the button link I'm just going to leave as a dummy link for now and then the button class ah if you have used bootstrap before then you probably know that the buttons have certain classes for certain colors for instance the button primary is blue all right we can also say we want it large I'm going to take out this button color we don't need that all right so that's good the background color is set to light gray that's good you can use a background image I'm not going to but you can and you can also use a foreground image all right you can change this the width of that but this looks good for now so I'll tie the title save that and see how it looks all right so there it is this is our module now all right and if we go to about it should not be there all right so next we're going to use the bootstrap block module which will be each of these okay so let's get out of here all right so let's go code that in the template first all right so we have our static blocks here now these are all going to be in the same module position actually no not sorry they're not all right so let's uh right under the container div I'm just going to copy the showcase snip it and we'll say box one box one all right so we need three of these and I'm actually going to cut this static content place it in here all right so now we'll copy this box twice this will be box two this will be three all right save that and now we need to create them let's make sure that the static content is gone all right actually there's one thing we need to change we're going to change this from none to XHTML because we want it to have a title actually you know what no we don't because the title can be included in the module parameters so bootstrap block all right so we'll just leave the default heading and paragraph default colors now this glyphicon class if you want to use an icon next to the title you can go to get bootstrap and if we go to CSS I'm sorry components you have all these choices of glyphic odds or icons that you can use so all you need to do is copy the class name and paste that in and you'll have an icon and by default there is one here it's the th I'm not exactly sure which one that is ah see th I don't know I can't find it right now but we actually don't want to use the glyphicon so we're just going to take that out show read more let's take a look yep and we'll call it view details and for the button we want the button to be white so for that we need to change this class from primary to default okay and that should do it yeah so let's save this and see what we're looking at all we need to choose the pages so we want this only on pages selected and we're just going to choose the home the home page all right so the reason it's so long here is because we don't have blocks to in box three so let's do that now all we want to do here is we can actually just check bootstrap block and then click duplicate I don't know whatever this is here but it's not something that has to do with the module so let's uh we want to duplicate it one more time all right so let's click on this one we'll just call this a walk - and then what we want to do is we want it published we want to select position we want to select box - and everything else is good get rid of the cliff akan class okay save and close and then finally we want the the other duplicated module we'll call this block three published and box three position all right so let's reload this huh oh these are set to no pages all right uh-uh um all you know what we made a mistake we need to actually we needed to keep some of the bootstrap markup here um for the columns that we didn't so we're going to do is just copy this I'm going to cut it and then I'm going to go back with ctrl z go back to static all right so what we want to do is we want to include these inside of these columns all right so for here for example so we get rid of that and then here we just want the box one all right and then here you want box too sorry about that hope that didn't confuse you and here we want box three all right so we're doing this because we need these column classes in order for them to to float side by side all right so let's save that oh okay we have the boot the blocks but we included another Jumbotron in there it looks like yeah okay this showcase get rid of that all right so everything here is dynamic except for the copyright now what we want to do is we want to include our parameter here so the way that we grab our parameters is pH P and we're going to echo out this params get and then the name of the parameter in this case I believe is copyright all right so save that and what we need to do is um we want to go to our template manager and click on the jumbotron template and then general and here's our our two parameters the logo text we actually took care of from within the bootstrap nav module so we don't need that copyright and say copyrights strap Joomla 2014 alright so save that and then that should show down in the bottom here um which it didn't oh oh yeah I named it copyright text so we just want to change this copyright text and then save it again all right so there's our copyright so this is all well and good but the one thing we don't have that we need to add is the main component snippet basically our articles because if we click on about we don't have anything here so that's really easy to do we want to go you want to figure out where you want to put your main content in your template we're going to put it under the box under the boxes all right so like right here so this again will be using J doc include and type is going to be component and above that we want to put arm where we want our messages for instance if you get a failed login you need an area for you for the sorry your credentials didn't match message or something like that and what we want to do is just change this to message all right so let's save that mm-hmm go back here and reload and now we have our content our about page all right we don't have anything set for the home page but by default the home page if you feature an article inside of article manager it'll show up here but in our case we don't want an article on our home page it's just made up of strictly modules so if you did want articles on your home page let me just show you you go to on article manager and if we set this about page to featured and then we go to the home page it now shows down here alright so that's how you can show a component on your home page so I think that's it we integrated a template we integrated the navbar the the jumbotron and the bootstrap blocks so I hope that you could follow this and hopefully this will help you if you're using if you're using bootstrap with Joomla

Channel: Traversy Media

Views: 109,126

Rating: 4.8837209 out of 5

Keywords: joomla bootstrap, bootstrap joomla, joomla bootstrap module, bootstrap theme joomla, bootstrap joomla template

Id: 6O0XDelA2DE

Length: 49min 13sec (2953 seconds)

Published: Sun Mar 30 2014