Themeing tree to get minus and plus signs does not work

Flow
1

Being a java programmer i am not comfortable with css and style sheets. But i am somehow in love with vaadin for it ease in development.

I am trying to create a common look and feel for my enterprise application which is using jBPM designer and drools for BPRM. The very basic thing that is different is the tree menu. I tried to change the Style sheet to create a similar look and feel.
the attachment jBPMDesigner.bmp is the jBPM designer look.

I make the following changes to the custom style sheet.

@import url(…/reindeer/styles.css);

.v-tree-node {
background: transparent url(img/plus-icon.png) no-repeat 6px -10px;
margin-left: 1px;
padding: 1px 2px;
padding-bottom: 1px;
display: inline-block;
}

.v-tree-node-expanded {
background-image: url(img/minus-icon.png);
margin-left: 1px;
padding: 1px 2px;
padding-bottom: 1px;
display: inline-block;
}

My app look and feel is depicted in the attachment myApp.bmp

need assistance in correcting.

Thanks
12802.bmp (814 KB)
12803.bmp (1.07 MB)

2

play around with the padding values (1px 2px) as well as the background position values (6px -10px) and you should get it in the correct place.

I suggest you check out Chrome’s Inspector or the Firefox plugin Firebug. These allows you to change the values of css while you are viewing it, which is a easy place to solve CSS issues, compared with changing it in the source files and redeploying all the time.