How to add custom CSS code? I would like to add some ho...

At a glance

The community member is having difficulty injecting custom CSS code directly into Webstudio. They have added custom classes to some elements, but the advanced styling options in the right-hand panel do not seem to correlate with these classes. The community member has provided the specific CSS code they would like to use, which hides and shows certain elements based on hover events.

In the comments, another community member suggests inserting the CSS code inside a <style></style> tag in an HTML embed at the beginning of the page. However, the original community member tried this approach but did not get the desired result.

There is no explicitly marked answer in the comments, and the original community member ultimately decides to discard the interaction they were seeking, as they do not want to complicate their life further.

ssportsdali.ai

It seems there's no way to paste custom CSS code in Webstudio yet, but I may be wrong. I know there's a way to add advanced styling in the righthand side panel, but it seems I'm limited by the styles included in the list. In this case, I have have added custom classes to some elements, so obviously there's no correlation with the options listed there.

For context, these is the CSS code I would like to paste (I've already set up the classes):

.submenu-image-wto,
.submenu-image-usmca,
.submenu-image-dispute {
display: none;
}

.wto-link:hover ~ .submenu-image-wto {
display: block;
}

.usmca-link:hover ~ .submenu-image-usmca {
display: block;
}

.dispute-link:hover ~ .submenu-image-dispute {
display: block;
}

5 comments

OOleg Isonen

Seems like AI was able to answer?

ssportsdali.ai

Thanks, Oleg. I'm testing what the AI responded. I will let you know if I cannot get it done.

ssportsdali.ai

But in summary, it seems there's no way to inject custom CSS code directly on an element/component basis, right?

vviniciusmoreira.me

if I understand your goal correctly, just insert your code inside a <style></style> tag in an HTML embed at the beginning of your page.

ssportsdali.ai

Thank you Vinicius. I just tried doing that, but I am not getting the result I want. Anyways, I will discard the interaction I was seeking. I won't make my life complicated. Thanks again.

Add a reply

Join the Webstudio community

How to add custom CSS code? I would like to add some hover over interaction in the navbar.