As we continue to review the available settings within the Protostar template of your Joomla 3.0 hosting, the next setting we will look at is the Background Colour setting:

Background Colour
Choose a background colour for static layouts. Default is #F4F6F7

Adjusting the Background Colour setting will do exactly what you expect, adjust the background of your template. The default color is #F4F5F7 and in our testing we changed it to #8cb7e6. You can see the results below:

Background Colour: #F4F6F7Background Colour: #8cb7e6
 background-color-grey  background-colour-blue

The steps for changing your background color within the Protostar template are very similar to those of editing your link colors. The main difference will be that you are changing it from a light gray to the blue color as seen above. Make sure to check your website after changing colors in order avoid elements of your website from becoming difficult to see or unviewable. Additionally, keep in mind that you may need to clear your web browser cache after making a change.

To change your Protostar template background color in Joomla 3.0:

  1. Log into your Joomla 3.0 Admin Dashboard
  2. In the top menu, click Extensions and then click Template Manager
  3. In the list of templates, find and click on the Protostar template. In our testing, we clicked on My Default Style (Protostar)
  4. Click the Options tab towards the top of the page
  5. Find the setting labeled Background Colour, and then click the box to the right. A color swatch will appear. Select the color of your choice and then click the Save button in the top left of the page to change your setting.
You are viewing Section 2: Changing your template background colour in Joomla 3.1
Section 1: Adjusting the Protostar Template Colour in Joomla 3.1
Section 3: How to upload a logo in the Joomla 3.1 Protostar template
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:
Change a template background color in Joomla?
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-14 9:01 am

hello plz can u help me.l have download a joomla template but fail to edit it.who can guide me the way l can do.thx

Staff
10,994 Points
2014-05-14 9:21 am
Hello LINO,

Thank you for contacting us. We are happy to help, but will need more information.

Are you able to follow this guide?

Which step is giving you problems?

What is happening when you try to edit the template?

If you have any further questions, feel free to post them below.
Thank you,

-John-Paul
n/a Points
2014-06-04 2:52 pm

PLease help!!!

 

I want to change the default white colour inside the background colour. is there a way?

Staff
18,399 Points
2014-06-04 3:27 pm
Hello Jelena,

In order to change that color, you would need to modify the template CSS for the template you are using (as designated in the tutorial above). You would need to go into your File Manager (or FTP), find the directory for your Joomla install, go to the templates folder, find the template you're using, then open the CSS folder and edit the template.CSS. Here's an example of the path:

joomla31/templates/protostar/css/template.css

When you're in editing that file (it's a simple text file so you can use any text editor), go to:

.body .container {
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
padding: 20px;
border: 1px solid rgba(0,0,0,0.15);
-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.05);
-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.05);
box-shadow: 0px 0px 6px rgba(0,0,0,0.05);

The line labeled "background-color" is what you need to change. The color value is HTML color code. You can use an online HTML Color picker to pick the color code you want to use.

Save the file after the change and then you should see the color for the template after you refresh the page.

I hope that helps to answer your question! Please let us know if you have any further questions or comments.

Regards,
Arnel C.
n/a Points
2014-07-21 9:06 am

Hi Jelena!

If you want to change article color open template.css via template manager on your administration panel then find this line: 6959 background-color: #ffffff; <- here you can put your another color.

But changing this line applied to whole page/site. 

Sorry for my english.

n/a Points
2014-06-18 9:36 am

i edited in template.css... bt it's not working.. i have edit to get background color in protostart template in joomla 3.... my coding in template.css is body{ background-color:red; }......... why its not working help.. thanks in advance

Staff
10,022 Points
2014-06-18 9:50 am
We recommend changing your background color as described in this article rather than directly editing the CSS as it can potentially cause issues.
n/a Points
2014-08-04 2:30 pm
I'm using JoomlaShine template. The "options" button does not exist in this template. GRRR!!!
Staff
10,994 Points
2014-10-02 9:54 am
Hello Bi,

Thank you for your comment. I would need to know the specific J.S. template to attempt to test it.

But, since it is a commercial site, they do offer some level of Support. They may have a workaround, or another option.

Thank you,
John-Paul
n/a Points
2014-09-01 8:55 pm
It is the template colour I would like to change not the background , can this be done?
Staff
10,994 Points
2014-10-02 10:28 am
Hello Cam,

Thank you for your question about changing template color. Yes, it can be changed in Joomla, which is covered in our guide Adjusting the Protostar Template Colour in Joomla 3.

If you have any further questions, feel free to post them below.

Thank you,
John-Paul
n/a Points
2014-09-07 7:30 am
This instruction does not apply to all templates. As noted, not all templates provided easy and accessible ways to change background colors. For the particular one I am using I have to use customized css.
n/a Points
2014-10-01 9:28 pm

ola alguem sabe como colocar uma imagem de fundo no template protostar do joomla?

Hello does anyone know how to put a background image in the protostar joomla template ? (translated by Google)
Staff
10,994 Points
2014-10-02 11:08 am
Hello asdcastilho,

Thank you for your question. We do not have an article about changing the background image in the Protostar Template. I did find a post in the Official Joomla forum titled Changing Background of Protostar/Beez3. In that forum, they also discuss setting a background image.

If you have any further questions, feel free to post them below.

Thank you,
John-Paul
n/a Points
2014-10-02 1:02 pm

Obrigado vou ver isso maravilha este site

n/a Points
2014-11-07 9:25 am

How can i create dynamic table in joomla 3 with form fields and also store geven informaition in my db .

Staff
383 Points
2014-11-07 12:34 pm
Hello Ali Raza Kalhoro,

It sounds like you are looking for a module/component similar to this one, < a href="http://extensions.joomla.org/extensions/news-display/tables-a-lists/24235" target="_blank">Smart Data Table. Beyond that you could try coding one up in PHP but we would not be able to assist in that custom coded solution.

Kindest Regards,
TJ Edens

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.

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