Change the Elementor Interface Button Colour

Pro Verified

Name

About

This is how you change the New Elementor Interface Button Colour to be whatever you want!

Language

PHP

Rating

Voted: 0 by 0 user(s)

How to Setup Snippet

Change the 3 Hex Codes at the top.

Codevault

WebSquadron

Scroll down to see more snippets from this codevault.

Wordpress Compatability

The author has indicated that this snippet is compatable up to wordpress version: 6.1

Code Snippet Plugin Sync

Free & Pro

Download this snippet by clicking the download button, then head over to the Code Snippet Plugin settings in your wordpress admin dashboard, select the import menu then upload this file to import into your wordpress site.

Pro Only (Coming Soon)

You will be able to click a button and sync this snippet to your wordpress site automatically and from your dashboard manage all code snippets across all your wordpress sites that have the Code Snippets Pro plugin installed.

History

Last modified:

07/04/2023

Important Note

This snippet has the following status:

Pro Verified

This snippet has been verified by a Code Snippet Pro team member.

Learn More

Pro Comments:

Change the Elementor Interface Button Colour

 
                     1function change_elementor_publish_button_color() {
 2  $color_hex_code = '#ffffff'; // color of text on button since you want 222222 and 444444 white is a good choice
 3  $bgcolor_hex_code = '#333333'; //button notmai color
 4  $bghover_color_hex_code = '#999999'; //button hover color
 5  ?>
 6  <script>
 7    window.onload = function() {
 8      //console.log('Changing the color of the publish button in Elementor to: <?php echo $color_hex_code; ?>');
 9      var publishButton = document.querySelector('#elementor-panel-saver-button-publish');
10      var publishChevronPartButton = document.querySelector('#elementor-panel-saver-button-save-options');
11      if (publishButton && publishChevronPartButton) {
12        publishButton.style.backgroundColor = '<?php echo $bgcolor_hex_code; ?>';
13        publishButton.style.color = '<?php echo $color_hex_code; ?>';
14        publishChevronPartButton.style.backgroundColor = '<?php echo $bgcolor_hex_code; ?>';
15        publishButton.classList.add('imran-btn-color');
16        publishChevronPartButton.classList.add('imran-btn-color');
17      } else {
18        //console.log('Could not find the publish button or chevron part button in Elementor.');
19      }
20    }
21  </script>
22  <style>
23    .imran-btn-color {
24      background-color: <?php echo $bgcolor_hex_code; ?> !important;
25      color: <?php echo $color_hex_code; ?> !important;
26      -webkit-border-end: 1px solid <?php echo $bgcolor_hex_code;  ?> !important;
27      border-inline-end: 1px solid <?php echo $bgcolor_hex_code; ?> !important;
28    }
29    .imran-btn-color:hover {
30      background-color: <?php echo $bghover_color_hex_code; ?> !important;
31    -webkit-border-end: 1px solid <?php echo $bghover_color_hex_code; ?> !important;
32      border-inline-end: 1px solid <?php echo $bghover_color_hex_code; ?> !important;
33 
34    }
35  </style>
36  <?php
37}
38add_action( 'elementor/editor/footer', 'change_elementor_publish_button_color' );

Related Snippets

Please see some snippets below related to this snippet..

Elementor

AI Verified

Remove Google Fonts Elementor

Added: 10 months ago

Last Updated: 10 months ago

View

Elementor

AI Verified

Elementor Custom Column Order

Added: 1 year ago

Last Updated: 1 year ago

Elementor Custom Column Order

View

Elementor

Pro Verified

Default Panel Display

Added: 5 months ago

Last Updated: 5 months ago

By default, Elementor displays the widgets panel when the editor is loaded for the first time. You can change this.

View

Other Snippets in this Codevault

These are some popular snippets from this users codevault..

Performance

AI Verified

Remove Unused Javascript

Added: 1 year ago

Last Updated: 1 month ago

Remove Unused Javascript - and improve your Page Speed Insight Score

View

WooCommerce

Pro Verified

Deactivate some WooCommerce Checkout Fields

Added: 1 year ago

Last Updated: 6 months ago

Deactivate some WooCommerce Checkout Fields from showing

View

Performance

Pro Verified

Disable e-icons from Elementor

Added: 1 year ago

Last Updated: 1 year ago

Disable e-icons - and remove the notification from occurring during your Page Speed Insight Check.

View