Join Jen Kramer for an in-depth discussion in this video Styling the header, part of Templating with Joomla! 3 and Bootstrap.
Ugh, the web page looks absolutely awful with this red background and yellow text. Let's fix that. If you switch over to your custom.CSS the background of color red and the color of yellow, I put in the video, where we are showing you some alternative workflows that you could use inside of Joomla! to get your CSS into the system, and I put this in. Just to show you that, yes, you can put in styles and they are saved, it's horrible. So let's just take those out really quick. We certainly don't want those. In fact, we don't need this body tag style at all.
So I'm just going to go ahead and take that out altogether. Where I'd like to start styling though is at the head of my document. So if I just do a File>Save here and I go back to my web page and I refresh. Here now I can look at it again. What I want to concentrate on first is just styling the head of this document. So as we know from the completed design for this website, what we want to have is a big green header and I'm going to want to align those flags and that search box over to the right side of the screen.
So the first step in this is to know what HTML you have to work with. And easiest way to do that is actually not to take a look at index.php. Index.php is only going to show us the following information: If I look at index.php and I scroll on down to the header portion of my web page, I see that I have my image and then I see that I have a line here that just calls for the modules. I don't know what HTML I have to work with and to style when I take a look at this. So the best way to do this is to view the page source.
And right here from my Web Developer Toolbar I can just go to View Source. And this will show me the HTML that makes up my web page. So I can scroll on down here to my header and there's my image just like I had before. Then I have my div with a class of span8, in my index.php, this just calls for jdoc include type of modules. Now this is actually written out as HTML. So I see that I have a div with a class of module table. I have a Div class of mod languages. And then I have my flags and then after that I have another div with a class of module table.
And div with a class of search and the stuff associated with the search. And that my header ends down here. Well, this is actually the HTML that I'll have to work with to style. So what I'm going to do is I'm going to work with these two classes. That class here of search and the class up here of mod-languages and assign some styles to those. And I'll also put a background color on the header over all here, which I can just use my header tag for doing that. It's the only one that's on the page. So back here in Dreamweaver I'm going to switch to my custom.CSS tab.
And I'm going put a little comment at the top header styling. After that I'm going to put in my header as my declaration. I'm just using HTML tag there's no need to make it any more specific than that, background-color will be afc82e. And that's all I need for my header, it's just going to be a big green area. If I say File>Save and I go to Firefox and I refresh this page.
There we go, I now have a big green header. That's exactly what I wanted. Now I need to take care of my styling here for the flags. So I'm going to add now my style of .mod-languages and that will align it to the right, and I'm going to put in some padding 4em, 1em, 0, 0. Remember when you see CSS written out this way with four numbers one right after the other.
The way that you should remember that is its TRBL. Remember TRBL and stay out of trouble. So what that means is 4ems on the top, 1em on the right, and 0 on the bottom and left. Why am I working with ems here? I could be working with ems or percents. Either one is okay, this is because I'm working with Responsive Design. Remember that I want to work with a unit of measure that's flexible and will adapt to my web page, so ems or percents are good way of doing that.
If you use pixels and you're hard coding in those values, those pixels unfortunately, may not necessarily adapt to some of your other layouts on the website, or adapt as easily. That is why I am working with ems. And I'm going to close that off with the curly bracket. And then finally my search box and so I'm going to call this .search, curly brackets and I am also going to give this a margin of 2ems, 1em, 0, 0, so 2 on the top.
So that will be 2ems between the flags in the search box, one em over on the right. That way the edges on the right will line up nicely with the flags and then 0, 0. And I'm going to tell it to float right. Okay. So now that I have those styles in place, I can say File>Save and when I come back to the front end of my website and I refresh. Here's my flags over here now pushed to the side of the screen and my search box is located right under it. All that has lined up very, very nicely here inside of my web page.
So we've got a good start on improving the look of our website.
- Reviewing the graphic designs
- Creating HTML based on the Bootstrap framework
- Converting the HTML to a Joomla! template
- Installing the custom Joomla! template
- Using Firebug and the Firefox Web Developer Toolbar
- Styling the navigation bars
- Creating a dropdown menu
- Modifying the template for tablets and phones
- Working with advanced template features, like overrides