UPDATE: 19 June 2018
A couple of comments have indicated that certain style changes were not taking effect. This generally happens because the selector is not specific enough. Without going into a lot of detail, there is one way to overcome this and although it is sometimes frowned upon by the CSS “purists”, others live by the saying – “if all else fails, try !important 🙂
Note in the updated CSS below where and how !important is used.
.elementor-button {
background-color: darkblue;
color: white;
font-size: 40px !important;
font-family: "Times New Roman", Times, serif;
border: 2px solid red;
border-radius: 40px !important;
box-shadow: 10px 10px 8px #888888 !important;
}
Until Elementor comes up with global settings for various elements such as buttons and the like, this is relatively easy to implement to have all your Elementor buttons be styled in the same way.
The Simple CSS plugin is used to enter the CSS.
CSS for this tutorial below the video.
.elementor-button {
background-color: darkblue;
color: white;
}
.elementor-button:hover {
background-color: white;
color: blue;
}
Good. You might mention to your viewers that you are using the Simple CSS plugin. Some might miss this.
Thank you Larry, good point. I will make mention of this in the video description and on the site. 🙂
Cheers!
Lyle
Tried this. Works for the background colours but the text comes out light blue instead of white.
Hi Sol,
In Elementor > Settings, have you disabled default colors? If not, you may have to add !important to color.
color: white !important;Cheers!
Lyle
I have, but I’ll try adding the “!important;” and see what happens …
Hi Lyle: Seems to have done the job. Thanks!
Hi Sol,
Good to hear that it worked for you 🙂
Cheers!
Lyle
Thank you Lyle,
What if i want to change default text type and size?
Hi John,
You’re welcome!
To change the default text type and size, just add those to the code provided.
Here is a link to W3Schools that will get you started.
https://www.w3schools.com/Css/css_text.asp
Cheers!
Lyle
“Hi John,
You’re welcome!
To change the default text type and size, just add those to the code provided.
Here is a link to W3Schools that will get you started.
https://www.w3schools.com/Css/css_text.asp
Cheers!
Lyle”
Thank you Lyle. I have tried to change the font type and size but couldnt. Neither can i change the shadow or the border radius. Can change weight, line height, color, background color and maybe more but not the above mentioned. Will mail support and see what they come up with, unless you have an idea.
Thank you.
As “we” say in the CSS biz, “if all else fails, try !important” 🙂 Give this a go (worked for me):
.elementor-button {
background-color: darkblue;
color: white;
font-size: 40px !important;
font-family: “Times New Roman”, Times, serif;
border: 2px solid red;
border-radius: 40px !important;
box-shadow: 10px 10px 8px #888888 !important;
}
Will try now Lyle
Success. Thank you Lyle. Wouldn’t the !important though start messing the css and the website?
Good to hear! 🙂
The use of !important will not mess with anything as it is a legitimate CSS declaration and is used in many themes and plugins where the “cascade” part of CSS needs to be “adjusted”.
Thank you so much for the condensed info and your help Lyle. Should i make future conversations here if i have any questions or on your youtube channel. What would be better for you and your audience engagement?
Your welcome, John 🙂
Here is as good of a place as any I suppose.
And by the way i used the SiteOrigin css plugin because the SimpleCss is not updated for the current version of wordpress. What do you think SiteOrigin Css?
I haven’t used the SO plugin so cannot comment. But I would not be concerned about Simple CSS as I still use it on all of my sites. Tom Usborne, the developer, is about as good as they come and is probably too busy keeping up with his fantastic GeneratePress theme and Premium plugin. I would and still do recommend Simple CSS.
Thank you Lyle
You’re welcome! 🙂
In my situation, the default background color is green, not gray. I assume it’s coming from my theme (even though I don’t have “disable” checked in Elementor preferences). What’s weird is that I want no background color at all, and there’s no way to do that (or maybe CSS background-color: none;). Choosing a background color forces it to be something (other than none), and not choosing a background color forces it to be the default for the button type (there should be a type of none, or default should be none). I guess I can pick any color, then set the transparency to 100%…I.E. rgba (0,0,0,0). What an odd work around to have no color.
Hi Ben,
That green is coming from what is set for the Accent color in the Default Colors > Color Palette. (Hamburger Menu – top left > Default Colors > Style > Color Palette)
Here is the updated CSS for a transparent background. Note the addition of !important. Adjust other values to suit.
.elementor-button {
background-color: transparent !important;
color: blue;
font-size: 40px !important;
font-family: “Times New Roman”, Times, serif;
border: 2px solid red;
border-radius: 40px !important;
box-shadow: 10px 10px 8px #888888 !important;
}
Cheers!
Lyle: