change style without !important key

armainak · 25 Jun 2014, 10:06

Hello,
if i want to change the Layout for p:panelGrid border-style something like

.ui-panelgrid td, .ui-panelgrid tr
{
    border-style: none !important
}

Is there any way to effect that, without using important key?

Thank you in advance.

kukeltje · 27 Jun 2014, 16:40

It's all just css, so if you want to override without using !important, make sure the style rule is loaded AFTER the 'original' style. And if it is and it still does not work, make your selector more specific. All plain css stuff, nothing PF related

armainak · 02 Jul 2014, 10:57

Hello kukeltje,
thank you for answering,

Code: Select all

<head>
	1. <link type="text/css" rel="stylesheet" href="/myApp/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo">
	2.<link type="text/css" rel="stylesheet" href="/myApp/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&v=5.0">
	3.<script type="text/javascript" src="/myApp/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=5.0"></script>
	4.<script type="text/javascript" src="/myApp/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&v=5.0"></script>
	5.<script type="text/javascript" src="/myApp/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&v=5.0"></script>
	6.<link type="text/css" rel="stylesheet" href="/myApp/javax.faces.resource/layout/layout.css.xhtml?ln=primefaces&v=5.0">
	7.<script type="text/javascript" src="/myApp/javax.faces.resource/layout/layout.js.xhtml?ln=primefaces&v=5.0"></script>
	8.<script type="text/javascript" src="/myApp/javax.faces.resource/primefaces-extensions.js.xhtml?ln=primefaces-extensions-uncompressed&v=2.0.0"></script>
	9.<link type="text/css" rel="stylesheet" href="/myApp/javax.faces.resource/css/myCSS5.css.xhtml?ln=primefaces-extensions-uncompressed&v=2.0.0">
	10.<script type="text/javascript" src="/myApp/javax.faces.resource/js/myJS1.js.xhtml?ln=primefaces-extensions-uncompressed&v=2.0.0"></script>
	11.<link type="text/css" rel="stylesheet" href="/myApp/javax.faces.resource/myCSS5.css.xhtml?ln=css">
	12.<script type="text/javascript" src="/myApp/javax.faces.resource/myJS2.js.xhtml?ln=js"></script>
	13.<link type="text/css" rel="stylesheet" href="/myApp/javax.faces.resource/myCSS4.css.xhtml?ln=css">
	14.<title>My-App</title>
	15.<link type="text/css" rel="stylesheet" href="/myApp/resources/css/myCSS1.css">
	16.<link type="text/css" rel="stylesheet" href="/myApp/resources/css/myCSS2.css">
	17.<link type="text/css" rel="stylesheet" href="/myApp/resources/css/myCSS3.css">
</head>

this is what comes out from PF, when i call the site,

and one of my settings look like this

Code: Select all

padding-left: 10px;                        comes from primefaces.css.xhtml
	.ui-panelgrid .ui-panelgrid-cell - 10px
.mYCheckbox - 4px                          comes from my File /myApp/javax.faces.resource/myCSS4.css.xhtml

without Important the result is padding-left: 10px;
if i understood your answer correctly, my css is loaded on line 13. and PF-css is loaded before.
So, i do what you mean, dont i?

the only solution, i know is using important. But i hope to get rid of using this function.

thank you for your help,
armainak

kukeltje · 03 Jul 2014, 10:37

kukeltje wrote:It's all just css, so if you want to override without using !important, make sure the style rule is loaded AFTER the 'original' style. And if it is and it still does not work, make your selector more specific. All plain css stuff, nothing PF related

The PF class is obviously more specific and hence it has 'precedence'

http://css-tricks.com/specifics-on-css-specificity/

so make your selector more specifc

GlaurungBlue · 13 Jul 2014, 05:26

Works in PF 5.0
My css
Panel no border, background transparent
.panelgrid-sin-bordes-sin-fondo tr, .panelgrid-sin-bordes-sin-fondo td{
background-color: transparent;
background-image: none;
border: none !important;
}

Panel no border
.panel-grid-sin-bordes tr, .panel-grid-sin-bordes td {
background-color: transparent;
border: none !important;
}
Using
<p:panelGrid columns="1" styleClass="panelgrid-sin-bordes-sin-fondo" >
/**Code
</p:panelGrid >
Works before PF 5.0
for all components
.ui-panelgrid td, .ui-panelgrid tr
{
border: none !important;
}

armainak · 28 Jul 2014, 10:32

Hello GlaurungBlue,
thank you for your answer,
it looks like you use "!important;" as much as me.
I am not sure, what is the idea behind the answer.

my css is loaded as last, PF overrides my css settings. therefore I and - obviously you - need this "!important;"

I hoped, another solution to read here

best regards
Armainak

kukeltje · 29 Jul 2014, 01:18

Did any of you try to make your selectors more specific? The ones posted above are not specific enough and hence need important. Read the link I posted above

kukeltje · 31 Jul 2014, 13:50

armainak wrote:Hello,
if i want to change the Layout for p:panelGrid border-style something like
Code: Select all
.ui-panelgrid td, .ui-panelgrid tr
{
    border-style: none !important
}
Is there any way to effect that, without using important key?

Thank you in advance.

And since I'm fed up with people NOT READING WHAT IS POSTED,

kukeltje wrote:The PF class is obviously more specific and hence it has 'precedence'

http://css-tricks.com/specifics-on-css-specificity/

so make your selector more specifc

I'll put my foot where my mouth is.

Try

Code: Select all

.ContentSideSections.Implementation .ui-panelgrid td, .ContentSideSections.Implementation .ui-panelgrid tr
{
    border-style: none;
}

e.g. using firebug and doing a 'live edit' of the showcase.css in the primefaces showcase. The lines DISAPPEAR... WITHOUT using !important.
why? because MY selectors are MORE SPECIFIC than the ones in the orgininal post or the PF css... That is just how CSS works... learn it...
Sigh...

armainak · 02 Oct 2014, 15:46

Thank you kukeltje for your answer.
Your answer was known for me. This is not the way i was looking for.
In this way, grows my css file to become hunderds or even thousends of lines.

However, I thank you for the anwer.
Armainak

kukeltje · 02 Oct 2014, 16:57

armainak wrote:Your answer was known for me.

Then PLEASE next time state you do... as early as possible. Saves me time, frustration etc..

armainak wrote:This is not the way i was looking for.

So you do not want to use !important nor 'css specificity' but want it achieved easily... (see my next answer)

armainak wrote:In this way, grows my css file to become hunderds or even thousends of lines.

Then I think you made another error or errors... Not sure what, but creating a custom theme is probably way less difficult.
But my 'solution' is not more extensive in numbers of lines compared to yours...

armainak wrote:However, I thank you for the anwer.

Not sure "you're welcome"

change style without !important key

Who is online