LDN - Luminis Developer Network

UPDATE: Now with 100% more working power in IE 6

We have run into a frustrating problem at Clayton State University - our Portal outgrew 1024x768! We now have 15 tabs in our Portal, and with some names like "Recreation & Wellness", and "Content Cheat Sheet" we found that people were beginning to have a horizontal scroll bar. 

For all the more that it became a nuisance, the actual fix wasn't too bad at all. You will need to modify your "custom.xsl" for your skin(s), and modify some CSS. Best of all is this is an "approved" change that should be supported through future upgrades!

Lets begin with the custom.xsl file:

Ours is located at $CP_ROOT/webapps/luminis/custom/csu_classic/custom.xsl

Locate and change these two templates to match the following:

<xsl:template name="custTabOn">
  <xsl:param name="tabUrl"/>
  <xsl:param name="tabName"/>
        <div class="tabon_container" style="float: left;">
                <div class="tabon">
                        <a href="{$tabUrl}" id="tab"><strong><xsl:value-of select="$tabName"/></strong></a>
                </div>
        </div>
</xsl:template>

<xsl:template name="custTabOff">
  <xsl:param name="tabUrl"/>
  <xsl:param name="tabName"/>
        <div class="taboff_container" style="float: left;">
                <div class="taboff">
                        <a href="{$tabUrl}" id="tab"><strong><xsl:value-of select="$tabName"/></strong></a>
                </div>
        </div>
</xsl:template>
 

I have removed these tabs from being rendered as table cells (because that is so 1990, and because you run into problems exactly like this one), and replaced it with much more flexible <div> tags.

Also, locate the section in this file like:

<xsl:template name="custNavigation">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td>
        <div id="tabs_dsa">
                <xsl:call-template name="tabs" />
        </div>
      </td>

...

And change the table reference for the element with id="tabs_dsa" to a div as well.

Now that these changes are in place, we can modify our tab's CSS to float left, among other things. You can place this inside of any CSS file, however I have placed mine inside of custom.css since its in the same directory as this customization.

Open up $CP_ROOT/webapps/luminis/custom/csu_classic/custom.xsl and type in the following:

div.tabon {
background: url('/media/edu/clayton/images/tabon-tl.gif');
background-position: 0% 0%;
background-repeat: no-repeat;
height: 20px;
padding: 10px 5px 5px 5px;
margin: 0 3px 0 3px;

float: left;
}

div.tabon_container {
background: url('/media/edu/clayton/images/tabon-tr.gif');
background-position: 100% 0%;
background-repeat: no-repeat;
}

div.taboff {
background: url('/media/edu/clayton/images/taboff-tl.gif');
background-position: 0% 0%;
background-repeat: no-repeat;
height: 20px;
padding: 10px 5px 5px 5px;
margin: 0 3px 0 3px;

float: left;
}

div.taboff_container {
background: url('/media/edu/clayton/images/taboff-tr.gif');
background-position: 100% 0%;
background-repeat: no-repeat;
}

div.taboff a#tab {
color: #333;
}

div.tabon a#tab b {
background-color: #FFFFFF;
color: #1f3c78;
}

.bgtabon {
background-color: #fff;
border-top: 1px solid #ccc;
}
 

This does a little more than just float our tabs to the left - I am changing the look of the tabs as well. If you don't want to change the look, just strip out the relevant pieces of CSS where I change the background images, etc.

I borrowed the looks of the tabs from another member here at Lumdev, so I would love to give credit, but I don't remember who they are. Well, whoever you are thanks - they are an infinite improvement over the "My First Tab" look that ships by default in the Portal.

Screenshots, and tab image files are attached.

TIP: To reduce the size of that custom.css file, run it through a CSS minifier, such as the excellent YUI Compressor