When you first start working with Joomla!, you’re likely to start with a pre-designed template. After searching through the thousands of choices out there, you probably found something that fits your needs–whether that be a real estate template, a news template or a basic blog setup. You could even find templates specifically designed for hotels or law firms.
It seems like for each different type of business that exists, there’s a generic template that will fit your needs. For example, let’s say you want to create a site that focuses on video games. All you have to do is a search for “Joomla video game template” and you’ll get plenty to choose from.
However specific the template is that fits your business requirements, you’ll still want to fine tune it to meet your exact needs. After all, that’s what being a professional web developer and designer is all about. In this article, I’ll show you how to adjust the CSS top banner area to accommodate the specifics of your logo and to allow for a banner advertisement.
Fine Tuning Joomla! Templates
Sometimes when working with third-party templates the dimensions don’t always fit your needs. You might need to adjust the specifications for your logo and to make room for a banner advertisement, such as Google AdSense’s Leaderboard ad size, which is 728 x 90, a fairly common advertisement size designed for the top of web pages. For the purpose of this article, I’ll be fine tuning the Fiction template from JoomShaper.
After looking at that template, you’ll immediately notice that their logo is fairly skinny and there is no room for a banner ad. Now look at my personal site, which has been tweaked to accommodate not only my logo but also to make room for the large ad banner size. There were three different things I had to fine tune to make this transformation: first, I replaced the template logo with my logo and then adjusted the CSS to make it fit; second, I added the banner ad and then adjusted the CSS to make it fit; and third, I adjusted the width of the entire template page to make all of the elements fit.
In the Fiction template, the logo image file resides in the images folder and is named logo.png. The easiest way to add your logo is to name your image file logo.png and swap out the images, which I find is easiest to do via the folder directory. Chances are, your logo is not the same dimensions as the template logo. Here’s how to fix that.
First, open the CSS file as discussed in the article, “Working with CSS in Joomla!”. For the Fiction template, the CSS designer made it very easy to find the code for the header and logo area:
/*HEADER AND LOGO*/
#header{margin-bottom:10px;}
a#logo{width:290px;height:219px;background: url(../images/logo.png) no-repeat 0 50%;float:left;}
/*END HEADER AND LOGO*/
All you have to do is adjust the width and height to fit the dimensions of your logo. Click the preview button and see how it looks. Don’t be surprised if you have to pad the width and height in the CSS to get your logo to appear nicely.
Now, let’s add in a revenue generator, such as Google AdSense. I personally use JoomlaSpan’s AdSense module, which I’ve found very easy to use. All you need is a Google AdSense account–you just install the module, and you’re ready to go. We discuss Joomla! modules and extensions further in our article entitled Web Developer Class: How to Use Extensions in Joomla!.
With the module installed, open it up and configure the parameters.
You’ll get the Publisher ID from Google. For the Ad Type, I’ve read before it’s best to select text and image so that the advertisers have to compete for your ad space (better revenue opportunities for you). I always choose slightly rounded corners, but for the Leaderboard Ad Layout they tend to always be square. For the colors, feel free to configure them to match your site.
Now you have to place the ad on your site. Something nice that JoomShaper provides for you is a module layout page. This page shows you the location for each the modules in the template. The screenshot shows the top half of the Fiction template module positions.
You don’t have to guess where to place the leaderboard ad. By looking at the module positions, you know to place it in the “search” module position.
Now that you have your ad in the correct module position, you’ll have to decide if you want the search box to appear above or below the advertisement. You can order the positioning of the modules from the Module Manager. Select the Search position from the drop box to see only those modules assigned to the Search position.
From this screenhot, you’ll see that I prefer the banner ad to appear at the very top of the screen, followed by the search box. You might also notice that I have a few modules that are not enabled. If I ever want to quickly change my Google Ad to an Amazon Affiliate ad, all I have to do is click a couple of buttons and Joomla! will swap out the modules. In a matter of seconds I can update my revenue generating tactics. Of course, the Amazon modules are separate from the AdSense modules, but can be implemented in a similar fashion.
At this point, when you preview the template, you’ll notice the large Leaderboard ad does not fit nicely on the page. One option is to use a smaller ad, or you can adjust the CSS. The problem right now is that the page width of the template is too narrow. To adjust the width of the template, go back to the CSS file. For the Fiction template, the width of the page is defined as:
.wrap{width:1100px; margin:0 auto; text-align:left;}
This is found near the top of the CSS file. Simply adjust the width px to meet your needs. Chances are, you probably will not want to exceed 1100px. Go ahead and Preview your site and you should now see all of your elements fitting nicely on the page.
