How to apply CSS Styles to Page Elements

Design help General
1

46
461224×908 60.7 KB

Hello,

i put a custom code in the code tag.
But i can´t use it.

How i put a class in the body?
Or can you help me, how i can use the styles.

Thank you very much.

Kerstin

2

Well, you give some of your elements one of the classes that you have described in the custom code.

But you can give all those properties to your elements inside designer, why did you need custom code in the first place?

3

Hello Dram,

thanks for your answer. I would like to build this section like on this page: https://www.embymusic.com
but i didn’t understand how it is working, so i though i will make it with an custom css code.

37
373046×514 262 KB

4

Hey Kerstin,

@dram is correct, you can do everything you’re looking to do in the Designer. But after seeing what you’re trying to build, might I suggest some flexbox and SVG icons, and styling from there?

Check out this project I built for you: https://preview.webflow.com/preview/social-icons-for-forum?utm_medium=preview_link&utm_source=designer&utm_content=social-icons-for-forum&preview=21da86fab2c566c4741250c21263673a&mode=preview

Using Flex and some SVG social media icons I pulled off of the internet, I was able to achieve that same layout you see on www.embymusic.com. You can also animate this with the Webflow Interactions panel to do whatever you’d like — grow, shrink, reveal color, etc. (I didn’t do this in my project listed above, but you can definitely add it in.)

Check it out and let me know if it gets you where you need to be!

1 Like
5

Hello Mattvaru,

thanks for your help. I got the Icons like you, and i also get the grow effect, but I also like the effect that the color of the icons will change on the hover, but if i put a backgroundcolor on it the field for example on the facebook item, the f and the corner get the colors, but the icon is still the same color like before.

6

Hi Kerstin,

Not sure if you were trying to achieve the exact style of the website you pictured, but I updated the read-only link to give you something similar. Using the grayscale filter (pictured below - bottom right corner), I was able to gray out each icon and then set the filter to be removed on hover.

image
image1920×1080 229 KB

Does this help achieve the look you’re going for?

7

If you want to be able to give your icons colours on hover you may use svg’s for that. Please refer to this topic.

2 Likes
8

thanks for your help. Sorry for the late answer. I found a solution. I made a font, so I could change the color with a hover. :slight_smile: