additional css column text

louwerj

On a specific column text I want a different link hover color, different from the colors in the betheme options. When I use this option it's not working:

css: a:hover{color: #0000ff; text-decoration:underline}

What am I doing wrong?

url: https://nieuw.troedoor.nl/

Phil

Hi,

In the additional CSS, you should put the attributes like background, color, font-size, etc.

It should look like this:

The CSS you prepared should be placed in the Page options in the Custom CSS field.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

louwerj

Hi Phil,

Is there no other way?

It must not affect the complete page, only on a specific text column.

Phil

Add to that column a custom class, and put it in front of your CSS.

.myClass a:hover{color: #0000ff; text-decoration:underline;}

If this will not work try to add !importnat at the end of your attributes.

a:hover{color: #0000ff!important; text-decoration:underline!important;}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

louwerj

Hi Phil, no succes....

When I add "background-color: red;" like your example it's working fine. But when I do the same with:

1. a:hover{color: #0000ff!important; text-decoration:underline!important;}

Nothing....Any idea?

When I take a look in the debugger zone Firefox the style is loaded.

Best regards,

Jeroen

Phil

Did you put your custom CSS code in the Custom CSS field in the page options?

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

louwerj

No, it must not affect the complete page. Only a specific text column:

Kind regards!

Phil

It will not affect your whole page, and you are still putting the wrong construction in the Additional CSS.

Please, do the following:

edit the Column Text element, go to Advanced -> Custom, and in the CSS classes put the name of your class (I used myClass but you can name it however you want). Do not put anything in the Additional CSS field.

open the Page Options, scroll to the bottom where you will find the Custom CSS field, and put there your custom CSS code

 .myClass  a:hover{color: #0000ff!important; text-decoration:underline!important;}

This is the result:

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

louwerj

Sorry, I misunderstood you. Now it works perfectly. Thank you! You're the best :-)