Selected links color

[Brad]

Hi, I updated my css declarations so that when someone clicks on a
search result link, it will turn a different color than the rest.

I notice though the search results link only stays the clicked color for only a few seconds. Anyway to change this so the clicked link remains the clicked color until someone exits the page? It would be nice if users could tell what links they have already selected.

Thanks a lot! Brad

[David]

Normally if a user clicks on a link a new page is loaded and any color changes on the previous page are irrelevant.

Or are you opening a new window for each click? Or do you mean you want a color change when a user navigates back to the page at some point in the future?

This page about Zoom and CSS includes a section on changing the color of links.

If you still have a problem can you post the URL to your search function.

-------
David

[Brad]

I'll make myself more clear.

Somone has done a search and search results have just appeared on the search template page. When they click on a link a new page opens, (the search results page is still open also). ...also the link changed to a new color when they clicked on the link.

They look through some info and close the other web site page and are ready to click on another link on the search results page. But the link they clicked on before, the color had changed back quickly so they can't tell which link they already clicked on before.

Any way to get the onclick color to stay at least until they go to a new search results page?

Hope that helps, thanks!

[Brad]

Forgot, by the way, I think its an awesome program anyway so if it can't be done its no big deal. Thought it would just be nice if it did.

[Ray]

There are several pseudo-classes for links in CSS. This includes "a:link", "a:visited", "a:active" and "a:hover".

What you are describing sounds like you are using either "a:active" or "a:hover" to specify the visited colour. This will behave similar to what you said, the style will revert back to the unvisited style once you either move your mouse (hover) or it is no longer selected (active).

To define a permanent style for a visited link, you should use "a:visited".

For more information and examples, refer to one of the online CSS tutorials on this topic, such as the following:
http://www.w3.org/TR/REC-CSS2/select...pseudo-classes
http://www.w3schools.com/css/css_pseudo_classes.asp

[Brad]

Are you sure its visited. When I change its css color it changes the color of the link BEFORE its clicked on. Should I be using .result_title a:visited
or a:visited for this. Not sure what the difference is.


Thanks~~

[Ray]

a:visited defines the style for ALL visited links on the page.

.result_title a:visited would define the style for only the visited search result links.

Please see this support page here (see the section titled "Changing the appearance of links"):
http://www.wrensoft.com/zoom/support/css.html

[Brad]

Using either of these still only makes the link turn a different color for a moment, not permanently until you leave the page.

I even put it directly on the search template page between the <style> tags with no luck.

[Ray]

You might have other CSS definitions in place which are overriding the behaviour. The C in CSS stands for Cascading, and any other CSS or .css files linked to it could potentially be overriding/inheriting the effect of your CSS classes defined in that file.

Can you give us a URL to your search page in question? This would save a lot of time.

[Brad]

Thanks, I'll check a couple other things.

[pawley]

Can't get result_title to change to custom colors

Hi Folks,

New to Zoom, but love it already. I have successfully added it to a new site easily and everything works as expected except I can't figure out why the result_title link for searches comes up in a default blue font with red active and purple visited colors. I have added this to the CSS of the page for the template:

.result_title a:link {
    color: ff9900;
    text-decoration: none;
}
.result_title a:visited {
    text-decoration: none;
    color: a0a0a0;
}
.result_title a:hover {
    text-decoration: underline;
    color: ffffff;
    font-weight: bold;
}
.result_title a:active {
    text-decoration: none;
    color: ffffff;
}

When I put the "bold" in or out for the "hover" action, the result_title behaves as expected, so the CSS classes are being recognized, but the font color settings are being ignored.

I found this thread and looked at the help file noted, but I am stumped as to what i am doing wrong. You can see my page online here:

http://www.marsinc.com/custommachine/search.php

and a search for "ISO" will return many hits, "Woburn" will return 2 hits.

Thanks for any help,
Kevin

[Ray]

I think it's just a simple matter of missing the "#" character before your colour codes.

So your CSS should look more like the following:

.result_title a:link {
color: #ff9900;
text-decoration: none;
}

I think that should do it.

[pawley]

Thanks, that did the trick.

Kevin

[Lee Jordan]

CSS Specificity

Here's a useful article about overriding CSS styles
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

if you've got:

#content a:visited { }

but are now writing further down the file

a:visited { }

Then the first rule takes more importance

One good way of getting around this is to mark out your search results "section" as such with a div, it is after all a new section of the page and that's what the div tag is for. so you'd have:

<div id="searchresults"></div> 
 
 
#content #searchresults a:visited { }

and that will override your content style but only for your search results, which is exactly what you want, the content div is unaffected by this rule which again is what you want because now you have structure. Section out your pages with ID's and you are onto a winner, rely on classes and it gets messy. Of course structure is very important in your pages and if you don't have a well structured document you need to start there and understand why the document is a bit messy and what you need to do to tidy it up.