Skip to toolbar

Find answers, ask questions, and connect with our
community around the world.

Forums Forums General Questions CSS re-styling of tabbed content?

  • CSS re-styling of tabbed content?

     Alexis updated 2 weeks, 1 day ago 2 Members · 4 Posts
  • Dave

    October 6, 2020 at 3:23 am

    .wp-block-ub-tabbed-content-tab-title-wrap and other classes appear to be style in an XML payload which overrides even theme customization CSS. Where is this generated? I’d like to override the border styles, but this prevents traditional approaches.

    Also, the selected tab doesn’t seem to have a class identifier or other characteristic that can be styled. (My CSSfu is not Level 5, as I’m sure you can tell.) Have I overlooked something obvious?

  • Alexis

    October 7, 2020 at 2:43 pm

    Hi @DaveReedMe ! Active tabs in the tabbed content block always have the “active” class. Your CSS selector should be “”.

    To override the plugin style, you may need to add the ID of the block to the beginning of the CSS selector. You can find this by inspecting the source code and going to the block’s main element. For example, since you’re looking for a tabbed content block, you’ll need to find the ID that’s formatted as “ub-tabbed-content-(unique hexadecimal code for the block)”. Your custom CSS should be able to override the plugin style once you specify the block ID. With all else being equal, your custom CSS should prevail over the plugin CSS.

  • Dave

    October 7, 2020 at 2:58 pm

    Thanks for the reply, Alexis. Are those hex codes dynamically generated at runtime? Or are they a design-time artifact?

    • Alexis

      October 7, 2020 at 11:32 pm

      They’re dynamically-generated in runtime, and they’re added to ensure that multiple instances of any block could be styled separately from each other, i.e. the style for an instance of a certain block won’t affect another instance of that block.

Log in to reply.

Original Post
0 of 0 posts June 2018