Joomla Templates Club 406,261 posts

[aadilk4 Friend aadilk4Join date: October 2010Posts: 29Downloads:0Uploads:6 Thanks: 4]

#171548

hi how are you? i am using JA Erio and i would like to change the background color on the sides from white to blue or to an image, is this possible, and how would i go about doing it?

your help would be highly appreciated!

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#428594

Heya . . . Can you provide the url to the site you’re working on?
Also, in preparation, please set “Optimize CSS” to “No” within your Template Manager–>General Settings

[aadilk4 Friend aadilk4Join date: October 2010Posts: 29Downloads:0Uploads:6 Thanks: 4]

#428638

currently working on my pc, havent uploaded as yet, still working offline!

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#428751

<em>@aadilk4 287848 wrote:</em><blockquote>currently working on my pc, havent uploaded as yet, still working offline!</blockquote>

Open your template.css file (within path /templates/ja_erio/css/template.css)

at line 25 you should see the following . . .


body#bd {
background: url(../images/bg_body.png) repeat-x #fff;
border-bottom: 10px solid #1a1a1a;
color: #333;
padding: 5px 0 0;
}


[FONT=arial]
This is where you can change the background parameter to what ever image and/or color you want.

Hope that helps.

[/FONT]

[aadilk4 Friend aadilk4Join date: October 2010Posts: 29Downloads:0Uploads:6 Thanks: 4]

#428896

<em>@TomC 287986 wrote:</em><blockquote>Open your template.css file (within path /templates/ja_erio/css/template.css)

at line 25 you should see the following . . .


body#bd {
background: url(../images/bg_body.png) repeat-x #fff;
border-bottom: 10px solid #1a1a1a;
color: #333;
padding: 5px 0 0;
}


[FONT=arial]
This is where you can change the background parameter to what ever image and/or color you want.

Hope that helps.

[/FONT]</blockquote>

this allows me to add a background image, but how would i change the color of the background and leave the body background white as per my picture, still no luck even when trying out

#ja-wrapper{
background-color: blue;}
.wrap{
background-color:white;}

still no luck!
please assist

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#428899

<em>@aadilk4 288160 wrote:</em><blockquote>this allows me to add a background image, but how would i change the color of the background and leave the body background white as per my picture, still no luck even when trying out

still no luck!
please assist</blockquote>

Try it just this way . . .


body#bd { background: #fff; }


[aadilk4 Friend aadilk4Join date: October 2010Posts: 29Downloads:0Uploads:6 Thanks: 4]

#428954

this allows me to make the entire background white, im not sure if you are not understanding me! currently on the default it is white only, i would like to use a blue background on either side of the template to match with my logo,
it normally looks like ….

and i would like it to look like ….

<em>@TomC 288163 wrote:</em><blockquote>Try it just this way . . .


body#bd { background: #fff; }

</blockquote>

---

Attachments:

1. 
2. 

[aadilk4 Friend aadilk4Join date: October 2010Posts: 29Downloads:0Uploads:6 Thanks: 4]

#429459

still no help???

any1 have a solution??

[aadilk4 Friend aadilk4Join date: October 2010Posts: 29Downloads:0Uploads:6 Thanks: 4]

#429728

still no help? whats happening, does any1 have a solution!

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#429843

I have roundtabled this issue with several of my Support Team colleagues, and the consensus is that you will need to create a special background image where the side’s are blue (or whatever color you want). The image can be thin (height wise) and you can use a “repeat-y” modifier within the CSS – though the width should be whatever width you set your website at.

make sense?

[aadilk4 Friend aadilk4Join date: October 2010Posts: 29Downloads:0Uploads:6 Thanks: 4]

#433367

still did not come right with my problem, could i upload to a site and give access so someone could assist me with it please???

[pixelzombie Friend pixelzombieJoin date: August 2010Posts: 339Downloads:2Uploads:49 Thanks: 32 Thanked: 168 times in 107 posts]

#433459

aadilk4, help is underway!
Tom asked me to help you out and here is your solution. You need to apply the background-color to your template.css as Tom said like


body#bd {
background: url(../images/bg_body.png) repeat-x #01b4f6;
border-bottom: 10px solid #1a1a1a;
color: #333;
padding: 5px 0 0;
}


Now the whole site is blue! Have fun with it :p – just kidding.

If you want a white background on your content, you need to add to your template.css (copy paste the whole block):


body.bd .main {
background: #ffffff;
}


You now have the main content blocks on a white background. There are still gaps between certain areas. If you don’t like them, please tell us. We’ll find a solution for you. You also might want to add a little padding to the .main class.

Cheers

Frank

2 users say Thank You to pixelzombie for this useful post

1. TomC
2. aadilk4

[aadilk4 Friend aadilk4Join date: October 2010Posts: 29Downloads:0Uploads:6 Thanks: 4]

#433834

thanks a mill, thats just what i was looking for,now need to ask! how would i add a lil white padding on either side?

have a look, iv uploaded it to a temp domain affiniti.co.za

[pixelzombie Friend pixelzombieJoin date: August 2010Posts: 339Downloads:2Uploads:49 Thanks: 32 Thanked: 168 times in 107 posts]

#433907

You’re welcome.
To add a padding is not that easy because there are many blocks of the template that doesn’t look good with it or have a padding on their own. Therefore you must apply either a padding to the .main class of the block (that will give you a white padding) or you need to increase the size (for the mainnav especially) because a white padding doesn’t look good. This is the customization for the default quickinstall setup.

Okay let’s say we want 10px white padding at every side.

Start at the mainnav. In order to avoid a 10px white bar at the menu and get rid of the white background, it is best to apply the background-color again and then increase the width.


#ja-mainnav .main {
background-color: #1A1A1A;
width: 960px;
}


For the header block you need to respect the padding it has and change it a bit.


#ja-header .main {
padding: 31px 10px 20px;
}


The slideshow needs the padding too, this css block doesn’t exist in the default template so you have to add it.


#ja-slideshow .main {
padding: 0px 10px;
}


The main content block needs it too


#ja-container .main {
padding: 0px 10px;
}


The bottom spotlights too


#ja-botsl .main,
#ja-botsl1 .main {
padding: 0px 10px;
}


Last but not least the navhelper and footer


#ja-navhelper .main,
#ja-footer .main {
padding: 0px 10px;
}


If you have any other blocks, you need to add the padding in this style. Always use #blockname .main to apply it.
I hope everything is clear thus far.

Cheers

Frank

[aadilk4 Friend aadilk4Join date: October 2010Posts: 29Downloads:0Uploads:6 Thanks: 4]

#434599

so far so good, only with the padding im a lil confused! and my aritcles dont have a white background, all have a blue background!!

[Author]

Posts