How to show Joomla 3.1 banners side by side
As we dive deeper into another tutorial about using banners in Joomla, we will now teach you how to show your banners side by side.
By default, banners are shown in div tags, which by default are block elements. Our goal in this tutorial is to turn them into inline elements instead. Does this CSS jargon not make sense? That's OK, simply follow the steps below to show your banners horizontally instead of vertically.
- Log into your Joomla 3.0 admin dashboard
- In the top menu, click Extensions and then click Template Manager
- In the left menu, click Templates
- Next to the template you are using, click the Details and Files link
- Edit your template's CSS file
In our testing, we are using the Protostar template, so we clicked on the link that says Edit css/template.css. If you are using a different template, your css file may be named differently.
When your template's css file is open, add the following code to the bottom and then click the Save button in the top left:
When you visit your site again, you will notice that your banners are now showing side by side.
Default Banner Display Banners side by side after CSS update
Thank you for your feedback!
Working with Banners in Joomla 3.1
Creating and Showing Banners
|1.||How to create a new image banner in Joomla 3.1|
|2.||Using HTML to show a swf flash banner in Joomla 3.1|
|3.||How to show a banner in Joomla 3.1|
Banner Categories and Clients
|4.||How to create a banner Category in Joomla 3.1|
|5.||How to create a Banner Client in Joomla 3.1|
Impression and Click Data
|6.||Tracking Banner Impressions and Clicks in Joomla 3.1|
|7.||How to change Joomla 3.1 Banner Sizes|
|8.||Controlling which windows banners open into in Joomla 3.1|
|9.||Rotating Banners in Joomla 3.1|
|10.||How to show Joomla 3.1 banners side by side|