Okay
  Public Ticket #395304
.Toggle - Background-color
Closed

Comments

  • C started the conversation
    March 18, 2015 at 4:07am

    Hi there,


    I can't figure out how to customize the Toggle component's background colour. And there doesn't seem to be a way to assign an Extra Class name to this component type to make page specific css changes.

  •  8,849
    Tahir replied
    March 18, 2015 at 4:49pm

    Hey,

    You will have to add a class to that row or column and then use that to target the 'toggle' or "toggle h3" class . Please see: https://support.woothemes.com/hc/en-us/articles/203105957-Customizing-your-theme-with-Firebug .


    Thanks

    ThemeNectar Support Team 

  • C replied
    March 19, 2015 at 5:29am

    Yep. That's how I would normally make custom CSS changes. However this isn't working in this case.


    I've tried assigning a custom class to the row, and tried accessing the classes .toggle and .toggle h3 directly

    Custom CSS in question:


    .toggle{

    background-color : #403e3b;

    }


    Pretty simple. Should work. But doesn't.

    I've also tried modifying the custom.css with no success.

  •  8,849
    Tahir replied
    March 19, 2015 at 1:43pm

    Hey,

    Try adding !important to increase the css specificity .See url : www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ .

    Thanks

    ThemeNectar Support Team 

  •  2
    Rian replied
    March 21, 2015 at 9:41pm

    i tried and it worked.

    what about the font color?

  • C replied
    March 21, 2015 at 11:31pm

    Font color works.

    But background-color does not. Could it be because the style.css has !important already applied?

    I've had to go ahead and make the changes in the style.css file. Not ideal, but needed something quick.



  •  8,849
    Tahir replied
    March 23, 2015 at 3:44pm

    If !important does not work try adding "html body " to the selector to increase its specificity.

    Thanks

    ThemeNectar Support Team