+ Start a Discussion
HalcyonandonHalcyonandon 

Custom styling for Customer Portal tabs?

We'd like to use our own styling for our customer portal tabs.  Is this possible or their flexibility limited only to the customize options provided in the customer portal settings?
Best Answer chosen by Admin (Salesforce Developers) 
HalcyonandonHalcyonandon
Okay, did some research on this and you can in fact customize the tabs...  There are limits, since you cannot access the markup, you can only overwrite the css...  Its not complete control, but its enough to get some control over this area.  Furthermore, you could take it so far as to overwrite all the css, create components with the markup, then use those components in your visualforce pages to completely customize your portal.

If you use a plugin like firebug for firefox, you can inspect the elements you want to style.  In this instance I inspected the tab navigation bar.

The markup looks like this...
Code:
<div class="tabNavigation">
<table cellspacing="0" cellpadding="0" border="0" id="tabBar"
class="tab">
 <tbody>
  <tr>
   <td nowrap="nowrap" class="currentTab primaryPalette">
    <div>
     <a title="Home Tab - Selected" href="/home/home.jsp">Home</a>
    </div>
   </td>
   <td nowrap="nowrap">
    <div>
     <a title="Help Tab"
      href="/servlet/servlet.Integration—lid=01rT00000004QTD&ic=1">Help</a>
    </div>
   </td>
   <td nowrap="nowrap" class="last">
    <div>
     <a title="Ideas Tab" href="/ideas/ideaList.apexp">Ideas</a>
    </div>
   </td>
  </tr>
 </tbody>
</table>
</div>

 And the css looks like this...
Code:
.tabNavigation {
    background-image: url(/dimg/portalTopBgFFFFFF008FD4.gif);
    background-color: #000000;
}

.tab td {
    background-image: url(/dimg/portalTabLeft565656006DA2.gif);
    border-bottom-color: #FFFFFF;
}

.tab td div,
.tab .last div {
    background-image: url(/dimg/portalTabRight565656006DA2.gif);
}

.tab .currentTab {
    background-image: url(/dimg/portalTabLeftFFFFFF008FD4.gif);
    border-right-color: #FFFFFF;
}

.tab .currentTab div {
    background-image: url(/dimg/portalTabActiveRightFFFFFF008FD4.gif);
}

body .tab,
body .tab a {
    color: #272727;
    font-family: Arial, Helvetica, sans-serif;
}
body .currentTab,
body .currentTab a {
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
}

 What you would do is include a link to your own css in the header (they suggest also placing the link in the footer, but I believe they suggest this if you're doing extensive customization.

The included css should contain the style elements of the object(s) you want to customize.  You can find this css by looking at the source of the page then searching them for the style classes attached to the components you're planning to style.

It would be nice if direct access to the styles and components' markup were provided to developers... or if there were some official documentation on this out there.



Message Edited by Halcyonandon on 04-30-2008 09:40 AM

All Answers

HalcyonandonHalcyonandon
I tried calling customer service to get an answer to this question (a pain in the butt to get answers in this manner).  I was told by premium support that the customer portal offers no custom style support for the tabs.  Is this true?

I can't believe it to be true... how can a portal system that is meant to be more flexible than the self-service portal offer less flexibility with the UI... that just cant be right.
mtbclimbermtbclimber
Your options for customizing the tabs are limited to the options provided by the customer portal settings options.  You can utilize visualforce to take over the entire experience but that may be overkill depending on your needs.
HalcyonandonHalcyonandon
Do you have to completely customize the portal or end up restricted by the setting constraints?

I was reading about "My Starbucks Idea" and found this bit of information... http://blogs.salesforce.com/ideas/2008/04/guidelines-for.html

It left me with the impression I could isolate the styles used for the tabs, inhibit and replace them with my own by including a stylesheet in the header (and footer for good measure?), the end result being some spiffy customized tabs...

Problem im having is the images for the tabs seem to be generated (with those nasty selected color to white gradients)...

If its anything like apache trinidad skinning, which im afraid it might be in this case... the css on the front side is generated for something like this... so i cant overwrite how these tabs are generated... the reason i think this way is I cant seem to get a handle on the image paths in the css... I see what i think are the tab styles and image paths...

i'll just have to experiment through trial and error i suppose.  I mean when i use firebug I do see the style class names, so I'm just going to inhibit all for each class, then make up my own and see what happens... will post with my results.

(btw if this is venturing outside of visualforce-related content, feel free to move me)
HalcyonandonHalcyonandon
Okay, did some research on this and you can in fact customize the tabs...  There are limits, since you cannot access the markup, you can only overwrite the css...  Its not complete control, but its enough to get some control over this area.  Furthermore, you could take it so far as to overwrite all the css, create components with the markup, then use those components in your visualforce pages to completely customize your portal.

If you use a plugin like firebug for firefox, you can inspect the elements you want to style.  In this instance I inspected the tab navigation bar.

The markup looks like this...
Code:
<div class="tabNavigation">
<table cellspacing="0" cellpadding="0" border="0" id="tabBar"
class="tab">
 <tbody>
  <tr>
   <td nowrap="nowrap" class="currentTab primaryPalette">
    <div>
     <a title="Home Tab - Selected" href="/home/home.jsp">Home</a>
    </div>
   </td>
   <td nowrap="nowrap">
    <div>
     <a title="Help Tab"
      href="/servlet/servlet.Integration—lid=01rT00000004QTD&ic=1">Help</a>
    </div>
   </td>
   <td nowrap="nowrap" class="last">
    <div>
     <a title="Ideas Tab" href="/ideas/ideaList.apexp">Ideas</a>
    </div>
   </td>
  </tr>
 </tbody>
</table>
</div>

 And the css looks like this...
Code:
.tabNavigation {
    background-image: url(/dimg/portalTopBgFFFFFF008FD4.gif);
    background-color: #000000;
}

.tab td {
    background-image: url(/dimg/portalTabLeft565656006DA2.gif);
    border-bottom-color: #FFFFFF;
}

.tab td div,
.tab .last div {
    background-image: url(/dimg/portalTabRight565656006DA2.gif);
}

.tab .currentTab {
    background-image: url(/dimg/portalTabLeftFFFFFF008FD4.gif);
    border-right-color: #FFFFFF;
}

.tab .currentTab div {
    background-image: url(/dimg/portalTabActiveRightFFFFFF008FD4.gif);
}

body .tab,
body .tab a {
    color: #272727;
    font-family: Arial, Helvetica, sans-serif;
}
body .currentTab,
body .currentTab a {
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
}

 What you would do is include a link to your own css in the header (they suggest also placing the link in the footer, but I believe they suggest this if you're doing extensive customization.

The included css should contain the style elements of the object(s) you want to customize.  You can find this css by looking at the source of the page then searching them for the style classes attached to the components you're planning to style.

It would be nice if direct access to the styles and components' markup were provided to developers... or if there were some official documentation on this out there.



Message Edited by Halcyonandon on 04-30-2008 09:40 AM
This was selected as the best answer
aggamanaggaman

Hi,

 

I am trying to override salesforce css for customer portal tabs, I can override css and but can see the output for few seconds after that it again overrides the css from salesforce sites.

 

CSS I am using is:

 

.tabNavigation {
                                                                 
    background-color: #000000 !important;
   
}

.tab td {
                                                                    
    background-color: #000000 !important;
    border-bottom-color:#000!important;
}

.tab td div,
.tab .last div {
    color: #000000 !important;
    border-bottom-color:#000!important;
}

.tab .currentTab {
                                                                   
    border-right-color: #696969;
}

.tab .currentTab div {
                                                                           
}

body .tab,
body .tab a {
    border:collapse;
    color: #FFF;
    font-size:12px;
    font-family: Arial;
    padding-left:14px;
    padding-right:14px;
    text-decoration:none;
    font-weight:bold;
    margin-bottom:18px;
    border-right:1px solid #696969;
    border-bottom-color:#000!important;

   
}
.tab a:hover{
    color: #fff;
    font-size:12px;
    font-family: Arial;
    padding-left:14px;
    padding-right:14px;   
    text-decoration:underline;
    margin-bottom:18px;
    border-right:1px solid #696969;
}
body .currentTab,
body .currentTab a {
    color:#009999;
    font-family: Arial;
    font-weight:bold;
}
body .currentTab a:hover {
    color:#009999;
    font-family: Arial;
    font-weight:bold;
}
.primaryPalette{
color: #696969!important;
}


 How to overcome this again-overriding issue??