Joomla Template Stylen
Joomla Template Stylen Video Transcriptie
The look and feel of your web site is determined by the template that's being used. Joomla ships with two templates by default each of which you can customise to adjust the colour and the fonts and to add a web site logo.
To do this, from the administrator select Extensions and Template Manager. Here you can see the Styles menu. You can see we have 4 templates here 2 of them are for the site and 2 of them are for the administrator the back-end that we're looking at now. These styles are a saved set of configurations for the template itself. It's the styles that allow you to customise the template. The default template that is being used on the site is called Protostar. So let's go ahead and customise it by selecting Protostar here. To make the changes we want go to the Options tab. Here we can see various different options. Lets have a look at the template colour. If we go to our site we can see that several parts of the site are highlighted in a blue colour. This is what we can adjust from that option. Return to the administrator and click in here in Template Colour. You will see when you do that that a popup colour selector appears. Where we can just modify the colour by dragging in here and the colour that will be chosen is there and we can move between the different colour bands by selecting there. I am going to choose an orange colour and when you've decided on the colour you want you can click Select. You can see that the colour code has now been input. If you know the colour code you want to use you can also type it in directly. So let's Save and have a look at the changes that have been made on our web site. If we refresh the site we can see that all those blues have now become oranges. The orange here and here and these login boxes and these titles. If you are happy with we can now move on to make further modifications.
The next one we can deal with is the Background Colour this grey here. Go back to the administrator back to the Options we have the option for the Background Colour Again you can either type in the colour code or click in the box to select. I am going to choose that. Select and Save click on Home and Refresh The background colour has now become a kind of a peach. It matches the more vivid orange colour. Now we are going to have a look at the logo of the site. Currently we can see the word Teemans TeaShop here. this is the Site Name that we set up when we installed Joomla. I've actually prepared a logo that I would rather use. Return to Options and here in the Logo field click on Select. I haven;t uploaded it yet so I need to scroll down Choose the File and Upload. Once the upload is complete select the image and click Insert. If I click Save and refresh we can see I'm now using my shops logo. If you don't want to use a logo you can also customise the text instead First remove the logo and then type in the full name and possibly a second line of a description. Save that and refresh we've got a bigger logo with a smaller sub line underneath. Personally I prefer the logo so I am going to go back and put that back in. Select click on the logo Insert delete that and that and Save and its now gone.
The next thing we can change is the actual font used for all the headlines. That's the word Home here the Welcome to the Tea Shop and Our Philosophy and also Main Menu etc. If I go back you can see here it is asking if I want to use the Google Fonts for these Headings. I do because Google Fonts will give me a much wider variety of fonts to choose from. By default its using one called Open plus Sans but I want to see what else is available.
To do that we need to go to the Google Fonts web site which is http://google.com/fonts Don't chose a font that is too fancy because it really won't look right on a web site. What we can do is we can edit the preview text to exactly what we want and then we can scroll down until we find one we like. I am going to try this one so select the name copy it and go back into my Options and paste it in and Save. Return to my web site and refresh the page and I'm much happier with that. That's much more my style. We can see that the font is being used for all the headlines, for the module boxes etc. Once you're happy with all the changes that you've made simply go back to the template style and click Save & Close.
Because these edits are done just in the template style they don;t affect your actual content so you go back at any time and change the settings in that template style and they will be automatically reflected across your entire web site. Without you having to re-edit any of your existing content.