Hype
DemoSupport
  • 👋Introduction
  • 🆕Changelog
  • 🏁GETTING STARTED
    • 🔽Uploading a Theme
  • 📜MAIN TEMPLATES
    • 📰Post Template
    • 📑Categories (Tags) Template
    • 👨‍🎨Authors Template
    • ♾️Archive (All Posts) Page
  • ⚙️CUSTOM SETTINGS
    • ™️Logos
    • 🧭Header Type
    • 🧮Border Radius And Colors
    • 🏠Homepage Layout
    • 📟Custom Widget (HTML Widget)
  • 🤝MEMBERSHIP
    • ⬇️Sign In Page
    • 🆙Sign Up Page
    • 👤Account Page
    • 💸Membership Page
    • 🎬Setting Up
  • 🛠️OTHER SETTINGS
    • 💬Comments
    • 📸Add Your Social Link (Icon)
    • ⏬Submenus
  • ☑️TERMS & CONDITIONS
    • 🔁Refund Policy
Powered by GitBook
On this page
  • To customize:
  • To customize:
  1. CUSTOM SETTINGS

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

    <style>
      .post-tag--health{
        background-color: #FFFFD0;
      }
      
      .post-tag--lifestyle{
        background-color: #FFE3ED;
      }
    
      .post-tag--animals{
        background-color: #F0E6FF;
      }
    
      .post-tag--tv-shows{
        background-color: #D8FFD5;
      }
    
      .post-tag--celebs{
        background-color: #FFE2D7;
      }
    </style>
  1. Click Save

PreviousHeader TypeNextHomepage Layout

Last updated 2 months ago

⚙️
🧮