How to add style to Hyperlink in UiBinder?

[powwow]

I've looked and looked but I can't figure it out.

I am doing this:

<g:Hyperlink ui:field='linkName' width='500px'
styleName='{res.style.lgLink}'/>


In my css I am doing this:

.lgLink{
font:bold 20px arial, sans-serif;
color:#555555;
cursor:pointer;
cursor:hand;
}

In my ClientBundle I have this:

public interface Style extends CssResource {
String lgLink();
}

But it doesn't work with I use UiBinder. How do I get the link to
change color? On visited? hover? etc?

I tried this but it doesn't work either:

.lgLink:visited{
font:bold 20px arial, sans-serif;
color:#555555;
cursor:pointer;
cursor:hand;
}

I also tried:

gwt-Hyperlink.lgLink:visited{
font:bold 20px arial, sans-serif;
color:#555555;
cursor:pointer;
cursor:hand;
}

But the ClientBundle doesn't link that. Any ideas? Thanks.

[Konstantin Zolotarev]

have you added your client bundle to UiBinder ? 

<ui:with field='res' type='com.my.app.widgets.logoname.Resources'/>

[Sudhakar Abraham]

Use the inline style sheet <ui:style></ui:style> tag in your ui.xml
file. Edit the property in your uibinder. In HyperLink class, set
the styleName property. Try the code below.

//ui.xml file

<?xml version="1.0" encoding="UTF-8"?>
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style>
.lgLink
{
color:green;

}
.lgLink:visited
{
font:bold 20px arial, sans-serif;
color:#555555;
cursor:pointer;
cursor:hand;
}

.lgLink:hover

{
font:bold 20px arial, sans-serif;

color:red;
cursor:pointer;
cursor:hand;
}
</ui:style>

<g:Hyperlink ui:field='linkName' width='500px'

styleName='{style.lgLink}'/>
</UiBinder>

S. Abraham
www.DataStoreGwt.com
Persist objects directly in GAE

[powwow]

I did what you said below. I can change the size of the link (when I
hover over the link I can make text shrink.) However, the color does
not change. I tried using different colors like #666666 on hover, but
it is dark purple (visited.) How do I change the color?

On Oct 3, 5:10 am, Sudhakar Abraham <s.abra...@datastoregwt.com>
wrote:

[Konstantin Zolotarev]

I think the best way will be to define style something like this:

a:hover {

1. color: #06C;
2. text-decoration: underline;

}

into global css file. Because same thing is defined into your theme css file and it may overwrite your one.

And you should place CSS file into right order. 

Take a look on CSS Priority 
http://hungred.com/useful-information/css-priority-order-tips-tricks/

It should help.