 |
|
Below is a code framework for a company style templates:
<style>
body { background-color: #fff; } /* colors for top bar */ #cd_tabs_top_bar { background: ###TOP_TAB_BAR_BACKGROUND###; } #cd_tabs_top_bar li a, #cd_tabs_top_bar li a:link, #cd_tabs_top_bar li a:visited, #cd_tabs_top_bar li a:hover, #cd_tabs_top_bar li a:active, #cd_tabs_top_bar li a:hover { color: ###TOP_TAB_BAR_TEXT###; } #cd_tabs_top_bar li a.selected, #cd_tabs_top_bar li a.selected:link, #cd_tabs_top_bar li a.selected:visited, #cd_tabs_top_bar li a.selected:hover, #cd_tabs_top_bar li a.selected:active, #cd_tabs_top_bar li a.selected:hover { color: ###TOP_TAB_BAR_TEXT###; } /* colors for tabs */ ul.cd_tabs { list-style: none; padding: 0; margin: 0; } ul.cd_tabs li { float: left; display: block; margin: 0; padding: 0; padding-right: 5px; font-size: 13px; } ul.cd_tabs a { color: ###INACTIVE_TAB_TEXT###; background-color: ###INACTIVE_TAB_BACKGROUND###; text-decoration: none; } ul.cd_tabs a.tab_selected { color: ###ACTIVE_TAB_TEXT###; background-color: ###ACTIVE_TAB_BACKGROUND###; font-weight: bold; } ul.cd_tabs a span { padding: 4px 7px 4px 7px; font-size: 13px; } ul.cd_tabs a.tab_selected span { color: ###ACTIVE_TAB_TEXT###; } ul.cd_tabs a, ul.cd_tabs a span { display: block; float: left; color: ###INACTIVE_TAB_TEXT###;cursor:hand; cursor:pointer; } /* hover menu colors behavior */ li.cd_top_menu_hover_on, li.cd_top_menu_hover_on a, li.cd_top_menu_hover_on a:link, li.cd_top_menu_hover_on a:visited, li.cd_top_menu_hover_on a:hover, li.cd_top_menu_hover_on a:active, li.cd_top_menu_hover_on a:hover { background-color: ###TOP_TAB_BAR_BACKGROUND###; color: ###TOP_TAB_BAR_TEXT###; } li.cd_top_menu_hover_off { } li.cd_bottom_menu_hover_on, li.cd_bottom_menu_hover_on a, li.cd_bottom_menu_hover_on a:link, li.cd_bottom_menu_hover_on a:visited, li.cd_bottom_menu_hover_on a:hover, li.cd_bottom_menu_hover_on a:active, li.cd_bottom_menu_hover_on a:hover { background-color: ###ACTIVE_TAB_BACKGROUND###; color: ###ACTIVE_TAB_TEXT###; } li.cd_bottom_menu_hover_off { } </style> <div style="width:95%; margin: auto; background-color: #fff; margin-top: 5px; "> ###CURRENT_TIME### <div style="background: #fff url(/i/wiki_templates/custom/xxxxxx/xxxxx.gif) no-repeat; height: 60px;"> <div style="float:right; padding-top: 7px; padding-right: 10px; text-align: right;"> ###MAIN_SEARCH_BOX### <div style="padding-top: 8px; font-size: 11px; "><b>###LOGGED_IN_USERS_EMAIL###</b> [ <a style="font-family:Verdana;" href="/logout" target="_top">Sign Out</a> ]</div> </div> <!-- THIS IS OPTIONAL - USE ONLY IF YOU DO NOT USE TOP BACKGROUND URL --> <div style="padding: 10px;">###COMPANY_LOGO###</div> </div> <!-- IF TEMPLATE HAS A BOTTOM NAVIGATION MENU --> <div id="cd_tabs_top_bar"> <ul> <li style="float:right; padding-right: 20px;"><a href="#" name="cd_tab_popup_help_link" id="cd_tab_popup_help_link" onclick="cd_tab_popup_help.showPopup('cd_tab_popup_help_link'); return false;">Help <img align="absmiddle" src="/i/icons/white_arrow_down.gif" height="8" width="11" border="0" /></a></li> <li style="float:right;"><a href="#" name="cd_tab_popup_account_link" id="cd_tab_popup_account_link" onclick="cd_tab_popup_account.showPopup('cd_tab_popup_account_link'); return false;">Account <img align="absmiddle" src="/i/icons/white_arrow_down.gif" height="8" width="11" border="0" /></a></li> <li><a href="#" name="cd_tab_popup_dashboard_link" id="cd_tab_popup_dashboard_link" onclick="cd_tab_popup_dashboard.showPopup('cd_tab_popup_dashboard_link'); return false;">Dashboard <img align="absmiddle" src="/i/icons/white_arrow_down.gif" height="8" width="11" border="0" /></a></li> <li><a href="#" name="cd_menu_workspace_list_link" id="cd_menu_workspace_list_link" onclick="cd_menu_workspace_list.showPopup('cd_menu_workspace_list_link'); return false;">Workspaces <img align="absmiddle" src="/i/icons/white_arrow_down.gif" height="8" width="11" border="0" /></a></li> ###CD_CUSTOM_TOP_WORKSPACE_LIST### </ul> </div> <div style="clear: both;"></div> <!-- END BOTTOM NAVIGATION --> ###LAST_VIEWED_BAR### <div style="height:15px;"></div> ###IF:SHOW_SUB_MENU### <!-- Start Sub Tab Menu --> <div style="height: 24px; margin: 3px 20px 0 20px;"> <div style="float:right;"><ul class="cd_tabs">###CD_BOTTOM_TABDISPLAY###</ul></div> <span style="font: bold 14px Arial; ">###PAGE_TITLE###</span> </div> <!-- End Sub Tab Menu --> <table border="0" cellpadding="0" cellspacing="0" class="cd_table_with_shadow"> <tr> <td rowspan="2"><img src="/i/spacer.gif" height="1" width="10" /></td> <td style="height: 5px; width: 100%; background-color: ###ACTIVE_TAB_BACKGROUND###; border-left: 1px solid #ddd; "><img src="/i/spacer.gif" height="5" width="100%" /></td> <td rowspan="2" class="cd_shadow_right"><img src="/i/spacer.gif" height="1" width="12"></td> </tr> <tr> <!--td--> <td style="background-color: #fff; padding: 9px; border-left: 1px solid #ddd; "> ###ENDIF:SHOW_SUB_MENU### <!-- Begin Main Body Content --> ###MAINCONTENT### <!-- End Main Body Content --> ###IF:SHOW_SUB_MENU### </td> <!--td--> </tr> <tr> <td></td> <td class="cd_shadow_bottom"></td> <td class="cd_shadow_right_corner"></td> </tr> </table> ###ENDIF:SHOW_SUB_MENU### <!-- USUALLY FOOTER GOES HERE --> <div style="margin-top: 10px; padding: 10px 0 10px 0; font-size: 11px; text-align: center; color: #737373;">Copyright © 2007 XXXXXXXXXXX</div> </div> ###SERVER_EXEC_TIME### USUALLY FOOTER STUFF GOES HERE
First is the custom CSS. You must include the following style template otherwise your tabs won't render. You can modify the colors and background images of the tabs to reflect your style. We use semantic lists for our tabs, so its easy to change the background image.
<style>
body { background-color: #fff; } /* colors for top bar */ #cd_tabs_top_bar { background: ###TOP_TAB_BAR_BACKGROUND###; } #cd_tabs_top_bar li a, #cd_tabs_top_bar li a:link, #cd_tabs_top_bar li a:visited, #cd_tabs_top_bar li a:hover, #cd_tabs_top_bar li a:active, #cd_tabs_top_bar li a:hover { color: ###TOP_TAB_BAR_TEXT###; } #cd_tabs_top_bar li a.selected, #cd_tabs_top_bar li a.selected:link, #cd_tabs_top_bar li a.selected:visited, #cd_tabs_top_bar li a.selected:hover, #cd_tabs_top_bar li a.selected:active, #cd_tabs_top_bar li a.selected:hover { color: ###TOP_TAB_BAR_TEXT###; } /* colors for tabs */ ul.cd_tabs { list-style: none; padding: 0; margin: 0; } ul.cd_tabs li { float: left; display: block; margin: 0; padding: 0; padding-right: 5px; font-size: 13px; } ul.cd_tabs a { color: ###INACTIVE_TAB_TEXT###; background-color: ###INACTIVE_TAB_BACKGROUND###; text-decoration: none; } ul.cd_tabs a.tab_selected { color: ###ACTIVE_TAB_TEXT###; background-color: ###ACTIVE_TAB_BACKGROUND###; font-weight: bold; } ul.cd_tabs a span { padding: 4px 7px 4px 7px; font-size: 13px; } ul.cd_tabs a.tab_selected span { color: ###ACTIVE_TAB_TEXT###; } ul.cd_tabs a, ul.cd_tabs a span { display: block; float: left; color: ###INACTIVE_TAB_TEXT###;cursor:hand; cursor:pointer; } /* hover menu colors behavior */ li.cd_top_menu_hover_on, li.cd_top_menu_hover_on a, li.cd_top_menu_hover_on a:link, li.cd_top_menu_hover_on a:visited, li.cd_top_menu_hover_on a:hover, li.cd_top_menu_hover_on a:active, li.cd_top_menu_hover_on a:hover { background-color: ###TOP_TAB_BAR_BACKGROUND###; color: ###TOP_TAB_BAR_TEXT###; } li.cd_top_menu_hover_off { } li.cd_bottom_menu_hover_on, li.cd_bottom_menu_hover_on a, li.cd_bottom_menu_hover_on a:link, li.cd_bottom_menu_hover_on a:visited, li.cd_bottom_menu_hover_on a:hover, li.cd_bottom_menu_hover_on a:active, li.cd_bottom_menu_hover_on a:hover { background-color: ###ACTIVE_TAB_BACKGROUND###; color: ###ACTIVE_TAB_TEXT###; } li.cd_bottom_menu_hover_off { } </style>
The next part of the template should contain the actual header. This should probably include your logo. Including the code below will allow you to show the search box and user email address as well as a logout link.
<div style="float:right; padding-top: 7px; padding-right: 30px; text-align: right;">
###MAIN_SEARCH_BOX### <div style="padding-top: 8px; font-size: 11px; "><b>###LOGGED_IN_USERS_EMAIL###</b> [ <a style="font-family:Verdana;" href="/logout" target="_top">Sign Out</a> ]</div> </div>
If the user has the Last Viewed Bar option enabled in their settings the Last Viewed bar will be displayed here:
###LAST_VIEWED_BAR###
In order for pages that contain subtabs to render properly you will need to include the conditional logic of: ###IF:SHOW_SUB_MENU### and closing ###ENDIF:SHOW_SUB_MENU###. This is the HTML/CSS for those subtabs.
Probably the most important element in the entire template is:
###MAINCONTENT###
if you do not have this your body will not be displayed.
After the body content you probably want to call the same conditional logic again to close any tables/divs that you have open.
The last part will be the footer. This usually includes some copyright information and links to other pages or sites.
Your output can look something like this:
Would you like a different logo on each workspace? This might be nice when you have client specific workspaces and want to show them their logo instead of yours or a combination of both.
|
|
|
||||
 |
|
|
||
In IE7, the last code window for item 4. At the top of the template add: only shows the bottom scroll bar. You can't copy the code to add it to your template.