CSS to change Link color.

Flow
1

Here is my next CSS/Theme dummy question, guys:

I’m trying to change the color of a Vaadin Link.
In the CSS, I say that “.h2” class should be big and red (#AA0000).
In the Java code, I call Link.addStyleName(“h2”). I expect the link to be big and red. It is big, but it is not red.

Here is the screenshot of firebug, showing the applied CSS and html for the link:


http://screencast.com/t/I2D9JaIm

(Note: this screenshot link will probably not be available forever, sorry for the late reader).

You see on the bottom right corner of the screenshot than the color #AA0000 (red) is supposed to be applied (according to firebug which puts no line across the color, and no other color is applied above in the list).
The screenshot also shows that the link is not rendered red. It does not work.

To make it work, specifying the color in .h2 is not enough.
If I apply the color it on “.v-link span” or on “a” in the CSS, it works (link is actually red). I could do that, but I’d like to understand why color “.h2” does not color the link in that case.

Any idea?

Many thanks.
John.

2

I was going to say “works for me” as it worked straight out of on the first try. I did notice then that my html tree was different - I had

in the DOM and not
as you had. the reason was that I gave it null as the resource and it didn’t make it a link. After adding a resource the font turned black again, as you suggested.

The reason seems to be that the reindeer has some more specific rules for the theme than you have, meaning that there is probably somewhere “.v-link a{}” specified, which is more specific than “.v-link {}” (which is the same as your .h2{}). If the “.v-link a” is specified, it will override your “.h2” even if you define h2 later on in the css.

That’s why you seem to have to specify the css on the same level, so putting ".h2 a { color:#0000aa } should fix your problem.

Here is a
picture
 and the sources of my test:
Application class

package com.example.playground;

import com.vaadin.Application;
import com.vaadin.terminal.ExternalResource;
import com.vaadin.ui.Link;
import com.vaadin.ui.Window;

public class PlaygroundApplication extends Application {
    @Override
    public void init() {
        Window mainWindow = new Window("Playground Application");
        setMainWindow(mainWindow);

        Link link = new Link("hello", new ExternalResource("http://vaadin.com"));
        mainWindow.addComponent(link);
        link.addStyleName("h2");
        setTheme("playgroundtheme");
    }
}

styles.css

@import url(../reindeer/styles.css);

.h2 {
	font-size: 24px;
	line-height:30px;
	color: #AA0000;
	font-weight:bold;
	letter-spacing: 0;
	text-shadow: 0 -1px 2px #CCCCCC;
}

.h2 a {
    color:#AA0000;
}
3

Thank you very much for your reply, Jens.

I could understand that a more specific rule declared by Vaadin has more priority than my rule. What I don’t get is that firebug does not show me that Vaadin more specific rule.

In your screenshot, you see color:#AA0000 not strikethrough, and your link is red.

In my screenshot, you see color:#AA0000 not strikethrough, but the link is not red.
If the link is not red, I expect firebug to strikethrough
color:#AA0000
, and show me another rule above, with another applied color.
Don’t you think?

4

Yeah I was wondering about why firebug wasn’t showing the rule where it gets the final color from, when clearly something is specifying it. Seems weird.

I found the color entry in Google Chromes Inspector (firebug equivalent) as color:-webkit-liink; but I couldn’t find any similiar in firefox.

5

My stab at figuring this out, w/o actually trying anything:

Your .h2 is applied to the div-element, not to the a-element, and a-elements tend to magically have a color that is not actually CSS and does not show up in firebug (for historical reasons, I guess - you know link,alink,vlink in the body-tag…)

Try saying .h2 a { color: #A00 } - does that help?

…of course I could be wrong, but don’t worry, I’m sure Jouni will correct me eventually… :wink:

Best Regards,
Marc

EDIT: uhm, no, wait - you’re actually saying that… Or perhaps the problem is that there is no space between “:” and “#” in your .h2 a -rule? The symptoms are consistent with the a-element having no CSS style…

6

Thank you for your replies, Jens and Mark.

Mark, there was a space between color: and #AA.

7

Marc, yeah. It is probably that easy - standard CSS (or what ever style it might be) defined into the browser for common links. I just thought that they were all redefined somewhere in our themes. :slight_smile:

John, the space is allowed, it doesn’t matter if it is there or not.

8

AFAIK Reindeer does not alter the color of links, while Runo does.


Why Johns CSS does not work is still a mystery, though.


Edit:
 Wait, did I mis-read that (twice)? Does it work now as expected w/ the .h2 a -rule? And your question was why .h2 alone is not enough? Then it’s explained above: a-elements have a default style that does not show up in firebug.

//Marc

9

Hi Marc,

I currently use the following selector to change the color “.v-link a span”, and it works fine.
We still don’t know why firebug was misleading (my first screenshot), but it’s probably something related to links, because for the rest of the CSS tuning, I had no problem (once I better understood the priority of selectors).

FYI, here is my CSS about links:

/************************************************** links */


.v-button-link span.v-button-caption,   /* Vaadin Buttons with the "link" style */
.v-link a span  /* Vaadin Link objects */
{
	color: #AA0000;
	text-decoration: none;  /* no underline, unless mouse is on it... see a:hover */
}

.v-button-link span.v-button-caption:hover,   /* Vaadin Buttons with the "link" style */
.v-link a:hover {  /* Vaadin Link objects */
	text-decoration: underline;   /* When mouse over a link: show underline */
	color: #AA0000;
}

.v-label .v-button {  /* blackbelt ButtonLink object */
	cursor: pointer;
}

Thank you for your help guys!

10

Yeah, it is how Marc said, related to “html defaults”. If you do a empty html page with only a link, it will be blue before it is clicked and purple after - even if you don’t have any css at all. This is just browser standards, and as they are not specified in the page, they will not show up in firebug.