How to change the Column header font in search Container Grid ?

[Asif Billa, modificado 8 Anos atrás.]

Hi Everyone, Can you please help me in changing the column header font in search Container.

I have used below code , but it's not working.

<liferay-ui:search-container-column-text name="Activity ID" property="activity_id" align="right" href="<%= transactivityDetailsURL.toString() %>">
<span style=" font-weight:bold;
font-style:italic;
font-size: 12px" >
</span>
</liferay-ui:search-container-column-text>

I have used custom css class as well in the grid data attributes is getting reflected as per the CSS styles but I am not able to change the Column header font size.
PFB the code for same.

<liferay-ui:search-container-column-text name="Status" property="status" cssClass="grid-data-attributes" href="<%= transactivityDetailsURL.toString() %>"/>

<style>
#delImg:hover, #editImg:hover {
cursor:pointer;
}
.grid-data-attributes {
font-weight: normal;
font-size: 12px;
text-align: center;
padding:0;
margin:0;
white-space:nowrap;
}
</style>

[Nate Cavanaugh, modificado 8 Anos atrás.]

Hi Asif,
The cssClass attribute will only apply to columns under the header, not to the header itself. It's probably far easier to just use CSS to target the headers.
Assuming that you've set the css class wrapper in your portlets liferay-portlet.xml to being something like:

<css-class-wrapper>portlet-asif-activities</css-class-wrapper>

You would add something like this in either your theme's CSS (which is ideal) or, worst case scenario, your portlet's main.css:

.portlet-asif-activities .lfr-search-container th {
font-weight: normal;
font-size: 12px;
text-align: center;
padding:0;
margin:0;
white-space:nowrap;
}

That would be the preferable way to do it.
Hopefully that helps

[Asif Billa, modificado 8 Anos atrás.]

Thanks Nate,

Using your approach I can modify the font style & color, but not able to modify the font size, row height.
Please suggest.

[Nate Cavanaugh, modificado 8 Anos atrás.]

Ah, it could be one of two things:
1. You will probably need to change the rule to the following in order to handle links:

. portlet-asif-activities .lfr-search-container th, . portlet-asif-activities .lfr-search-container th a {
...
}

2. If that doesn't do it, it's probably a specificity issue, and some other rule is winning out (because it has more selectors, or higher value selectors).
If #1 doesn't do it, I would use the Web Developer tools in either Firefox or Chrome to see what rule is overwriting it.

HTH