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
PBS_IC786PBS_IC786 

styles and formatting

This may sound like a dumb question but I will break it into multiple parts in order to make answering it somewhat easier?!?

1) How can I change the backgroud color for my VF page?
2) Are stylesheets the only way to control the look and feel of the page? If so, then where and how can I edit stylesheets to get what I need?
3) Does salesforce have any sample stylesheets which I can view/edit to get the page to look how I want?  If so, once I find out where they are, how can I edit them and upload back into my VF application to get desired behavior?

This aspect of visualforce has been really frustrating so far as I am not a CSS expert and am used to the regular old HTML and javascript page manipulation. 

For example, I have a datatable component which uses the styleclass of "list" but if I remove the styleclass then it looks all dumb.  If I leave styleclass out, I cannot specify the columnwidths without an internal server error from salesforce.  I simply want a neat looking table with a column containing an input field.  Right now my column with the input field is huge compared to my other 2 columns and I cannot find an easy way to control this.

Maybe I am missing something big here and that is why I could be asking a stupid question but either way someone please advise...Any help is greatly appreciated...

Thanks
jwetzlerjwetzler
If you're really concerned about the look and feel of your page, there is an attribute on the page component called standardStylesheets that can turn all of our stylesheets off.  That way you can start from scratch and add any kind of look and feel you want.  Naturally you will not want to include the header in your page since the stylesheets are central to making our header and sidebar appear the way they do.

If you DO want the header, then you might have to do some more digging if you're trying to override anything we have specifically defined in our stylesheets.  I would Google some basic css tutorials to get started with that.  You can use your own css style classes to supplement ours, and override the style of any tags you'd like to change.

The Firebug extension for Firefox has great CSS support that will show you exactly how your stylesheets are being used on the page.

You can define css classes in your Visualforce page the same way you define them in html.  However the Visualforce documentation has a good section on static resources, so you can upload your stylesheets as a static resource and then reference them by name using the stylesheet component.  This is generally a cleaner way to develop your pages, especially if you are defining a lot of css classes or needing to reuse them in other pages.

I hope this helps you out a little.  We have tried to give you ways to easily reproduce the same components and styles that we use all over our application, but we've also tried to make it easy to turn all of that off, and let you start from scratch.  If you want to have a mix of your styles and our styles, it will probably take a little sleuthing.

Jill
PBS_IC786PBS_IC786
Jill,

Thank you for the reply.  I think I may have to write my own stylesheets as we do not want any of our interface to use the salesforce stylesheets or headers/sidebar for that matter.  Is there any way I can take the salesforce stylesheet and edit the nodes to reflect the behavior I want?  For example: the styleclass "list" for a datatable in the salesforce stylesheet changed to fit my look for a datatable.  If I wanted to do this, how can I get the standard salesforce stylesheet(s) to edit and test through my firebug after I have made it a static resource and refered to it?

Thanks for all your help.  I appreciate it.
jwetzlerjwetzler
If you do not want any of the salesforce stylesheets then I'm afraid I don't understand your need to "edit" ours.  All you have to do is set standardStylesheets="false" and showHeader="false" and from there you're starting with a blank slate.  We will not be including any salesforce standard stylesheets on your page.

If you'd then like to use a styleclass for a dataTable, you can call it anything you'd like, whether it be "list" or "dataTableList", etc..  You can then define that class in your stylesheet, and upload the stylesheet as a Static Resource.  Link the stylesheet to your page like you've mentioned, and refer to the class in the styleClass attribute of dataTable and you should be good to go.

I'm not sure where you are getting confused.  I should point out that the styleClass attribute on most of our components is synonymous with the class attribute on HTML tags, so there is really no mystery between how Visualforce pages work with CSS and how plain HTML functions.  You should not need to reference, locate, or even understand our stylesheets to do what you are trying to accomplish, because without the standardStyles or header turned on, there is nothing we're even pulling in for you.

Jill
rashrash
Hi
Am developing a VF page where the look and feel has to be customized according to the requirement .

Below is the code i am using to call a class in a .css file (marked in bold and red)

but this class[.text]  affects the entire page . I need to know how to call a class separately for different values.

say for ex i've 2 tables in my VF page and i want different format and styling for them . then how do i call different classes separately one for the 1st table and the other for the 2nd table .


<apex:page standardController="Opportunity" >
 
  <h1>Congratulations</h1>
  This is partner portal page
  <apex:pageBlock Title="Users">
  This page is viewing by: <br></br> 
  <apex:stylesheet value="{!$Resource.htmlsample}"/>
<apex:outputText value="{!$User.FirstName}" styleClass=".text"/>

   and Edwin
  </apex:pageBlock>
 
  <apex:pageBlock Title="Oppprtunity">
  <apex:detail />
  </apex:pageBlock>

</apex:page>

Any help wud be gr8,

thanks
enbaseenbase
Jill,
In your post, you state "You can use your own css style classes to supplement ours, and override the style of any tags you'd like to change."
Won't this only take effect at the page level? How do we set this up to take effect site wide?

IE, I'd like the text links in the tabs to be green when moused over. I see how this takes effect on any pages I go in and manually edit, but how about existing pages? Where do I add sheets to suppliment the existing sf/vf sheets?

Thanks
Fred