While the majority of the Alpha Theme’s complex styling and functional code is contained within the three Code Snippets (managed by the Code Snippets plugin), a small set of variables is intentionally placed in the WordPress Customizer. This allows non-technical users to make quick, impactful design changes – specifically to the custom Glass Buttons – without needing to edit PHP or CSS files directly.
Accessing the Design Variables
The following variables are located in your WordPress Customizer:
Navigate to: Appearance → Customize → Additional CSS.
:root {
/*
Choose the active color for your glass buttons (all Kadence Blocks buttons with the css class glass-button):
white-glass-button
dark-glass-button
primary-color-glass-button
*/
--glass-button-color:var(--primary-color-glass-button);
/*Adjust the brightness of the button color*/
--glass-brightness:250%;
/*Adjust the blur of the button*/
--glass-button-blur:3px;
/*Change the color values for your different glass button color schemes*/
--white-glass-button:linear-gradient(135deg, var(--global-palette7), var(--global-palette8));
--dark-glass-button: linear-gradient(135deg, var(--global-palette4), var(--global-palette3)40%);
--primary-color-glass-button:linear-gradient(135deg, var(--global-palette1), var(--global-palette2) 60%);
}
Customizing the Glass Buttons
This code controls the look of any button that has the custom CSS class glass-button assigned to it in the Kadence Block settings.
1. Changing the Color Scheme
To change the color of all glass buttons globally, modify the --glass-button-color variable. Choose one of the three predefined values:
var(--white-glass-button)var(--dark-glass-button)var(--primary-color-glass-button)
Example: To switch to the dark color scheme, change the line in the code to:
--glass-button-color:var(--dark-glass-button);2. Adjusting the Effect Intensity
You can fine-tune the visual effects:
- Brightness (
--glass-brightness): This variable controls the light/transparency effect. A lower percentage makes the button look less bright and more transparent. - Blur (
--glass-button-blur): This variable controls the background blur effect (in pixels). Increase this value to create a softer, more highly blurred background effect.
3. Defining and Overriding Color Schemes
The three variables at the bottom of the CSS code define the specific look of each predefined color scheme. They use the CSS linear-gradient function to create the shading and depth effect:
--white-glass-button--dark-glass-button--primary-color-glass-button
Consistency with Global Palette: By default, these definitions automatically use your site’s global Kadence colors (e.g., var(--global-palette1)). If you change the global Kadence color palette, the glass buttons will update their base colors automatically, maintaining full color consistency across your site.
4. Advanced: Customizing the Gradient (Optional)
If you wish to use colors not defined in your Kadence palette, you can override one of these scheme variables by replacing the global palette variables (var(--global-paletteX)) with specific hex codes or standard color names.
Example: To give the Dark button scheme a custom blue gradient:
--dark-glass-button: linear-gradient(135deg, #1A75BB, #004D80 40%);