Chakra

[TwitchisMental]

Link to the theme


Chakra
Chakra is a light multicolor mellow tone SMF theme.

Features:
Responsive Design
Social Links
MultiColor with a color switcher
Remixed Footer
Separated Sticky/Normal topics in the message index
Built In Forum Width Adjustment

License:


SMF Version:


Patch Notes:

Code Select Expand

1.0 : Initial Release

Code Select Expand

1.0.1
New Feature: Added Teal, Orange, Yellow, and Purple color variations.
New Feature: Added an enable/disable for the color switch in theme settings.
Adjustment: Adjusted the pop up window heading text color.
Adjustment: Removed the un-needed border on the info_center title bar.
Adjustment: Removed un-needed files.

Code Select Expand

1.0.2
Adjustment: Adjusted the quote box background color for some of the color variations.

Code Select Expand

1.0.3
New Feature: Built In Forum Width Adjustment.
Adjustment: Adjusted the children section padding so the text is more centered.
Adjustment: Adjusted the text color for the profile info section.
Adjustment: Adjusted the right user menu drop down background to align properly with the top_section background.
Adjustment: Adjusted the progress bar color to match the main color of the theme variant.
Adjustment: Put a bit of a "bounce" on the color select options as you hover them.
Adjustment: Cleaned up the CSS and put the CSS variants in alphabetical order.
Bug Fix: Fixed the alert icon for bigger screens not displaying properly.

[Steve]

Awesome!!


What about the themeswitch.js file? Is it being used now?

[TwitchisMental]

Awesome!!


What about the themeswitch.js file? Is it being used now?

Humm nice catch. I was tinkering with the idea of dark/light mode but decided I didn't want too.

It can be removed for now. I may go through with it later though haha.

I'll update the theme package too.

[Antechinus]

You can do that without javascript anyway.

Nice job on the theme, as it is.

[TwitchisMental]

New Version Uploaded.

Added an enable/disable for the color switch in theme settings.
Removed the unneeded file.

[Antechinus]

Downloaded it and took a quick look at the innards. Nice use of CSS variables. Definitely the best way these days.

I haven't checked, but does loadCSS() automatically load all three variant CSS files? Or does it only load the default variant's CSS?

ETA: One thing I have found is that using HSL is much more convenient than using RGB. If a colour is not quite right, adjusting the hue, saturation and lightness is easy and instinctive without having to look things up. IMO, RGB just fries your brain for no benefit. HSL is the lazy person's way to go.

[TwitchisMental]

Downloaded it and took a quick look at the innards. Nice use of CSS variables. Definitely the best way these days.

I haven't checked, but does loadCSS() automatically load all three variant CSS files? Or does it only load the default variant's CSS?

ETA: One thing I have found is that using HSL is much more convenient than using RGB. If a colour is not quite right, adjusting the hue, saturation and lightness is easy and instinctive without having to look things up. IMO, RGB just fries your brain for no benefit. HSL is the lazy person's way to go.

Thank you . I have been loving CSS variables .

I'll be honest, I have not messed with HSL to much.

I haven't had any issues with RGB except when it comes to oranges... Chrome and Firefox tend to display orange differently.  That is more of a browser issue though.  Chrome not using the sRGB color profile by default being the reason.

Edit: Ooops missed your other question, AFAIK it automatically loads all of the variants.

[Antechinus]

OK, cool on the stylesheets. No FOUC to worry about if they are all cached anyway.

Re colour codes: the thing with RGB (or hex for that matter) is it's not instinctive. For example, rgb(157, 130, 98) means nothing to me in terms of a colour I can visualise, nor is it obvious how to go from there to a slightly different colour I really want.

OTOH, hsl(33, 23%, 50%) tells me it's a de-saturated orange-ish colour of middling brightness, because 0 for hue is red, and 60 is pure yellow, so 33 is an orange tending slightly towards yellow.

If I change it to 34 for hue it will be slightly more yellow, or 32 will be slightly more red. Saturation and brightness are just as easy. It really is a no brainer.

[TwitchisMental]

OK, cool on the stylesheets. No FOUC to worry about if they are all cached anyway.

Re colour codes: the thing with RGB (or hex for that matter) is it's not instinctive. For example, rgb(157, 130, 98) means nothing to me in terms of a colour I can visualise, nor is it obvious how to go from there to a slightly different colour I really want.

OTOH, hsl(33, 23%, 50%) tells me it's a de-saturated orange-ish colour of middling brightness, because 0 for hue is red, and 60 is pure yellow, so 33 is an orange tending slightly towards yellow.

If I change it to 34 for hue it will be slightly more yellow, or 32 will be slightly more red. Saturation and brightness are just as easy. It really is a no brainer.

Fair enough, sounds like HSL is worth looking into. 

I appreciate the feedback and general information .

[skb]

I'll be using it. Thanks for your hard work and efforts.

[skb]

I don't want to use the Color Picker option and use only the Blue one for the Forum. However, for the private boards, I want to use the Red one. Can this be done without making a copy of the theme ?

[TwitchisMental]

I don't want to use the Color Picker option and use only the Blue one for the Forum. However, for the private boards, I want to use the Red one. Can this be done without making a copy of the theme ?

You can disable color selection and disable the color picker.

AS far as using one color for one section of the forum and one color for another, that would be a no go.

[Antechinus]

Actually there are a couple of ways you could do it. The easy way would be to install a second copy of the theme under a slightly different name (ie: Chakra 2, Chakra Red, etc). This would require renaming things in a few files, but nothing major. You then disable the colour picker on the second copy, set it to red by default, and set it as the theme for that board (SMF admin allows you to do that).

Another way would be to write a PHP conditional in index.template.php, such that the red CSS file was loaded only in that particular board. This is probably even less work (just idly not thinking it through much). You'd just need to call the red file via board ID, anywhere after the loadCSS() function.

Either option should work.

[TwitchisMental]

Actually there are a couple of ways you could do it. The easy way would be to install a second copy of the theme under a slightly different name (ie: Chakra 2, Chakra Red, etc). This would require renaming things in a few files, but nothing major. You then disable the colour picker on the second copy, set it to red by default, and set it as the theme for that board (SMF admin allows you to do that).

Another way would be to write a PHP conditional in index.template.php, such that the red CSS file was loaded only in that particular board. This is probably even less work (just idly not thinking it through much). You'd just need to call the red file via board ID, anywhere after the loadCSS() function.

Either option should work.

Well I stand corrected then XD . Oh well learned something new too .

New Version Uploaded:

Code Select Expand

1.0.1
New Feature: Added Teal, Orange, Yellow, and Purple color variations.
New Feature: Added an enable/disable for the color switch in theme settings.
Adjustment: Adjusted the pop up window heading text color.
Adjustment: Removed the un-needed border on the info_center title bar.
Adjustment: Removed un-needed files.
Preview of the new colors -

You cannot view this attachment.

You cannot view this attachment.

You cannot view this attachment.

You cannot view this attachment.

[Antechinus]

I like those too. Nice additions.

[Antechinus]

I don't want to use the Color Picker option and use only the Blue one for the Forum. However, for the private boards, I want to use the Red one. Can this be done without making a copy of the theme ?

OK, you can try this if you like. Do note that I have not tested it live yet, but it should work. You will have to adjust the board ID number to match the board your private board.

Code (Find) Select Expand

    // load in any css from mods or themes so they can overwrite if wanted
    template_css();

Code (Replace) Select Expand

    // load in any css from mods or themes so they can overwrite if wanted
    template_css();

    // Custom code: load red stylesheet by board ID. :)
    if ($context['current_board'] == 1)
    {
        echo '
        <link rel="stylesheet" href="', $settings['theme_url'], '/css/index_red.css">';
    }
If you want it for more than one board you'd have to do them in an array, which is not much more complex to code, but TBH it's been a while since I did that so I would have to look it up again.

[skb]

Yes there are multiple Boards. I'll give it a shot and revert. Thanks a lot.

[skb]

Thanks for the additional colors.
I have switched to Chakra Blue for the Forum and Chakra Red for the private boards.
I took the easy way and made a copy.

[TwitchisMental]

Thanks for the additional colors.
I have switched to Chakra Blue for the Forum and Chakra Red for the private boards.
I took the easy way and made a copy.

Awesome sauce, glad you got what you needed .

[skb]

Need some help please. I use a custom mod and there is an image link to that in the User Info panel. The theme is not picking up that image. I checked the display.template and the icons folder. Both, the image and link are present in their correct places. What do I need to do ?