Adding CSS to different pages on Sydney

Hello Sydney Community,

I am currently working on a specific landing page and am trying to add buttons on top of it: http://www.emilie-nerot.com/prestations/

The buttons already work but I would like to add the following behaviour in CSS:

.icon-menu {
width: 100px;
cursor: pointer;
opacity: 0.5;
}

.icon-menu:hover {
opacity: 1;
width: 100px;
}

=> I would like the buttons to appear lighter and to darken when hovering them with the mouse.
I added that through the proper Sydney Additional CSS module but it does not seem to work.

How could I manage CSS for specific pages and not only the homepage with this module?

By the way, I added same size images for all the buttons but the left one is still bigger than the other 6. Any hint on this? :slight_smile:

Thank you so much once again!

Eme

Hello there,

You should add a class name to your buttons. Edit the text widget where you inserted your buttons, and then add a class attribute to the A tag, so it will look like this:


<a href="http://www.emilie-nerot.com/prestations/#pg-40-1" class="icon-menu"><img src="https://i2.wp.com/www.emilie-nerot.com/wp-content/uploads/2017/04/1-community-management.png?w=1170" alt="icone community management" scale="0" width="90" height="90"></a>

To apply CSS code on specific page, use page ID.


.page-id-40 .icon-menu {
  width: 100px;
  cursor: pointer;
  opacity: 0.5;
}

.page-id-40 .icon-menu:hover {
  opacity: 1;
  width: 100px;
}

Regards,
Kharis

Thank you very much Kharis, everything works perfectly!

Enjoy your day,

Eme

You’re welcome, Eme!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis