How to add a hover effect?

Hey Jasmin,

To style a button in it’s hover state, you need to create a selector with the :hover pseudo class. The following video shows how to do this in Microthemer: https://screencast-o-matic.com/watch/cbiblZlZqF

It also shows how to turn off the hover modifier so it’s not added to all future selectors.

I hope that helps. Please let me know if you need assistance with anything else.

Cheers,
Sebastian

Hey Jasmin,

I must confess I made that video for another forum user recently who had the same question. I will add it to the general docs soon!

Regarding your question about making a rectangle on the edges of a div, my initial thoughts are by setting the border-image property. This isn’t yet supported via the GUI so you would have to add custom styles via the custom code property group.

Or if that isn’t quite suitable, and you only need two rectangles along two edges of a div, creating two more ::before and ::after selectors is an option. You do this via the CSS modifiers facility I demonstrated in the :hover selector video. Here is an example of using ::before and ::after pseudo elements to add images either side of a heading: https://screencast-o-matic.com/watch/cFnVFGo4Ca

I can create a custom video for you if you can confirm exactly what you want to achieve.

Cheers!
Sebastian

P.S. You can set border-radius via the Border property group, but I don’t think that was your question.

Hey Jasmin,

This is an interesting challenge. In the future, it will be possible to clip the corners of elements in a cross-browser compatible way using the CSS property clip-path. There is a handy tool for generating clip-path CSS code called clippy. Unfortunately Internet Explorer and Edge don’t support clip-path at the time of writing. And so if you want the affect to apply to a wide range of modern browsers, you will need to use an alternative approach.

I recommend using ::before and ::after pseudo element selectors in combination with CSS triangles created by applying borders in a special way. These are advanced CSS techniques. And so I think the best way for me to explain is to actually do it on your site and record the process so you can apply the effect throughout the rest of your site.

If you are able to grant access to the site you want clipped corners on, please send login details via our secure contact form. If you would prefer not too, I can provide you with a design pack to get you started, which you can install via Packs > manage and then import via Packs > import.

Cheers,
Sebastian

Hey Jasmin,

A design pack is an export of Microthemer’s selectors and styles. I have imported the clipped corners selectors to your site, but the selectors need updating to target the elements on your site. What page on the site should have the clipped corners, as per your screenshot?

Cheers,
Sebastian