Changing default color of nested accordions

  • Resolved hbesnrughbeakrughbsfb

    (@hbesnrughbeakrughbsfb)


    3 years, 9 months ago

    Hi Matt,

    Thank you for your excellent plugin.

    The plugin’s nested accordions work great. The only challenge is changing their default color.

    Your clear instructions published on your page have been followed and the following CSS code has been placed under the Appearance > Customize > Additional CSS:

    /* Toggles and accordions */
.squelch-taas-override.squelch-taas-toggle .ui-accordion-header,
.squelch-taas-override.squelch-taas-accordion .ui-accordion-header {
  margin: 0.125em 0;
  padding: 0.125em 0 0.125em 1.75em;
  font-weight: bold;
  font-size: 1.25em;
  border-radius: 1.9em;
}

.squelch-taas-override.squelch-taas-toggle .squelch-taas-toggle-shortcode-content,
.squelch-taas-override.squelch-taas-accordion .ui-accordion-content {
  margin: 0.125em 0;
  padding: 0.125em 0.5em;
  font-size: 1em;
  border-radius: 1.9em;
}

/* Component containers
----------------------------------*/
.squelch-taas-override.ui-widget {
  font-family: 'Barlow',sans-serif;
  border-radius: 1.9em;
}

/* Interaction states
----------------------------------*/
.squelch-taas-override.ui-state-default, .squelch-taas-override.ui-widget-content .ui-state-default, .squelch-taas-override.ui-widget-header .ui-state-default {
  background: #008000;
  border: 0.125em solid #fff;
}

.squelch-taas-override.ui-state-hover, .squelch-taas-override.ui-widget-content .ui-state-hover, .squelch-taas-override.ui-widget-header .ui-state-hover, .squelch-taas-override.ui-state-focus, .squelch-taas-override.ui-widget-content .ui-state-focus, .squelch-taas-override.ui-widget-header .ui-state-focus {
  background: #008000;
  border: 0.125em solid #fff;
}

.squelch-taas-override.ui-state-active, .squelch-taas-override.ui-widget-content .ui-state-active, .squelch-taas-override.ui-widget-header .ui-state-active {
  color: #008000;
}

.squelch-taas-override.ui-state-active a, .squelch-taas-override.ui-state-active a:link, .squelch-taas-override.ui-state-active a:visited {
  color: #008000;
}

.squelch-taas-override.ui-state-active .ui-icon {
  color: #008000;
}

    The following are additional details:

    – The Latest version of WordPress is used
    – The Latest version of Astra theme is used
    – The Latest version of the plugin is used
    – The plugin settings are:
    – jQuery UI theme is “South Street”
    – Disable magic URLs is “Unticked”
    – Vanity URL prefix is “-”

    Unfortunately, all pages with the accordions exhibit the same problem – the “South Street” default color has not been changed to the green color: #008000, e.g.:
    https://floortab.com/aclone/arborists/gde-tree-services/
    https://floortab.com/aclone/services/tree-work-service/
    https://floortab.com/aclone/locations/australia/

    Your assistance in changing the “South Street’s” default color to the green color: #008000 would be greatly appreciated.

    Thanks!

Viewing 1 replies (of 1 total)
  • Plugin Author Matt Lowe

    (@squelch)

    Hi @hbesnrughbeakrughbsfb,

    Picking out a single rule at random from your shared code:

    
.squelch-taas-override.ui-state-active, .squelch-taas-override.ui-widget-content .ui-state-active, .squelch-taas-override.ui-widget-header .ui-state-active {
  color: #008000;
}

    The .squelch-taas-override class is provided as a prefix specifically for rules defined in the Squelch Tabs and Accordions Shortcodes CSS file, but this rule you’re overriding doesn’t appear in the Squelch Tabs and Accordions Shortcodes CSS file: that style comes from jQuery UI’s CSS. You can still use .squelch-taas-override to help avoid specificity issues, but you have to use it slightly differently, and it’s use is contextual depending on the rule you’re applying it to:

    
.squelch-taas-override .ui-state-active,
.squelch-taas-override .ui-widget-content .ui-state-active,
.squelch-taas-override .ui-widget-header .ui-state-active {
  color: #008000;
}

    (Note the addition of a space between .squelch-taas-override and .ui-state-active / .ui-widget-content / .ui-widget-header)

    The extra space (DOM descendent combinator) tells the CSS engine you want to find something INSIDE of something else with a specific class, where as a lack of space means you want to find an element that has BOTH classes applied. See:

    https://www.freecodecamp.org/news/css-selectors-cheat-sheet/

    Unfortunately I can’t tell you when you will need to put a space after .squelch-taas-override and when you won’t as it really depends on what you’re overriding inside of the jQuery UI CSS. It might be simpler to not use the .squelch-taas-override, try it without and, if it works, continue. If it doesn’t try putting it in front of your rule with a space, and if it still doesn’t work try it in front of your rule without a space.

Viewing 1 replies (of 1 total)
  • The topic ‘Changing default color of nested accordions’ is closed to new replies.