2

I'm trying Wyvern due to easier Typekit integration.

I have a simple CSS file linked, but oddly, I can't seem to set field's BG color.

When I load a publish layout, I see the BG color I have set, but once I enter the Wyvern field it switches to a near-white.

The CSS in question from my linked file:

body{margin: 10px; background:#2b2b2b;color:#ffffff;font:14px/1.256em "freight-sans-pro",sans-serif;padding:0;}
6
  • 1
    Is there a reason you are using body{} instead of say the field input class/id ? – Natetronn Dec 11 '12 at 1:15
  • @Natetronn - I didn't know that was possible. Do you mean targeting {field_id_42} or whatever it is? – 4midori Dec 11 '12 at 2:23
  • 1
    Targeting the field id itself. Use Firebug or Chrome inspector to find the textarea id maybe? I'm not sure this is the right way and I don't have a copy of Wyvern to check, sorry. – Natetronn Dec 11 '12 at 5:10
  • 1
    I think Wyvern is based on CKEditor like Wygwam, so your body styles in your CSS file should work. I take it the other styling is taking effect, just not the background colour? Have you tried using background:#2b2b2b !important; instead? May be best to post about this on the Wyvern support board, it seems to be actively monitored: boldminded.com/support/addon/8 – Janine Dec 11 '12 at 18:08
  • Yes. Adding !important was the fix. Not sure why that should be required, but it works. Thanks. – 4midori Dec 14 '12 at 0:15
1

Adding my comments as an answer as asked by Ultrabob:

Adding !important to the style that's not working can fix this:

body { background:#2b2b2b !important; }

As Ultrabob said, if this works, it means that there was another style at equal or greater specificity which was overriding the style you set. Using important! says that the style is important and should take precedence over other rules.

1

If you have are seeing your styles show up until you enter the field I would look for a more specific style for the field itself. That could be a style targeted at input or at :focus, most probably something that includes :focus because you say the background color is correct until you click into the field. body is a VERY nonspecific selector. That means that eny selector that gets more specific will override it.

If you don't see that a style reason for this, maybe look at the javascript to see if there are any events that change the background color when the fields come into focus?

I thing the developer tools in your browser are likely to be your friend on this one.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.