Hyperlink colours on hover and visited

AceCo55

On my homepage:
I have found the code to make the words "PRINTS", "DIGITAL FILES", "SEASON PACKAGES", "CUSTOM POSTERS" and "SEASON SLIDESHOW" link to their respective pages.
I works fine.
What I haven't been able to implement is for the links to:
1) be underlined
2) the colour to change on hover (#ff3399)
3) the colour to change once visited (#3333ff)

Second issue concerning breadcrumbs:
Allen provided me with some code to that the final element is slightly bigger and is coloured #fed401
I created the "Season Package" page today [http://www.acecootephotography.com/Photo-Products/Ordering-a-Season-Package] and it's breadcrumb is as expected via Allen's code.
However, the other four information pages under the "BUY" link do not show this breadcrumb.
I'm sure it is because I created them with a "Just this Page" setting.
Is there some code, potion, dance I can do to get the breadcrumb to behave like the rest of my site?

As always, any help on either, both of these issues would be gratefully received. Thanks

Lille Ulven

AceCo55 for your first problem...you need to implement some CSS on that page let me see if I can get you the right one...
Depending on your specs you would either add a CSS on "this page only" level or on "entire site"

/* Underline for all links no matter what hovered, visited or else happened before */
a {
text-decoration: underline !important;
} 

/* change color when hovered over */
a:hoover {
color:#ff3399 !important;
}

/* change color when visited */
a:visited{
color:#3333ff !important;
}

For your second problem...unfortunately the link that you've given leads to a "page not found error". So if you can correct your link, I'll see what I can do about it later.

Best of luck

Lille Ulven

AceCo55

Lille Ulven wrote: »

AceCo55 for your first problem...you need to implement some CSS on that page let me see if I can get you the right one...
Depending on your specs you would either add a CSS on "this page only" level or on "entire site"

/* Underline for all links no matter what hovered, visited or else happened before */
a {
text-decoration: underline !important;
} 

/* change color when hovered over */
a:hoover {
color:#ff3399 !important;
}

/* change color when visited */
a:visited{
color:#3333ff !important;
}

For your second problem...unfortunately the link that you've given leads to a "page not found error". So if you can correct your link, I'll see what I can do about it later.

Best of luck

Lille Ulven

Hyperlink Problem:
Thank you so much for taking the time to share your expertise.
Unfortunately (for me!) that code is affecting every link in my nav bar and menu system and since they are different colours/styles, it doesn't look so good.

The underline was a blue colour. I was hoping those 5 links (second line of homepage) would have the same coloured yellow line under them (#fed401), so that visitors would have a better chance of realising that they were links.
The colour "on hover" didn't seem to change for those 5 links, but the visited colour did change.

Second problem:
I created that "Season Package" page today and I know it is my fault but somehow I have it set up differently to the other four pages (all under the "BUY" menu item)
These are the addresses for each of those pages:
PRINTS: http://www.acecootephotography.com/Photo-Products/Ordering-Prints
DIGITAL FILES: http://www.acecootephotography.com/Photo-Products/Ordering-Photo-Files-and-Disks
SEASON PACKAGE (this is the one that is different from the rest): http://www.acecootephotography.com/Photo-Products/Ordering-a-Season-Package
CUSTOM POSTERS: http://www.acecootephotography.com/Photo-Products/Ordering-Posters
SEASON SLIDESHOW: http://www.acecootephotography.com/Photo-Products/Ordering-Season-Slideshow-Disk


I also got a 404 when I used my link in post #1, but I do get taken to the page if I use the BUY menu

Thank you for taking the trouble to look at my problem

Lille Ulven

AceCo55 Let's start with the links again
Do you have that line of text in a HTML box? If so it will be easy to fix by doing this:
For every link in that HTML box that is supposed to be fixed by the hover/visited/underline change it like so:

<a href="http://www.acecootephotography.com/Photo-Products/Ordering-Prints" [B]class="aceco_links"[/B]>Prints</a>

Then change the CSS code that I provided you with like this:

/* Underline for all links no matter what hovered, visited or else happened before */
a[B].aceco_links[/B] {
text-decoration: underline !important;
} 

/* change color when hovered over */
a[B].aceco_links[/B]:hover { /* hover to be spelled correctly should help the color to be seen :D - my bad spelling of course */
color:#ff3399 !important;
}

/* change color when visited */
a[B].aceco_links[/B]:visited{
color:#3333ff !important;
}

If you want you can call your class anything you'd like, except what smug mug is already using, I only used aceco_links to mark it as your change to links. So you could add classes for text... and easily separate them by name.

I'll take a look into your second problem now, maybe I can find a suggestion for that one too

Good luck

Lille Ulven

Lille Ulven

OK...problem two I can see it now

There are two ways of possibly attacking this:
1) copy the code you got from Allen into CSS boxes on every of the other 4 galleries
2) copy the code you got from Allen into a CSS box that is placed on "All Galeries" level in the customizer - but be aware that this would also change all other galleries of yours, so the first one might be the one that you really want to do if you don't want your Galleries under the Galleries menu to be affected.

Good luck again

Lille Ulven

AceCo55

Once again, thanks for your help.

Problem 1: Yes that text is in a HTML box
I will have a look at your solution tomorrow - getting late here and I'm a bit brain-dead after working on this most of the day!

Problem 2: the problem is, I can't find the code!
I have looked in every css placeholder that I can find
... but obviously not the one where it is!!!
What is frustrating is that I believe I saw it earlier in the day but I don't know where else to look

thumb

Lille Ulven

The code for your breadcrumbs should be this, if I am not completely mistaken:

.sm-user-ui .sm-breadcrumb-item h1 {
    color: #FED401;
    font-size: 18px;
}

Have a good night then and best of luck for tomorrow.

Lille Ulven

AceCo55

Lille Ulven wrote: »

AceCo55 Let's start with the links again
Do you have that line of text in a HTML box? If so it will be easy to fix by doing this:
For every link in that HTML box that is supposed to be fixed by the hover/visited/underline change it like so:

<a href="http://www.acecootephotography.com/Photo-Products/Ordering-Prints" [B]class="aceco_links"[/B]>Prints</a>

Then change the CSS code that I provided you with like this:

/* Underline for all links no matter what hovered, visited or else happened before */
a[B].aceco_links[/B] {
text-decoration: underline !important;
} 

/* change color when hovered over */
a[B].aceco_links[/B]:hover { /* hover to be spelled correctly should help the color to be seen :D - my bad spelling of course */
color:#ff3399 !important;
}

/* change color when visited */
a[B].aceco_links[/B]:visited{
color:#3333ff !important;
}

If you want you can call your class anything you'd like, except what smug mug is already using, I only used aceco_links to mark it as your change to links. So you could add classes for text... and easily separate them by name.

I'll take a look into your second problem now, maybe I can find a suggestion for that one too

Good luck

Lille Ulven

Thank you once again.
I tried that code but it seemed to only affect the underline - rather than the text itself. <img src="https://us.v-cdn.net/6029383/emoji/headscratch.gif&quot; border="0" alt="" >
It created a blue underline and only the underline changed colour when I hovered the mouse over the underline. If I hovered the mouse over the word nothing changed.

What I did was removed the underline css reference and manually added an underline to each of the link/words using <u> xxxx </u> (in the html box), so that they were the same colour as the text.

Still trying to figure this one out
What I would like, if possible is for the text itself to change colour:
* on hover (#ff3399)
* when visited (#3333ff) ... This one is not as important as the hover colour change

For the moment I have left in the css code


I have now fixed the second problem - many thanks to you!!!! <img src="https://us.v-cdn.net/6029383/emoji/clap.gif&quot; border="0" alt="" >

I have also found a third problem:
The hover colour on the menu bar is my old colour (#fe7c00)
I would like to change the hover colour to #fed401, to match the rest of my site.
I can't find the code or setting to affect the menu hover colour! <img src="https://us.v-cdn.net/6029383/emoji/headscratch.gif&quot; border="0" alt="" >

Ah Ha!!!!!!!!!!!! Found the code for menu bar hover.
It was in my Theme > Edit > Advanced > Hover colour <img src="https://us.v-cdn.net/6029383/emoji/wings.gif&quot; border="0" alt="" > <img src="https://us.v-cdn.net/6029383/emoji/wings.gif&quot; border="0" alt="" >

very much appreciate your time spent on this <img src="https://us.v-cdn.net/6029383/emoji/thumb.gif&quot; border="0" alt="" >

Lille Ulven

OK I found the remaining error for your links...
You have to specify the code for hover before you specify the code for visited...

So if you use this one instead in your CSS block:

/* Underline for all links no matter what hovered, visited or else happened before */
a.aceco_links {
text-decoration: underline !important;
} 
/* change color when visited */
a.aceco_links:visited{
color:#3333ff !important;
}

/* change color when hovered over */
a.aceco_links:hover { /* hover to be spelled correctly should help the color to be seen :D - my bad spelling of course */
color:#ff3399 !important;
}

It should finally work
Sorry didn't remember that rule for css regarding links yesterday.
So the correct order for specifying pseudo classes for a-elements is:
1. a:link
2. a:visited
3. a:hover and a:focus (no matter if you write hover or focus first in this case)
4. a:active

And then it just works fine.

Good luck

Lille Ulven

AceCo55

Thanks once again.

Now the links appear blue which it is hard to read against my background.
Is there any way to have the standard colour of those links to be #fed401 (until they are hovered over)?

Sorry to be a nuisance
I do appreciate the time you have spent trying to help me

Hikin' Mike

AceCo55 wrote: »

Thanks once again.

Now the links appear blue which it is hard to read against my background.
Is there any way to have the standard colour of those links to be #fed401 (until they are hovered over)?

Sorry to be a nuisance
I do appreciate the time you have spent trying to help me

I'm seeing this:

a.aceco_links:visited {
    color: #3333ff;
}

They're blue (#3333ff) because you've already visited those pages. I visited your 'Prints' page and when I came back to your home page, I see 'PRINTS' in blue. All other links show white.

AceCo55

YES! YES! YES!

Many times my ignorance astounds even me (and I get to see a LOT of it)

Thank you Mike - it was the last piece of the puzzle.
I removed the "visited code" which then made all the links my default "off white" color

I then added the color #fed410 to the css box [I have leaned a LITTLE bit thanks to Google!!!!]

It is now working how I wanted it.

MANY thanks to you Lille Ulven for the time and code you spent on this.
My feeble attempts to add code was actually stopping yours from working properly

Once again, I am indebted to you both for giving up your time and knowledge to help this poor old bloke. May good karma follow you both

Lille Ulven

You're welcome AceCo55...what was it they said 99% of the computer problems are sitting in front of it ;-) (Happens to me all the time)