Changing the arrows in a tree

Hi guys,

I’ve spent yesterday trying to change the expand/collapse arrows on the tree component, as they are a little dark on my current UI.

In my CSS I have the following (I noted that the runo theme has these all set).

.v-tree-node {
    background: transparent url('layouts/collapsed.png') no-repeat 2px 1px;
}

.v-tree-node-expanded {
    background: transparent url('layouts/expanded.png') no-repeat 2px 1px;
}

I tried .setStyleName() with .v-tree-node-arrow but still to no avail.

I’m sure I’m missing something small and silly, so if y’all could help me out, that’d be great :slight_smile:

Thanks,

Patrick

You might like to use your browser’s dev tools to see what styles are actually applied to the tree nodes - there’s probably an issue with the cascading rules; if the original Vaadin styles are still there, your selectors may not be specific enough to override the defaults. You can test this by appending
!important
to your background properties.