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
Amanda Byrne- Carolina Tiger RescueAmanda Byrne- Carolina Tiger Rescue 

changing CSS class in the value of an apex:commandButton

I wanted to spruce up the text on a commandButton by applying more than one CSS font class on the button label, but I get errors when I use tags inside the value parameter

Page Code:
<apex:commandButton styleClass="btnOrange" action="{!postTourQuizLink}"
value="What did you <font class='Papyrus'>Learn</font> about <font class='Papyrus'>Wildcats</font>? <font class='Afrika'>\</font>"
title="Take the post-Tour Quiz" immediate="false" />

I've also tried removing the value param and putting the label text between tags: <apex:commandButton>Label</apex.commandButton>

I tried creating a variable quizButtonTxt inside the postTourQuizLink function (on the extension ctrl) and then putting value="{!quizButtonTxt}", also not helpful. 

I'm a SF Admin/code hacker-modifier, and so I don't know enough to come up with a workaround- any suggestions? Special character references?

 
Best Answer chosen by Amanda Byrne- Carolina Tiger Rescue
kaustav goswamikaustav goswami
In that case I would suggest you use - actionFunction instead of commandbutton. Then create a button using standard html and css components and provide whatever style you want.

You can do something like this

<a href="#" onclick="call actionFunction()" style="style to make the link a button"><span style="...your style">Learn</span><span style="..your second style">WildCats</span></a>

Then call the action function to get the comtroller method executed
<apex:actionFunction action="{!youraction}" name="yourMethod()" oncomplete="whatever necessary()" />

Thanks,
Kaustav

All Answers

kaustav goswamikaustav goswami
<apex:commandButton action="{!youraction}" value="Button Text" style="color: red;" />

You will have to use css to apply style to your button.

Go this link and check the "style" and "styleclass" attributes for commandbuttons.

you can try and do something like this

define a style class in your page
.styleButtonText{
color: red;
font-weight: bold;
}

then appky the style class to your command button
<apex:commandButton action="{!youraction}" value="Button Text" styleclass="styleButtonText" />

Either this or you can just put in your style inline - the way shown in the first line

Thanks,
Kaustav
Vivek DeshmaneVivek Deshmane
Hi Carolina,
You can try below code and let me know if this helps you. 
<apex:page standardstylesheets="false" showHeader="false">
<style>
.button1
{
background-color:#00FF00;
font-weight:bold;
color:#E56717;
}
</style>
<apex:form >
    
        <apex:commandButton styleclass="button1" value="Click Me!"/>
        
    </apex:form>
</apex:page>

Best Regards,
-Vivek
Amanda Byrne- Carolina Tiger RescueAmanda Byrne- Carolina Tiger Rescue
I've done OK styling the button with a single style, but I want to use three different font styles in the same label-

So the label would look like this- I would be using multple styles in the button label text

User-added image
"Learn" and "Wildcats" are a different CSS style.
kaustav goswamikaustav goswami
In that case I would suggest you use - actionFunction instead of commandbutton. Then create a button using standard html and css components and provide whatever style you want.

You can do something like this

<a href="#" onclick="call actionFunction()" style="style to make the link a button"><span style="...your style">Learn</span><span style="..your second style">WildCats</span></a>

Then call the action function to get the comtroller method executed
<apex:actionFunction action="{!youraction}" name="yourMethod()" oncomplete="whatever necessary()" />

Thanks,
Kaustav
This was selected as the best answer
Amanda Byrne- Carolina Tiger RescueAmanda Byrne- Carolina Tiger Rescue
Ah, see, I'm working with an 8 page, 3 Ctrl app, and I actually had an example for that approach. I tried  moving the action param on the commandButton to the <a>, but I didn't use onclick= call actionFunction. Will try that in the morning.
Amanda Byrne- Carolina Tiger RescueAmanda Byrne- Carolina Tiger Rescue
Well, I got the font issue sorted out, but I've been struggling to get the actionFunction to work. I'm not getting a value to populate in the URL on the button. 

Page Code:
            <apex:actionFunction action="{!postTourQuizFxn}" name="postSelectedAttendee" reRender="quizButton" immediate="false" />
            <apex:outputText value="{!selectedAttendeeButtonId}"/>

            <apex:selectList styleClass="detail" size="1" id="preTourQuizAttendeeOptions" value="{!selectedAttendeeId}"  onchange="call postSelectedAttendee()"> 
                <apex:SelectOptions value="{!preTourQuizAttendeeValues}" >            
                </apex:SelectOptions>
                <apex:param name="Type" value="preTourQuizAttendee.Id" assignTo="{!selectedAttendeeId}"/>                       
            </apex:selectList>   

            <a id="quizButton" href="https://www.getfeedback.com/r/{!surveyid}?CnP_PaaS_EVT__Event_attendee_session__c={!selectedAttendeeButtonId}">                      
            What did you <span class="Papyrus">Learn</span> about <span class="Papyrus">Wildcats</span>?
            </a>

 
Ctrl:
   public String selectedAttendeeId {get; set;}
   public String selectedAttendeeButtonId {get; set;}

    public DTCI_Remote_Methods_AB_Ctrl (ApexPages.StandardSetController controller) {
        selectedAttendeeButtonId = '';       
    }

   public String postTourQuizFxn(){   
            selectedAttendeeButtonId = selectedAttendeeId;
            return selectedAttendeeButtonId;
    } 
kaustav goswamikaustav goswami
<apex:actionFunction action="{!postTourQuizFxn}" name="postSelectedAttendee" reRender="quizButton" immediate="false" />
<apex:outputText value="{!selectedAttendeeButtonId}"/>

<apex:selectList styleClass="detail" size="1" id="preTourQuizAttendeeOptions" value="{!selectedAttendeeId}"  onchange="postSelectedAttendee()"> 
    <apex:SelectOptions value="{!preTourQuizAttendeeValues}" >            
    </apex:SelectOptions>
    <apex:param name="Type" value="preTourQuizAttendee.Id" assignTo="{!selectedAttendeeId}"/>                       
</apex:selectList>   

<apex:outputLink id="quizButton" value="https://www.getfeedback.com/r/{!surveyid}?CnP_PaaS_EVT__Event_attendee_session__c={!selectedAttendeeButtonId}">                      
What did you <span class="Papyrus">Learn</span> about <span class="Papyrus">Wildcats</span>?
</apex:outputLink>

 
Ctrl:
   public String selectedAttendeeId {get; set;}
   public String selectedAttendeeButtonId {get; set;}
   public String surveyId {get; set;}

    public DTCI_Remote_Methods_AB_Ctrl (ApexPages.StandardSetController controller) {
        selectedAttendeeButtonId = '';       
    }

   public void postTourQuizFxn(){   
            selectedAttendeeButtonId = selectedAttendeeId;
            //return selectedAttendeeButtonId;
            surveyId = "whatever value you need";
    } // no need to return here the variables are public and has the getter so they are available in the page

Also it would be great if you can give more code and a clear description about what exactly you want to implement.

Let me know if you need more help on this.
Thanks,
Kaustav
Amanda Byrne- Carolina Tiger RescueAmanda Byrne- Carolina Tiger Rescue
Thanks, that worked well! I suppose I should have specified I was unable to return a value for  the selectedAttendeeButtonId. I had consolidated the code to what I thought was relevant to make it simpler to review, but...

But thanks again!