How can I add style for Anchor in GWT using UIBinder? I have following piece of code in UiBinder template XML:
<g:Anchor ui:field="forgotPassLink">Forgot password?</g:Anchor>
I know that .gwt-Anchor { } is used for styling this widget, but still no idea how to style hover effects. In normal CSS it would go like this:
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Do I have to handle this with BlurEvent and FocusEvent handlers on Anchor? If so ...that is boilerplate code..
Use the same CSS pseudo-classes with the gwt-Anchor class:
.gwt-Anchor:link {color:#FF0000;}
.gwt-Anchor:visited {color:#00FF00;}
.gwt-Anchor:hover {color:#FF00FF;}
.gwt-Anchor:active {color:#0000FF;}
You can also use a.gwt-Anchor but it isn't strictly necessary.
If you are using uibinder with the gwt HyperLink, it can be done like this:
<ui:style>
.mystyle a:link {
color:#3F3F3F;
text-decoration:none;
}
</ui:style>
<g:FlowPanel>
<g:Hyperlink styleName='{style.mystyle}'/>
</g:FlowPanel>
Does this work (using UIBinder style names) ?
<ui:style>
.a:link { color: #FF0000; }
.a:visited { color: #00FF00; }
.a:hover { color: #FF00FF; }
.a:active { color: #000FF; }
</ui:style>
<g:HTMLPanel>
<g:Anchor ui:field="forgotPassLink" styleName="{style.a}">Forgot password?</g:Anchor>
</g:HTMLPanel>
Define your style like this:
<ui:style>
.menuItem a:link {color: white;}
.menuItem a:visited {color: white;}
.menuItem a:hover {color: white;}
.menuItem a:active {color: white;}
</ui:style>
And use it like this:
<g:Hyperlink styleName="{style.menuItem}" targetHistoryToken="home">Home</g:Hyperlink>
Related
I have a simple setup with a:link, a:visited a:hover and a:active all defined at the top of my style sheet. I also have a div where I've defined an a:link color for anchors inside of it. When I do this those links do not inherit the remaining pseudo classes for hover and active.... until I click that div's link and it has thus been "visited", at which point the pseudo classes start working. Why is this?
the CSS...
a:link {
color: blue;
}
a:visited {
color: purple
}
a:hover {
color: red;
}
a:active {
color: pink;
}
#theDiv a:link {
color: green;
}
the HTML...
The First Link
<div id="theDiv">
The Second Link
</div>
http://jsfiddle.net/ZKztj/7/
#theDiv a:link has a higher specificity than all your other selectors and is overriding them until the link no longer matches the :link selector, at which point it matches the :visited selector.
All browsers set a default style for anchor elements.
You need a more specific selector to override:
#theDiv a:hover {color:red}
I am currently using:
a:link {
color: #FF0000;
text-decoration: underline;
}
But on a certain page in my website I want to be able to have my links in a separate colour.
What is the best way to do this through CSS?
I don't want to do:
<font color="#00FF00">...</font>
As i know this is deprecated code
Add a class to every link you want to affect:
HTML: Link
Then add this CSS or similar to your style sheet:
CSS: a.alternate {color:#00FF00;} //or whatever
Demo: http://codepen.io/hwg/pen/Aalkb
apply different class attribute to that link. for ex:
HTML
link1
link2
CSS
a:link {
text-decoration: underline;
}
.red{
color: #FF0000;
}
.black{
color: #000000;
}
see this Fiddle
I have stated the .topics:link in CSS but the color is still blue.
HTML is -
<ul class="topics">
<li>United States</li>
</ul>
CSS is -
.topics:link {
color: #666665;
}
You're using :link wrong. Use .topics a instead:
.topics a {
color: #666665;
}
.topics a{
color:#666665;
}
Use this
if you only want to change the color of text in <a> tag then use this
.topics a { color: #666665;}
The :link selector is used to select unvisited links.
like
a:link
{
background-color:yellow;
}
these are some pseudo class of a tag
a:link {color:green;}
a:visited {color:green;}
a:hover {color:red;}
a:active {color:yellow;}
In my Page the following CSS is set:
a:link {
color: #0094DE;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #0094DE;
}
a:hover {
text-decoration: underline;
color: #DD127B;
}
I want to Change the Link color inside a div which has a class assigned to it.
I tried the following :
register:link{color:#FFFFFF;
}
Where register is the name of the div in which i want to change the link color.
How can i do that?
Also how to change the color for hover link over the same div?
.register a:link{
color:#FFFFFF;
}
It can be something like this:
a.register:link { color:#FFF; text-decoration:none; font-weight:normal; }
a.register:visited { color: #FFF; text-decoration:none; font-weight:normal; }
a.register:hover { color: #FFF; text-decoration:underline; font-weight:normal; }
a.register:active { color: #FFF; text-decoration:none; font-weight:normal; }
how about something like this ...
a.register:link{
color:#FFFFFF;
}
I think there is a confusion about what the OP is actually asking.
This solution:
a.register:link {color:#FFF}
...changes the color of a link whose class is "register". But that's not what the OP was asking.
And this solution:
.register a:link {color:#FFFFFF;}
...changes the color of a link that itself has no class but is placed inside of a div with class "register". And that's what the OP was asking.
Both of these answers are being upvoted here but only the second one is correct answer to the original question.
#register a:link
{
color:#fffff;
}
If you want to add CSS on a:hover to not all the tag, but the some of the tag, best way to do that is by using class. Give the class to all the tags which you want to give style - see the example below.
<style>
a.change_hover_color:hover {
color: white !important;
}
</style>
<a class="change_hover_color">FACEBOOK</a>
<a class="change_hover_color">GOOGLE</a>
I think you want to put a, in front of a:link (a, a:link) in your CSS file. The only way I could get rid of that awful default blue link color. I'm not sure if this was necessary for earlier version of the browsers we have, because it's supposed to work without a
smaller-size version:
#register a:link {color: #fff}
I was trying to use a class with psuedo class in the less css mixin
a:link{
color:#138CB4;
text-decoration:none;
}
a:visited{
a:link;
color:#84B6CD;
}
But out put I got is this, which an invalid css
a:link{
color: #138CB4;
text-decoration: none;
}
a:visited{
a: link;
color: #84B6CD;
}
Am I missing something here or mixins don't support pseudo classes yet.
I was a little confused by this at first, too, and found myself jumping through hoops to get it to work. Although your post is old enough that it might pre-date this functionality for all I know.
Anyway, if you're just trying to add additional styles to an existing style via pseudo-selectors, you can use the '&' operator. It works kind of like a 'this' keyword, and turns nesting into a simple combination. So you should be able to do:
a {
color: #138CB4;
text-decoration: none;
&:visited {
color: #84B6CD;
}
}
This should compile out to something like:
a {
color: #138CB4;
text-decoration: none;
}
a:visited {
color: #84B6CD;
}
Note that you can also use the & to combine 'sub-selectors':
.outer {
color: blue;
.error {
//this will select elements that are .error inside-of/descending-from .outer
}
&.error {
//This will select elements that are .outer AND .error
color: red;
}
}
The official definition is unfortunately hiding in plain sight in the Nesting Rules part of the documentation.
I don't believe that is how you use mixin's in Less.
You have defined the link pseudo class and then nested it under the visited pseudo class. This doesn't actually mean anything and is why your are getting that output.
If I think what you are aiming for is to re-use your link styles across :visited and :link, you actually will want this:
.link {
color: #138CB4;
text-decoration: none;
}
a:link {
.link;
}
a:visited{
.link;
color: #84B6CD;
}
Not fully sure, what you want to achieve. But if you got tired of :link,:visted,:active (aka normal link) vs. :focus, :hover (hover styles), this works:
.anchor( #- ) {
a, a:link, a:visited, a:active {
#-();
}
}
.anchorH( #- ) {
a:focus, a:hover {
#-();
}
}
for example:
.anchor({
background: #fff;
});
.anchorH({
background: #ddd; /* darken on hover or focus */
});