Extending CSS

[david-zed]

Hi, I am using JSF2.2 and Primfaces 13, in my xhtml file I have

`<u:define name="body" >
	<h:outputStylesheet name="styles.css" library="css" />
	<h:panelGroup id="loginPanel" layout="block" styleClass="login-body" >
			<p:commandButton value="Login" styleClass="primary-green-button"/>
	</h:panelGroup>
</u:define>`

and in my css I have

.primary-green-button {
	width: 					auto;
	padding: 				5px 10px 5px 10px;
	background: 			red;
	color: 					white;
	border-radius: 			5px;
}

however when i run this the css is ignored and i just get the primefaces default.

I am looking to extend the default rather than override it

[david-zed]

I have tried updating the css to

body .ui-button .primary-green-button {
	width: 					auto;
	padding: 				5px 10px 5px 10px;
	background: 			red;
	color: 					white;
	border-radius: 			5px;
}

but this then overrides all p:commandButton

[david-zed]

previous comment was wrong, using this css still retains the primefaces default, if I change to

body .ui-button  {
	width: 					auto;
	padding: 				5px 10px 5px 10px;
	background: 			red;
	color: 					white;
	border-radius: 			5px;
}

This overrides the default

[david-zed]

What I am looking to do is to have different button colors for like Primary Button, Secondary Button etc

[FlipWarthog]

Try:

body .primary-green-button {

or (note no space between .ui-button and .primary-green-button

body .ui-button.primary-green-button {

The issue with your first attempt was CSS specificity -- the prime style was more specific than yours -- and body .ui-button .primary-green-button is not selecting the right element since it's looking for anything with primary-green-button within a ui-button.

[david-zed]

Hi, thanks for prompt response, I am pretty new to this so I obviously need to study css a bit more

[jepsar]

Please read https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles