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
SurajCovelixSurajCovelix 

Using Visualforce styleshet

Hello,

         I am trying to use styles for my command buttons, but its not getting applied. The Code is as follows :

 

--- CSS style ---

<style type="text/css">
.styled-button-3 {
    -webkit-box-shadow: rgba(0, 0, 0, 0.0.97) 0px 1px 0px 0px;
    background-color: #5B74A8;
    border: 1px solid #29447E;
    font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    height: 20px;
    color: #fff;
    border-radius: 5px;
    background-image=none;
   
}
</style>

 

  --- commandbutton code ---

      <apex:pageBlock>

      <apex:pageBlockSectionItem>
      <apex:commandButton value="Refresh" action="{!showChart}" styleClass="styled-button-3"/>
       </apex:pageBlockSectionItem>

       </apex:pageBlock>

 

How can I make it work?

vishal@forcevishal@force

It worked when I tried the same code. :-S

SurajCovelixSurajCovelix

Thanks Vishal. Can you please tell me what steps you followed. Its still not working in my developer's account. Is there anything I need to enable or check?

vishal@forcevishal@force

I only copy-pasted your style tag in one of the pages. I had a command button there, so gave styleClass attribute as the style you have provided here and it did change it's appearance.

SurajCovelixSurajCovelix

Okay. I created a second page and tried, but no luck still. The button is a normal button.

 

<apex:page >
  <apex:form >
  <style type="text/css">
.styled-button-3 {
    -webkit-box-shadow: rgba(0, 0, 0, 0.0.97) 0px 1px 0px 0px;
    background-color: #5B74A8;
    border: 1px solid #29447E;
    font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    height: 20px;
    color: #fff;
    border-radius: 5px;
    background-image=none;
   
}
</style>

  <apex:pageBlock >
   <apex:pageBlockSection >
   <apex:commandButton value="Style" styleClass="styled-button-3"/>
   </apex:pageBlockSection>  
  </apex:pageBlock>
  </apex:form>
</apex:page>

Abhay AroraAbhay Arora

Hi Suraj,

 

I tried your code initially it was not working then i tried changing the style to

<apex:page standardStylesheets="false" showHeader="false">
<apex:form >
<style type="text/css">

.myst{
    background-color: RED;
    border: 10px solid #29447E;
    font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    padding: 2px 6px;
    height: 20px;
    color: #fff;
    border-radius: 5px;
    background-image=none;
        -webkit-box-shadow: rgba(0, 0, 0, 0.0.97) 0px 1px 0px 0px;
}
</style>


<apex:commandButton styleClass="myst" value="my btn" id="mybun" />

   </apex:form>

</apex:page>

 

and it worked for me.

 

Please test again with above

SurajCovelixSurajCovelix

Thanks Abhay. As you said, it worked when I added the attribute, standardStylesheets="false" for apex:page. The downside of this is, the entire VF page looses its salesforce look and feel and turns into a plain HTML page. So can there be a way to apply style to only this buton in the entire VF page?

Abhay AroraAbhay Arora

Ok try making  a css file put it in your static resource and include that in your page and then try to apply the styleClass actually the styles we apply are being overritten so

 

1.) Add a style="" in yout button it will work for you

2. Add a style sheet in your static resource include in  your page and then check your page

 

Above will solve your issue

SurajCovelixSurajCovelix

I uploaded a static resource named 'customCSS' and uploaded the customCSS.css file in it. 

 

-- customCSS.css --

.styledbutton {
    -webkit-box-shadow: rgba(0, 0, 0, 0.0.97) 0px 1px 0px 0px;
    background-color: #5B74A8;
    border: 1px solid #29447E;
    font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
    font-size: 9px;
    font-weight: bold;
    padding: 2px 6px;
    height: 20px;
    color: #fff;
    border-radius: 5px;
    background-image=none;
  }

 

Then I added that stylesheet in my VF page with : <apex:stylesheet value="{!$Resource.customCSS}"/>

After that, I changed my button code to :

 <apex:commandButton value="Refresh" action="{!showChart}" styleClass="styledbutton" style=""/>

 

Not working yet .