Selecta – change black accent color

upengagement · Member · Jul 15, 2014 at 7:20 pm
Copy link

Add topic to favorites
Hello,

I would like to know how to change the black accent color on the site (e.g. under the site title) to another color. I would also like to know if I can use a logo for the site title instead of a font?

THANK YOU!

The blog I need help with is: (visible only to logged in users)
sandymcfadden · Member · Jul 15, 2014 at 11:54 pm
Copy link
Hi upengagement,

This would go in a two part. Both of these will require you to add css to your Custom CSS area.

To change the black accent color on the site this should do it for you.
```
#header,
.current_page_item > a,
.widget,
#footer-widget-area {
    background: #ccc !important;
}
```
Where “#ccc” is what ever color you would like instead of black.

you might need to change the color of text as well so you could add
color: #000; where #000 is what ever text color you would like as well.

I experimented a bit with adding a logo. How I did it was by creating an image that was 260 x 75 pixels and then uploaded it as the header image. I skipped the cropping stage so it would stay that size.

Then I added the following CSS
```
#header-image img {
    margin-top: 20px;
    width: 260px;
    height: 75px;
}
#branding {
    display: none;
}
```
Let me know how you make out.
upengagement · Member · Jul 16, 2014 at 12:15 am
Copy link
Excellent. I’ll give all this a shot and let you know how it works out. Thanks a bunch!
upengagement · Member · Jul 16, 2014 at 12:19 am
Copy link
I’d like the logo to be let’s say twice as long as what that black bar would fit, however, width wise its obviously large enough!… would there be a way to increase the header bar so that the logo could also be longer vertically?
sandymcfadden · Member · Jul 16, 2014 at 12:27 am
Copy link
Sure so if you created an image say 260 x 150 pixels.

You would just need to change the
height: 75px;
to
height: 150px;

The bar should expand to fit the image height. Does that make sense?
upengagement · Member · Jul 16, 2014 at 1:50 pm
Copy link
Okay, so I tried this. Maybe you can take a look:
So the logo has a large white space behind it but im thinking that’s because it’s a jpeg and it needs to be cropped properly in another program like photoshop. Or maybe I’m wrong?
Also, as you can see, the menu buttons have a black background when i navigate to their relative pages… eek!
any ideas?
sandymcfadden · Member · Jul 16, 2014 at 1:58 pm
Copy link
Hi upengagement,

You’re thought on the logo is correct. You would either need to create the jpeg with the same color background as you will be using in that header section, or you would need to create it as a transparent png file.
I would suggest the transparent png as then if you change that header color you won’t have to re make your logo image.

For the menu buttons did you include the !important tag after the color declaration that I have in the code above?
I didn’t see it in your code and I think you will need it to have the menu.
upengagement · Member · Jul 16, 2014 at 2:07 pm
Copy link
Bingo!
Awesome.
Thanks a lot for your help.
I will change the logo for a png file and see how it goes. If I have any problems, I’ll write… soon!
:)
Thanks again
sandymcfadden · Member · Jul 16, 2014 at 2:08 pm
Copy link
No problem glad it worked!
upengagement · Member · Jul 16, 2014 at 3:38 pm
Copy link
Hmm, I just made a few pages as child pages (Engagement has two child pages: Employee Engagement and Customer Engagement), and when I click on either, the Engagement (parent) becomes black… any ideas?

thanks a lot…. again!
sandymcfadden · Member · Jul 16, 2014 at 3:47 pm
Copy link
Sure sorry about that. I added one more selector to the code I had previously that should take care of that for you.
```
#header,
.current_page_item > a,
.current_page_ancestor > a,
.widget,
#footer-widget-area {
    background: #ccc !important;
}
```
upengagement · Member · Jul 16, 2014 at 4:48 pm
Copy link
SUPER :)
thanks a lot!

No items found.