function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
FippyFippy 

How do I make my stylesheet override SalesForce's

I'm developing a portal site and have NOT overridden the standard stylesheet behavior in the <apex:page> tag, because I need the standard SF CSC.

 

At the top of my pages, I include my own CSS using <apex:stylesheet>

 

I can't control the order that the stylesheets cascade in. My own appears somewhere in the middle of the list and is overridden by portal.css and extended.css. This means that I cannot properly override SF styles.

 

How do I force my stylesheet to the end of the cascade chain, so it is more authorative than the SF css files?

Thanks!

kiranmutturukiranmutturu

with salesforce stylesheets and on top of that ur CSS ..this is highly impossible....

just remove all the salesforce stylesheets.. using

 

<apex:page standaradstylesheets="false" showheader="false" sidebar="false">

 

but i didn't understand as u are sayind that u are developing a portal...then what is the requirement of standard CSS..? may b this is not relavant to ask? just to know....

FippyFippy

Yes, I'm developing a portal that has my own pages mixed in with standard salesforce ones. I don't want to turn off the standardstylesheets or showheader or else I have to rebuild the template they give me.

 

You'd think it would make your own stylesheet last since the only reason you would want one is to override Salesforce styles. I can get by using the !important attributes in my stylesheet. Not what I really wanted to do, but it works.

 

Thanks for confirming that you can't set the stylesheet order.

Andy BoettcherAndy Boettcher

You can't set the stylesheets order, but as a general HTML/CSS rule - inline CSS always overrides a stylesheet.  A bit inefficient yea, but if you have a bunch of controls that you want to apply the same CSS inline to - you could create a string in a Controller and bring that forward in the VF page.  If you're not using a Controller - you're stuck with manual inline.

 

-Andy

Devendra@SFDCDevendra@SFDC

 

Hi techman97,

 

--------------------------------------------------------------------------------------------------------

 you could create a string in a Controller and bring that forward in the VF page.

 

--------------------------------------------------------------------------------------------------------

 

Can you please give us an example on handling stylesheet code through controller. A snippet of code would be really helpful.

 

Thanks & Regards,

Devendra S 

Andy BoettcherAndy Boettcher

It's just like if you were to declare a regular String in the Controller and bringing it forward:

 

****** Controller

public String strStyleSheet {get;set;}

 

public void ControllerConstructor() {

     strStyleSheet = 'bgcolor="red"';

}

 

******* VF Page

<apex:outputText value="something" style="{!strStyleSheet}" />

 

-Andy

FippyFippy

Wouldn't it be better to define the styles in the VF page with a <style> block? I assume we could do that.

 

It breaks the fundamental principle of the MVC pattern to mix view configuration in with the controller code. Now you need to go to the code to edit styling. I realize this allows you to utilize those styles in any VF page that used that controller, but that still breaks the purpose of having stylesheets in the first place.

 

Ideally, SF would provide an attribute that could force custom stylesheets to cascade AFTER the SF ones. That's how CSS should work.

 

 

Andy BoettcherAndy Boettcher

Correct, however I'll "break the rule" =) if I have to mix up styling say - on a line-by-line basis in a table or something like that, or anything that would require a lot of if/then logic in the VF page.  I try to keep all of the non "is this true or is it false" out of the VF page.

 

-Andy

Devendra@SFDCDevendra@SFDC

 

Hi techman97,

 

Thanks a lot.

 

Thanks,

Devendra