Overview #
The Custom CSS block allows users to add their own CSS code to customize the appearance of their site. This block is particularly useful for users who want to apply unique styling rules that go beyond the default options provided by the theme.
Key components and functionality #
Custom CSS
The Custom CSS block is designed to enable users to input custom CSS code directly into their theme. This block is available in the "Custom code" and "Code viewer" sections, providing flexibility in where custom styles can be applied.
-
Purpose: The primary purpose of this block is to allow users to customize the visual aspects of their site by adding CSS code. This can include changing colors, fonts, layout adjustments, and more.
-
Settings:
- Code: This setting allows users to input their CSS code. It is labeled as "Code" and provides a text area for entering the desired CSS rules.
Available in sections #
- Custom code
- Code viewer
Usage examples #
-
Styling a Button: If you want to change the background color of all buttons on your site to blue, you can add the following CSS code in the Custom CSS block:
button { background-color: blue; } -
Adjusting Font Size: To increase the font size of all headings, you can use:
h1, h2, h3, h4, h5, h6 { font-size: 1.5em; } -
Hiding Elements: If there's an element you want to hide, such as a specific banner, you can add:
.banner-class { display: none; }
These examples demonstrate how the Custom CSS block can be used to tailor the site's appearance to better fit the user's brand or personal preferences.
Align v1.7 is out now! Learn more about our best release yet →