Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Joomla! 1.5: Styling with CSS shows how those familiar with Joomla! and with hand-coded HTML and CSS can take the next step in creating a dynamic website with a unique look and feel. Jen Kramer McKibben goes deep into the functionality of this open-source content management system, exploring topics like putting more style into modules, editing CSS on the fly using the Firefox Web Developer toolbar, creating horizontal and vertical menu layouts, and including images in those menus. Exercise files accompany the course.
Have you been curious about what's hiding behind our Login box? Let's go ahead and take a quick peek and find out how this Login box is actually being used on this website. It promises that once we log in, we can find out about specials for our favorite clients. You can use the same login that you use to log into back-end of the website right here. Now that I have logged in, I've set the log in to redirect me to a Member Specials page. However, we see a little bug in our CSS. Our Member Specials tab didn't quite fit on the end here where we wanted it to go. So we are going to need to adjust our spacing between the tabs. I think if we tighten that up a little bit that Member Specials tab should pop right back on up to the top.
The other thing you might see, if you're logged in as Administrator as I am, is this little icon that appears on the page, it's this little pencil. This is used for front-end editing in Joomla! It's easy to edit Joomla! from the front-end of your website and in fact, if you are going to have a client who is not technically-oriented maintain their Joomla! website, this is a great way for them to do it. Once they've logged into the website, they can click the little pencil and you'll actually come up with an editing window, so that you can add some extra text. And you wouldn't want your chocolate to dry out. Then we can just save this right here from the front-end of the website and your changes immediately take effect. So let's fix the problem that we have with our tabs by going to CSS > Edit CSS, and Default CSS.
In the top area we had some spacing between our tabs. We'd put in a bit of a margin right here under #top li, we put in a margin-right of 10 pixels. Let's try changing that to 5 pixels. Now our tab is popped up to the top where we really want it. Let's do a Ctrl or Command+A, Ctrl or Command+C to copy all of that, and then switch to the back-end of the website. We are going to Edit CSS, default.css, edit. And I am going to do a Ctrl or Command+A, Ctrl or Command+V to paste in all of the changes. And this time I am just going to hit Apply, because we are going to come back a little bit later to make additional changes to our style sheet.
I am going to go back to the front-end of the website and Refresh and our tabs are now in the right order and they are all on the same row, which is great. I am going to go back to the front page of the website. And you will notice once you are logged in on the website that the box reflects this. It's set up to say Hi Administrator. So I've set it up to show the full name of the person using the website, which in my case is Administrator. Yours may say something else. You can also configure this to just show you your username.
I am going to log-out because I would like to work with a larger login box. So one of the ideas I have for this webpage is trying some rounded corners within the login box itself. Joomla! makes it possible to put rounded corners quickly and easily into this particular module or any module on the website. It's not just a trick you can use on the login box; you can use it on any of your modules. But the first thing we have to do is adjust our HTML such that we are calling for a module with the styling of rounded as opposed to the styling of xhtml.
Styling of rounded will surround our module with four divs. Then we can put in a background image in each one of these divs, one in each corner, which will give us that rounded corner effect. Let's go back to the back-end of the website and I am going to save my CSS. And then I am going to go to Edit HTML. I am going to scroll down in my template down to where it says php elseif ($this->countModules :('right')). Our module is on the right side of the page, so this is the piece of content that we want.
Then in the div with an ID of right, there is a jdoc:include type of modules, name of right, style of xhtml. We are going to change this to rounded. If you would like more information about how this template is set up and how all these various Joomla! codes work, please make sure you take a look at the Joomla! Creating and Editing Custom Templates course. Now that we have made our change let's scroll back up to the top of the page and click Save. Now we are going to go back up to the front-end of the website and Refresh. Oh no! All of our styling has disappeared. What happened? Let's take a quick peek at the HTML.
If you will under idiv of ID of right we now have a div with a class of modulehome. Previously this had been a div with a class of moduletablehome. And there are those four divs, 1, 2, 3, 4, that I had mentioned earlier. Because we set the module region of right to have rounded corners, it's also affected our featured products in addition to affecting our login box. We are going to have to adjust our style sheet so that our styles now apply to the HTML we are currently working with. So let's make those changes really quickly.
Under CSS > Edit CSS on the Default tab let's scroll down to the right region and everywhere it says div.moduletablehome we are going to need to change that to div.modulehome. So I am going to Ctrl or Command+C to copy that piece of code and I am then going to highlight and click Ctrl or Command+V for every instance I have in my list here. And you will see the webpage updating as I update each of these styles, and slowly the styling on this page will be coming back.
Just a few more pastes here and we will done with this part. That took care of Our Featured Products. Now we need to work on the login. This was previously called div.moduletable, but now this is called div with a class of module and there is the additional divs that we had. So we'll need to change the div.moduletable over here to div.module.
One again I am going to highlight and Ctrl+C to copy, then Ctrl+V to paste in this change for everywhere it occurs for our login box. And now the styling on our login box is back. That was a lot of changes, so let's get this into our Joomla! template just so that we don't lose them. So once again Ctrl or Command+A, Ctrl or Command+C and then we are going to flip to the back of the website, Edit CSS, default.css, Edit, Ctrl or Command+A, Ctrl or Command+V to paste it in. Once again I am just going to hit Apply because we are going to make a few more adjustments to the style sheet.
Back to the front-end of the website and Refresh and our styling changes have taken effect and everything is back to normal. Now that we are back on the front-end of the website, let's go ahead and put in those rounded corners for the login box. So we are going to go CSS > Edit CSS, the default tab and we are going to scroll down to the right section of the style sheet. For right div.module we are going to apply a background image of a rounded corner. You will find these in your Module Manager. They include upper left.gif, upper right.gif, bottomleft.gif, and bottomright.gif.
We are going to use one background image per div, and remember that this starts with div.module followed by three additional divs that have no classes and no ids. For the first div.module we are going to add a background and as this background declaration will override the background color that we had earlier I am going to pull the background color down to this declaration and get rid of the background color line.
Followed by URL. And your path to the image may be slightly different than mine. ChocolateBliss1/images/stories/ upperleft.gif. And there you will see it in the box repeated many times. So let's set it to no-repeat and then let's align it to the left and the top. Now we are going to take the same line of code and we are going to Ctrl or Command +C, copy it for the rest of our rounded corners.
Now we are going to add a declaration for our second div. So #right.div module div. Now I am going to Ctrl or Command+V to paste in that line of code that I just copied. Scroll back to the beginning of the line, you will see that we have a background color associated with this div. We need to get rid of that background color. We will cover up the corner on the div.module. Now we are going to change the name of the file from upperleft to upperright and we want it to not repeat and we want it on the right on the top. Now you can see that corner just came up right here. That tiny little bit of color is the corner, but it's in a div that is not quite lined up with div.module.
That's probably due to the fact that in our div.module we have some padding. Let's get rid of the padding and see if that corner lines up a little better. I am going to scroll down a little bit so you can see the bottom corners of the login box. Now we are going to start working on adding those. So once again I am going to copy this entire declaration so I am highlighting the whole declaration and then Ctrl or Command+ C and Ctrl or Command+V to put it in place. Now it's div.module div div. We are going to scroll over to the right again. Instead of upper right we are going to say bottomleft and you will see the corner comes up immediately here. It's aligned in the wrong spot. So instead of right top we want this on the left and the bottom. And you see the corner has just turned up right here.
Finally, I am going to copy that, Ctrl+C or Command+C and add an additional line, Ctrl or Command+V. We are going to add one final div so it's div.module div div div, and I am going to change this from bottomleft to bottomright.gif, and instead of the left bottom we want it to show up on the right bottom. Now you see our login box has several corners to it and they are all rounded.
Now let's make a few more adjustments to this login box's styling to clean it up, make it the same width as Our Featured Products and pull the text in from the very edges of the box here. I am going to change the width of the box from 220 to 240 pixels, which will make it just a little wider, and now it's in the right place. Then I am going to add one final style. If I add padding to my div.moduletable as I had before, we saw how the background image corners will get pulled in a little bit. So I can't use that box for my styling. However, surrounding the entire area from login to 'find out about our specials,' all the way down to 'Forgot your username' is a form tag.
I am going to use that form tag for styling this to pull in my text. Then I am going to need to adjust the h3 that controls my login on the top to match that padding over on the left. And I think we will be all set. So I am going to add style #right div.module form and I am going to give this a padding of 10 pixels. Now we have got some great padding going on, but our corners are still in place. As for that login on the top let's give it a little bit of padding as well.
Under the div.module h3 let's give it some padding of maybe 5 pixels and 10 pixels to get it off the top a little bit. Then let's get rid of the margin on the bottom, which will tighten up that big space between the login and the start of the text. So as always the very last thing we need to do is copy all of the changes that we have made into our style sheet. So Ctrl or Command+A, Ctrl or Command+C, then we are going to switch to the back-end of our website and we have left this open from the last time we edited. So all we will need to do is Ctrl or Command+A, Ctrl or Command+V. Then we are going to hit the Save button on the top and go back and refresh our webpage. And there is our login box with the rounded corners.
You can apply this technique of rounded corners to any module on your website, not just the login box. The rounded corners on the login box echo nicely the rounded corners on the tabs on the top, and if we were really building this website, probably the next thing I would do is put some rounded corners on the Our Featured Products. But I will leave that for you, so that you could have a little practice trying that out.
Find answers to the most frequently asked questions about Joomla! 1.5: Styling with CSS.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.