Color of Active Page Link

  • 1
  • Question
  • Updated 8 years ago
  • Answered
I'm not using the standard site navigation. Instead I've built my menu into a text box and set up the links manually to each page.

How can I change the color of the link once I have clicked on it and becomes the active page.

I've tried this, but doesn't seen to do the trick....

( put the period in after the < to disrupt the creation of a link for the purpose of this post)

I have the ("text-decoration: none;") in order to remove the underline. This works great.

However, I'm trying this to change the color of the ACTIVE page link.(alink="color: rgb(0, 160, 198);") This is NOT working.

I do not have any experience with html code before trying to build this website, so I'm not sure if this is the wrong code all together. If anyone could supply me with the correct code this would be great!
Photo of Bob Weinmann

Bob Weinmann

  • 11 Posts
  • 0 Reply Likes
  • frustrated

Posted 8 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Bob

I suggest that you use this code to set up how you'd like your links to look:

<!--<style type="text/css">
A:link {text-decoration: none; color: blue;}
A:visited {text-decoration: none; color: green;}
A:active {text-decoration: none; color: orange}
A:hover {text-decoration: underline; color: red;}
</style>-->

I hope that works for you! Please let me know if you have any trouble with it.
Photo of Bob Weinmann

Bob Weinmann

  • 11 Posts
  • 0 Reply Likes
Ok, following the the logic of the code exactly as you have written I'll tell you some problems I am having.

- my links remain underlined
- my unclicked neutral links are green when they should appear blue, correct?
- I never see the occurrence of orange after clicking a link. The link should be orange once I click the link and the current page is loaded?

- hover is the only thing working correctly.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Bob

You can add that to an HTML Widget and place it at the top of your page. This will automatically apply to all your links on that page. So you do not need to alter each link to do what you want.

I hope that makes sense. Please let me know if you have further questions.
Photo of Bob Weinmann

Bob Weinmann

  • 11 Posts
  • 0 Reply Likes
Sanja, I figured out the solution in between you answering that question. However, I edited that last post with a new question. I'll repost it here as well. Thanks again for the help!

Ok, following the the logic of the code exactly as you have written I'll tell you some problems I am having.

- links are underlined
- my unclicked neutral links are green when they should appear blue, correct?
- I never see the occurrence of orange after clicking a link. The link should be orange once I click the link and the current page is loaded?

- hover is working correctly

I think that I have just learned that in fact "active" links will only turn that color at the moment of being clicked. "link" is the neutral link color. "hover" is the color when you hover the pointer over the link. "visited" will change the color of the link after visiting the page and THEN returning to the original page.

I should clarify what exactly I want done, as I believe that this language may not be capable of what I want to produce.

First off, i know that these first two are within the capacity: no underline, black text for the link.

However, I want the link text to change color once I have clicked on the link and THAT current page is up. NOT a change of color in the link once I return to the original page. I know I can achieve this by individually modifying the color of the link text on each individual link within each separate page, but obviously this is exhausting and not very convenient for any changes.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Bob

Would you mind posting your URL so that I can see what you have done so far? Thanks!
Photo of Bob Weinmann

Bob Weinmann

  • 11 Posts
  • 0 Reply Likes
i haven't updated the code for each individual page, but you can find on the "mailing list" "email us" links that I have messed around with those links.

http://aquasalon.yolasite.com/

Another question too. You mentioned making a HTML widget with the CSS code. My only concern with this is that I do not want every single link on my website to behave the same way. However, if the majority of the links were satisfied with the CSS code, then the few other links with different attributes could manually be manipulated inline?

This is why I chose to put the CSS code within the existing text box.

You'll notice too that some are underlined and some aren't, if they aren't underlined that's because I've included style="text-decoration: none;" inline.
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi Bob,
Sanja isn't online right now, but I will let her know you have commented on the thread and when she is back online she will be able to come and respond. Thanks for your patience.

Emmy
Photo of Bob Weinmann

Bob Weinmann

  • 11 Posts
  • 0 Reply Likes
Thanks.
Photo of Bob Weinmann

Bob Weinmann

  • 11 Posts
  • 0 Reply Likes
Disregard the last post as I have made some adjustments which nullify some of my previous statements.

Here's an outline of my main concerns.

-You mentioned making a HTML widget with the CSS code. My only concern with this is that I do not want every single link on my website to behave the same way. However, if the majority of the links were satisfied with the CSS code, then the few other links with different attributes could manually be manipulated inline, and this would override the CSS?

Ok, following the the logic of the code exactly as you have written I'll tell you some problems I am having.

- links are underlined
- my unclicked neutral links are green when they should appear blue, correct?
- I never see the occurrence of orange after clicking a link. The link should be orange once I click the link and the current page is loaded?

- hover is working correctly

I think that I have just learned that in fact "active" links will only turn that color at the moment of being clicked. "link" is the neutral link color. "hover" is the color when you hover the pointer over the link. "visited" will change the color of the link after visiting the page and THEN returning to the original page.

I should clarify what exactly I want done, as I believe that this language may not be capable of what I want to produce.

First off, i know that these first two are within the capacity: no underline, black text for the link.

However, I want the link text to change color once I have clicked on the link and THAT current page is up. NOT a change of color in the link once I return to the original page. I know I can achieve this by individually modifying the color of the link text on each individual link INLINE within each separate page, but obviously this is exhausting and not very convenient for any changes.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--

Hi Bob,

Sanja's off line so I thought I would chime in.

The reason why some of the links are not playing the game is they are following different rules... For example the 'facebook' link... That has rules set directly to it (i.e. it does not listen to the CSS) The link itself has a text underline : none rule in the 'a' tag and the text (follow us on facebook) has a 'span' rule which controls it's colour.

The CSS is used to control the majority of the links and if you want have a one off you add rules straight to it.

So back to getting the 'majority' of your links to work, You are using text widgets so the links are following the 'sys_text' rules

to change them use this CSS

<style type="text/css">

.sys_txt a:link {
text-decoration:underline;
color: blue;
}
.sys_txt a:visited {
text-decoration:underline
color: red;
}
.sys_txt a:hover {
text-decoration:underline
color: red;
}

</style>

If I were you I would change the colours to actual colour codes. i,e red = #ff0000

Now on to active links - They are not really used in this situation, I would just set the CSS to control the majority of the links and then set the 'active' link to whatever colour you like by doing something like

<a style="color: #ff0000;" href="whatever.com">

-->

Hope that makes sense. If it does'nt get back on the thread, Sanja's better at explaining stuff than me :)

Lee
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
PS. The CSS on 1 page will not effect another.
Photo of Bob Weinmann

Bob Weinmann

  • 11 Posts
  • 0 Reply Likes
Thanks Duke. I did in fact want my "facebook" link to be outside the rule of the CSS. This was concerning all the links below that in the black text.

Thanks for clarifying. I'm wondering though....if Include the CSS into the text box it only effects the html for that text box and NOT separate text boxes, BUT if I include the CSS into an HTML widget then it affects the entire page? Is this correct. Or does the CSS affect the entire page regardless?

I have another question about this though. If I include the CSS into that one text box which make it
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--

Text box or html widget does not make any difference except the text in a text widget follow pre set rules (the original CSS of the site) as I explained before, if you want to use CSS to control links or text ina text widget you will need to use the snippet I left in the previous comment (.sys_txt)

Any style rules on a page effect the whole page, in actual fact a text widget is just a div as is a html widget but the text div has CSS rules it follows the html does not adhere to any pre set styles.

Links or text or whatever follow the last rule before the element itself...

i.e.

<style type="text/css">
A:link {text-decoration: none; color: blue;}
</style>

<a style="text-decoration: underline; color: red;" href="whatever.com">

The link in the example above would be red and underlined.

Hope that makes sense.

I would suggest removing the CSS you already added and add what I left in the first reply, see what happens.

If you have any more questions just ask.

Lee.

-->
Photo of Bob Weinmann

Bob Weinmann

  • 11 Posts
  • 0 Reply Likes
Thank you very much for the input and explaining everything.

ok, i think it finally got it working. I was having trouble, I think that is because you forgot a few semicolons after your 'underline'? I just thought that I would point this out if somebody else uses this thread as a tutorial.

I've come to find that this code does not actually satisfy my needs in the first place. This is what I want to achieve.....

Click a link and it changes to a different color on the next page as an indicator of the current selected page.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--

There is a correct way to do it with CSS, you would add a class or id but if your going to do it you need to change the way the menus written.

I would just change the specific links colour on each page.

1.On all pages put the CSS above (1st comment sys_txt)

2.Then, on for example the 'products' page go to the link code and add style="color: #FF0000;"

<a href="products.php" style="color: #FF0000;">PRODUCTS</a>

Then do the same thing on all the other pages.
That would do what your trying to achieve.

-->
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hey Lee,
Thanks for all your help on this thread today, it's so great to have your expertise here on the forum! Your site is looking excellent :)

Emmy
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Bob

My apologies for not being online to answer your questions. It sounds like you were in good hands with UK Duke.

Please let us know if you still need further help.
Photo of Bob Weinmann

Bob Weinmann

  • 11 Posts
  • 0 Reply Likes
Yeah, Duke your last suggestion is what I had done originally and was looking for something to add into CSS to accomplish this, but it sounds like it will open up a whole new can of worms. I can live with it this way.

Thanks for your help. I've certainly learned a lot so far and has helped broaden my knowledge in html.