Support » Theme: Twenty Eleven » child theme's works…but not always?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Many times, when you see that some of your CSS isn’t working, it might mean that you have a syntax error somewhere in your stylesheet. What will happen is that the rules before the syntax error will work correctly, but the rules after the syntax errors won’t.

    In your case, there’s a syntax error for this rule in your child theme’s style.css file:

    .visual-form-builder fieldset{
    	background-color:#c6cb67

    You need to add the closing right bracket } at the end. Then all of the rest of the rules should work.

    Wow!

    I’ve looked at it so many times I could swear nothing was missing! 😛

    Thank you very much! 🙂

    CrouchingBruin

    sorry but I’d like to ask you something more.
    I’m customizing a few things in VFB forms through the child theme style.css file. Happens that I’m not being capable of doing some changes for example, change the legend color:

    .visual-form-builder .vfb-legend {
    color: #ddd;
    }

    This is not loading. Do you have any ideia why?
    http://decomds.com/

    Thank you.

    I didn’t see that particular rule in your child theme’s style.css file, but the reason why it’s not working is that there’s a rule with an identical selector in the plugin’s stylesheet, and because the plugin’s stylesheet comes after your child theme’s stylesheet, the plugin’s rule is going to take precedence (you may remember from the rules of precedence concerning CSS that when two or more rules have the same selector or specificity, the rule which comes last will take precedence over earlier rules).

    So, the solution is to give your rule more specificity. You can do this by adding the .visual-form-builder-container class to the beginning of your rule’s selector like this:

    .visual-form-builder-container .visual-form-builder .vfb-legend {
       color: #ddd;
    }

    Including that one additional class will add 10 points to the selector’s specificity, so it will override the plugin’s rule.

    I see…In fact I didn’t remember the precedence rule..what about if I disable the plugin css and then copy the css to my file? Is this a safe pratice?

    Thank you very much!

    I’m not sure how you would go about disabling the plugin’s CSS without modifying the plugin’s code, and you probably don’t want to do that.

    You can try moving your CSS to a custom CSS plugin. Some CSS plugins will bring their stylesheets in after all other plugins’ stylesheets, so if you have a rule with an identical selector to a previous rule, yours will take effect. I know JetPack’s custom CSS option will do that.

    Thank you very much for all yout kind explanations! I’ll try to do that.

    Thank you!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘child theme's works…but not always?’ is closed to new replies.