4 WebCenter Spaces Essential CSS Tricks

4 WebCenter Spaces Essential CSS Tricks

Composite application development technologies offer powerful aggregation capabilities, along with rich components to surface various backend information to users. These rich user interfaces often leverage server side processes that automatically generate HTML, CSS and JavaScript that are sent to the client to render the interface. This code does a lot to enable rapid development, but the markup generated providing these rich user interfaces often requires visual adjustment to follow corporate branding patterns (font, color, etc).

The following 4 tips use CSS snippets that can be applied to WebCenter Spaces templates to quickly change the UI, without having to compile new code or leverage an IDE. In the example template shown here and attached below, we have used the WebCenter Spaces Side Navigation. Please note that you will want to verify that your changes work across various browsers, as each one has different levels of support for this advanced CSS syntax.


First Child allows you to essentially set a start point from which all children of a certain type will be impacted by the CSS you indicate as applicable. This allows you to quickly apply CSS to an entire series of tags that would normally have to be addresses one by one. In the case of

it lets the page know that any tag under a Div tag with xnn and x1nl CSS classes should use the CSS you have specified.

will let all of the first elements under the div tag with classes xnn and x1nl receive a background color of #333.

Check out more details around the first-child selector pseudo class.

[class*=’yourclassnamehere’] and [id*=’youridhere’]

Have you ever had a series of class names or IDs in CSS that followed a pattern where the start of the class name was the same, but perhaps there were various random characters applied after the shared base? This is what the class* syntax allows up to do. In our example we are using

to indicate that all Div tags with a class starting with xq should have the following style applied as follows

In the above code, you may see something unusual. What is the ! important code? We will cover the ! important modifier next.

! important

Sometimes generated markup from rich controls can contain embedded style code (e.g. <div style=”color:#000;”></div>). The ! important modifier will enable you to override inline styles or any style that is applied previously on the page, regardless of where (top, bottom, etc). Consider ! important as the trump card indicating what style the browser ultimately will apply to a particular item within the document object model.

View additional WC3.org details around ! important.


The following code is WebCenter Spaces specific and will allow you to control what background color is delivered for a basic Spaces template (this can depend on Spaces version, but the pattern will be the same, with the .x1nj class potentially changing).

The following is our final CSS code that is applied to our Space to create a stripped down UI that removes the gradient images that were applied out of the box.

The full template code below from the above screenshot that can be used to jumpstart any UI adjustment that may be undertaken via the CSS tricks above.


Hi John.... Could u plz temme how to vary the width of panelgrouplayout?? i need a page with three panel grouplayouts placed beside each other with widths 50 %, 25% and 25% respectively.....could u help me out with it?