Trying to customize button-link appearance

Hi,

Great job on the Valo theme. It looks and works great.

While migrating from Chameleon to Valo, I hit a small issue. I need to override style for button-link on 2 different pages. Here is what I tried:-

Default overrides for button-link for my whole application
.v-button-link {
text-decoration: none;
}
.v-button-link:hover {
text-decoration: underline;
}

Now, page 1 adds linkRed style to button-link to try to make it red.
.linkRed .v-button-link {
color: red;
}

Similarly, page 2 adds linkBlack style to button-link to try to make it black.
.linkBlack .v-button-link {
color: black;
}

For some reason, both pages continue to see the default blue button-link, and my overriding styles are getting ignored. What am I missing?

Thanks!

You have a space between .linkBlack and .v-button-link; these are applied on the same DIV, so remove the space for proper matching. You can also use .v-button-linkBlack as a selector.

Thanks, Thomas.

Couple of observations and follow up questions:-

  1. The .linkBlack.v-button-link approach worked but .v-button-link-linkBlack did not.

  2. For .linkBlack.v-button-link approach to work, I did have to add !important to my style elements.

.linkBlack.v-button-link {
color: black !important;
}

Is there any drawback (performance issue, browser compatibility issue etc) with using important?

  1. In my old chameleon theme, .v-button-link-linkBlack used to work just fine (without using the important tag). Not sure why the same approach does not work in Valo.

Thanks in advance!

  1. vaadin generates the following: v-button, v-button-[addedstylename]
    , [addedstylename]
    . In your case you’ve added both ‘link’ and ‘linkBlack’. Note that vaadin doesn’t combine the added style names to a single name, thats why v-button-link-linkblack won’t work, but v-button-link.linkBlack does.

  2. the only issue is when someone else once again tries to override the styles; it might become very difficult to override the override.

  3. usually these things boil down to more specific CSS classes defined in other styles: try to add more selectors to your rule, e.g. v-ui, the theme name, layout names, etc. You can easily check what style is overriding yours using eg Firebug for Firefox, or the Chrome Inspector.

hope this helps.