You need to sign in to do that
Don't have an account?
![Tre Pedigo Tre Pedigo](https://dfc-org-production.my.site.com/img/userprofile/default_profile_45_v2.png)
Styling a single input field within a pageBlockSection in my VF page
Hello all,
I have a section of my visualforce page that displays all of the individual services our company provides (there's about 30 of them). I have set up process automation so that these fields are automatically edited upon selection of a "Service Level" field. My requirement is that I need to have the "service level" field and each of the individual fields in the same section. But, what I also need to do is apply styling to the "service level" field so that it stands out to my team. Ideally this would involve making the font of the field larger/bold and centering the field as well. I think its also important to mention that this is a picklist field. My code is as follows:
<apex:page standardController="opportunity" lightningStylesheets="false" tabstyle="account">
<apex:form >
<apex:pageBlock title="Implementation-Required Opportunity Fields" >
<style>
body .bPageBlock .pbBody .blue .pbSubheader{
background-color:#007add;
}
body .bPageBlock .pbBody .grey .pbSubheader{
background-color:#c0c0c0;
}
body .bPageBlock .pbBody .red .pbSubheader h3{
color:+005fb2;
}
.One
{
margin:40px;
padding:40px;
width:150px;
height:200px;
background-color:blue;
border-radius:40px;
border:10px solod red;
font-size:40px;
}
</style>
<apex:pageBlockButtons >
<apex:commandButton action="{!save}" value="Save"/>
<apex:commandButton action="{!quicksave}" value="Quick Save"/>
</apex:pageBlockButtons>
<apex:outputPanel styleClass="blue" layout="block">
<apex:pageBlockSection title="General Information" columns="2" >
<apex:inputField value="{!opportunity.account.name}"/>
<apex:inputField value="{!Opportunity.name}"/>
<apex:inputField value="{!opportunity.owner.name}" label="Sales Person"/>
<apex:inputField value="{!Opportunity.Sales_Engineer__c}"/>
<apex:inputField value="{!Opportunity.Director_of_Implementation__c}"/>
<apex:inputField value="{!Opportunity.Customer_Success_Manager__c}"/>
<apex:inputField value="{!Opportunity.CloseDate}"/>
<apex:inputField value="{!Opportunity.Desired_Go_Live_Date__c}"/>
<apex:inputField value="{!Opportunity.Customer_Success_Demo__c}"/>
<apex:inputField value="{!Opportunity.Total_Square_Footage__c}" style="width: 100px"/>
<apex:inputField value="{!Opportunity.TCV__c}"/>
<apex:inputField value="{!Opportunity.Vertical_Market__c}"/>
<apex:inputField value="{!Opportunity.Pipeline_Type__c}"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Address">
<apex:outputtext value="{!Opportunity.account.billingstreet}"/>
<apex:outputtext value="{!Opportunity.account.billingcity}"/>
<apex:outputtext value="{!Opportunity.account.billingstate}"/>
<apex:outputtext value="{!Opportunity.account.billingcountry}"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Project Detail">
<apex:inputField value="{!Opportunity.description}" style="width: 900px; height: 100px" label="Project Detail"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="SE Notes and Use Cases">
<apex:inputField value="{!Opportunity.SE_Notes__c}" style="width: 900px; height: 100px" label="SE Notes and Use Cases"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Services" columns="1" >
<apex:pageBlocksectionItem datatitle="Service Level" >
<apex:inputField value="{!Opportunity.Service_Level__c}"/>
</apex:pageBlocksectionItem>
<apex:inputField value="{!Opportunity.Remote_Training_Implementation__c}" />
<apex:inputField value="{!Opportunity.Gap_Analysis_and_Milestone_Reporting__c}"/>
<apex:inputField value="{!Opportunity.Use_of_technology_or_Recommended_Best_Pr__c}"/>
<apex:inputField value="{!Opportunity.X2D_Arch_Floor_Plans__c}"/>
<apex:inputField value="{!Opportunity.Key_Plans__c}"/>
<apex:inputField value="{!Opportunity.Mechanical__c}"/>
<apex:inputField value="{!Opportunity.Electrical__c}"/>
<apex:inputField value="{!Opportunity.Plumbing__c}"/>
<apex:inputField value="{!Opportunity.Room_List__c}"/>
<apex:inputField value="{!Opportunity.Work_Order_Management_System_Configurati__c}"/>
<apex:inputField value="{!Opportunity.Critical_Asset_Management_Template_Onl__c}"/>
<apex:inputField value="{!Opportunity.Finishes_Template_Only__c}"/>
<apex:inputField value="{!Opportunity.O_M_Spec_Sheets_Curated__c}"/>
<apex:inputField value="{!Opportunity.Inventory_Management_Template_Only__c}"/>
<apex:inputField value="{!Opportunity.Vendor_Management_Template_Only__c}"/>
<apex:inputField value="{!Opportunity.Preventative_Maintenance_Schedules__c}"/>
<apex:inputField value="{!Opportunity.Hot_Spotting_Assets_only__c}"/>
<apex:inputField value="{!Opportunity.Hot_Spotting_Room_only__c}"/>
<apex:inputField value="{!Opportunity.Rooftop_Area__c}"/>
<apex:inputField value="{!Opportunity.QR_Codes_Mail__c}"/>
<apex:inputField value="{!Opportunity.QR_Codes_Placement__c}"/>
<apex:inputField value="{!Opportunity.On_site_Training_Implementation__c}"/>
<apex:inputField value="{!Opportunity.Interior_Walls_Multivista__c}"/>
<apex:inputField value="{!Opportunity.Panoramic_Pictures__c}"/>
<apex:inputField value="{!Opportunity.Asset_Specific_Floor_Plans_Up_to_3__c}"/>
<apex:inputField value="{!Opportunity.Fire__c}"/>
<apex:inputField value="{!Opportunity.Furniture__c}"/>
<apex:inputField value="{!Opportunity.Kitchen_Equipment__c}"/>
<apex:inputField value="{!Opportunity.Audio_Visual_IT__c}"/>
<apex:inputField value="{!Opportunity.Security__c}"/>
<apex:inputField value="{!Opportunity.Outside_Areas_Exception_Rooftop_Areas__c}"/>
<apex:inputField value="{!Opportunity.Floorplan_Asset_Isolation_Extraction__c}"/>
<apex:inputField value="{!Opportunity.Users_and_Groups_configuration__c}"/>
</apex:pageBlockSection>
</apex:outputPanel>
</apex:pageBlock>
</apex:form>
<!--<apex:pageBlockSection title="Contacts">
<!--<apex:inputField value="{!Opportunity.Contact__c}" label="Contact 1"/>
<apex:inputField value="{!Opportunity.Contact2__c}" label="Contact 2"/>
<apex:inputField value="{!Opportunity.Contact3__c}" label="Contact 3"/> -->
<apex:relatedList list="OpportunityContactRoles"/ >
<!-- </apex:pageBlockSection> -->
</apex:page>
I bolded the specific line of code that I need to style. Any help would be greatly appreciated!
I have a section of my visualforce page that displays all of the individual services our company provides (there's about 30 of them). I have set up process automation so that these fields are automatically edited upon selection of a "Service Level" field. My requirement is that I need to have the "service level" field and each of the individual fields in the same section. But, what I also need to do is apply styling to the "service level" field so that it stands out to my team. Ideally this would involve making the font of the field larger/bold and centering the field as well. I think its also important to mention that this is a picklist field. My code is as follows:
<apex:page standardController="opportunity" lightningStylesheets="false" tabstyle="account">
<apex:form >
<apex:pageBlock title="Implementation-Required Opportunity Fields" >
<style>
body .bPageBlock .pbBody .blue .pbSubheader{
background-color:#007add;
}
body .bPageBlock .pbBody .grey .pbSubheader{
background-color:#c0c0c0;
}
body .bPageBlock .pbBody .red .pbSubheader h3{
color:+005fb2;
}
.One
{
margin:40px;
padding:40px;
width:150px;
height:200px;
background-color:blue;
border-radius:40px;
border:10px solod red;
font-size:40px;
}
</style>
<apex:pageBlockButtons >
<apex:commandButton action="{!save}" value="Save"/>
<apex:commandButton action="{!quicksave}" value="Quick Save"/>
</apex:pageBlockButtons>
<apex:outputPanel styleClass="blue" layout="block">
<apex:pageBlockSection title="General Information" columns="2" >
<apex:inputField value="{!opportunity.account.name}"/>
<apex:inputField value="{!Opportunity.name}"/>
<apex:inputField value="{!opportunity.owner.name}" label="Sales Person"/>
<apex:inputField value="{!Opportunity.Sales_Engineer__c}"/>
<apex:inputField value="{!Opportunity.Director_of_Implementation__c}"/>
<apex:inputField value="{!Opportunity.Customer_Success_Manager__c}"/>
<apex:inputField value="{!Opportunity.CloseDate}"/>
<apex:inputField value="{!Opportunity.Desired_Go_Live_Date__c}"/>
<apex:inputField value="{!Opportunity.Customer_Success_Demo__c}"/>
<apex:inputField value="{!Opportunity.Total_Square_Footage__c}" style="width: 100px"/>
<apex:inputField value="{!Opportunity.TCV__c}"/>
<apex:inputField value="{!Opportunity.Vertical_Market__c}"/>
<apex:inputField value="{!Opportunity.Pipeline_Type__c}"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Address">
<apex:outputtext value="{!Opportunity.account.billingstreet}"/>
<apex:outputtext value="{!Opportunity.account.billingcity}"/>
<apex:outputtext value="{!Opportunity.account.billingstate}"/>
<apex:outputtext value="{!Opportunity.account.billingcountry}"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Project Detail">
<apex:inputField value="{!Opportunity.description}" style="width: 900px; height: 100px" label="Project Detail"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="SE Notes and Use Cases">
<apex:inputField value="{!Opportunity.SE_Notes__c}" style="width: 900px; height: 100px" label="SE Notes and Use Cases"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Services" columns="1" >
<apex:pageBlocksectionItem datatitle="Service Level" >
<apex:inputField value="{!Opportunity.Service_Level__c}"/>
</apex:pageBlocksectionItem>
<apex:inputField value="{!Opportunity.Remote_Training_Implementation__c}" />
<apex:inputField value="{!Opportunity.Gap_Analysis_and_Milestone_Reporting__c}"/>
<apex:inputField value="{!Opportunity.Use_of_technology_or_Recommended_Best_Pr__c}"/>
<apex:inputField value="{!Opportunity.X2D_Arch_Floor_Plans__c}"/>
<apex:inputField value="{!Opportunity.Key_Plans__c}"/>
<apex:inputField value="{!Opportunity.Mechanical__c}"/>
<apex:inputField value="{!Opportunity.Electrical__c}"/>
<apex:inputField value="{!Opportunity.Plumbing__c}"/>
<apex:inputField value="{!Opportunity.Room_List__c}"/>
<apex:inputField value="{!Opportunity.Work_Order_Management_System_Configurati__c}"/>
<apex:inputField value="{!Opportunity.Critical_Asset_Management_Template_Onl__c}"/>
<apex:inputField value="{!Opportunity.Finishes_Template_Only__c}"/>
<apex:inputField value="{!Opportunity.O_M_Spec_Sheets_Curated__c}"/>
<apex:inputField value="{!Opportunity.Inventory_Management_Template_Only__c}"/>
<apex:inputField value="{!Opportunity.Vendor_Management_Template_Only__c}"/>
<apex:inputField value="{!Opportunity.Preventative_Maintenance_Schedules__c}"/>
<apex:inputField value="{!Opportunity.Hot_Spotting_Assets_only__c}"/>
<apex:inputField value="{!Opportunity.Hot_Spotting_Room_only__c}"/>
<apex:inputField value="{!Opportunity.Rooftop_Area__c}"/>
<apex:inputField value="{!Opportunity.QR_Codes_Mail__c}"/>
<apex:inputField value="{!Opportunity.QR_Codes_Placement__c}"/>
<apex:inputField value="{!Opportunity.On_site_Training_Implementation__c}"/>
<apex:inputField value="{!Opportunity.Interior_Walls_Multivista__c}"/>
<apex:inputField value="{!Opportunity.Panoramic_Pictures__c}"/>
<apex:inputField value="{!Opportunity.Asset_Specific_Floor_Plans_Up_to_3__c}"/>
<apex:inputField value="{!Opportunity.Fire__c}"/>
<apex:inputField value="{!Opportunity.Furniture__c}"/>
<apex:inputField value="{!Opportunity.Kitchen_Equipment__c}"/>
<apex:inputField value="{!Opportunity.Audio_Visual_IT__c}"/>
<apex:inputField value="{!Opportunity.Security__c}"/>
<apex:inputField value="{!Opportunity.Outside_Areas_Exception_Rooftop_Areas__c}"/>
<apex:inputField value="{!Opportunity.Floorplan_Asset_Isolation_Extraction__c}"/>
<apex:inputField value="{!Opportunity.Users_and_Groups_configuration__c}"/>
</apex:pageBlockSection>
</apex:outputPanel>
</apex:pageBlock>
</apex:form>
<!--<apex:pageBlockSection title="Contacts">
<!--<apex:inputField value="{!Opportunity.Contact__c}" label="Contact 1"/>
<apex:inputField value="{!Opportunity.Contact2__c}" label="Contact 2"/>
<apex:inputField value="{!Opportunity.Contact3__c}" label="Contact 3"/> -->
<apex:relatedList list="OpportunityContactRoles"/ >
<!-- </apex:pageBlockSection> -->
</apex:page>
I bolded the specific line of code that I need to style. Any help would be greatly appreciated!
OR
Go to Brower console and get the style class for apex:pageBlocksectionItem and add the above style to same class like below
Raj,
Thank you for the response, I am working with your solution ideas now. I would also like to note that this inputfield does not have to be in a pageblocksectionitem. That was just an idea I was trying at the time.
Thank you, but I'm not very familar with slds-form format. I'm looking more for a way to make this input field the header, or just to give it some simple styling that will distinguish it from the rest of the data in the pageBlockSection.