CSS Customize the Color of Toolbar Buttons

1.1 Requirement

How to change toolbar button colors? Use CSS to achieve the effect as shown below:

1.2 Solution

Add a Loading End event to the template, fetch buttons using  classes  in JavaScript and change font colors using  css() .

2.1 Add a Loading End event

Click [Template]＞[Web Attributes] ＞[Data Entry Settings] to add a Loading End event:

Input the following JavaScript codes:

$('.fr-btn-text.x-emb-submit').css('color', 'red'); // Set the color for the Submit button
$('.fr-btn-text.x-emb-export').css('color', 'red'); // Set the color for the Export button
$('.fr-btn-text.x-emb-verify').css('color', 'red'); // Set the color for the Data Verification button
$('.fr-btn-text.x-emb-flashprint').css('color', 'red'); // Set the color for the Print Client button
$('.fr-btn-text.x-emb-print').css('color', 'red'); // Change print color
$('.fr-btn-text.x-emb-email').css('color', 'red'); // Change email text color
$('.fr-btn-text.x-emb-appendrow').css('color','red'); //Change the color of Add Record
$('.fr-btn-text.x-emb-deleterow').css('color', 'red'); // Set the color for Delete Columns/Rows button

2.2 Preview

Save the template and click [Data Preview]. The preview effect is shown as below:

3.1 Add a Loading End event

1) Add a toolbar button if you need, as shown in the figure below:

2) Click [Template]＞[Web Attributes] ＞[Pagination Preview] to add a Loading End event:

Input the following JavaScript codes:

$('.fr-btn-text.x-emb-previous').css('color','red');//Change the color for Previous button
$('.fr-btn-text.x-emb-first').css('color','red');//First
$('.fr-btn-text.x-emb-next').css('color','red');//Next
$('.fr-btn-text.x-emb-last').css('color','red');//Last
$('.fr-btn-text.x-emb-excel').css('color','red');//Export as a Excel file
$('.fr-btn-text.x-emb-export').css('color','red');//Set the color for the Export button
$('.fr-btn-text.x-emb-print').css('color','red');//Set the color for the Print color
$('.fr-btn-text.x-emb-email').css('color','red');//Set the color for the Email button
$('.fr-btn-text.x-emb-flashprint').css('color','red');//Set the color for the Print Client button

3.2 Preview

Save the template and click [Pagination Preview]. The preview effect is shown as below:

0.cpt