[Resolved] Headline Icon hover colour = text hover colour

[Ian]

Is there a way to do this:

1. Use Headline + icon and locate icon ABOVE headline.
2. I can get hover colour for text link
3. Would also like the icon to be clickable and carry the same hover colour as the text. I know I can just run a separate icon but would rather the icon be attached to the headline on hover.

Using a GB Button, hovering on text does indeed also change colour of icon but a GB Button cannot place icon above text.

Is that possible?

[Elvin]

Hi Ian,

For #1:

You should have this option on the UI.
https://share.getcloudapp.com/12uP0e09

For #2:

This setting should change the link color and link hover color – https://share.getcloudapp.com/4guPZQKG

For #3:

That will require custom CSS.

Let us know which element you need help w/ this. 😀

[Ian]

I have done 1 and 2. I would like to accomplish 3. Can you share some css?

[Elvin]

I have done 1 and 2. I would like to accomplish 3. Can you share some css?

You’ll have to add icon-hover-color to the Headline block w/ icon’s Additional CSS class(es).

You then add this CSS:

.gb-headline.icon-hover-color:hover .gb-icon svg{
    color: red !important;
}

Change red to your preferred color.

[Ian]

I see what you are doing there. Nice.

Is there a way to make the icon clickable or attached to the text when hovered short of coding it inside the svg field individually?

[Elvin]

Is there a way to make the icon clickable or attached to the text when hovered short of coding it inside the svg field individually?

The headline block isn’t really created for this purpose. The rendered HTML isn’t made for it.

If that’s what you were aiming for, consider using a Button block instead. 🙂

And then do the icon about text using CSS.

[Ian]

For this instance, I needed the icon above the text which the GB Button cannot do. Will hand code the SVG field to make it work. Thank you for the css, appreciate it!

[Elvin]

For this instance, I needed the icon above the text which the GB Button cannot do.

It’s possible with CSS. We basically have to set the button’s wrapper to flex-direction: column;.

Will hand code the SVG field to make it work. Thank you for the css, appreciate it!

No problem. 😀

[Ian]

Hey flex-direction: column; worked. Added align-items: baseline; and I think I may be able to get the GB Button to work. Let me keep trying. As always, thank you Elvin!

[Elvin]

No problem. Let us know if you need further help w/ it. 😀

[Author]

Posts