Best way to override the inline css set by primefaces

[ankitkool20]

Hi All

When we are trying to modify the CSS for our theme, some of the elements in the on the the renedered page are having inline css, which we have not defined.
So would request someone to help us on how to change the css for these components.

For example
I want to change the icon in the menu bar component of the primefaces and pic from the ionicons, So what is the best approach to do that


Need this help urgently.

Ankit

[cagatay.civici]

Inline css is usually added by widgets, could you give me an example please.

[ankitkool20]

For example the dock on the Primefaces showcase

This is the html that is generated for doc

Code: Select all

<div style="left: 480.425px; width: 432.149px;" class="ui-dock-container-bottom ui-widget-header"><a style="width: 90px; left: 0px;" tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#"><span style="display: none;">Home</span><img src="/showcase/resources/demo/images/dock/home.png"></a><a style="width: 81.8641px; left: 90px;" tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#"><span style="display: none;">Music</span><img src="/showcase/resources/demo/images/dock/music.png"></a><a style="width: 60.2853px; left: 171.864px;" tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#"><span style="display: none;">Video</span><img src="/showcase/resources/demo/images/dock/video.png"></a><a style="width: 40px; left: 232.149px;" tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#"><span style="display: none;">Email</span><img src="/showcase/resources/demo/images/dock/email.png"></a><a style="width: 40px; left: 272.149px;" tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#"><span style="display: none;">Portfolio</span><img src="/showcase/resources/demo/images/dock/portfolio.png"></a><a style="width: 40px; left: 312.149px;" tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#"><span style="display: none;">Link</span><img src="/showcase/resources/demo/images/dock/link.png"></a><a style="width: 40px; left: 352.149px;" tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#"><span style="display: none;">RSS</span><img src="/showcase/resources/demo/images/dock/rss.png"></a><a style="width: 40px; left: 392.149px;" tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#"><span style="display: none;">History</span><img src="/showcase/resources/demo/images/dock/history.png"></a></div>

You can see that there is inline style.

Also we have experienced the same on the Combo Box when we implemented it. It had pre-defined style for the width for the labels

the xhtml had

Code: Select all

<p:panelGrid columns="2" style="width:20%">
                                                <p:panelGrid>
                                                       <p:outputLabel styleClass="notefont" value="Product:"></p:outputLabel>
                                                </p:panelGrid>
                                                <p:panelGrid>
                                                       <p:selectOneMenu id="menu6" label="Select Product" 
                                                              value="#{autoBoltUsageReportBean.selectedProduct}">
                                                              <f:selectItem itemLabel="Select Product" itemValue="#{null}"
                                                                     noSelectionOption="true" />
                                                              <f:selectItems value="#{autoBoltUsageReportBean.products}"
                                                                     var="versionvar" itemValue="#{versionvar.productid}"
                                                                     itemLabel="#{versionvar.productname}" />
                                                              <p:ajax update="menu7"
                                                                     listener="#{autoBoltUsageReportBean.getDeviceDetailsforSubmittal}"
                                                                     event="change"></p:ajax>

                                                       </p:selectOneMenu>
                                                </p:panelGrid>
                                         </p:panelGrid>

the generated html is

Code: Select all

<tr class="ui-widget-content" role="row">
	<td role="gridcell" class="ui-panelgrid-cell">
		<label id="form:j_idt55" class="ui-outputlabel ui-widget notefont">Product:</label>
		<table id="form:j_idt54" class="ui-panelgrid ui-widget" role="grid">
			<tbody></tbody>
		</table>
	</td>
	<td role="gridcell" class="ui-panelgrid-cell">
		<div style="width: 147px;" id="form:menu6" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all">
			<div class="ui-helper-hidden-accessible">
				<input id="form:menu6_focus" name="form:menu6_focus" autocomplete="off" type="text">
			</div>
			<div class="ui-helper-hidden-accessible">
				<select id="form:menu6_input" name="form:menu6_input" tabindex="-1" onchange="PrimeFaces.ab({s:'form:menu6',e:'change',p:'form:menu6',u:'form:menu7'});">
					<option value="" selected="selected">Select Product</option>
					<option value="1">Agilis91x</option><option value="2">Stateless</option>
					<option value="3">AgilisNDx</option><option value="4">Agilis91x SP4+</option>
				</select>
			</div>
			<label style="width: 131.2px;" id="form:menu6_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">Select Product</label>
			<div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
				<span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
			</div>
		</div>
		<table id="form:j_idt56" class="ui-panelgrid ui-widget" role="grid">
			<tbody></tbody>
		</table>
	</td>
</tr>

Sorry for the formatting of the code, and also i am new to the primefaces and jsf and may have misunderstandings.