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.

  1. Log into your Joomla 3.0 admin dashboard
  2. In the top menu, click Extensions and then click Template Manager
  3. In the left menu, click Templates
  4. Next to the template you are using, click the Details and Files link
  5. 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:
    .banneritem,
    .banneritem .clr{
    display: inline;
    }

    When you visit your site again, you will notice that your banners are now showing side by side.

    Default Banner DisplayBanners side by side after CSS update
    default-banner-display  banners-showing-side-by-side
Continued Education in Course 209: Working with Banners in Joomla 3
You are viewing Section 10: How to show Joomla 3.1 banners side by side
Section 9: Rotating Banners in Joomla 3.1
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Joomla Community Google+ Hangout #3

June 3rd, 2014

Thank you @RustyJoomla for letting me speak on the Joomla Community Google+ Hangout!

Click here to watch!

n/a Points
2014-05-26 11:11 am

This extension to the CSS file used to work, but after an update to Joomla 3.3.0 it does not seem to work any longer.

Any good ideas?

Staff
9,162 Points
2014-05-27 8:40 am
Are you still using the Protostar template? If not, this can vary between themes. Could you provide us with a link to the site that you are having trouble with?
n/a Points
2014-05-28 8:03 am

Yes, I am using the Protostar template.

This is the site in question: http://www.kogecykelmotion.dk/site/

 

Staff
9,162 Points
2014-05-28 8:14 am
It appears that you simply had removed a space from what was provided in this article which caused the issue. You should have a space between .banneritem and .clr{.
n/a Points
2014-05-28 8:32 am

Thanks a lot. The strange thing is I have just done a copy/paste so I never thought there could be errors in that. Never mind. Now it works again.

 

n/a Points
2014-07-16 1:03 pm

All files in protostar template in my site are not writable and when I tried to change the attributes I got those read-only file system messages. What do I do? Thanks

Staff
17,306 Points
2014-07-16 4:55 pm
Hello Spyropk,

Sorry for the problems. Unfortunately, you've given us no information on your domain, so we need a little more information if you wish for us to troubleshoot the problem. Can you provide the domain name? If you're hosted with us, you should be able to log into the cPanel to use the File manager. There you can change the file attributes. I'm not sure how you're making changes to the files, so we need to know exactly what you're doing in order to pinpoint the problem. Please provide the steps you're doing for us to replicate the problem.

Regards,
Arnel C.
n/a Points
2014-07-17 6:43 am
Thanks for the reply. Files are ok today. Must have been a server thing. I sort of paniced yesterday and forgot the details, but all seem ok today. Thanks anyhow.

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

8 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!