For the complete documentation index, see llms.txt. This page is also available as Markdown.

๐ŸงฎBorder Radius And Colors

Hype supports customizing Border Radius of different elements.

The theme provides CSS variables that allow you to customize the border-radius of various elements:

  1. --border-radius-button - this variable adjusts the border-radius for buttons.

  2. --border-radius-input - this variable adjusts the border-radius for inputs.

  3. --border-radius-tags - this variable adjusts the border-radius for tags.

  4. --border-radius-images - this variable adjusts the border-radius for images.

  5. --border-radius-blocks - this variable adjusts the border-radius for various elements on the website, including sidebar widgets, post's content blocks, etc.

  6. --border-radius-navigation - this variable adjusts the border-radius for navigation block in header.

  7. --border-radius-header-buttons - this variable adjusts the border-radius for button in header.

To customize:

  1. Access the Settings > Code Injection from the admin menu.

  2. Click Open

  3. In the provided space, specify the desired border-radius using the appropriate CSS variable. For example:

    Copy

    <style>
      :root {
        --border-radius-button: 8px;
        --border-radius-input: 6px;
        --border-radius-tags: 100px;
        --border-radius-images: 8px;
        --border-radius-blocks: 8px;
        --border-radius-navigation: 6px;
        --border-radius-header-buttons: 4px;
      }
    </style>
  1. Click Save

Hype supports customizing background color for tag block.

To customize:

  1. Access the Settings > Code Injection from the admin menu.

  2. Click Open

  3. Update the CSS selector to target the desired tag and apply your preferred color. For example:

    Copy

  1. Click Save

Last updated