Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>As an explanation to the Matt Handy's answer: The principle behind this is to use the rules of precedence in CSS. Precedence comes into play whenever one element is the target of different, conflicting style declarations. For example, if you have </p> <pre><code>&lt;div class="foo bar"&gt; </code></pre> <p>with</p> <pre><code>.foo { border-color:red; } .bar { border-color:green; } </code></pre> <p>the two declarations conflict - which one should the browser apply? In the above case the two declarations have the same "level" of specificity, in which case the one that is included or defined later will supersede the other (here: green). If you check the element with the inspection tool of your favourite browser, overridden style-definitions will be shown as strike-through. </p> <p>However, apart from order there is a whole bunch of rules on what statement wins over others, generally giving higher priority to more specific rules than more general ones. There is a whole lot of good articles on the web for this particular topic, such as <a href="http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/" rel="nofollow">Understanding Style Precedence</a>, <a href="http://css-tricks.com/specifics-on-css-specificity/" rel="nofollow">Specifics on Specificity</a> and (if you're a friend of Star Wars) <a href="http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html" rel="nofollow">Specificity Wars</a>.</p> <p>Coming back to your original problem, you can use any combination of IDs or classes with greater specificity than the ones in the standard PrimeFaces theme. Again, browser inspection tools are your friend. Check out the structure of containers and the attached CSS and then pick a combination of custom IDs and/or classes <em>with a higher degree of specificity than the PrimeFaces one</em> to address the element(s) in question. There you can deposit style declarations to override all or part of what PrimeFaces defined previously. </p> <p>It is a powerful, flexible and fast technique and I use it to just override that one little margin or width or color to fit with the rest of my design. However, it ties your style markup to your HTML structure and the class definitions on your components, which in the long run may be undesirable. Also, it will become unhandy if you find yourself altering many components or many properties. In this case you should consider using the PrimeFaces Themeroller integration to create your own custom theme.</p> <hr> <p>Edit: As for your direct requirement, I've looked into this a bit further. Matt's suggestion won't work because the class <code>custom</code> is attached to a span that contains the input field and the button. The actual date picker is located in a separate div outside the form at the end of the body. Hence, <code>.custom .ui-picker</code> does not apply to it as it is not nested inside the span.</p> <p>The above approach is OK to style the input, e.g. <code>.custom .ui-inputfield</code>. Alternatively you could also give an ID to your <code>p:calendar</code> and use this one (it will become the ID of the span). </p> <p>However, for the date-picker you need to find a different way, as it's not part of the span. But it also has an ID, which you could use (in my case <code>#ui-datepicker-div</code>) and which worked for me to give it a green border. One little thing remains: it seems like there is only one DatePicker rendered to serve <em>all</em> the calendar components (makes sense to me ;) ), so you can't have differently styled DatePickers for different calendars. (At least not without a lot more work and possibly some JavaScript fiddling with the datePicker classes at the button's click or something ...)</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload