Which Joomla Template For Mobile, Beez3 Or Prostar Responsive

When you lot first first working with Joomla!, yous're probable to start with a pre-designed template. Later searching through the thousands of choices out at that place, you probably constitute something that fits your needs–whether that be a real manor template, a news template or a basic web log setup. Yous could even find templates specifically designed for hotels or law firms.

It seems similar for each different type of business that exists, there's a generic template that will fit your needs. For example, let'southward 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 cull from.

However specific the template is that fits your business requirements, you lot'll even so want to fine tune it to meet your exact needs. Afterwards all, that's what being a professional person web programmer and designer is all virtually. In this commodity, I'll evidence you lot how to adjust the CSS top banner area to conform the specifics of your logo and to allow for a banner advert.

Fine Tuning Joomla! Templates

Sometimes when working with tertiary-party templates the dimensions don't e'er fit your needs. Y'all might need to adjust the specifications for your logo and to make room for a imprint advertisement, such as Google AdSense's Leaderboard ad size, which is 728 x xc, a fairly common advertisement size designed for the pinnacle of spider web pages. For the purpose of this article, I'll be fine tuning the Fiction template from JoomShaper.

Later on looking at that template, you lot'll immediately find that their logo is fairly skinny and there is no room for a banner advertizing. Now wait at my personal site, which has been tweaked to arrange non only my logo merely also to make room for the large ad banner size. There were 3 dissimilar things I had to fine tune to brand this transformation: first, I replaced the template logo with my logo and and so adjusted the CSS to make it fit; second, I added the imprint ad and then adjusted the CSS to go far 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 mode to add your logo is to name your paradigm file logo.png and bandy out the images, which I detect is easiest to practise via the folder directory. Chances are, your logo is non the same dimensions equally the template logo. Here's how to fix that.

First, open up the CSS file as discussed in the article, "Working with CSS in Joomla!". For the Fiction template, the CSS designer made it very piece of cake to observe the code for the header and logo area:

/*HEADER AND LOGO*/  #header{margin-bottom:10px;}  a#logo{width:290px;height:219px;groundwork: url(../images/logo.png) no-repeat 0 fifty%;bladder:left;}  /*Terminate HEADER AND LOGO*/

All you have to do is adjust the width and peak to fit the dimensions of your logo. Click the preview button and see how information technology looks. Don't be surprised if you take to pad the width and height in the CSS to get your logo to appear nicely.

Now, let'south add in a revenue generator, such equally Google AdSense. I personally use JoomlaSpan's AdSense module, which I've found very easy to use. All you need is a Google AdSense business relationship–you just install the module, and you're set up to go. Nosotros discuss Joomla! modules and extensions farther in our article entitled Web Developer Course: How to Utilize Extensions in Joomla!.

With the module installed, open it up and configure the parameters.

Adsense Module

Y'all'll become the Publisher ID from Google. For the Ad Type, I've read before it's best to select text and epitome so that the advertisers accept to compete for your ad space (ameliorate revenue opportunities for you). I e'er choose slightly rounded corners, but for the Leaderboard Advertisement Layout they tend to e'er be foursquare. For the colors, feel free to configure them to lucifer your site.

Now you have to place the ad on your site. Something squeamish that JoomShaper provides for you is a module layout folio. This page shows you lot the location for each the modules in the template. The screenshot shows the top half of the Fiction template module positions.

Module Positions

You lot don't have to judge where to identify the leaderboard ad. By looking at the module positions, you know to place it in the "search" module position.

Adsense Position

Now that you have your advert in the correct module position, you lot'll have to determine if you want the search box to appear above or below the advertizement. You lot can order the positioning of the modules from the Module Manager. Select the Search position from the drop box to come across 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. Y'all might too observe that I take a few modules that are not enabled. If I e'er desire to quickly alter my Google Ad to an Amazon Chapter ad, all I have to do is click a couple of buttons and Joomla! will bandy out the modules. In a matter of seconds I tin update my acquirement generating tactics. Of course, the Amazon modules are divide from the AdSense modules, only can be implemented in a like fashion.

At this point, when y'all preview the template, you'll notice the big Leaderboard advertizing does not fit nicely on the page. One option is to apply a smaller advertisement, or you lot tin adapt the CSS. The problem right now is that the page width of the template is too narrow. To arrange the width of the template, go dorsum 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 well-nigh the elevation of the CSS file. Simply accommodate the width px to meet your needs. Chances are, y'all probably will non want to exceed 1100px. Go ahead and Preview your site and you should at present run across all of your elements fitting nicely on the page.