Joomla utilizes big amount of internal CSS classes. This allows being very flexible in configuring Joomla based website appearance though requires paying big attention to exact class implementation.
After reviewing a number of websites using Deal-Times template I realized that some people were confused and used Deal-Times template as is without adjusting it to fit into their actual needs and design concepts. I would like to show some possibilities that were included in Deal-Times Joomla template. Several of them were not used by most of Deal-Times Joomla template users.
Deal-Times Joomla template is used for this site, so you can observe things I’m speaking about.
If you are feeling lost in Joomla or template specific classes, you can use excellent debugging possibilities offered by
I highly recommend using Firefox extensions for web developers. Firefox extensions for web developers will allow you to view the source code and CSS properties for classes applied to your web page. No matter what you are doing, tweaking Joomla template CSS file or developing your own template,
will make your life more easer.
First of all, I’ve updated some properties of H1 tags used in content. I was not using them before, so it was necessary to adjust some as soon as I started to make some experiments with SEO.
I also would like to point your attention to the fact that some of already used classes were updated. I updated some types and sizes of fonts to improve appearance.
At the same moment I would like to show you how to use some template specific classes.
You can see Module positions for Deal-Times Joomla template here.
Most of left and right module positions (left, user2, user5, right, user7) do have top and bottom horizontal braces. However, user6 and user9 positions are different. They don’t use this top and bottom horizontal bars with braces. You can see that Google Adsense module at Deal-Tmes Front page is using this feature, being placed in user9 position. The same with module RSSFEED, which use title “Deal-Times News” and is placed in user6 position.
If you would like to use modules in user6 and user9 positions together with visible titles for these modules, default indent image for title would be the same as for left, user2, user5, right and user7 modules. Small green triangle would be placed in front of title text. If you would like to avoid this indent picture for modules in user6 and user9 positions the same way as I’m doing, there is Deal-Times template specific CSS class that will help. Use Module Class Suffix -no_top_bot_bar in module parameters configuration. Most of modules would allow you to do this.
If you are not happy with some other properties of this exact module appearance, just add your own classes to CSS file and use corresponding suffix in module configuration. You should take into account that this is only suffix applied to Joomla template CSS class. The whole class name would look like moduletable-no_top_bot_bar instead of moduletable and you should have (as I do in Deal-Times Joomla template) class, named moduletable-no_top_bot_bar. If you don’t want general Joomla class to be applied to this exact module position, you can use suffix that will point to non existing class, as I’m doing for Small Top Menu located on the right top corner in user8 position. I’m using suffix "-other".
I would also advise you to use different user positions for different menu and other modules. As to my taste, this would add more style to you site appearance. For example, you can see what is used for Joomla Hosting category page. Affiliate Marketing menu module for the left module position, SEO menu module for user2 position, Web Development menu module for user5 position, AuctionAds and RSS-FEED module for user6 position and a couple of other modules in the right and user7 positions.
Download updated CSS file for Deal-Times template and replace your old template_css.css file in …/templates/deal-times/css/ directory of your web host.
Feel free to ask your questions and add comments.