InMotion Hosting Support Center

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 .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

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!

Support Center Login

Our Login page has moved, Click the button below to be taken to the login page.

Social Media Login

Social Login Joomla

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
n/a Points
2016-03-11 9:43 am

The problem was solved! I clean the cache and now it works!

Many thanks!

n/a Points
2016-03-09 8:09 am


thanks a lot for your Courses!

I don't use protostar template and this code doesn't work. Any idea?

I have changed the file css/general.css

thanks in advance


40,770 Points
2016-03-09 9:32 pm
Hello Athina,

We would need to know the template you're using. You may need to speak with the developer of that template if the codes not working in it. The code is made to change the CSS in the template, so that may be the issue you're facing.

If you have any further questions, please let us know.

Kindest regards,
Arnel C.
n/a Points
2015-04-16 11:43 am


your description was really helpful. I did manage to get my banners side by side. I would like to get them centered on a page, they are aligned left right now...

Thanks in advance 

30,503 Points
2015-04-16 3:49 pm
Hello Stefan,

Thank you for your question. You will have to custom edit the css to modify your Joomla site.

Please see our guide on Align and float images with CSS.

Thank you,
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.
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

40,770 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.

Arnel C.
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?

11,186 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:


11,186 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.


Post a Comment

Email Address:
Phone Number:

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

13 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?


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:
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!