How to Customize Your Site With CSS
Layers is highly customizable via the builder widget options and Customizer panels for things like header and footer colors, fonts and layouts, but you may want to take customization a little further by changing the color of specific elements, inserting graphics, hiding elements or inserting icons. An incredible level of customization can be reached using CSS and extensions like Layers Pro – leaving more complicated tasks like filtering and child theming to experienced devs focused on extending theme functionality.
This guide will introduce you to style customization in Layers and provide some excellent resources for honing your CSS skills, and is a helpful primer whether you’re a veteran designer or just starting out.
Customization in Layers
The default Layers installation drives customization through the widget panels in the→ → Edit Layout screens. Each widget has full customization options for controlling things like Heading sizes, colors, backgrounds and content. These widgets can be styled individually through the Advanced option of the design bar, which is covered in detail here:
“Global” elements such as the header and footer have their own controls in the main Customizer menu where you can change the background colors and text elements. These are covered in detail in the Site Settings Setup documentation
Full customization in terms of color schemes, styles and minor layout tweaks can be accomplished through child themes, extensions or style kits.
Layers Pro is an extension that offers extended color, styling and layout options in the Customizer for changing several elements in Layers templates. Child themes and Style Kits change the overall style without additional customization control, but often add styling that goes far beyond what can be done in the customizer.
Links to our child themes, kits and extensions are available by going to Marketplace→
You will want to get into CSS customization if you want to do something like change the main navigation links hover behavior, decrease the padding on the title on interior pages or create your own style kit. These custom styles are stored in the CSS panel of the Customizer menu.
This section is where all Custom CSS is housed for your site and is primarily used by front-end designers and Style Kits.
Designers: This is the ideal and recommended way to create custom styles or “skins” for Layers in favor of a child theme, which should only be created if you need to add elements or modifications that cannot be done with CSS alone. See our Style Kit tutorials for how to create and package a kit of your own!
Take this further with the DevKit plugin, which adds CSS and JS building tools to your WordPress customizer for reliable, rapid styling whether you are a pro or beginner. Its built-in linting and mobile modes help produce preformatted stylesheets with built-in media queries you can quickly copy paste into your child theme files, or leave active in DevKit for easy on-site editing. Check it Out
Building Custom CSS
The most powerful tool at your disposal for this task is your browser inspector, which will show you all the HTML and CSS associated with any part of your page.
To use, right-click an element and choose “Inspect Element”. Note that this tool is only available in Safari if you enable the developer tools. IE users must have version 11 or higher.
See CSS Styling Using the Browser Inspector & Customizer if you are new to the inspector.
The inspector will help you identify the selector or original style containing the properties you want to change. You can then copy these selectors (not the entire style!) over to your CSS box, and add your custom properties.
For example. to change the header menu styles, you can use the .header-site .nav-horizontal li a selector as described in this tutorial How to Customize Your Header Menu Links
Did you know?
Our friends at Jetpack are doing some incredible work to improve the WordPress experience. Check out Jetpack and improve your site's security, speed and reliability.