Using CSS with the Tab Pages weblet

Using CSS with the Tab Pages weblet

 

How the Default CSS Works

Adding your own CSS Styles

The Tab Pages weblet is constructed using an HTML table. The tabs themselves are constructed using an unordered list. The HTML for a Tab Pages weblet looks something like this:

<table id="TabPagesName" class="std_tab_pages" cellpadding="0" cellspacing="0">

   <tbody>

      <tr>

         <td class="std_tab_pages_top_tabs">

            <ul class="std_tab_pages_tabs">

               <li class="std_tab_active">

                  <a onclick="return stdTabPagesTabClicked(this, 1)">Organisation</a>

               </li>

               <li>

                  <a onclick="return stdTabPagesTabClicked(this, 2)">Contact</a>

               </li>

               <li>

                  <a onclick="return stdTabPagesTabClicked(this, 3)">Employment</a>

               </li>

            </ul>

         </td>

      </tr>

      <tr>

         <td class="std_tab_pages_content_wrapper">

            <div class="std_tab_pages_content">

               Tab 1 Content

            </div>

            <div class="std_tab_pages_content" style="display:none">

               Tab 2 Content

            </div>

            <div class="std_tab_pages_content" style="display:none">

               Tab 3 Content

            </div>

 

           </td>

      </tr>

   </tbody>

</table>