function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
vspvsp 

CSS style name for a custom tab

Hi,

I have read "tech-notes.jsp?tn=TN-16" and also looked at the AppStyleGuide download. The technote explains how by setting <body class="account">, the secondary and tertiary palettes could be used to get lighter versions of the color for different sections within the page.

I have created a custom web tab, that links to an S-Control. In the S-Control, I have included reference to custom.css and common.css. From the AppStyleGuide Color System, I chose one of the options available for Custom objects (from Alarm clock, Bank, Bigtop, ... Wrench), the one I chose is labeled as Bridge. Now how do I use this to set as a style for the body so that secondary and tertiary palettes and overall color scheme of the page will be automatically set? I tried <body class="Bridge"> and <body class="bridge"> - neither worked.  By default a black palette and color scheme is appearing in the page.

Am I following the wrong approach or is there something I am missing? Please share some information on how to use the CSS palette for custom tab styles correctly.

Thanks,
VSP.
SteveBowerSteveBower
(Note: this might have been better in the Ajax forum... )

The .css file has predefined color patterns for several of the build-in object types... if you look through the .css file you'll find entries like:
body .bContact .primaryPalette,
body .bContact .secondaryPalette,
.searchResults .listContact .secondaryPalette,
.contact .primaryPalette,
.contact .secondaryPalette {
    background-color: #56458C;
    border-color: #56458C;
}

body .bContact .tertiaryPalette,
.contact .tertiaryPalette {
    background-color: #8370C2;
    border-color: #8370C2;
}
Which define the color palettes.  However, I don't believe they exist for the various Icons (Bank, Wrench, etc.).  So, I think you can define them yourself following the model above (changing .contact to .custom-object and using that as a class), and if you really want to match, you could use a browser plug-in to inspect the icon and get it's colors for a perfect match.

Hope this helps, Steve.

 
vspvsp
Hi Steve,

Appreciate your quick response. I guess that is the only option available.

Thanks,
VSP.
vspvsp
Steve,

I used another approach. I associated a tab style to a custom object, then visited the detail page, and viewed source. Tried this multiple times and saw that the setting of class is like:
body class="custom customTab<N>"
where <N> is a number such 14, 18, 24, etc for various tab styles, but consistent for any particular tab style.

So I identified which tab style I want, viewed the source for a page which had that tab style, identified the value of <N>, and used that in my S-Control body class setting. It works fine now.

Do you think this approach is fine? I know it works now, but it should not suddenly stop working one day! :)

Do let me know your comments.

Thanks,
VSP.
SteveBowerSteveBower
I think you're accomplishing the same thing.

Check out: 

https://na1.salesforce.com/dCSS/Theme2/default/custom.css

which you can also link into your s-controls if you wish.  That's where the customTab stuff is defined.

As to it's long term stability, I have no idea but my guess is that the usage of .css is going to remain for awhile  :-)

Best, Steve.
vspvsp
I guess I managed to avoid defining a new palette by referring to the existing styles in the css files exposed. 

Well, thanks Steve.

Cheers!
VSP.