SQLite How to by Tag:
Provided that your CSS file is loaded via <h:outputStylesheet>, use #{resource} mapping. body { padding: 35px; background: #4c4c4c url(#{resource['images/grad1.png']}) 0 0 repeat-x; color: #fff; font: 11px/normal Arial, Helvetica; } ...
You implemented your dialog composition that way based on my answer on your previous question about preventing the <p:messages> from redisplaying the dialog's messages in the background. That answer assumed...
If you want to style tables in a generic manner, just change the CSS selectors accordingly. The <table> of <p:dataTable> is selectable by the ui-datatable class. .ui-datatable td { background:...
Every label in p:selectOneMenu whose id contains phrase adaptacionDiscapacidadSelectOne will not be bold: .ui-selectcheckboxmenu-panel[id*="adaptacionDiscapacidadSelectOne"] .ui-selectcheckboxmenu-item label { font-weight:normal !important; } ...
The Font Awesome CSS file is by default referencing those font files via a relative path ../ like below: @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.3.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),...
This is how I did it: I updated the dataTable like this: <h:dataTable id="persons" value="#{tableBean.persons}" var="person" rowClasses="#{tableBean.calculatedRowClasses}"> So, with a bean: rowClasses="#{tableBean.calculatedRowClasses}" Then I calculate the necessary CSS elements to...
Every cell has border in this case by default, so you should cancel bottom border and top border of the row below: XHTML: <p:panelGrid style="width: 100%;"> <p:row> <p:column>a</p:column> <p:column>b</p:column> </p:row>...
Regardless of where you use the <h:outputStylesheet> tag, the stylesheet is always rendered in the head. The only difference it makes when you add inside the <h:body> is that it...
Fortega's answer was correct for some browsers, but for IE 7 you need to use the following CSS: .ui-widget-overlay { filter:alpha(opacity=80); /* works in IE 7 */ opacity: 0.8; /*...
Wouldn't this be way easier? A p:commandLink submits a POST just like a p:commandButton. <h:form> <p:commandLink ...> <h:graphicImage ... /> </p:commandLink> </h:form> ...
Using inline css <h:body style="background-image: url(../images/background.jpg)" > </h:body> ...
Ok I found the solution ... I think I forgot to remove my gloves before starting code ... I put styleCss instead of styleClass ...
remove url parameters from font file names. try that. @font-face { font-family: 'fontello'; src: url("#{resource[css:font/fontello69db.eot']}?24671060"); src: url("#{resource[css:font/fontello69db.eot']}?24671060#iefix") format('embedded-opentype'), url("#{resource[css:font/fontello69db.woff']}?24671060")...
Use onclick event of the commandLink to execute javascript. Something like <p:commandLink onclick="changeCSSInJavascript()" ...> .... </p:commandLink> ...
When writing CSS, don't look at JSF source code, but at its generated HTML output. The h:panelGrid renders a HTML table. You need to vertical-align the contents of the table...
here is an example: .ui-paginator-first.ui-state-default.ui-corner-all:before{ content: "\f049"; font-family: FontAwesome; color: white; } you can find the codes you cann add for content instead of "\f049" in the font-awesome website http://fortawesome.github.io/Font-Awesome/icon/pencil/...
I have tried this and this works properly for me, here has no waste of space. You can try this. This is my <p:menubar>. Note that I'm using styleClass="menu" instead...
You can use transform: rotate(90deg) ; -webkit-transform: rotate(90deg) ; -moz-transform: rotate(90deg) ; -o-transform: rotate(90deg) ; -ms-transform: rotate(90deg) ; See http://jsfiddle.net/poselab/54XvF/ CSS3 MAKER is a good tool to create your css...
Just to elaborate on BalusC's comment: After you add the form, JSF will prepend the id of the form to its children's id's, so the first inputText will now have...
Facing the same challenge, I ended up extending javax.faces.application.ResourceHandlerWrapper and javax.faces.application.ResourceWrapper to append "&v=x.y.z" to the result of ResourceWrapper#getRequestString(). I saw this kind of solution implemented by Primefaces and Openfaces....
Don't try to use inline styles. Since jsf is a html code generator in this regard, inline styles ofthen do not apply to the html element you want them applied...
Primefaces components are powered by jquery-ui. So the naming convention is based on the naming convention of jquery ui components. Specifically, the class names play an important role in the...
try this .ui-icon-calendar { background-image: <your URL> !important; background-position: center center !important; width: 16px; height: 16px; } ...
I found the solution : At first, the styling of the normal JSF Components is more easy than the Primefaces components, it means that the using of <h:XXX> instead of...
In your .css file (at the end of it), or in your header in tags: .ui-breadcrumb{background-color: none;} More i can´t do with this less informations. edit: If that doesn´t work:...
Based on the comments, your concrete problem ultimately boils down to: The <h:outputStylesheet> doesn't render anything into the HTML output. Considering the fact that you do have a <h:head>, the...
Try display:block on image: http://jsfiddle.net/3c48P/9/ .feedEkList li a img { display:block; } ...
The : is a special character in CSS identifiers, it represents the start of a pseudo class selector like :hover, :first-child, etc. You would need to escape it. #phoneForm\:phoneTable {...
The only real way to get layouts working across browsers is to spend time testing in every browser. Various versions of IE have their own special problems, so use conditional...
Use Firefox's built-in inspector (not firebug) to inspect the element. In the column that pops up for the inspector, choose "Computed" tab. Highlight all the styles you want, then right...