Custom CSS

The Custom CSS block empowers users to personalize their site's appearance by adding custom CSS code. This feature is ideal for those looking to implement unique styling rules that extend beyond the default theme options. Users can modify colors, fonts, and layouts, providing a tailored look and feel to their site.

Available in the "Custom code" and "Code viewer" sections, the Custom CSS block offers flexibility in applying custom styles. Users can input their CSS code in a designated text area, labeled as "Code," to achieve their desired visual adjustments.

Practical usage examples include changing button background colors, adjusting font sizes for headings, and hiding specific elements like banners. These examples illustrate how the Custom CSS block can be utilized to align the site's design with the user's brand or personal preferences.

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 #

1. 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;
   }
   

2. Adjusting Font Size: To increase the font size of all headings, you can use:

   h1, h2, h3, h4, h5, h6 {
       font-size: 1.5em;
   }
   

3. 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.