🧮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:
--border-radius-button- this variable adjusts theborder-radiusfor buttons.--border-radius-input- this variable adjusts theborder-radiusfor inputs.--border-radius-tags- this variable adjusts theborder-radiusfor tags.--border-radius-images- this variable adjusts theborder-radiusfor images.--border-radius-blocks- this variable adjusts theborder-radiusfor various elements on the website, including sidebar widgets, post's content blocks, etc.--border-radius-navigation- this variable adjusts theborder-radiusfor navigation block in header.--border-radius-header-buttons- this variable adjusts theborder-radiusfor button in header.
To customize:
Access the Settings > Code Injection from the admin menu.
Click Open
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>

Click Save
Hype supports customizing background color for tag block.
To customize:
Access the Settings > Code Injection from the admin menu.
Click Open
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>

Click Save
Last updated