Changing highlight colors in an elegant theme

By Steve Voorhees on Tuesday, 20 October 2015

Posted in General Issues

Replies 4

Likes 0

Votes 0

I'm looking to change an elegant theme. They're all great, but I want a different color other than blue, green, red, or yellow. I already altered the files in the images folder to what I want, but that only changes the color around the blogger avatar. I'm sure there are some of the css files that need to be changed, but I'm having trouble finding where.

Could you please let me know what files need to be modified and what lines/codes?

Thank you.

Hi Steve,

Not really sure what color do you want but you can try to inspect the element of the css for the elegant theme and adjust the color accordingly. You can try to apply/modified the following css code below in order to change the color.

div#fd.eb .eb-navbar {

    background: #0C0C0C;

}



div#fd.eb .eb-post-foot {

    background: #0C0C0C;

}



div#fd.eb .eb-navbar-nav>li.active>a {

    background: #1a5c9c;

    color: #c1dbf4;

}

If you want to directly modified the file, you can go to /components/com_easyblog/themes/elegant[color]/blogs folder

Hope these help.

Ezrul Fazwan

Tuesday, 20 October 2015 16:46

0 Likes

0 Votes

0 Comments

#232118

Hello Steve,
The theme color codes at /components/com_easyblog/themes/elegantblue/styles/variables_.less, once you updated the file you will need to recompile the LESS file at backend http://screencast.com/t/Fd1P1wJnvF . Please backup your custom theme files we are not responsible for any custom theme loss.

Chang

Wednesday, 21 October 2015 11:15

0 Likes

0 Votes

0 Comments

#232352

Thank you. I'll look through the files again. I found one CSS file that looked like it had some color codes, but it was so long and jumbled together, I'm not exactly sure what needs to be changed and what left alone.

I'm not wanting to change any colors in the main background. It's the colored highlights around the avatar, the menu bar, etc. that I'd like to modify to match the colors of the site template.

Steve Voorhees

Friday, 23 October 2015 11:16

0 Likes

0 Votes

0 Comments

#233139

Hi Steve,

To customize styles you need to have basic css knowledge and images editing skill.

E.g.:
For elegantyellow theme
1. Menu bar color at /components/com_easyblog/themes/elegantyellow/styles/variables_.less
2. Avatar color at /components/com_easyblog/themes/elegantyellow/images/

Chang

Friday, 23 October 2015 11:58

0 Likes

0 Votes

0 Comments

#233147