Apex Code Development You need to sign in to do that
Don't have an account?
Unable to Change Button Color in VF page.
I am trying to change the 3 burgandy button colors located on line 334, 335 and 436 but I am not having any luck. Can someone tell me what I am missing.
Thanks in advance.
<apex:page id="pg" controller="ServiceTasksCreateController" sidebar="false">
<!------------- xxxxxxxxxxxxxxxxxxxx HEAD SECTION xxxxxxxxxxxxxxxxxxxxxxx ------------->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
body{
font-family: "Segoe UI",helvetica,arial,sans-serif;
}
.main{
background: none repeat scroll 0 0 #ffffff;
border-radius: 3px;
height: auto;
margin: 0 auto;
min-height: 500px;
overflow: hidden;
padding: 5px 0;
width: 100%;
}
.dv_load{
top: 45%;
margin-left: 30%;
padding: 15px;
z-index: 20000;
position: fixed;
width: 250px;
color: #394057;
background: #ffffff;
border: none;padding: 6px 20px;
border-radius: 2px;
box-shadow: 0 3px 5px #ddd;
}
input[type="text"].select{
width:80%;
height:25px;
border:1px solid #ccc;
}
.tbl td{
white-space: nowrap;
padding:5px;
vertical-align:top;
}
.tbl td select{
width:100%;
height:28px;
padding:4px;
border: 1px solid #ccc;
}
.tbl th{
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #FFFFFF !important;
border-color: #FDFDFD #93AFBA #93AFBA #FDFDFD;
border-image: none;
border-style: solid;
border-width: 1px;
color: #000000;
font-weight: normal;
margin: 0;
overflow: hidden;
padding: 5px 0;
text-align: center;
}
.inpTxt{
height:25px;
border:1px solid #ccc;
width:100%;
color:#444444;
}
.lbl{
font-size: 12px;
}
.bodyDiv{
background-color: #FFF;
}
.dateFormat{
display:none;
}
.tbl th{
background-color:#ffffff;
border-bottom:1px solid #eee;
padding:6px;
}
.tbl{
padding: 10px 5px;
width: 100%;
}
a:link {text-decoration:none;}
.tdd{
border-bottom: 1px solid #efefef;
}
.multiSelectPicklistTable {
height: auto;
margin-top: -16px;
width: 101%;
}
.multiSelectPicklistTable img{
height :20x;
}
.content-title {
background: none repeat scroll 0 0 #393939;
color: #FFFFFF;
font-size: 17px;
height: 34px;
line-height: 34px;
margin-top: 0;
padding-left: 1%;
width: 99%;
}
.btn .btn-danger{
background-color: #1797c0 !important;
border: 1px solid #393939 !important;
height: 34px;
line-height: 16px !important;
min-width: 80px;
vertical-align: middle;
white-space: nowrap;
}
.bPageBlock .detailList tr td
{
border-bottom : none;
}
.bPageBlock .detailList tr th
{
border-bottom : none;
border-top : none;
border-left : none;
border-right : none;
}
</style>
<c:clearViewCss />
<style>
.icon-clearview-wizard:before {
content: "\e61c";
color: RGB(0,0,0);
font-size: 2em;
}
.dropdown_select{
color:RGB(0,0,0) !important;
}
</style>
<script>
$(document).ready(function(){
init();
});
function init(){
$('[id$="meetTyp_unselected"]').attr('size', '5');
$('[id$="meetTyp_unselected"]').css('color', 'RGB(0,0,0)');
$('[id$="meetTyp_selected"]').css('color', 'RGB(0,0,0)');
$('.multiSelectPicklistTable img').height('20px');
}
function SOSServiceChng(){
var txt = $('[id$="srvc"]').find("option:selected").text();
$('[id$="catg"]').val(txt);
$('[id$="catg"]').change();
}
function changeSubCat1(){
if($('[id$="Subcatg1"]').find("option").length == 2){
$('[id$="Subcatg1"]').find('option:eq(1)').prop('selected',true);
}
$('[id$="Subcatg2"]').change();
}
function changeSubCat2(){
if($('[id$="Subcatg2"]').find("option").length == 2){
$('[id$="Subcatg2"]').find('option:eq(1)').prop('selected',true);
}
}
function reload(){
$('#dd11').css("display", "block");
$('#dd22').css("display", "block");
setTimeout(refreshPage, 9000);
}
</script>
</head>
<!------------- xxxxxxxxxxxxxxxxxxxx BODY SECTION xxxxxxxxxxxxxxxxxxxxxxx ------------->
<body>
<apex:form id="frm">
<apex:inputHidden value="{!pickRecordValue}" id="hiddenVal"/>
<apex:pageMessages id="pgMsg"/>
<!----------Action Function---------
<apex:actionStatus id="st1" startText="Deleting"/>-->
<apex:actionFunction name="refreshPage" status="st1" action="{!refresh}"/>
<apex:actionFunction name="getSOS" reRender="srpy, srvc" status="st1" oncomplete="init(); return false;"/>
<apex:actionFunction name="addPicklist" action="{!createPicklistValue}" status="st1" oncomplete="addPickSelection();"/>
<apex:actionFunction name="addPickSelection" action="{!AddPick}" status="st1" reRender="frm,pgMsg" oncomplete="init();return false;"/>
<apex:actionStatus id="st1">
<apex:facet name="start">
<div style="width: 100%; height:700px; background:#000; opacity : 0.7; top:0px; left:0px; position: fixed; z-index:10000"></div>
<div class="dv_load">
<img src="/img/loading24.gif" style="vertical-align:middle;"/>
<span>Loading...</span>
</div>
</apex:facet>
</apex:actionStatus>
<div id="dd11" style="width: 100%; height:700px; background:#000; opacity : 0.7; top:0px; left:0px; position: fixed; z-index:10000; display:none;"></div>
<div class="dv_load" style="display:none;" id="dd22">
<img src="/img/loading24.gif" style="vertical-align:middle;"/>
<span>Loading...</span>
</div>
<div class="main">
<!--<div style="margin-bottom:94px;">
<div class="cv-top-title">
<h2 class="pull-left"><span class="icon icon-clearview-wizard"></span> Scope of Service Task</h2>
<div class="cv-dropdown cv-numbers-list pull-right">
</div>
</div>
</div>-->
<div style="float:left;width: 100%;margin-bottom:5px;">
<div class="content-title">
<span style="color: #fff;">Scope of Service Task</span>
</div>
</div>
<table class="tbl" cellspacing="0" cellpadding="0">
<tr>
<td width="25%">
<div style="width:100%;padding-bottom: 40px;">
<div style="float:left;width:100%;">
<span style="font-size: 12px;">Plan Year</span>
</div>
<div style="float:left;width:100%;">
<apex:selectList id="srpy" style="height:28px;" value="{!scp_Of_srvc_tsk.Plan_Year_1__c}" size="1" styleClass="dropdown_select" onchange="getSOS(); return false;">
<apex:selectOptions value="{!PlanYear}"/>
</apex:selectList>
</div>
</div>
</td>
<td width="25%">
<div style="width:100%;padding-bottom: 40px;">
<div style="float:left;width:100%;">
<span style="font-size: 12px;">Services</span>
</div>
<div style="float:left;width:100%;">
<apex:selectList id="srvc" style="height:28px;" value="{!scp_Of_srvc_tsk.Scope_Of_Service__c}" size="1" styleClass="dropdown_select" onchange="SOSServiceChng(); return false;">
<apex:selectOptions value="{!SOS}"/>
</apex:selectList>
</div>
<div style="display:none;">
<apex:inputField id="catg" style="height:28px;" value="{!scp_Of_srvc_tsk.Scope_of_Service_Category__c}" styleClass="inpTxt" />
</div>
</div>
</td>
<td width="25%">
<div style="width:100%;padding-bottom: 40px;">
<div style="float:left;width:100%;">
<span style="font-size: 12px;">Sub Category 1</span>
</div>
<div style="float:left;width:100%;">
<apex:inputField id="Subcatg1" style="height:28px;" value="{!scp_Of_srvc_tsk.Sub_Category__c}" styleClass="dropdown_select" onchange="changeSubCat1(); return false;" required="true"/>
</div>
</div>
</td>
<td width="25%">
<div style="width:100%;padding-bottom: 40px;">
<div style="float:left;width:100%;">
<span style="font-size: 12px;">Sub Category 2</span>
</div>
<div style="float:left;width:100%;">
<apex:inputField id="Subcatg2" style="height:28px;" value="{!scp_Of_srvc_tsk.Activity__c}" styleClass="dropdown_select" onchange="changeSubCat2(); return false;" required="true"/>
</div>
</div>
</td>
</tr>
<tr>
<td width="25%">
<span style="font-size: 12px;">Activity Name</span><br/>
<apex:inputText id="nm" title="Activity Name" value="{!scp_Of_srvc_tsk.name}" styleClass="inpTxt" />
<br/><br/>
</td>
<td width="25%">
<span style="font-size: 12px;">Due Date</span><br/>
<apex:inputField id="duedt" style="width:100%;" value="{!scp_Of_srvc_tsk.Due_Date__c}" styleClass="inpTxt" />
</td>
<td width="25%" style="padding:0px 5px;">
<span style="font-size: 12px;">Meeting Type</span><br/>
<apex:inputField id="meetTyp" label="Select Meeting Type" style="height:auto;" value="{!scp_Of_srvc_tsk.Meeting_Type__c}" />
</td>
<td width="25%">
<span style="float:left;">
<apex:inputField style="float:left;" value="{!scp_Of_srvc_tsk.Notify_Project_Team__c}"/>
<span style="font-size: 12px;padding-right:2%;">
Notify Project Team
</span>
<apex:inputField id="nm1" value="{!scp_Of_srvc_tsk.Communication_Log__c}" />
<span style="font-size: 12px;">
Communication Log
</span>
<div style="padding-top:5%;">
<span>
<apex:outputLabel value="Custom Meeting Name" style="padding-right:3%;"/>
<!-- <apex:inputText value="{!picklistval}" style="width:50%"/> -->
<apex:inputText value="{!pcklst}" styleClass="inpTxt" />
</span>
</div>
<div style="padding-top:5%;">
<span>
<apex:CommandButton value="Add To Picklist" status="st1" action="{!insertSTC}" reRender="sve_recs_pnl, frm" styleClass="btn btn-danger btn-md" style="float:left;color: #FFFFFF; font-size: 17px;font-weight: normal; border-radius:0;"/>
<apex:CommandButton value="Save & New" status="st1" action="{!insertSTC2}" reRender="sve_recs_pnl, frm" styleClass="btn btn-danger btn-md" style="float:right;color: #FFFFFF; font-size: 17px;font-weight: normal; border-radius:0;"/>
</span>
</div>
</span>
</td>
</tr>
<tr>
<td colspan="4">
<span style="font-size: 12px;">Current Notes (Notes in this section will appear in the client facing reports)</span><br/>
<apex:inputField id="nots" style="height:90px;" value="{!scp_Of_srvc_tsk.Current_Notes__c}" styleClass="inpTxt"/>
</td>
</tr>
<tr>
<td colspan="4">
<span style="font-size: 12px;">Description (Use this section for internal notes and correspondence. These notes are not included in reports)</span><br/>
<apex:inputField id="decs" style="height:90px;" value="{!scp_Of_srvc_tsk.Description__c}" styleClass="inpTxt"/>
</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="4">
<div style="float:left;width: 100%;margin-bottom:5px;">
<div class="content-title">
<span style="color: #fff;">Checks and Balances</span>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="4">
<apex:pageBlock mode="maindetail">
<apex:pageBlockSection columns="2" >
<apex:inputField value="{!scp_Of_srvc_tsk.Checks_Balances_2__c}" label="Checks & Balances Required" />
<apex:pageBlockSectionItem />
<apex:inputField value="{!scp_Of_srvc_tsk.Yes__c}" />
<apex:pageBlockSectionItem />
<apex:inputField value="{!scp_Of_srvc_tsk.No__c}" />
<apex:pageBlockSectionItem />
<apex:pageBlockSectionItem />
<apex:pageBlockSectionItem />
<apex:inputField value="{!scp_Of_srvc_tsk.Notify_Proofreader_1__c}" />
<apex:inputField value="{!scp_Of_srvc_tsk.Notify_Proofreader_2__c}" />
<apex:inputField value="{!scp_Of_srvc_tsk.Finance_Team__c}" />
<apex:inputField value="{!scp_Of_srvc_tsk.Implementation_Team__c}" />
<apex:inputField value="{!scp_Of_srvc_tsk.Compliance_Team__c}" />
<apex:inputField value="{!scp_Of_srvc_tsk.Marketing_Team__c}" />
<apex:pageBlockSectionItem />
<apex:pageBlockSectionItem />
<apex:inputField value="{!scp_Of_srvc_tsk.Reviewer__c}" />
<apex:inputField value="{!scp_Of_srvc_tsk.Reviewer_2__c}" />
<apex:inputField value="{!scp_Of_srvc_tsk.Date_Reviewed_2__c}" />
<apex:inputField value="{!scp_Of_srvc_tsk.Date_Reviewed__c}" />
<apex:pageBlockSectionItem />
<apex:pageBlockSectionItem />
<apex:inputField value="{!scp_Of_srvc_tsk.Finance_Review__c}" />
<apex:inputField value="{!scp_Of_srvc_tsk.Compliance_Review_Compliance_Officer__c}" />
<apex:inputField value="{!scp_Of_srvc_tsk.Date_Reviewed_1__c}" />
<apex:inputField value="{!scp_Of_srvc_tsk.Date_Reviewed_Compliance__c}" />
<apex:pageBlockSectionItem />
<apex:pageBlockSectionItem />
<apex:inputField value="{!scp_Of_srvc_tsk.Implementation_Review_IMP_Manager__c}" />
<apex:inputField value="{!scp_Of_srvc_tsk.Brand_Standards__c}" />
<apex:inputField value="{!scp_Of_srvc_tsk.Date_Reviewed_IMP__c}" />
<apex:inputField value="{!scp_Of_srvc_tsk.Date_Reviewed_Brand_Standards__c}" />
<apex:pageBlockSectionItem />
<apex:pageBlockSectionItem />
<apex:inputField value="{!scp_Of_srvc_tsk.Final_Revi__c}" />
<apex:pageBlockSectionItem />
<apex:inputField value="{!scp_Of_srvc_tsk.Date_Reviewed_Lead_consultant__c}" />
<apex:pageBlockSectionItem />
</apex:pageBlockSection>
</apex:pageBlock>
</td>
</tr>
<tr>
<td colspan="4">
<apex:CommandButton value="Save & New" status="st1" action="{!insertSTC2}" reRender="sve_recs_pnl, frm" styleClass="btn btn-danger btn-md" style="float:right;color: #FFFFFF; font-size: 17px;font-weight: normal; border-radius:0;"/>
</td>
</tr>
</table>
<!-- XXXXXXXXXXXXXXXX -->
<apex:outputPanel id="sve_recs_pnl">
<apex:outputPanel rendered="{!IF(modlList.size > 0, true, false)}">
<table class="tbl" cellspacing="0" cellpadding="0">
<tr>
<td colspan="9" style="padding:0 0 10px;">
<div class="content-title">
<span style="color: #fff;font-size: 17px;">Saved Scope of Support Tasks</span>
</div>
</td>
</tr>
<tr>
<th>S.O.S. Activity Name</th>
<th>Plan Year</th>
<th>S.O.S. Name</th>
<th>S.O.S. Category</th>
<th>S.O.S. Sub Category1</th>
<th>S.O.S. Sub Category2</th>
<th>Due Date</th>
<!--<th>Notify Project Team</th> -->
<th>S.O.S. Note</th>
</tr>
<apex:repeat value="{!modlList}" var="md">
<tr>
<!--<td style="text-align:center;border-bottom: 1px solid #f1f1f1"><apex:outputField value="{!tsk.name}" /></td> -->
<!--<td style="text-align:center;border-bottom: 1px solid #f1f1f1"><apex:outputField value="{!tsk.Plan_Year_1__c}"/></td> -->
<!--<td style="text-align:center;border-bottom: 1px solid #f1f1f1"><apex:outputField value="{!tsk.Scope_Of_Service__c}" /></td> -->
<td style="text-align:center;border-bottom: 1px solid #f1f1f1"><a href="javascript:void(0);" onclick="openNewWindow('{!md.tsk.Id}');"> {!md.tsk.name} </a></td>
<td style="text-align:center;border-bottom: 1px solid #f1f1f1"><a href="javascript:void(0);" onclick="openNewWindow('{!md.tsk.Plan_Year_1__c}');">{!md.pln_yr}</a></td>
<td style="text-align:center;border-bottom: 1px solid #f1f1f1"><a href="javascript:void(0);" onclick="openNewWindow('{!md.tsk.Scope_Of_Service__c}');">{!md.sos_nm}</a></td>
<td style="text-align:center;border-bottom: 1px solid #f1f1f1"><apex:outputField value="{!md.tsk.Scope_of_Service_Category__c}" /></td>
<td style="text-align:center;border-bottom: 1px solid #f1f1f1"><apex:outputField value="{!md.tsk.Sub_Category__c}" /></td>
<td style="text-align:center;border-bottom: 1px solid #f1f1f1"><apex:outputField value="{!md.tsk.Activity__c}" /></td>
<td style="text-align:center;border-bottom: 1px solid #f1f1f1"><apex:outputField value="{!md.tsk.Due_Date__c}" /></td>
<!--<td style="text-align:center;border-bottom: 1px solid #f1f1f1"><apex:outputField value="{!md.tsk.Notify_Project_Team__c}" /></td> -->
<td style="white-space: normal;width: 20%;border-bottom: 1px solid #f1f1f1"><apex:outputField value="{!md.tsk.Current_Notes__c}" /></td>
</tr>
</apex:repeat>
</table>
</apex:outputPanel>
</apex:outputPanel>
<script>
function openNewWindow(id){
if(id != null && id.length > 14){
window.open('/'+id);
}
}
function reloadVal(){
var ele=document.getElementById('pg:frm:meetTyp');
var idx=0;
var valText='';
for (idx=0; idx<ele.length; idx++){
if(idx == ele.length-1)
valText+=ele.options[idx].text;
else
valText+=ele.options[idx].text + ':';
}
document.getElementById('pg:frm:hiddenVal').value= valText;
}
reloadVal();
</script>
<script>
</script>
</div>
</apex:form>
</body>
</apex:page>
Thanks in advance.
Use !important keyword or add a new class on that button. As there is another class which overridding the class or CSS.
-Thanks
Ashlekh Gera.
I am a little confused as I am still very new to coding.
I see the !important keyword on line 127 & 128. How exactly am I suppose to add it to the buttons? The color I want to change it to is #1797c0 whic is in the code below.
.btn .btn-danger{ background-color: #1797c0 !important; border: 1px solid #393939 !important; height: 34px; line-height: 16px !important; min-width: 80px; vertical-align: middle; white-space: nowrap;