CSS background inherit from theme

[Homdax]

I ike to use Table of Contents widget for lengthy posts or pages, but not sure how to have that inherit the css from the theme. In particular related to background colour.

[Alexis]

Hi @Homdax ! You may use the following code snippet to make the Table of Contents take the theme’s background color:

.ub_table-of-contents {
    background-color: <devtools-color-swatch style="font-family: inherit; font-size: inherit;">inherit</devtools-color-swatch>;
}

If the resulting color is something you didn’t expect, you can use a specific color value.

Please let us know how it goes.

[Homdax]

Hi @Alexis

Thanks for the code snippet. I tried placing it in the addtional CSS setting you have down right on every post/page, but it did not seem to work (still white background).

Then I tested inserting the same snippet in the Themes (ColorMag Pro) additional CSS settings but it would not accept it.

Where exactly would you like me to place that code?

This is the site/post: https://www.soholabs.io/10/setting-up-an-sftp-server-backup-with-bitvise/

• This reply was modified 3 months ago by  Homdax.

[Alexis]

Hi @Homdax ! Something seems to have went wrong with the code snippet I copied. The “<devtools-color-swatch>” tag isn’t supposed to be included. Since I’m unable to edit my earlier response, I’m including the fixed version below instead.

.ub_table-of-contents {
    background-color: inherit;
}

You’re right, though, that you have to use the additional CSS setting for adding it.

However, we’ll be releasing a new version of the plugin soon. It will include options to set custom colors for various parts of the Table of Contents. The code above is very likely to be overriden by it. If you want to keep the above code snippet from being overriden, you may also add the following code snippet as a precaution:

.ub_table-of-contents > * {
    background-color: inherit !impotant;
}

Please keep in mind that you will be unable to use the new custom color feature of the Table of Contents as long as the second code snippet is present.

[Homdax]

That worked, thanks.

Much appreciated and looking forward to new versions. 🙂

[Homdax]

I see now how the upgrade you made gave additional color controls and I appreciate that. However I had to stick the CSS to the Theme CSS

.ub_table-of-contents {
    background-color: inherit !important;
}

since the default setting of the block would still force wrong colors.

Also I see now that the Custom CSS does not seem to work as override.

I tried CLEAR’ing the colors several times

but it just pops back to whatever might have been active.

Maybe you may want to consider UB to inherit used Theme colors as default behaviour?

• This reply was modified 2 months, 3 weeks ago by  Homdax.

[Homdax]

As it is one has to first find and make a note of the colors to use, not
a big issue, granted, and then implement them on every single instance
where you use the block. Considering I intend to be making a huge number
of posts/pages it feels a bit like extra work to have to edit every UB
element to use the theme default.

And in that, perhaps adding a control for whether you like a border or not…

• This reply was modified 2 months, 3 weeks ago by  Homdax.