change color of promo bar

[tsimarketing]

I want to change the color of the promo bar to something other than my accent color. I have found other forums that changed the color of the hover color, which I tried and it worked. But I want to change the color of the bar before you hover over it. Is there a custom CSS for that?

[Rui Guerreiro – SUPPORT]

Hi,

Sure try to add the code below to your custom css option and change the color for the desired one.

#base-promo {
background-color: #8D8D90!important;
}

-Rui

[tsimarketing]

Great! That worked. However, now the text is black when your not hovered over it. Is there something I can add to this code to change the color of the base text?

[Rui Guerreiro – SUPPORT]

Sure. Add the code below.

#base-promo > p, #base-promo.footer-promo-text > a, #base-promo.footer-promo-arrow > a {
color: #FFF!important;
}

-Rui

[tsimarketing]

I have a follow up question to this now that we are putting together our mobile site. The promo bar is exactly how we want it to look on our desktop version of the website, but it is gray on our mobile version. Is there a way to change the color of the mobile version promo bar to be the dark blue background with white text?

[Rui Guerreiro – SUPPORT]

Can you confirm the link to that page?
thanks
-Rui

[tsimarketing]

tsihealthcare.com/test

But that promo bar isn’t just on one page, it is on several pages throughout the site.

[Rui Guerreiro – SUPPORT]

It seems the css it’s different from what I provided in October.

It looks like this now

@media only screen and (min-width: 769px){
#base-promo {
  background-color: #0A548B!important;
}
}

it should be like this

#base-promo {
  background-color: #0A548B!important;
}

If it doesn’t work provide me admin access.

-Rui

[tsimarketing]

When I look back at all my custom css I don’t see that @media css code. I only see the code below for the promo bar. And that makes the promo bar the right colors on my desktop, it’s just not doing the same thing on mobile view. On mobile view the hover color is correct, but the base color is gray and that is not what I want.

#base-promo.footer-promo-arrow:hover, #base-promo.footer-promo-text:hover, .sf-promo-bar.promo-arrow:hover, .sf-promo-bar.promo-text:hover {
background-color: #6caae4!important;
}
#base-promo {
background-color: #0A548B!important;
}
#base-promo > p, #base-promo.footer-promo-text > a, #base-promo.footer-promo-arrow > a {color: #FFF!important;}

[Kyle – SUPPORT]

Hi

Not sure what all the custom css is about, just go to Color Customiser > Promo Bar

– Kyle