Liferay RSS portlet tweak: CSS twiddling

I hope this will be the first of many posts on Liferay. We’re hoping to use Liferay as the basis for our next-generation intranet. It’s a fantastic piece of software and we’re just starting to kick the tires a bit.

OK – let’s go to tip number 1. For accessibility reasons, the Liferay 6 RSS feed portlet includes the text “(Opens New Window)” as part of the title URL for the feed and for each entry in the feed. This is what it looks like by default:

Image of RSS Portlet showing "Opens New Window

RSS Portlet showing "Opens New Window

We wanted to remove the “Opens New Window” from the display, but we didn’t want to go to the trouble of creating a whole new theme just to do it, and we know editing the core JSP files is not the Liferay way to solve the problem.

 

Liferay provides a nice way to control this behavior. The “Opens New Window” text is surrounded by span tags that can be styled to control their appearance:

<span class="opens-new-window-accessible">(Opens New Window)</span>

So, one way to resolve this issue is to inject a CSS rule that looks like this:

span.opens-new-window-accessible {
display: none;
}

The only challenge now is to figure out where to go to “inject” the CSS into the page. Go to the page that contains the portlet whose appearance you want to modify. Click on “Manage>Page”. Then click on “Look and Feel” and “CSS”. Then paste the CSS into the box and click “Save”.

Image showing addition of custom css

Add custom css

That should do it. You have now overridden the CSS display for this page of the portal. Please let us know in the comments if you know of a better or even just a different way to accomplish the same thing.

Thanks for reading!

Advertisements

2 thoughts on “Liferay RSS portlet tweak: CSS twiddling

  1. Hey Ben,

    This is a great post. The one thing to note about Liferay 6.1x is that we’re working diligently to make it 508 compliant. That specific css class can be used to hide a node, but when a node is set to “display: none” screen readers cannot read it. In this case we want to inform visually impaired readers that the link that they are about to “click,” will open in another window taking them out of the context of the site.

    So, what we would do is something like this:

    /*takes the link out of plain view*/
    .opens-new-window-accessible {
    clip: rect(0, 0, 0, 0);
    right: -9999em;
    z-index: 0;
    }

    /*so when the user is focused on a link and reads it, the link is visible*/
    a:focus .opens-new-window-accessible {
    clip: auto;
    right: 0;
    z-index: 200;
    }

    I hope this helps.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s