Convert an HTML Template to Joomla 2.5/3.0 - Part Two

hey guys welcome to part 2 of the joomla 2.5 template series what we did in part 1 is just set up the content on the default joomla installation if you look at the design that we're going to be creating or the template were going to be creating we have a menu we have two right side modules we have a footer right and a footer left module and then we have a main image module and what we did was we went in created the modules we have the footer menu which we created a a we created a main menu and then just copied it you can see it has all the links we just copied it to a another menu called footer menu which we gotta get rid of all these twos but um if you just want to create these modules if you didn't see the first part of the series the login form doesn't really matter we don't have that on our new template nor the breadcrumbs so we have the main image and then we have the two footer I'm sorry the two right modules so if you want to just create those if you didn't see the first part I'll go back and watch the first part so now we're going to get into actually creating the template so what I'm gonna do is create a new folder on my desktop I'm gonna call it business design and this is going to be the folder that holds all a template files so the first thing I'll do is go to the static HTML template and I'm going to put this I'm gonna put the files for this in my description hopefully if I don't forget if I do forget just leave a comment no I'll do that so what I want to do is grab both the CSS and the images folder I'm gonna copy and put it into the Joomla template so the images we just have the logo the big image and then the background image and we have one CSS file so it's a very minimal template we don't wait we're gonna add an index.html but it's not going to be the one with all this content it's just pretty much gonna be a blank file just so people can't access the template directly through the browser so if we have an index.html file that it stops them from doing that the next thing we need is we need a in an index.php file which I'll get to in a second but I'll just create it now we also need every template needs a template details XML file so we want to create a new what is it template details dot XML and this will have all the author info on a metadata that goes with the template and I think that's I do want to create a favicon so we can do that with dynamic what does a dynamic drive has a really good tool to generate a favicon which is that the little icon in the browser so if we just want to choose the file I'm just going to choose the actual the logo and create the icon so we have this nice little logo that will show when I browser window so I want to download that I'm going to download it to the just the folder that the template folder where is it all right so now we have the favicon so that's that should be good for our files what we need to do now is add some content to this XML file all right so what I'm gonna do is actually drag in I'll paste in some content from a default file that I use when i create my templates so let me go grab that just don't you know sorry I forget where I put things sometimes and we want this open it with notepad plus plus and just copy this all right all right so we have the XML declaration doctype it's version 2.5 the joomla version it's going to be a template for the site client not the administrator and we can add a name here and change that just to business design and you can add your author info your name email URL copyright whatever and then here's the description that'll show after we install it I'll just say this is the business design template in here we have to list all folders and files that are going to be in our root directory our root template directory which is right here you should shorten this a little so we don't have an HTML folder an HTML folder would be used for overrides if you want to override your component on module layouts and we're not going to do that usually I'd have a blank HTML folder but if we do that we're gonna get an error on installation so I'm gonna get rid of that for now CSS folder images folder we don't have a JavaScript folder this template has no JavaScript so no need for it we have these template previews if you wanted to you could create a template preview dot PNG and a template thumbnail dot PNG and this just shows in the back in the template manager but we're not gonna use that for this template we're also not going to use error or component so that's good for that now we have to we have to declare all the module positions we're going to have so we're gonna have a right if we look at the template that we're creating we're gonna have a right a menu module I'll call this a showcase the big image and then footer right and footer left so let's do that say menu showcase and then for the right for the left so that should be good okay save that and I think that should do it yeah all right so that's it for the XML file now what we need to do is create the index.php file so this is the main the main page of the template this is where you define all the entire structure as well as the head and the body tags I'm gonna actually get the the original HTML file that came with the the static template you know what I'm gonna do is I'm gonna grab everything in this index.html file and I'm gonna copy it and I'm gonna paste it into the index.php file he and we're gonna work off of this and the first thing the head the whole head the doctype in the head is going to be all replaced so what I'm gonna do is actually get rid of that and I'm gonna paste in a couple things first I'm gonna paste in just the comment block PHP comment block that just has the name of the template and then your copyright info and then under that we need this line all templates should have this line in there index.php it just makes it so that the user can't access this your template through the browser they actually have to go to through the joomla site so it's this is a very important security measure alright so the next thing I'm going to add is the doctype and put it right below that and it's just given us the xml version 1.0 and the HTML doctype this template is actually going to be an xhtml 1.0 standard you might be doing HTML 5 that's fine too if you just want to have just the doctype and then you wouldn't have this pot for the XHTML and then we have the xmlns with the HTML tag so this is the the opening HTML tag and I'm sure you know at least some HTML basics we have the HTML tag than the head tag then the body tag so that's for the doctype now we want to add the head the head part of the template which opens with head and closes with head and what we have here is a J doc include statement and this is what outputs all our header information all our meta tags stuff like that it goes through Joomla and it gets outputted right here we do have to define our CSS files or any JavaScript files if we wanted to include those with our template so what we have here is just a simple link to style dot CSS fold file which has all our styling information and we do have some dynamic variables here you can see when we're pointing to the style sheet we use this this base URL if this is a variable that will point us to whatever the URL of the current site is so we don't have to hide code it or anything like that same thing with here we have this template this template just points to whatever the name of this template is and then points to the CSS folder and then to the stylesheet so that's all we need for the head if we go down here the body the styling all the divs everything is going to stay the same as far as the the layout and the the div tags what we need to change is the actual content we need to add in our module positions and we need to add our main call from for our component so what we're going to do we have the static navigation here we actually set up the menu structure in the Joomla back-end let's go back you know I'm gonna log back in here so we have our menus we have a main menu and a footer menu which have links and every menu is a module so if we go to module manager we have the main menu here and it's in well it's in the position seven here but this is these positions are for the the default template and we want to actually change these positions our main menu the position we're going to give it is just menu so I'm gonna get rid of that if you remember in the XML file the template details dot XML that's where we defined all these positions so let's save that let's actually check and see if these are all in the right position footer menu will be on the footer left footer right right right alright so everything's good login form we're not using so it doesn't really matter so now we know that our main menu is in the menu position so let's go back to our template and actually just get rid of this unordered list and I'm gonna type in a J doc it's gonna be J doc include and this is how we insert our dynamic code we can insert module positions component as well as messages and you saw here we did the head so J dot conclude it just outputs certain aspects of the template that we need so here we want to do JJ include and they all have a type and the type we want here is modules all right so the next attribute we need is a name and the name is just a position so like I said our main menu is in the menu position and then the last attribute we have is style which we're going to have as none now if you want to have a heading showing in your module than you would you could use the style XHTML right here and it would output that the actual heading if you use none it's just going to print out the module content not the headings so now if we save that I'm actually going to build out the whole template before we install it so let's just get through this real quick here we have the the main div with the main content and this is all we pasted this all in one Joomla article if we go to article manager we have the home page and if I if we view the source you can see we have the h1 tag and we have up until the enjoy the design so that's what we have right here and that's what we want to get rid of and the main component will also be output output and using J doc I'm sorry I can't type today I know what's going on here alright so include and we're gonna have the type except this time it's going to be component and you'll only have one of these per template alright so that looks good so next we have the the right module position which here is going to be the the news section and we're not going to have let's copy this here this this module call and place it in the the news div except this is going to be right that's going to be the position and we want you know it will actually keep the none I'm gonna actually include the heading in the module content so we can leave this to none now we're not going to have two of these we do have two right modules but we're not going to have two of these we only need to declare this once and every module that's assigned to the right position we'll just come one after another you don't have to have two of these because we're going to have to write modules if that makes any sense and if we go back to module manager we have module manager we have our to right position we have the copyright and then we have the other info so if we go back to our design you can see those right here now there is a one tricky part of this this template is that each block each each block on the right is assigned a class called news item now if we just stick div class new news item over this one position it's just going to have that main div and then all the right modules will be in between it but we need this for each call each module so what we need to do is give it a module class suffix so we'll go to the copyright module and what I want to do is click on advanced and then add a suffix here so I'm actually just gonna take that what I'm gonna take this news item class and I'm gonna put in it's going to be an underscore and then the news item and I'll show you why I did the underscore on it in a few minutes so let's save that and we also want to do it to the the other right module whenever we want to apply that design that yellow boxing we have to add this class suffix all right so now we can get rid of this now what else do we have we have the footer left and the footer right if we go to our module manager the footer menu is in the footer left position so let's copy this modules output and we're going to replace the entire unordered list and this is going to be footer right and now we want to let's check out the credit module which is the footer right and we have the entire span so that's what we're going to replace and this is going to be footer left yeah for the left so that's it we've taken the static HTML layout and applied all the dynamic elements to it to make it a functional Joomla template and you can see it's actually shrunk a lot in size because we instead of having the static content we just have these one line one line calls to different dynamic aspects of the of the website so I'm gonna save that now it seems like I think we have everything done we need have our CSS images let's just check the XML file and make sure we have everything favicon XML PHP alright so that looks good we have our positions here oh the showcase that's what we forgot to do now in this particular template the let me just go back and show you here this image here isn't an inline image it's actually a background image and it's the background image it's using the header div so what we did in the first part of it we actually created a module we can go back here and where is it main image this main image module we just put the div in here and the image will actually replace the div I will not replace it but it's the background image assigned to this div so I'm actually going to copy this module statement and to replace the the div here and this is going to be the header position so if we go here you can see we chose the header position all right so now it looks complete so what we want to do is actually grab all this and wrap it up in a zip file I use WinRAR but you can use whatever you feel like so now we have our zip file now this should just be able to simply install using the extension manager so we just want to navigate to that zip file and upload so it was installed successfully now what we want to do is go to template manager and we want to select the business design I don't know why all these I here like this ah let's see you know what I did install it before and I guess for some reason it didn't uninstall let's actually go let's uninstall these first because I'm not sure which one is the right one so I'm gonna go to manage extension manager managed and select type template and I'm going to uninstall both of these business design and then go back to extension manager and I'm gonna upload it again and you most likely won't have to do this unless you installed it before so that looks good so now go to template manager and I'm going to select business design and I'm gonna select make default so now if we go back and reload our front-end you can see we have some styling issues but overall that the layouts they are the contents they're what we need to do is take care of these right modules and make them look like this and now I'll show you why I added that underscore I'm going to use the Google web tools to view the source of these modules and you can see the div applied to each one is custom underscore a news item now this what's what Joomla is doing is adding this custom before whatever we had for the for the the class suffixes so our actual div is called custom underscore news item so what we need to do is just edit the these CSS file and changed news item it's a custom underscore news item and then the styling should show up so what I'm gonna do is I'm not going to edit and reinstall the template I'm gonna edit the actual template that's being used so I'm going to my Joomla installation I'm going to templates business design and I'm gonna go to the CSS file and obviously if you're using a live site you want to do this through FTP or SSH or whatever it is you you access your site files with so where it says news item I'm just gonna have custom underscore right there and right here so now that styling should show up so if I save that close that out and if we go back to the site and reload now we have our styled styled right modules and the only other difference I see is the menu in the in the original template as all caps I don't like to hard-code capitalized letters in templates so what I want to do is just add a CSS property that will up or that will turn the that will make them all uppercase so I'm gonna go back into that custom CSS I mean I'm sorry style.css and I'm going to in the navigation we're going to add a text transform property and we want to do uppercase save that go back reload and now it's all uppercase so well one thing I do see down here is we have all these twos and this is also the design by site creative the footer right module is a little off let's go to the footer menu and actually delete a few of these links reload all right so something is putting that off I'm gonna go check the I'm going to get out of all this and I'm going to go to the actual template that's on my site business design index.php so we have foot or left for the right we go back to the module manager and for the right much sure why that's off Oh okay Joomla actually adds a class menu to each menu and it's going all the way over as you can see as I highlight over it you can see that it's going all the way over what we want to do here I'm just going to shorten that up a little so what I'm going to do is go back to the CSS file and I'm going to add in the UL menu UL with a class of menu and I'm going to say with 60% and we'll float that I'm going to pull up the menu to the left alright so I'm going to save that I'm actually going to go back to index dot PHP and since we're going to be floating the the left the footer left position I'm actually going to add an eclair just a div style clear:both just so that div X so that float clears so save and go back and reload now the the right the footer right is now in place so everything looks good oh well you see what happened the actual main menu also went to 60% so when something like that happens you can add a menu class so if I go back to footer my footer menu in the Advanced Options I'm going to add a menu class of a footer menu so now if we go back and reload and open up the web tools you can see now we have a UL class well menu footer menu footer menu so I'm actually gonna change that I'm just gonna change it to underscore footer so now if we go and check that out again so now it's the UL class menu footer so now we just need to go to the CSS and change this to menu footer if we save that and reload now on menu top menus back and we still have the the right foot are in place all right so we're just about done let's see let's visit the about Us page yep so you can see the image is now gone off the inner pages so the home page is the only page that has the the main image because if you remember in the first part of this when we created the main main image module we made sure that we only clicked home so if you wanted it on the about page you could just select the about Us and then go back and reload and the image will be there so you can choose what what pages you want which modules so I think that's it it looks pretty much identical aside from the twos in the footer menu but it's no big deal just go in the menu manager and delete them so that's it for making a joomla 2.5 template if you guys could subscribe I'd really appreciate that and I'll see you in the next tutorial

Channel: Traversy Media

Views: 33,427

Rating: 4.9298244 out of 5

Keywords: build a joomla 2.5 template, code joomla template, create joomla template, build joomla theme

Id: h7OGqlAm__k

Length: 30min 5sec (1805 seconds)

Published: Thu Jun 13 2013