Css question

Hi guys,

I installed a hellobar on [URL=“http://www.yourvancouvermortgagebroker.ca/”]my site by installing the following code in the header:

<script type="text/javascript" src="//www.hellobar.com/hellobar.js"></script>
<script type="text/javascript">
    new HelloBar(38896,52291);
</script>

I have some CSS in my theme that is adding a text shadow to the link in the hellobar.

body {background: #E7E9EB url("images/header_bg.jpg") no-repeat center top; text-align: center; line-height: 21px; font-family: Arial, Verdana, sans-serif; font-size: 13px; color: #434343; text-shadow: 1px 1px 1px #fff; min-height: 25px; }

How can I remove this using CSS? I don’t want to lose the text shadow on the rest of the site. Thanks

Putting aside that I despise those bars…all you should need would be something like #hellobar-pusher { text-shadow: 0px; }

(you might need 0px 0px 0px, but I don’t think you will…)

Hi there,

Just adding “text-shadow:none;” to your “hellobar-container” div should work.


#hellobar-container {
  text-shadow: none;
}

Haha, why? From a design standpoint?

Ok so here is what I have and it doesnt seem to be working.

html:

<div id="hellobar-container">
<script type="text/javascript" src="//www.hellobar.com/hellobar.js"></script>
<script type="text/javascript">
    new HelloBar(38896,52291);
</script> 
</div>

CSS:

#hellobar-container {

  text-shadow: none;
}

Oh, ok!
Did Dave Maxwell’s solution work?

Not the way I have tried it. Could there be an issue with having a div that only contains JS? Sorry - I am new

No probs.
We are talking about the same text shadow, aren’t we?
The text shadow on the black button (“Watch the Video”) is applied elsewhere, namely:

a {
  text-decoration: none;
  color: #262626;
  text-shadow: 1px 1px 1px white;
}

If this is what you are trying to get rid of, you will have to do something like

#hellobar-container a{
  text-shadow: 0px;
}

Because I find them extremely irritating because it stays there when I scroll the page unless I close it. It’s obtrusive (and the one here at the main SP page is worse…) Add to that all that overhead (did you look at the css that was added for that simple bar?) and I don’t see the value in it…

The only place I see the text shadow is on the button. If I inspect the button, this shows as the css which needs the text-shadow:none added to it. You’ll need to hunt it in the ugliy css added to the page for it.

#hellobar-wrapper.hellobar-button-default.hellobar-button.hellobar-dark-images #hellobar-container a.hellobar-cta-link, #hellobar-wrapper.hellobar-button-default.hellobar-button.hellobar-dark-images #hellobar-container a.hellobar-cta-link:link, #hellobar-wrapper.hellobar-button-default.hellobar-button.hellobar-dark-images #hellobar-container a.hellobar-cta-link:visited

I agree with you 100% on that.
I ended up writing a user script for Chrome to block it. I could let you know how, if you like.

[ot]BTW, how do I put an off-topic box around this??

  • put [ ot ] [ /ot ] minus the spaces around the text you want to make off topic…
    [/ot]

Ya I understand. The value is that it significantly increases conversions… Might be worth looking into though on my end if most people find it intrusive.

Thank you, sir.