Archived topic

Help with CSS Classes

5 replies · Started by Math on February 25, 2022

Viewing posts 1–6 of 6

February 25, 2022 at 2:24 pm #2133918

Hi,

On this page I'm using a CODE block and I added an Additional CSS Class called copy-me.

Using copy-me CSS class, I'm able to adjust the font size, background colour, etc.

I would like to also adjust the "Copy" button as well (font-size, spacing, etc). How can I adjust the button using the same CSS class?

Thank you.

February 25, 2022 at 2:54 pm #2133934

Hi there,

Not sure if I fully understand but looks like the CSS for the button is in your child theme already:
https://www.screencast.com/t/ywgBN0mlig

February 25, 2022 at 2:59 pm #2133944

Hi Leo,

Yes, the CSS is already there for the Copy button. However, I would like to adjust the font size and background colour of the button using the Custom CSS Class copy-me.

As of now, no changes are taking place because the Custom Class is only targeting the Code block (i.e. pre[class*=language-]).

I would like to adjust the CSS for the button as well, but I'm not sure how to go about it. Would you be able to assist?

February 25, 2022 at 3:17 pm #2133951

However, I would like to adjust the font size and background colour of the button using the Custom CSS Class copy-me.

I'm not sure what you are trying to achieve there but this CSS should work for adjusting that button.

div.code-toolbar>.toolbar>.toolbar-item>button.copy-to-clipboard-button {
    background: #000;
    font-size: 20px;
}

If you want to learn more about HTML and CSS then this free course might be helpful:
https://www.codecademy.com/catalog/language/html-css

February 25, 2022 at 3:34 pm #2133963

Thank you.

February 25, 2022 at 3:40 pm #2133970

No problem :)

This archived topic is closed to new replies.

Start building better websites today.