How do I stop richfaces adding borders to panels and calendars?
As of version 3.3.0.GA it is not possible to ask richfaces to stop rendering CSS for borders and backgrounds. Its necessary to override each of the properties from the built in stylesheets (the ones contained in org.richfaces.renderkit.html.css which is part of richfaces-ui-3.3.0.GA.jar).
Plug and skin gives you the necessary power to do that, as would custom CSS added using the usual techniques, though plug and skin is arguably better as you can reference abstract colour definitions to compensate for missing backgrounds, like this:
<u:style name="color" skin="abstractColorName" />
The following CSS properties are useful for quickly neutralising the border and background related properties.
border: none;
background: transparent;
To get started with plug and skin you can use the following Maven2 command sequence:
mvn archetype:generate -DarchetypeGroupId=org.richfaces.cdk -DarchetypeArtifactId=maven-archetype-plug-n-skin -DarchetypeVersion=3.3.0.GA -DartifactId=fil-skins -Dpackage=com.feelitlive.richfaces -DgroupId=com.feelitlive.server -Dversion=0.0.1-SNAPSHOT -DarchetypeRepository=http://repository.jboss.com/maven2/
cd fil-skins
mvn cdk:add-skin -Dname=fil -Dpackage=com.feelitlive.richfaces.skins
This is best done from the command line as unfortunately the Eclipse plugins cannot locate the archetypes in the jboss repository (other IDEs may handle that better). You'll need to change artifactId, groupId, package, version and name properties to suit your project. Choose an artefact and package name that reflects the scope of the artefact for holding mulitple skin definitions.
It would be possible - though a lot of work - to add support for skin properties in the general format xxxBackgroundEnabled and xxxBorderEnabled to switch off rendering of those border and background CSS on a case by case basis.
You would need to work with the richfaces team to patch the xcss files in org.richfaces.renderkit.html.css. You'd also need some kind of conditional output functionality in one of the XCSS JSF tag libraries (identified by http:/jsf.exadel.com/template/util or http:/jsf.exadel.com/template in the XCSS files) which I'd anticipate using to wrap groups of CSS properties in the XCSS files.
If you made such a modification to richfaces then you would be able to disable rendering of the controversial CSS from the properties file of any skin.
RichFaces 4 - how to disable skins
You can redefine each CSS style, but it'll be boring...
Have a look at reset css, this can help you to redefine the CSS.
or, you can try to remove style:
<context-param>
<param-name>org.richfaces.CONTROL_SKINNING</param-name>
<param-value>disable</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.CONTROL_SKINNING_CLASSES</param-name>
<param-value>disable</param-value>
</context-param>
or try to use the plain style
<context-param>
<param-name>org.richfaces.skin</param-name>
<param-value>plain</param-value>
</context-param>
How can I remove the css classes from a richfaces component?
Every Richfaces component comes with a set of CSS classes. These CSS classes are used to customize the aspect of your toggle panel (or any other RF component). The four CSS classes, as explained in the component guide, are indeed attached to the HTML components generated by the RF framework.
There are 2 solutions for you:
- Customize your CSS in order to extend the default properties of the four CSS classes. This way, you will have the rendering you want for this component.
- Remove the CSS classes using JavaScript (not recommanded).
The second solution can be achieved easily with some jQuery script:
jQuery(document).ready(function() {
jQuery(".rich-stglpanel").removeClass("rich-stglpanel");
...
});
(this means once the page is loaded, find all elements with CSS class rich-stglpanel
and remove this class).
delete empty space borders in dhtmlxLayout web skin
You need
.dhxlayout_base_dhx_web div.dhx_cell_layout div.dhx_cell_cont_layout {
padding: 0;
}
How to remove grey shadow around popups and tooltips?
In LaF section there is the initialization of ShadowPopupBorder which used for tooltips, popups, and modal dialogs borders. I modified paintBorder and added an additional check if a component object is an instance of JTooltip class - works now.
/**
* Paints the border for the specified component with the specified
* position and size.
*/
@Override
public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
// fake drop shadow effect in case of heavy weight popups
JComponent popup = (JComponent) c;
Image hShadowBg = (Image) popup.getClientProperty(ShadowPopupFactory.PROP_HORIZONTAL_BACKGROUND);
if (hShadowBg != null) {
g.drawImage(hShadowBg, x, y + height - 5, c);
}
Image vShadowBg = (Image) popup.getClientProperty(ShadowPopupFactory.PROP_VERTICAL_BACKGROUND);
if (vShadowBg != null) {
g.drawImage(vShadowBg, x + width - 5, y, c);
}
// draw drop shadow
g.drawImage(shadow, x + 5, y + height - 5, x + 10, y + height, 0, 6, 5, 11, null, c);
g.drawImage(shadow, x + 10, y + height - 5, x + width - 5, y + height, 5, 6, 6, 11, null, c);
g.drawImage(shadow, x + width - 5, y + 5, x + width, y + 10, 6, 0, 11, 5, null, c);
g.drawImage(shadow, x + width - 5, y + 10, x + width, y + height - 5, 6, 5, 11, 6, null, c);
g.drawImage(shadow, x + width - 5, y + height - 5, x + width, y + height, 6, 6, 11, 11, null, c);
}
Richfaces not rendering properly
Just write a custom CSS for the faces components. This happened since I wasn't using the default style so the components had no style associated to them. Creating a custom style sheet for the components resolved the problem.
Is PrototypeScript.js necessary for Richfaces
Unfortunately it is necessary. Richfaces uses jQuery too, so if you instruct Richfaces to load jQuery on all pages (see the docs on how to do it), you can use jQuery. Another way is to use jQuery.noConflict().
List of component dependencies is in richfaces-ui-XXX.jar\META-INF\richfaces.component-dependencies.xml
, if you don't use any component that depends on prototype (only a slim chance), you may remove prototype (see the linked documentation on how).
In Richfaces 4.0 prototype is removed in favor of jQuery.
Related Topics
Create Angular Material Theme with CSS Variables
How to Get a SASS Nested Nested Media Query to Work with the Use of the Media Query or Operator
Input Background Colour Destroys Styling
How to Set Responsive Image's Max Width (Bootstrap 4)
When Should CSS Font-Family Value Use Quotes
Making a Column-Oriented Table in HTML
Max-Height: X% Doesn't Work on Chrome
Combining Two or More CSS Selectors with a Boolean Condition
Why Doesn't This Radial-Gradient Complete the Circle
Safari Rounding Down on Subpixel Calculations
::Before/::After + Flexbox in Mdn
Why Doesn't Justify-Content: Stretch Work
Change Only One of Multiple Backgrounds on Hover
Reliable Solution for Conditional Comments in Outlook.Com HTML Emails