theme is overriden by default css

UI Components for JSF
Locked
ltune
Posts: 125
Joined: 20 Jul 2011, 20:25
Contact:

14 Sep 2011, 12:21

king6887 wrote: It's not an issue with wanting to override theme.css with custom included css. It's the fact the theme.css is getting overridden by the css included in primefaces.jar (button.css etc...)
Ok I see,

so I agree that this is rather a bug. But I agree that the workarround presented in first post should do. Since default.css is overriding theme.css than specifiing in last line of <head> of your template facelet, default.css will be get overriden again. I admit it is not elegant, but it should do as a "quick & dirty" fix :twisted: .

Greets,

Adam
Busy applying primefaces patches to my local repo at /dev/null

king6887
Posts: 29
Joined: 11 Jul 2011, 12:04

14 Sep 2011, 12:46

king6887 wrote:*snip*

1) write a theme and apply it
2) realise half the changes you made are over written by default values
3) create a seperate stylesheet with the content that is overriden in theme.css and include it manually in the page header / or add a link to theme.css again, loading it twice.

my suggested process:

1) write theme and apply it.

Any other manually included stylesheets would be applied after the above.

*snip*
Actually having just tested this the "or add a link to theme.css again, loading it twice." doesn't actually work since including it using h:outputStylesheet results in it being put in the exact same place as the other theme.css (despite being inside f:facet name="last"). So you would infact need to create a duplicate stylesheet and include it manually, outside of a theme library.

Thus rendering a theme 100% pointless.

@ltune ^ including a link to a theme stylesheet in the facet as suggested doesn't work. =(
Running PrimeFaces 3.0.M2 / 3.0.M4 using Mojarra-2.1.3 on Glassfish 3.1.1

king6887
Posts: 29
Joined: 11 Jul 2011, 12:04

14 Sep 2011, 13:01

Diagram to illustrate my issue, as i'm not sure i'm communicating the issue correctly enough.

head contents

Code: Select all

<h:head>
        <title>ACT Theme Test page</title>
        <f:facet name="last">
            <link type="text/css" rel="stylesheet" href="css/custom.css"/>
            <style type="text/css">
                div.divtest, div.divtest2{
                    border: 1px dashed #000000;
                }

                div.divtest{
                    width: 49%;
                    float: left;
                }
            </style>
        </f:facet>
    </h:head>
web.xml

Code: Select all

<context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>ACT</param-value>
    </context-param>
Resulting output

Code: Select all

<head>
	<link type="text/css" rel="stylesheet" href="/ACTTheme-Test/faces/javax.faces.resource/theme.css?ln=primefaces-ACT" />
        <!-- This right here is the issue, this should be AFTER the block of default stuff below-->
	
	<link type="text/css" rel="stylesheet" href="/ACTTheme-Test/faces/javax.faces.resource/jquery/ui/jquery-ui.css?ln=primefaces&v=3.0.RC1-SNAPSHOT" />
	<link type="text/css" rel="stylesheet" href="/ACTTheme-Test/faces/javax.faces.resource/wijmo/wijmo.css?ln=primefaces&v=3.0.RC1-SNAPSHOT" />
	<script type="text/javascript" src="/ACTTheme-Test/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=3.0.RC1-SNAPSHOT"></script>
	<script type="text/javascript" src="/ACTTheme-Test/faces/javax.faces.resource/jquery/ui/jquery-ui.js?ln=primefaces&v=3.0.RC1-SNAPSHOT"></script>
	<script type="text/javascript" src="/ACTTheme-Test/faces/javax.faces.resource/wijmo/wijmo.js?ln=primefaces&v=3.0.RC1-SNAPSHOT"></script>
	<script type="text/javascript" src="/ACTTheme-Test/faces/javax.faces.resource/core/core.js?ln=primefaces&v=3.0.RC1-SNAPSHOT"></script>
	<script type="text/javascript" src="/ACTTheme-Test/faces/javax.faces.resource/menu/menu.js?ln=primefaces&v=3.0.RC1-SNAPSHOT"></script>

        <!-- This is where i believe theme.css SHOULD be called -->
    
	<title>ACT Theme Test page</title>
    
	<link type="text/css" rel="stylesheet" href="css/custom.css" />
	<style type="text/css">
		div.divtest, div.divtest2{
			border: 1px dashed #000000;
		}

		div.divtest{
			width: 49%;
			float: left;
		}
	</style>
</head>

I hope that helps clear up so confusion, while English is my first (and only) language, i'm not brilliant at explaining things :oops:
Running PrimeFaces 3.0.M2 / 3.0.M4 using Mojarra-2.1.3 on Glassfish 3.1.1

ltune
Posts: 125
Joined: 20 Jul 2011, 20:25
Contact:

14 Sep 2011, 13:38

Well,

when you need it fast open primefaces.jar edit its default.css to what you need (eg: make a local release of say Primefaces 3.0.M1337) and meanwhile wait for optimus prime to do his job ;)

Greets,

Adam
Busy applying primefaces patches to my local repo at /dev/null

tandraschko
PrimeFaces Core Developer
Posts: 3979
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

14 Sep 2011, 13:55

You could also use pe:head (http://code.google.com/p/primefaces-ext ... ingStarted).
It renders the resources in following order:
* - before facet
* - JSF CSS resources
* - PF theme
* - middle facet
* - JSF JS resources
* - head content (encoded by super class at encodeChildren)
* - after facet
Thomas Andraschko

PrimeFaces | PrimeFaces Extensions

Apache Member | OpenWebBeans, DeltaSpike, MyFaces, BVal, TomEE

Sponsor me: https://github.com/sponsors/tandraschko
Blog: http://tandraschko.blogspot.de/
Twitter: https://twitter.com/TAndraschko

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

14 Sep 2011, 14:29

I'm always open to good feedback, if you can convince me that there is still need a change in css ordering, let's discuss over a case study like a specific.

Also there is no default.css in PrimeFaces, not sure what you are referring to.

I think the current discussion should be about if JSF-PF structural css should be placed before the theme or after the theme(current).

ltune
Posts: 125
Joined: 20 Jul 2011, 20:25
Contact:

14 Sep 2011, 14:50

I think the current discussion should be about if JSF-PF structural css should be placed before the theme or after the theme(current).
What exactly do you mean by "structural css" :shock: ? IMHO CSS is always for design. If there is any default css it maybe should be rendered as the default theme. I am not sure, but as far as I know HTML is used for markup and CSS for design.

Greets,

Adam
Busy applying primefaces patches to my local repo at /dev/null

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

14 Sep 2011, 15:46

Please read more about PrimeFaces Skinning, see user's guide to understand how PF themes work.

king6887
Posts: 29
Joined: 11 Jul 2011, 12:04

14 Sep 2011, 15:53

The 'structural css' is the stuff that is in primefaces.jar all the jquery stuff and primeface components. These define how a paginator should look, or how tabs should look etc. (without it, it'd just be a html list):

Code: Select all

<link href="/Showcase/javax.faces.resource/jquery/ui/jquery-ui.css.jsf?ln=primefaces&v=3.0.RC1-SNAPSHOT" rel="stylesheet" type="text/css">
<link href="/Showcase/javax.faces.resource/paginator/paginator.css.jsf?ln=primefaces&v=3.0.RC1-SNAPSHOT" rel="stylesheet" type="text/css">
<link href="/Showcase/javax.faces.resource/datatable/datatable.css.jsf?ln=primefaces&v=3.0.RC1-SNAPSHOT" rel="stylesheet" type="text/css">

etc
After this is loaded (which is really the bare minimum in terms of css and a viewable page) THEN all other CSS should be loaded (the 'design' css) which consists of the defined theme and any manually included:

Code: Select all

<link href="/Showcase/faces/javax.faces.resource/theme.css?ln=primefaces-ACT" rel="stylesheet" type="text/css">
If the theme is loaded after the structural stuff, then people won't have to edit the primefaces.jar to alter these defaults, it will simply override it if it is specified in theme.css.

Simply put, if you want to use a default style for something, just don't redefine it in theme.css or any other.css.
Running PrimeFaces 3.0.M2 / 3.0.M4 using Mojarra-2.1.3 on Glassfish 3.1.1

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

14 Sep 2011, 16:01

Editing primefaces.jar to change css which has so many overriding rules would be the worst practice.

Theme css is applied after structural css to an element like for spinner;

class="structural-css theme-css"

So although theme-css is loaded before on page load, it takes precedence.

Structure is display, position, padding, margin. Theme css is colors, borders, background. As they are independent I still can't see what the problem is.

Again let's go over a specific case.

Locked

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 21 guests