Often times, you may need to override default PrimeFaces CSS with your pretty customize values. In this example, we will show you how to override PrimeFaces error message style. Debug with FireBug, the PF’s error messages style are from primefaces.css primefaces.css .ui-message-info, .ui-message-error, .ui-message-warn, .ui-message-fatal { border: 1px solid; margin: 0px 5px; padding: 2px 5px; […]
In this tutorial, we will show you how to use PrimeFaces extensions – Maven plugin, to compress and combine JavaScript and CSS files, a web resources optimization example, to make web site load faster. Tool tested : PrimeFaces 3.3 PrimeFaces-Extensions 0.5 Maven 3.0.3 Note This guide is example-driven, for detail explanation and all other plugin […]
By default, PrimeFaces will return total of four files, 2 css files and 2 Javascript files. <link type="text/css" rel="stylesheet" href="/primefaces/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" /> <link type="text/css" rel="stylesheet" href="/primefaces/faces/javax.faces.resource/primefaces.css?ln=primefaces" /> <script type="text/javascript" src="/primefaces/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces"></script> <script type="text/javascript" src="/primefaces/faces/javax.faces.resource/primefaces.js?ln=primefaces"></script> Some people don’t like the default PrimeFaces CSS file and wonder how to remove it? Solution You are allow to remove only the […]
The requirement : We need to show a collapsable content when we clicked ‘Show’ button, and hide the collapsable content when we clicked ‘Hide’ button. The solution : Create a custom jQuery plugin. Demo : Clicks on the “show” button. Note Here’s the alternative solution – jQuery toggle() function. 1. Collapsable content Below is an […]
Demo : Try clicks on the tab When I developing my foodshaker.com. There is requirement for me to create a multi tab navigation to hide and show tab content. In order to develop a lightweight multitab, I decided to use jQuery and CSS to facilitate it. 1. Explanation Below is an example of navigation: <div> […]
In JSF 2.0, you can use <h:outputStylesheet /> output a css file. For example, <h:outputStylesheet library="css" name="style.css" /> It will generate following HTML output… <link type="text/css" rel="stylesheet" href="/JavaServerFaces/faces/javax.faces.resource/style.css?ln=css" /> JSF outputStylesheet example An example to show the use of JSF 2 <h:outputStylesheet /> to render a “style.css” file, locate in the “resources/css” folder, see figure […]
jQuery comes with addClass() and removeClass() to add or remove CSS class dynamically. For example, $(‘#para1’).addClass(‘highlight’); – Add a “highlight’ css class to elements that contain id of “para1”. $(‘#para1’).removeClass(‘highlight’); – Remove a “highlight’ css class from elements that contain id of “para1”. Example <html> <head> <style type="text/css"> .highlight { background:green; } </style> <script type="text/javascript" […]
CSS Padding property setting is confusing sometime, because it can accept 1 value, 2 values , 3 or 4 values together. For example, all the padding property setting below is valid. padding: 10px; padding: 10px 8px; padding: 10px 8px 10px; padding: 10px 8px 10px 9px; CSS Padding Rule. 1) CSS padding order is follow clockwise […]
