Joomla Templates Club 406,261 posts

[iabichino Friend iabichinoJoin date: October 2010Posts: 50Downloads:67Uploads:42 Thanks: 9 Thanked: 1 times in 1 posts]

#1040729

Hi, I am just wondering where can I change coloros of:

1. HEADER = black or so #333333. Where "Directory" word is placed
2. ORANGE BAR, where menu is placed.
3. BLUE where "Search Now" module is placed
4. Footer 1
5. Footer 2

Since the colors provided do not fit my project and I would like more personalization of it. I have tried to browse and look for the coding in …/templates/*** etc… but cannot find it. Would you kindly instruct me? Thanks

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1040845

Hi
If you want to create your own theme, you can use ThemeMagic and apply colour on the new theme.
Here is documentation.

If you want to change the color of a specific part, I suggest you to use inspect element of firebug from the browser to check the style classes and then override the code in the custom.css file.

Regards

[iabichino Friend iabichinoJoin date: October 2010Posts: 50Downloads:67Uploads:42 Thanks: 9 Thanked: 1 times in 1 posts]

#1040981

Good morning Pankaj,
thanks for your reply.
ThemMagic doesn’t allow me to change the colors of headers (where menu and sub menu are located), the black and the orange ones, neither the search module which is blue.

I was already using inspector of firebug, but couldn’t find it. Would you kindly indicate which files contain the css styling to modify them?
Thanks indeed for you help!

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1041079

Hi
Copy the style code with class name when u use firebug.
example
If you want to change the background color of the submenu (orange menu)
add the below code in cusotm.css file
change the color code in below code with your color code

.t3-subnav {
background: #fe6945!important;
}

You can take a look here if you want to change the standard colors.

Turn off css compression from template options and you will see the file path where the style code is present.

Regards

[Author]

Posts