Public Forums 71,145 posts

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#195901

Hi,
I am making some modifications to the template t3_bs3_blank with custom css.
I was able to change the color of the menu (.t3-mainnav ), header background (.t3-header), footer background (.t3-footer)
but I do not know how can I change the background color for the following Module Positions
1. sidebar-2,
2. position 1-4
3. position 5-8
4. navhelper
5. footer 1-6
I also want to add a line seperator between the component and sidebar-2 positions
You might be better seen in the imaage what I want

Thanks in advance,
Midhat

---

Attachments:

1. 

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#527171

You have a choice. You can do this in Less if you want to or more simply using module suffixes and set them in custom.css. You’ll have to set the module suffix for each module then.

example

you can add this code

.pink{
background: #pink
}
.green{
background: #green
}
.yellow{
background: #yellow
}
.lilac{
background: #lilac
}


obviously replace the words for the colour with the hex code you want. Then in the module add the suffix with a leading space i.e. ” yellow” (without the quote marks). For the one with the side bar, you’ll have to add in a background-image that is the line bar.

See if that works for you.

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#527172

Thanks for the prompt reply
But, I do not want to change modules backgroud. I want to change module position background,
I want to change my background module position, so as to change the background beneath the module (complete zone as shown on image)

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#527175

Can you post the url?

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#527176

no, it’s on wamp, localhost.
sorry

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#527181

Then you need to use Chrome Developer Tools to find the <div> and then adjust it as you want and save it to custom.css.

i.e.

.t3-footer {

• border-top: 1px solid #eeeeee
• background: #f8f8f8
• color: #555555

}


There you can change the background colour (background) and the text colour (color).

If you haven’t used Chrome before it’s very simple, just right click and ‘Inspect Element’ and follow it. There are lots of tutorials on the web. Suggest you make regular backups using akeeba – you can then transfer to a live site using the tool too.

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#527182

thanks,
I will try

[Author]

Posts