Multiple hover colours for text links

[aiden]

Hi Armin/Marius/All,

Looking for some advice on how to implement multiple hover colours for text links, below is the style that I'm looking to achieve:

The top pair displays the styles that I'm looking for with those specific links: black text, then colour on mouseover/hover.

The below pair displays the style that I currently have achieved through the Customise feature in LayTheme, (grey, then black on hover) which I would like to use for every other instance of links on the site.

Is there any way to achieve the effect that I'm after? ie a way to set multiple hover colours for different instances. Had a look on the forum already but couldn't seem to find a similar query (apologies if I've missed it.)

Thanks in advance!

A

[mariusjopen]

Dear @aiden
Can you post a link to your website?
We will then have a look and inspect that!

But also every menu-item has an ID.
So you can ad dress it via CUSTOM CSS:

Many wishes!
Marius

[aiden]

Hi @mariusjopen
Sure, linked below are the pages currently in use
http://handtoearth.net/information
http://handtoearth.net/index
http://handtoearth.net/splash

However they are currently not using the Lay Theme inbuilt menu, rather just using a text box, as I'm not sure if it's possible to have the title and menu as one running sentence with commas as in the design previously linked, however let me know if I'm mistaken and that can in fact be achieved, it would obviously be preferred if it can be done this way! :-)

If that's not possible then I was wondering if it was instead possible to target specific words in the text box for different coloured links? This would make the /splash page design achievable.

Sorry this is perhaps a bit of an odd request also!
Best,
Aiden

[Richard]

This post is deleted!

[Richard]

Hi @aiden

I believe i understand what you are trying to achieve, your description was nicely shown :)

The trouble with having all item's (menu titles) within a single text box is that we cannot easily target individual items and specify the different colours for each when we hover.

For this reason it would be easier for each item e.g YOGA to be its own link

Once we have them as individual links we can then target them by their "data-id" using Custom CSS,

and we can assign different colours to each when we hover.

I have set up a very crude version of what i think you are after
Is this a possible option for you?

create text and add a hyperlink to it, leaving out the comma ,

As a first choice - Lay Theme has an option to add a class or ID to any given block.

then using Custom CSS we can target the individual element and assign it a unique 'hover' colour e.g Pink

Second option:
Look into Custom CSS As Marius had suggested earlier if you are unfamiliar, specifically "a" links - "data-id" and "hover"

http://laytheme.com/documentation.html#custom-css-styling

based on the link's "data-id" we can also assign a 'hover' colour

here we see "data-id-3" so we can call this id in css

Does this help as a solution?
Am i understanding correctly?

Best wishes & good luck
Rich

[aiden]

@Richard-Keith

Hi Rich,

Thanks for this, really appreciate it! I think the second option with data-id would be preferred, as I'd still like to run all the links within one line and looks like that would be possible as I could then target each page link, however I'm struggling with the exact CSS to do so, for example, on the splash page:

I'm aware that to target the Index link i need to target 'data-id="1967"' but i'm struggling to get the CSS to do so:

/* Coloured Link Tests */
.slug-splash body[data-id="1967"] a:hover{
	color: #ffb432 !important;
}

I'm aware that the above code is probably very far off but I feel if you were able to explain the basics of how to target the data-id and point me in the right direction then I'd be able to fill in the rest through my own (limited) CSS knowledge.

Thanks again!
Aiden

[Richard]

Dear @aiden

Cool !
Good to hear that one of these options works for you.

[data-id="1967"]:hover {
    color: red !important;
}

Ive noticed you already have "hover" being applied to all links - they go from grey to black,

If you need to keep this, it will most likely over-ride the individual hover colours,

For this reason you can add " !important " at the end of the color -
to give it precedence.

Hope this helps and Good luck!

All the best
Rich

[aiden]

@Richard-Keith

Hi Richard, this was perfect! Many thanks for all the help!

Best,
Aiden

[Richard]

Dear @aiden

Awesome!
Another victory on the Lay Theme Forum

Thank you for Using Lay Theme :)

have a wonderful day
Rich