CODEWITHSUNDEEP
cssgwt
Tum
Tum

Reputation: 3652

Why does the Anchor still use the default css even I styled it differently (GWT)?

In Gwt, we have these default css for Anchor:

In css file

.gwt-Anchor:link {color:black;}
.gwt-Anchor:visited {color:#00FF00;}

.gwt-Anchor:active {
    color:#0000FF;
}

.gwt-Anchor:hover {
    color:#FF00FF;
    cursor: pointer;
    cursor: hand;
}

That means whenever i created a new Anchor, it will use the default.

But i want a custom one with blue color. That is I want everything is exactly the same as default Anchor except that the Anchor is blue.

So I created these:

.blueAnchor:link {color:blue;}
.blueAnchor:visited {color:#00FF00;}

.blueAnchor:active {
    color:#0000FF;
}

.blueAnchor:hover {
    color:#FF00FF;
    cursor: pointer;
    cursor: hand;
}

Then in Java file

Anchor loadMoreAnchor=new Anchor("Load More");

loadMoreAnchor.addStyleName(getView().getRes().css().blueAnchor());

Nothing happened to loadMoreAnchor as it still use the default Amchor css.

What is the problem? If you can fix it, can you ALSO tell me how to do to avoid duplicated css code. Look at gwt-Anchor & blueAnchor, they are the same but have 1 different. We cold do things like:

.blueAnchor:link {color:blue;}
.gwt-Anchor:link {color:black;}
.gwt-Anchor:visited, .blueAnchor:visited {color:#00FF00;}

.gwt-Anchor:active, .blueAnchor:active {
    color:#0000FF;
}

.gwt-Anchor:hover, .blueAnchor:hover {
    color:#FF00FF;
    cursor: pointer;
    cursor: hand;
}

But I am not sure i am doing correctly.

Note: This is the actual javascript code of loadmore anchor: <a class="gwt-Anchor GEMVVLYDKI" href="javascript:;">Load More</a>

Upvotes: 0

Views: 574

Answers (4)

stevec
stevec

Reputation: 61

I'm not a fan of using !important for things like this, since it's too blunt an instrument.

The rule in the theme "wins" because it arrived after your CSS, and therefore any conflicting rules got overridden by the incoming theme.

Try adding html or html body to the beginning of your rule, as in:

html body .gwt-Anchor:link {color:black;}

That will give the rule more priority, since it's more complex than the rule in the theme

Upvotes: 0

Andrei Volgin
Andrei Volgin

Reputation: 41089

Add "!important" to your styles.

You add your own style definitions, but GWT still applies its own standard styles, and they win. You either have to override these styles in the GWT CSS, or mark your own styles as "!important".

EDIT:

You have to specify all pseudo-classes that you want for your links:

.blueAnchor:link {color:blue !important;}
.blueAnchor:visited {color:#00FF00 !important;}
.blueAnchor:active {color:#0000FF !important;}
.blueAnchor:hover {color:#FF00FF !important;}

You don't need to include the other properties that you did not change (e.g. cursor).

This is why I prefer to copy GWT's standard CSS into my own CSS file, and then I do not include a standard GWT style in my application. This way I can make changes in one file only, and there are no conflicts between two different style sheets.

Upvotes: 1

jollins
jollins

Reputation: 48

Please show html output. It would be difficult to see if you are referencing the a tag directly or the element it resides in. @pravin's answer might work but its difficult to say for sure. "A" tags have their own set of css rules by default which means they dont pick up the parent rules by default.

Upvotes: 0

Pravin W
Pravin W

Reputation: 2521

CSS would be 

.gwt-Anchor:link {color:black;}
a.blueAnchor:link {color:blue;}

.gwt-Anchor:visited,
a.blueAnchor:visited{color:#00FF00;}

.gwt-Anchor:hover,
a.blueAnchor:hover {
    color:#FF00FF;
    cursor: pointer;     
}

.gwt-Anchor:active,
a.blueAnchor:active {
    color:#0000FF;
}

Please find helpful jsfiddle: http://jsfiddle.net/9GLG8/1/

Upvotes: 0

Related Questions