InMotion Hosting Support Center

Change a template background color in Joomla?

Category: Joomla 3

rchorsch
Asked:
2013-09-09 9:53 pm EST

Hits: 10,155
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.

OTHER ANSWERS

0

John-Paul
Staff
22,952 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,

-John-Paul

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.
rchorsch
23 Points
2013-09-10 12:06 pm EST
<div style="background-color: #FFF; padding-left: 10px;">Hello rchorsch,

If you wanted to directly <strong>modify</strong> the <strong>templates</strong> instead of using the <a href="http://www.inmotionhosting.com/support/edu/joomla-3/edit-template">template editor</a>, you'd simply open up the CSS file that is causing the change for your template.

For instance I'm using the <strong>beez_20</strong> 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 <strong>personal.css</strong> file contains this CSS rule for the <strong>body</strong> tag causing the background to be grey:

<pre class="code_block" style="width: 500px; white-space: normal; margin-bottom: -30px;">body
{
background: #e0dedf url(../images/personal/bg2.png) repeat-x;</pre>

I changed this to:

<pre class="code_block" style="width: 500px; white-space: normal; margin-bottom: -30px;">body
{
background: black;</pre>

The <strong>#header</strong> class making the background white:

<pre class="code_block" style="width: 500px; white-space: normal; margin-bottom: -30px;">#header
{
background:#fff;</pre>

I changed to blue:

<pre class="code_block" style="width: 500px; white-space: normal; margin-bottom: -30px;">#header
{
background: blue;</pre>

Also finally the <strong>#contentarea</strong> class making that section white as well:

<pre class="code_block" style="width: 500px; white-space: normal; margin-bottom: -30px;">#contentarea,
#contentarea2
{
background:#fff</pre>

Which I changed to grey with:

<pre class="code_block" style="width: 500px; white-space: normal; margin-bottom: -30px;">#contentarea,
#contentarea2
{
background: grey;</pre>

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

<img src="http://www.inmotionhosting.com/support/images/stories/questions/joomla-css-edits.png" alt="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 <a href="http://www.inmotionhosting.com/support/website/how-to/how-to-edit-a-file" target="_blank">how to edit a file on my server</a> 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</div>
JacobIMH
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

Social Media Login

   
Social Login Joomla

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!