Style Guide

Konnexu allows you to add custom CSS, which makes it easier for you to create your community in the colors to match your vision or brand. If you haven't already made a clone of the theme you want to use, please follow this guide to clone the theme you want to use.

Using Tailwind CSS

As our themes are built on the Tailwind CSS framework, you'll need to learn how to use it if you're not already familiar. It's very similar to Bootstrap, so if you've worked with that, this will be fairly easy for you to learn. If you've not used either Tailwind or Bootstrap, no worries! There are quite a lot of good tutorials available for how to work with Tailwind. Our team is also available in case you need us.

Here's a link to the Tailwind Documentation. You can skip the install section and drop down to the other sections to read about Tailwind, such as maybe starting at the Colors section. You can use any colors, but you may find that chart helpful.

When changing the CSS, if you find that your changes are not implementing even after you clear site and browser cache, you'll need to use !important as seen in our examples.

Root Colors

Root colors are basically the "master" color variables used globally in your site. This is an easy way to change colors quickly to match your brand or color scheme.

Example 1: Changing the bg-surface variable globally (Recommended). If you want to change this color everywhere it is used across the entire website, redefine the variable inside the :root pseudo-class selector.

:root {
    --bg-surface: #f7cbb1; /* Replace with your hex, rgb, or color name */
}

Variable List

This is not complete, and we will add to it as we progress with theme improvements.

• bgSurface - This is for the top navbar and forum header background color.
• textSubtle - Forum header text, language drop down menu, etc.
• textPrimary - Used for bold text headings such as block titles, side menu, drop down menu items, etc.
• textSecondary - Used for content text, category menus, breadcrumbs and other small text areas.
• buttonPrimaryBg - Button background color - hover.
• buttonPrimaryBgOpacity10 - Button background color - status buttons, view more, other small buttons.
• buttonPrimaryBgOpacity80 - Button background color - active button.
• buttonPrimaryText - Button text color.

Examples for Root Colors

** Light Mode **

/* Light mode defaults */
:root {
    --bg-surface: #F4EBF7 !important;
    --text-subtle: #6B5E7B !important;
    --text-primary: #1A092F !important; /* Dark text for light background */
    --text-secondary: #EA3980 !important;
    --button-primary-bg-opacity-10: #F4EBF7 !important;
    --button-primary-bg-opacity-80: #8A2BE2 !important;
    --button-primary-bg: #6A1B9A !important;
    --button-primary-text: #FFF !important;
}

/* Dark mode overrides (Forced to cascade from whatever element holds the .dark class) */
.dark, .dark * {
    --bg-surface: #1A092F !important;
    --text-subtle: #B0A2C1 !important;
    --text-primary: #F4EBF7 !important;
    --text-secondary: #FF69B4 !important;
    --button-primary-bg-opacity-10: #B0A2C1 !important;
    --button-primary-bg-opacity-80: #9D4EDD !important;
    --button-primary-bg: #7B2CBF !important;
    --button-primary-text: #FFF !important;
}

Example for Specific Class Selectors

If you don't want to use the :root and want to style specific elements.

/* main menu text color */
.navigation_item_text {
    color: #1A092F !important;
}

.dark .navigation_item_text {
    color: #F4EBF7 !important;
}

/* This is for nav and header backgrounds */
.bg-bgSurface {
    --bg-surface: #f7cbb1; /* This safely overrides the color at the same specificity */
}

/* this is for light fonts such as the forum header text */
.text-textSubtle {
    color: #2d3748 !important;
}

.text-primary-color {
    color: rgb(92, 64, 51) !important;
}

.text-secondary-color {
    color: rgb(148, 0, 211) !important;
}