Join Jen Kramer for an in-depth discussion in this video Modifying the default template style, part of Joomla! 3.3 Essentials: Modules, Components, Extensions, and Templates.
- View Offline
- So the next thing I'd like to take a look at is the difference between template styles and template masters. So first of all, let's look at template styles. And if we go to Extensions, Template Manager, what we're looking at here by default are the template styles, and you'll see over here that we have Styles, and we have something called Templates. Templates is the template masters, and I will be covering those in another video or two. But for right now, I'm going to work with this template style.
In several videos ago, we clicked on the eyeball here next to protostar, and this brought up a map of all of the module positions that come with our Joomla template. I made it very clear that you should not click on the words protostar default. This time, we're going to click on the words, protostar default, and this is going to take us into a configuration screen, into the protostar template style. And as you'll see here, this is where we can configure some attributes of this particular template.
Now, under this Advanced tab, this is where we can configure things like a color, an overall color for this, we can upload a logo, change a Google font, and some other various things we're going to do here. This set of parameters, is unique to the protostar template. When Joomla templates are coded, you do not have to include any kind of handles like this for changing aspects of the template. You could just code the template. And there are other templates like the rocket theme series of templates that have quite an extensive variety of controls for changing the way that the template looks.
So every template is going to be unique in terms of what is able to be changed in regards to that template. So here is the first thing I'd like to do, let's go ahead and upload a logo for the Landon website here. And if we click on the Select button, we can upload a file we're going to need to choose files. And if you go to your exercise files folder to chapter four, to video number two, there's a logo for the hotel right here. We can go ahead and upload that into the media manager, and then select it.
And say Insert. And if I just say Save for the moment, this will replace the big words at the top that say West End Landon Hotel, with the Landon Hotel logo. So already, that looks a little bit better. The Landon Hotel though, obviously has a different color scheme that does not include blue. As you can see, it's mostly purple here. So wouldn't it be nice to change all of this blue that's on this website, to that Landon purple. So I'm going to go ahead and do that next, that Landon purple, the hex value is 5F2D8C.
So if you'll go ahead and type that into the box, if you go ahead and say Save again, refresh the website, now things are starting to match a little bit better. So we have a purple color scheme instead of the blue color scheme, and it matches nicely with the logo. Other things we can change here include the Google font for headings. So there is a Google font that's in use right now, called Open Sans, and that is driving the text for the headings, so the words Winter Wonderland at Landon Hotel in Vienna Draws Crowds, or What People Say About Us, that is the Open Sans font.
As opposed to everything else here on this page which looks like Arial to me. So it's possible to pick a different Google font, for those of you who are not familiar with Google fonts, you can get to them by going to Google.com/fonts, and this is, the time of this recording, 657 font families that are available to you online. And you can pick any one of these for use on your particular website. So you can flip through these and decide what you would like to use, whether they are Serif, Sans Serif, Handwriting, Display, and so forth, and choose the font that you want to use.
So I've chosen a font here called Playfair Display, so I'm going to type that in. So here's Playfair Display, it's a Serif font, and this is what I'd like to use to make this control the headings on my Joomla website. So you see that Playfair Display is two words, what I'm going to need to do is type in, for my Google font name, Playfair Display, and separate those two words by a plus sign, just as you see it done here right now.
So, Playfair plus Display, and if you go ahead and say Save, and refresh your site, you'll see that our headings here now look very, very different. So there are Serif font here, that's available to us here on the About Us page and so forth. Finally, the last setting we might want to take a look at is one at the very bottom here. The fluid versus the static layout. That isn't necessarily the most obvious thing from the beginning, so if you start making your website browser a little bit smaller, so if it starts off big, and you start making it smaller, at certain points along the way called break points, you'll see the website suddenly snap and rearrange itself, and it happens a few times.
It just snaps and then it rearranges itself. And this is the static model here. What's happening is that there's a series of, you can think of them as static width web pages, that are just coming up periodically, as this web page gets narrower, until we get to this point. So as we get narrower here, this is scaling as I move my web browser window, but at larger dimensions, all we're doing is just adding to the background space.
Okay, so if I switch that to the fluid layout, and say Save, what will happen instead is this is going to take up the full width of the browser window no matter how wide that window is. So as you see here, my banner, which worked great before with the static widths, is now too short, so one way you could deal with this would be to apply maybe a sold color behind the banner, and then perhaps, apply a gradient on the edge here, so that the picture would blend into the solid color, and that would be a nice control over using something like this on your site.
As I start to make the page smaller, you can see that it's continuously resizing, and the banner image is continuously resizing, until we hit the break point that puts us into the mobile style layout here. And then it continues to resize. All right, so that is the fluid version of the layout. Which is better? It depends. It depends on your design philosophy, it depends on what it is you want to accomplish, how many devices you want to accommodate, because of my banner image here, I think what I'm going to do is switch this back to static, because I think it looks better that way, but if you would choose to keep your site fluid, by all means, go ahead and do so.
All right, so that's a few very fast, very small, but very effective changes that we can make to the look of this website, and have it a little bit more personalized to the Landon brand.
- Configuring modules
- Creating a custom HTML module
- Displaying testimonials and random images with modules
- Using contact form components
- Enhancing Joomla! with extensions
- Changing the look of your site with templates
- Adjusting template masters with the HTML and CSS editors