Skip to content

CSS Tabs

June 13, 2008

First I needed to understand how to get the edges to the tabs:

1. Create a list in html and set its style to display:inline

2. Then set its bg color and also an image that tapers in the left

3. for the right image – create a span element and taper it with another image positioned top right

Very neat – understood this from the site :

Stumbled on the site:

Silverorange looks to be such a wonderful company to work for – but it is in canada and I am no CSS Expert 🙂

Now – downloaded the css cheatsheat – pdf and settings all css properties to get the right look and feel for my tabs. Apparently the tab. js in liferay 4.4.1 is not working as expected – that is it expects all the classes set for each list item – so got hold of the latest jquery.tabs.js from the owner’s site and then modifying the css for it to work in liferay.

No comments yet

Leave a Reply

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

You are commenting using your 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

%d bloggers like this: