InMotion Hosting Support Center

Change a template background color in Joomla?

Category: Joomla 3

2013-09-09 9:53 pm EST

Hits: 11,750
How do I edit template source code?

I want to change template background color (NOT site background color!)

You must login before you can ask a follow up question.

You must login before you can submit an answer.



30,637 Points
2013-09-10 8:49 am EST
Hello rchorsch,

Thank you for your question. Here is a link to our walk-through guide on how to change the background color of a joomla template.

In the example we modify the Protostart Joomla template.

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


You must login before you can post a comment about this answer.

Thank you but I am NOT talking about the site background color. I am asking about the background color WITHIN the remplate. I believe I will have to edit the remplate source.

Thank you.
23 Points
2013-09-10 12:06 pm EST
Hello rchorsch,

If you wanted to directly modify the templates instead of using the template editor, you'd simply open up the CSS file that is causing the change for your template.

For instance I'm using the beez_20 template on my Joomla site, and it has a grey background by default for the entire page, and a white background for the area around the content.

My theme's personal.css file contains this CSS rule for the body tag causing the background to be grey:

background: #e0dedf url(../images/personal/bg2.png) repeat-x;

I changed this to:

background: black;

The #header class making the background white:


I changed to blue:

background: blue;

Also finally the #contentarea class making that section white as well:


Which I changed to grey with:

background: grey;

Here were the results of those quick edits, please don't critique my color scheme as I was just trying to show very clearly what each one did :)

Showing Joomla CSS edits changing template colors

If you happen to be unaware how to directly edit files on the server, you can take a look at our guide on how to edit a file on my server which covers some various methods.

I hope that answered your specific question, if I misunderstood what you're trying to do please clarify a bit what end result you're hoping for and we can provide further assistance.

- Jacob
9,968 Points
2013-09-10 2:48 pm EST
Like this 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!

Support Center Login

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

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!