How to handle different css styles for each portlet in liferay

Hi all
I want each vaadin portlets in liferay to have different style for different portlet.
Please help me how to achieve this

Use setStyleName(“…”) e.g. for the top-level layout of each portlet with different styles, and prefix all the applicable CSS rules with that portlet specific style.

You could also use in liferay-portlet.xml instead of setStyleName().

If you don’t want to copy the theme CSS to a shared directory on the portal, use in liferay-portlet.xml and place the CSS in suitable CSS files inside the portlet (usually css/*.css) instead of a Vaadin theme.

Thanks a lot its working now

// have set styleName for table has
table.setStyleName(“cont”);

// then in css i added
.cont .v-table-cell-wrapper:hover {
background: #96ec9a;
}

this works exactly way i needed

// This part what i tried didnt work
.v-filterselect-table .v-filterselect-table-cell-wrapper:hover {
background: #96ec9a;
}

.v-cont .v-table-cell-wrapper:hover {
background: #96ec9a;
}

Hi all
In an portlet have achieved different style for each column. now i want style to change in an table column based on data.
All data in my table are links.
Can anyone please help me out to comeout of this issue

Do you mean something like
this
?

You can define a number of styles in CSS and then have a CellStyleGenerator to select the correct style based on your data - see the “View source” link in the demo.

Thanks for your quick response.

My problem is am fetching data from an ExampleUtil class in this way
table.addGeneratedColumn(“Event”, new Table.ColumnGenerator() {
public Component generateCell(Table source, Object itemId,
Object columnId) {

         	  item = source.getItem(itemId);
             
        	  
        txt1 = (Integer) item.getItemProperty(ExampleUtil.ORDER_QUANTITY_PROPERTY_ID).getValue();
            Link link = new Link(txt1.toString(), new ExternalResource("http://www.ge.com"));
               
            return link;             
  }
               });

Have defined txt1 has public.

based on the data of txt1 i want color to change on hover

but when i try to achieve the same in CellStylegenerator all my table cells in an column is changing to same color based on last data returned from Table
My setCellStyleGenerator method looks like this

table.setCellStyleGenerator(new Table.CellStyleGenerator() {
public String getStyle(Object itemId, Object propertyId) {

            if (propertyId == null) {
               // no propertyId, styling row
                return null;
            } else if (propertyId.equals("EnvironmentName")) {
                // style the generated EnvironmentName column
            	return "green";
            	
            } else if (propertyId.equals("Event"))
            {
            	 
                  	if(txt1 > 30) {
                		return "red";
               	}else {
                		return  null;
                	}
            }
            
            
        }
    });

My css looks like this
.cont .v-table-cell-content-red .v-link a:hover span {
color:red;
}

I want data greater than 30 only to change to red color on hover .But here it is checking only the last data of table column based on that it is changing entire column color.
Can you please suggest me how i need check for all column data

Thanks a lot in Advance

Generation of the cell contents and generation of styles happen in separate phases, so you need to re-fetch the data in the cell style generator. You cannot communicate cell-specific information between them in a (class) field.

Otherwise, the value of the last cell that was generated (which could be the last entry in the scroll buffer or some other value) is in txt1, and you reuse it for all cells for which the style is computed (which might or might not be all the cells displayed or in the scroll buffer).

Thanks a lot my problem got solved