Build a Joomla 2.5/3.0 Template

Sobre este curso

hi guys today we are going to create a Joomla template a joomla 2.5 template which will also work for a joomla 3.0 and we're going to take a standard HTML

CSS template and convert it into a joomla template this is the template that we're going to convert this is straight HTML CSS it's called business design and I didn't create this template

this is created by site creative as you can see in the footer but we will be taking this and converting it into a Joomla template and I chose this design just because it's very simple I will

have a logo a navbar module and a static image module as well as some side and footer modules in this particular template doesn't have any inner pages but what I want to do is just the inner

pages will be the same except they won't have this image okay so let's get into it first thing I want to do is go to my Joomla site and it's just a brand new Joomla installation without without the

sample content so this is a straight I just installed it there's no no content nothing's been added to it so you can follow along if you want to install Joomla I do have

some videos that will show you how to install Joomla with zamp which is a that's what I'm using it's a local Apache server and it has MySQL PHP 5/3 and um Apache so the first thing I

want to do is add some content I want to be able to just program the template and have the content already be there so we'll create the menu with the menu items as well as the content the main

content on the home page and the each module so let's login to the admin area try to keep this this whole video within three parts I don't really want to have a million parts so I'll try to do it

quick all right so what I'm going to do is I'm first going to create the home page content and that's going to be an article so what we can do is go to our

template the HTML template and open up the index file and what we want is the the let's go back to Chrome what we want is this this entire thing here so from business design to enjoy the design so

let's grab this I'm just going to copy it for now I'm not going to cut it out and I'm going to put that in the home page I really don't like JC I mean I don't like tiny MCE the editor I prefer

JC e so I'm going to actually install that alright so we have the home page and we'll keep we don't need categories and featured yes so save that now I'm going to go ahead and install

GCE you can just Google jce and you should be able to find it I believe there's a free version I'll see I'm just going to right here

this might not be the latest version but that's alright I just really don't like the default editor because it's just it rearranges HTML and I just it just does stuff that

just can cause problems so after I install it I go to global configuration and change the edit default editor to jce all right so now if we look I'm not

going to I'm not going to create all these pages I'm just going to create I'll probably create the about page and then the rest will just be just a dead length that'll go nowhere because you

guys know how to create pages so I'll create that one about page so this will be about us and for content let's just grab some dummy content lorem ipsum blip some calm

come on okay I'm going to generate some content while the site's slow all right so I'm just going to grab some of this

copy that and I'm going to paste it into the HTML I'm going to add just the paragraph tags because if you don't do it through the HTML then it's going to copy the format of the text which I

don't want alright save that let's go ahead and create those menu items so I'll go to menus so our main menu and we get the home let's go let's see what we got

click view site so we have the home page content by default joomla includes all this stuff and i don't want that so we'll go to go to article manager and options and i'm going to let's see

I don't want to show the author I don't want to show that show the dates or the navigation no read more I don't want to show icons so I'm going to click hide for all these

and then in category I don't think I just hide whatever is there same thing with categories all right stay even close so now if we go back to the front end

we still get this category showing let's see hi-oh show category hide link category no show title yeah all right see if that got rid of that stuff

in this um this home and home page I don't want that so I'm going to go to the homepage in the article manager and I want to hide I want to hide the heading so I'm going to

click on article options and hide for the show title and then go back to the main menu and click on home because right now if we reload we still have that home and home page go

to page display options show page heading no article options show title hide and that should clear this up yeah there we go alright so and we can also change the title you can see up here it

just says home let's change that by going to page display options and here we want to put we'll just put business design alright now we'll create the rest of the

menu items so click new and that we do have an about us articles so I'm going to click on single article and I'm going to call is it about us or about about us okay save and new and next we have

technology solutions we got to select the article for about us first oh good you know so now we're just going to create a blank link so we want to select external

URL and that's going to just be a palm symbol all right so save and new next we have portfolio same thing it's going to be just a blank link

next we have strategic partners okay so then we have contact and then jobs maybe I'll make another tutorial after this where we'll actually create these

pages but for this particular tutorial I just want to show you how to make the template and how to set it up contact and then we'll do jobs all right so we should have our menu and

in the default joomla template the menus on the side so if we reload we should see all those links you should be able to go to the about Us page yep alright so what we have next we have the

menu of the console it's grab this image it must be set as a background image I don't like that let's just go see how it looks in index.html so the header in this tech particular

template it's just a div and the div contains the image so what I'm going to do is just copy this div and I'm going to put that in a module position so if we go to module manager um new custom

HTML this is going to be the main image and it's going to be in the guest header well yeah we'll put it in the header we're going to have to program this

position when we make the template if we toggle the editor we can just add in the HTML and we want this to only display on the home page so I'm going to click only on the page select it and click home ok

so that's that let's get out of here next I want to do the side modules which will be the right position so we have a copyright and then an other info box so let's select new custom HTML

and this is going to be what is this copyright and will choose to show the title we'll just have to maybe add some CSS to get it to display right position I'm going

to program this is going to be the right position and let's just grab that text sometimes I don't even use the editor at all I just use a straight HTML so let's save that and create another module on

the right grab that so this is other info and that's going to be on the right I'll paste that text in with some paragraph tags

and I'm going to just leave these at all pages and we have show on all pages okay so next we have the footer menu will say footer menu and footer right for the footer menu I'm just going to

I'm going to create another menu called footer menu and I'm just going to copy all the items from the other menu so I'll go to main menu select all these and then let's see

we want to we want to copy to the footer menu okay so now we have if we select footer menu it should be the same so it has that two next so I probably to delete

those so let's go back to module manager create a new module which will be a menu and we want to make sure a footer menu selected can you name it we don't want to show the title position will be will

say footer for the left and that's on all pages so save that and create a new module and this will be the footer right position we don't want the heading to show and this will just be we'll call it

credit because what it is it's just the back link to the template creator and let me grab that so span ID copyright alright so I'll grab that whole span tag

I'm sorry we chose menu we don't want menu we want custom HTML for this module so new custom HTML put that span tag in and this will be credit what I write hide the title

and make sure it's on all pages yeah all right so let's save that all right so now we have all our modules set up I'm actually going to stop this video and continue on another one

because we're over 15 minutes now so I will see you in the next one