Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

CSS usage in portlets requires care by the portlet developers to avoid styling conflicts with both the portal framework and other portlets on the same page. Below are uPortal's recommendations for using CSS in your portlets to help mitigate these issues.

CSS Loading

Unfortunately the JSR-168 specification doesn't provide a way for a portlet to contribute to the <head> of a document for things like loading CSS files. That leaves the best option for a developer to load the CSS frameworks that the portlet needs inline in the HTML markup of the page. Below is an example of loading a CSS file in the portlet content

<link rel="stylesheet" href="/MyPortletWebapp/css/my_portlet.css" type="text/css"/>
<div id="MyPortletWebapp">
    <!-- portlet content here -->
<div>

CSS Scoping

You'll notice in the example above that immediately after the CSS <link> element is a div with a name specific to the portlet web application. This div is used to scope all styles created for the portlet.

Scoping your portlet's CSS under an outer div named specifically for your portlet web application has two important advantages:

  1. Your scoped CSS classes will be the most specific styles for your elements and take precedence over other styles on the page.
  2. Your scoped CSS classes will not apply to any elements outside of your wrapper div preventing unintended side effects on other content on the page.
  • No labels