CodeCrunch - Webmaster Tutorials, News and Design Blog

The great thing about most components in Joomla!, is that they usually come with their own CSS file, to allow you to customize the layout to match your site. For example, Kunena, the most popular forum component for Joomla, allows you to use the default Joomla! section layouts, or their own custom CSS file. This lets you customize every aspect of your website layout, and even allows another feature that most webmasters overlook…… CSS overrides using the !important declaration.

The !important declaration essentially allows a designer to override any inline, imported or later defined CSS declarations. As of recent, its most notable usage was for presenting alternate styles to different web browsers. However, all popular browser support the !important declaration, and when used properly, it’s a cool feature of CSS. Many designers will confess, that using the !important declaration as a means of continual design is probably not the best web design practice. Since we are going to learn how to use it as a feature and not a fix, it is completely acceptable. I’ve already convinced myself that I will continue to use this method on any CMS that is structured to present their header data in the same format as Joomla!, and I think you’ll like it too.

If you browse at three different sections of the CodeCrunch website, you’ll notice they use three different logos :  Homepage | Webmaster Downloads | Webmaster Forums (these open in new windows). Each of these sections are actually different components of Joomla!, and have their own custom CSS files. NB – Obviously – We are not running Joomla anymore, so there are no live examples. I wanted to add a unique logo to these areas, but was limited in my choices :

• Rearrange when the CSS file was inserted into the header.
• Make the front page of each component static on a daily basis using wget and cron, after manually writing a different layout.
• Use CSS overrides to allow the presented CSS in the custom file, to take precedence over the main site CSS files.

Here is all you need to do to be able to utilize this cool CSS trick. We’ll use the Kunena component as our test component :

1st Step

Locate the CSS file for your Joomla! website, and your Joomla! component that you want to show a different logo on. If you do not know the location of the CSS files, browse the source of your homepage (and your forums) , look in the header, and you’ll see a line where the external CSS is called. It will look something like this :

1

<link rel="stylesheet" href="http://www.yoursite.com/your_template_dir/template_name/css/template.css" type="text/css" />

Also locate the stylesheet call for your forums in the same manner.

2nd Step

When looking at the source code of your site, if using styles to populate a div with an image, you will see some CSS like below. Your CSS may vary a little, but most Joomla! templates in use today use the same layout structure :

1

<h1 class="logo"> OR <div class="whatever_class"> OR something similiar

3rd Step

Now that you know what CSS class your logo is put into place with, you need to open your Joomla! main CSS file. Within that CSS file, locate the logo CSS designation. In my example it looks like this :

1

h1.logo a {background: url(../images/logo.png) no-repeat left;display: block;height: 70px;width: 339px;}

Final Step

Now all we would need to do is to open up our Kunena CSS style sheet that we located earlier, and insert some CSS that will override the sitewide CSS. Please note that in my example, I also had to include the header designation. This is to ensure that I get the right CSS applied, just in case I add another logo DIV or H1 in the future and want it remain true to the original stylesheet :

1

#ja-header .inner {padding: 0px !important;}h1.logo a {background: url(/images/new_logo_forums.png) no-repeat left !important;display: block !important;height: 70px !important;width: 339px !important;}

The !important declaration that we have put into our CSS overrides only the pages that use the specific component header. The great thing is that it is not just a cool CSS trick to apply to your logo. I also apply this method to override other CSS in my own site, such as removing borders from framed in content and changing paddings on different components. I’m sure there are lots of other applications where this can be useful. If you have any of your own to share, I’d love to hear about them.