News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu
Additional Info
Type
Package ID
smf:curve2_color_changer
First Created
April 15, 2019, 02:06:21 PM
Last Updated
April 24, 2022, 10:46:57 PM

Curve2 Color Changer v1.4.1 Hooks only

Allows you to change SMF2.1's default theme colors
Compatible With 2.1.1
Latest version v1.4.1
Downloads 1,565
Reviews 5
Rating 5/5
Subscribers 18
License BSD 3-Clause "New" or "Revised" License (View License)
Curve2 Color Changer


Supported Languages: English, Russian.
Link To Mod | Mod Discussion | Other SMF Customization Team Mods


Compatibility
For SMF 2.1.x

Introduction
Adds color settings for the the SMF 2.1 default theme

Installation
Any previous versions of this mod MUST be uninstalled BEFORE installing this version.
This mod is mainly for the default theme, custom themes might be compatible depending on the author of the custom theme.

Usage in custom themes (for theme authors)
If you wish to make use of the mod and allow admins to change colors in your theme, add an array with the following format to template_init()

$settings['color_changes'] = array(
    
'COLOR_TYPE' => array(
        array(
            
'variable' => 'CSS-VAR',
            
'elements' => '.ELEMENT, #ANOTHER_ELEMENT',
            
'properties' => array('PROPERTY_NAME''ANOTHER_PROPERTY' => '{color}')
        )
        array(...)
    ),
    ...
);


You can use one of the already declared color types :
'background', 'foreground', 'primary_color', 'secondary_color', 'top_section', 'footer', 'links', 'gradient_end', 'gradient_start', 'blocks_color', 'blocks_alternate_color', 'borders_color', 'buttons_text_color', 'buttons_bg', 'buttons_border', 'special_titles_color'

Or you can use a new color type, but you'll have to give it a text string in this format:
$txt['cc_COLOR_TYPE'] = 'STRING';

Properties will be given the value of the color, and you can also use {color} and it will be replaced with the color's value.

And since version v1.4, you can also target css variables and add different selectors.
To add more selectors to root, you can add them to $settings['color_changes_root'] as array values.
$settings['color_changes_root'] = array(
    
'.blue',
    
'.red',
    
'[data-colormode="dark"]'
);

This will output something like this:
:root,:root.blue,:root.red,:root[data-colormode="dark"] { --CSS-VAR: value; };
Example from the default theme:
<?php
$settings
['color_changes'] = array(
    
'background' => array(
        array(
            
'elements' => 'body',
            
'properties' => array('background')
        )
    ),
    
'primary_color' => array(
        array(
            
'elements' => 'div.cat_bar, .amt, .dropmenu li a:hover, .dropmenu li:hover a, .dropmenu li a:focus,
            #top_info > li > a:hover, #top_info > li:hover > a, #top_info > li > a.open, .button.active, .button.active:hover'
,
            
'properties' => array('background''border-color')
        ),
        array(
            
'elements' => '#footer',
            
'properties' => array('background')
        ),
        array(
            
'elements' => '.button.active, .button.active:hover',
            
'properties' => array('color' => '#fff')
        )
    ),
    
'gradient_start' => array(
        array(
            
'elements' => '.dropmenu li ul, .top_menu, .dropmenu li li:hover, .button, .dropmenu li li:hover > a, .dropmenu li li a:focus,
            .dropmenu li li a:hover, #top_section, #search_form .button, .quickbuttons li, .quickbuttons li ul, .quickbuttons li ul li:hover,
            .quickbuttons ul li a:focus, .popup_window, #inner_section'
,
            
'properties' => array('background-image' => 'linear-gradient(to bottom, {color} 0%, transparent 70%)')
        ),
        array(
            
'elements' => '.button:hover, .quickbuttons li:hover, .navigate_section ul, .popup_content, .up_contain,
            .button:hover, #search_form .button:hover, .quickbuttons li:hover'
,
            
'properties' => array('background-image' => 'linear-gradient(to bottom, transparent 0%, {color} 70%)')
        )
    ),
);

Support
Please use the modification thread for support with this modification.

Changelog
Version 1.4.1 - 28 February 2022
- Added option for sticky+locked status
- Added option for :target content

Version 1.4 - 27 February 2022
- Added support for CSS vars
- Added sticky, approved and locked topics color options
- Fixed check for elements/properties before trying to add them
- Fixed "Use default color" for individual settings
- Fixed minor issues with coloring

Version 1.3 - 27 October 2021
- Check against theme authors having defined color palette/s for their theme
- Fixed problems with default colors

Version 1.2.2 - 27 October 2021
- Check if there are any default settings first

Version 1.2.1 - 10 October 2021
- Insert default settings if not set

Version 1.2 - 24 August 2021
- Fixed 'Remove shadows' option
- Set a default color on all of the palettes
- Fixed button color on "focus" state

Version 1.1 - 23 August 2021
- Fixed default palette
- Adds labels for palettes
- Added default curve palette
- Added Russian translation

Version 1.0 - April 2019
- Initial Release


Copyright (c) 2021, Simple Machines, under BSD 3-Clause License.
All rights reserved.
curve2-color-changer_v1.4.1.zip
11.33 KB v1.4.1 2.1.1
Manual installation info
You have to register or login to be able to leave a review
vbgamer45 • August 25, 2021, 12:02:19 AM • 5/5
Love this feature! Makes changing the style so easy!
meccep45 • August 31, 2021, 09:47:17 AM • 5/5
very good improvement.
pocttopus • September 04, 2021, 07:53:55 AM • 5/5
Amazing, thank you for this modification.
pikeman • April 24, 2022, 04:33:18 AM • 5/5
Great modification!
Michael Vail • April 24, 2022, 10:46:57 PM • 5/5
Absolutely love this mod! Thank you!
Pages1
Advertisement: