Return to Central Desktop

All Recent Activity

Search Developer Wiki:

More

Hotkeys: Hold CTRL + X CutCopyV PastBoldUnderlineItalicZ UndoY Redo

Last edited by Arnulf Hsu Jul 11 CompanyStyleTemplateCodeOverview

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>

    
    <div style="padding: 10px;">###COMPANY_LOGO###</div>

</div>


<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>


###LAST_VIEWED_BAR###

<div style="height:15px;"></div>


###IF:SHOW_SUB_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>


<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 style="background-color: #fff; padding: 9px; border-left: 1px solid #ddd; ">
###ENDIF:SHOW_SUB_MENU###


###MAINCONTENT###


###IF:SHOW_SUB_MENU###
    </td>
    
</tr>
<tr>
    <td></td>
    <td class="cd_shadow_bottom"></td>
    <td class="cd_shadow_right_corner"></td>
</tr>
</table>
###ENDIF:SHOW_SUB_MENU###


<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.

Upload their logo to the Application Style Template Images area (under Company Setup).
1. Make sure their logo is the EXACT same size as the logo you are using
2. Add an id tag attribute to your img tag for the logo so it looks something like this: <img id="mycompanylogo" src="/i/wiki_templates/custom/xxxxxx/xxxxx.gif" />
Then go to the workspace where you want to apply the client logo. Go to Settings -> Style Templates -> Create New Style Template. Copy from an existing style template and name it the Client Name.
At the top of the template add:
<script type="text/javascript">document.getElementById("mycompanylogo").src="/i/wiki_templates/custom/xxxxxx/xxxxx.gif";</script>
Preview the template, if it looks ok save it and make sure you click USE template after saving.