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
asadimasadim 

Page styles getting messed up when transferred to VF

Hi,

 

I have a few CSS-based pages written in JavaScript and and index file in HTML. These guys work beautifully on my local machine but when I upload them into salesforce as a Static Resource and convert the index page to a VF page all of a sudden the styles get messed up. eg. some font colours change. The CSS files are being loaded fine as the font types and everything is showing correctly.

 

Any ideas? Thanks!

Best Answer chosen by Admin (Salesforce Developers) 
asadimasadim

Thank all. But I found the issue: I had to set showHeader to false.

 

X_X

All Answers

imuino2imuino2

Some things to check.

Is there any other css style, did salesforce override some of yours?

Did salesforce change any of your div names or classes, or you put some of your code inside salesforce tags?

sforce2009sforce2009

Have you made the standardStylesheets=false for your page tag?

asadim2asadim2

Thanks all. Yes I have the standardStylesheets attribute to false.

 

imuino2: how would I check to see if SF has overwritten my pages? Remember that everything is inside a Static Resouce.

 

Feel free to throw more ideas; better than being stuck!

incuGuSincuGuS

Be sure to install FIREBUG as a Firefox plugin , it greatly improves writing css styles, you can see what styles are affecting an elements , and many many many more features.

 

now back to your problem, since you cant check if there are styles "stepping over" your own ones. ill recommend this:

 

Css works with a hierarchy , so in order to get your styles to have the highest, and not be stepped over you can add:

 

 

html body .myselector .myselector #theNeededSelector tag{
...
}

 By writing CSS like this, ie : the full "dom path" to the tag/class/whatever you are trying to style makes THIS particular style to have a high hierarchy, because its asking for a very specific thing : " Style all tags inside the needed selector, inside my selector, inside my selector , inside body, inside html" so the more specific, the higher the hierarchy.

 

Also be sure to add your stylesheet as the very last, so that no other styles step over it reading order.

 

asadimasadim

Thank all. But I found the issue: I had to set showHeader to false.

 

X_X

This was selected as the best answer