Apex Code Development You need to sign in to do that
Don't have an account?
Glen Swindell Working with CSS files in VisualForce
Following the instructions on http://www.salesforce.com/us/developer/docs/pages/Content/pages_styling_custom.htm, I have created a style sheet file that contains the following
<style type="text/css">
.required { font-weight: bold;}
</style>
I then uploaded it as a static resource called tntStyle.
Then in use, I have a visualforce page that includes the style sheet - thus
<apex:page showHeader="false" id="page" sidebar="false" standardController="Feedback__c" action="{!defaultValues}" extensions="FeedbackReturnPageExt" standardStylesheets="false">
<apex:stylesheet value="{!$Resource.tntStyle}"/>
<apex:pagemessages />
<apex:form id="form">
<apex:pageBlock mode="maindetail" >
<apex:pageBlockButtons location="bottom">
<apex:commandButton action="{!save}" value="Submit" />
</apex:pageBlockButtons>
<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem >
<apex:outputLabel for="title">title</apex:outputLabel>
<apex:inputText id="title" value="{!Feedback__c.Title__c}" />
</apex:pageBlockSectionItem>
<apex:inputField value="{!Feedback__c.First_Name__c}" />
<apex:inputField value="{!Feedback__c.Last_Name__c}" />
<apex:pageBlockSectionItem >
<apex:outputLabel styleclass="required" for="cor">Country of Residence</apex:outputLabel>
<apex:inputText id="cor" required="true" value="{!Feedback__c.Country_of_Residence__c}" />
</apex:pageBlockSectionItem>
<apex:inputField value="{!Feedback__c.Email__c}" />
<apex:pageBlockSectionItem >
<apex:outputLabel for="emailToCheck">Email verification</apex:outputLabel>
<apex:inputText id="emailToCheck" value="{!EmailToCheck}" />
</apex:pageBlockSectionItem>
<apex:inputField value="{!Feedback__c.Phone__c}" />
<apex:inputField value="{!Feedback__c.Subject__c}" />
<apex:pageBlockSectionItem >
<apex:outputLabel styleclass="required" for="CustomerComments">Comments</apex:outputLabel>
<apex:inputField id="CustomerComments" required="true" value="{!Feedback__c.Customer_Comments__c}" />
</apex:pageBlockSectionItem>
<apex:inputField value="{!Feedback__c.Customer_Entered_Account_Number__c}"/>
<apex:inputField value="{!Feedback__c.Consignment_Number__c}" />
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
It does not however seem to change the font of the text to bold, whereas if I include the style "inline" within the page, it does.
Is there some stage I am missing to get this working with a CSS file.
Many thanks
You don't need the style tag:
<style type="text/css">.required { font-weight: bold;}
</style>That is used for an inline style block in the VF page itself (which you can do as well). If you externalize the CSS in a separate file and include it, you don't want the tags.
All Answers
Hi Glen,
When you use
the standard stylesheets of salesforce are also included into your page by default.
Having said this, there might be a clash between your custom CSS and Salesforce's own CSS. Try this
Let me know what happens
Hello Edwin,
Thanks for the quick reply. Unfortunately, the suggestion of changing the name of the style class did not work. I get exactly the same result.
Hi Glen,
Perhaps removing the "." from the class in your CSS file so that it is just "required".
For example,
<style type="text/css">
required { font-weight: bold;} // no period before required
</style>
Hope that helps.
Clint
You don't need the style tag:
<style type="text/css">.required { font-weight: bold;}
</style>That is used for an inline style block in the VF page itself (which you can do as well). If you externalize the CSS in a separate file and include it, you don't want the tags.
I just checked the documentation, and it is misleading. It will be fixed for the Summer '10 release. Thanks for bringing this up.
...stephan
Many thanks all for your responses. The solution in the end was as Stephan suggested - I just needed to remove the tags. It now works a treat.