发表新帖
发表新帖

How do I override default PrimeFaces CSS with custom styles?

后端 未结
关注
4 1099
余生分开走
余生分开走 2020-11-21 05:21

I\'ve created my own theme as a separate Maven project, and it is loaded correctly.

Now I want to change the size of an component. For example, a

相关标签:
4条回答
  • 耶瑟儿～
    2020-11-21 05:31

    There are several things you need to take into account of which one or more might be relevant you your specific case

    Load your CSS after PrimeFaces one

    You need to ensure that your CSS is loaded after the PrimeFaces one. You can achieve this by placing the <h:outputStylesheet> referencing your CSS file inside <h:body> instead of <h:head>:

    <h:head>
    ...
</h:head>
<h:body>
    <h:outputStylesheet name="style.css" />
    ...
</h:body>

    JSF will automatically relocate the stylesheet to the end of the generated HTML <head> and this will thus ensure that the stylesheet is loaded after the PrimeFaces' default styles. This way the selectors in your CSS file which are exactly the same as in PrimeFaces CSS file will get precedence over the PrimeFaces one.

    You'll probably also see suggestions to put it in <f:facet name="last"> of <h:head> which is understood by PrimeFaces-specific HeadRenderer, but this is unnecessarily clumsy and would break when you have your own HeadRenderer.

    Understand CSS specificity

    You also need to ensure that your CSS selector is at least as specific as the PrimeFaces' default CSS selector on the particular element. You need to understand CSS Specificity and Cascading and Inheritance rules. For example, if PrimeFaces declares a style by default as follows

    .ui-foo .ui-bar {
    color: pink;
}

    and you declare it as

    .ui-bar {
    color: purple;
}

    and the particular element with class="ui-bar" happen to have a parent element with class="ui-foo", then the PrimeFaces' one will still get precedence because that's the most specific match!

    You can use the webbrowser developer tools to find the exact CSS selector. Rightclick the element in question in the webbrowser (IE9/Chrome/Firefox+Firebug) and choose Inspect Element to see it.

    Partial overriding

    If you need to override a style for only a specific instance of the component and not all instances of the same component, then add a custom styleClass and hook on that instead. It is another case where specificity is used/applied. For example: 

    <p:dataTable styleClass="borderless">

    .ui-datatable.borderless tbody,
.ui-datatable.borderless th
.ui-datatable.borderless td {
    border-style: none;
}

    If a component does not support a styleClass and you are on jsf 2.2 or up, you can also use passtrough attributes and add a pt:class and have it end-up on the output.

    <p:clock pt:class="borderless" />

    Never use !important

    In case you fail to properly load the CSS file in order or to figure the right CSS selector, you'll probably grab the !important workaround. This is Plain Wrong. It's an ugly workaround and not a real solution. It only confuses your style rules and yourself more in long term. The !important should only be used in order to override the values hardcoded in HTML element's style attribute from a CSS stylesheet file on (which is in turn also a bad practice, but in some rare cases unfortunately unavoidable).

    See also:

    • How to reference CSS / JS / image resource in Facelets template?
    • Mozilla Developer Network > CSS > Specificity (great article, a must read!)
    • Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade
    0 讨论(0)
  • 无人共我
    2020-11-21 05:39

    you can create a new css file for example cssOverrides.css

    and place all the overrides you want inside it, that way upgrading the primefaces version wont affect you ,

    and in your h:head add something like that 

    <link href="../../css/cssOverrides.css" rel="stylesheet" type="text/css" />

    if it wont work try adding it to the h:body

    in order to check if its working try this simple example inside the css file

    .ui-widget {
   font-size: 90% !important;
}

    this will reduce the size of all primefaces components /text

    0 讨论(0)
  • 滥情空心
    2020-11-21 05:46

    I'm using PrimeFaces 6.0. Here's some information I would have liked to have regarding this:

    If you use <h:outputStylesheet/>, it will work, but your CSS will not be loaded last even if it's last in the <h:head></h:head> tags (other CSS files will be included afterwards). A trick you can do which I learned from here is to place it inside <f:facet name="last"></f:facet>, which must go inside the body, like so:

    <h:body>
  <f:facet name="last">
    <h:outputStylesheet name="css/MyCSS.css" />
  </f:facet>
...

    Then your CSS will be the last loaded. Note: you will still have to adhere to the specificity rules as BalusC outlined.

    I placed "MyCSS.css" in WebContent/resources/css/.

    More information on the resource loading order: http://www.mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces

    0 讨论(0)
  • 离开以前
    2020-11-21 05:46

    How to create more specific rules

    The style rules used by PrimeFaces can be quite complex. An element can receive its styling from multiple CSS rules. It's good to know you can use filtering in the DOM inspector's style tab to search on the property you want to customise:

    This screenshot was taken using Chrome, but filtering is also available in Firefox and Safari.

    When you have found the rule you want to customise, you can simply create a more specific rule by prefixing it with html. For example, your could override .ui-corner-all like:

    html .ui-corner-all {
  border-radius: 10px;
}

    Using the style attribute

    PrimeFaces components can render quite complex HTML. Normally, the style attribute is only applied to the most outer HTML node that the component renders. Also, style is not reusable, so it is better to set a styleClass and create CSS rule(s) based on the class you've set. This also allows you to style inner HTML nodes rendered by the component.

    Using the styleClass attribute

    PrimeFaces comes with themes (and templates) which have many built in classes. You might find that an existing class will do what you need. For example to remove borders from a p:panelGrid one can simply apply the class ui-noborder.

    See:

    • How to remove border from specific PrimeFaces p:panelGrid?

    Replace theme values using a ResourceHandler

    I usually just want to replace some color with another value. As colors can be used in many different rules it can be useful to create a ResourceHandler.

    In the handler check for the PrimeFaces theme:

    @Override
public Resource createResource(String resourceName,
                               String libraryName) {
  if (isPrimeFacesTheme(resourceName, libraryName)) {
    return new MyResource(super.createResource(resourceName, libraryName), this);
  }
  else {
    return getWrapped().createResource(resourceName, libraryName);
  }
}

protected boolean isPrimeFacesTheme(final String resourceName,
                                    final String libraryName) {
  return libraryName != null
                 && libraryName.startsWith("primefaces-")
                 && "theme.css".equals(resourceName);
}

    In the resource, replace the color:

    private static String cache;

public MyResource(Resource wrapped, ResourceHandler handler) {
  this.wrapped = wrapped;
  this.handler = handler;
  this.charset = Charset.forName(FacesContext.getCurrentInstance().getExternalContext().getResponseCharacterEncoding());
}

@Override
public InputStream getInputStream() throws IOException {
  if (cache == null) {
    cache = readInputStream(getWrapped().getInputStream());
    // Replace values
    cache = cache.replace("#007ad9", "#11dd99");
  }
  return new ByteArrayInputStream(cache.getBytes(charset));
}

    And register it as follows in the faces-config.xml:

    <application>
  <resource-handler>com.example.MyResourceHandler</resource-handler>
</application>

    For more information on resource handlers see:

    • How to load dynamic resources in JSF?
    0 讨论(0)
 看不清?
提交回复
热议问题