[XTR] Style Switcher

XF2 Addons [XTR] Style Switcher 1.0.2
This add-on allows you to change the look of your webpage in a simple way.

Compatible versions
2.1, 2.2
200050


Demo: XenTR / Professional XenForo Styles : Default-Style
Note: On the demo site, the style switcher plug-in is only set to default style.

This add-on is a jQuery-based theme / skin modifier that allows a visitor to change the look of your webpage (for example, text color, background color, background image) from the sliding panel.

Installation:
  1. XENTR-StyleSwitcher-1.0.0.zip and unzip it.
  2. Copy the upload/src/addons/XENTR/StyleSwitcher directory to your server.
  3. The directory where the Javascript files will be located: upload/js/xtr/style_switcher
  4. Pattern and Background images directory: upload/styles/xtr/style-customizer
  5. From the Admin Control Panel Install the add-on.
  6. You can check the options from /admin.php?options/groups/xtr_styleSwitcher/ and set.
  7. Make settings from the Style properties page. admin.php?styles/your-style/style-properties/group&group=xtr_style_switchers
Features:
  • Wide and boxed layout option
  • 7 different custom color pickers Red, Blue, Green, Yellow, Slate, Violet, Teal
  • 8 custom pattern picker,
  • 8 custom background selector,
  • Custom Cookie Script,
  • Automatic reset buttons,
  • Ability to select user groups,
  • Option to use on the specified theme,
  • Fully manageable style feature,
  • Modern Browser Compatibility
  • More options.
How to use:
After installing the plug-in seamlessly, you can see the codes that change the colors of some fields by default on the style properties page.

Main red color palettes check the backgrounds to be displayed in red in the color code specified in this area.
Sub red color palettes determine the color and of the links and description fields to be displayed on the red background.

Example codes:
Only red color tones are given here.

Red colors BG classes value: You will see the following codes in this field.

Code:
Code:
[xf="red"] .style-customizer a.opener,
[xf="red"] .style-customizer .custom-logo,
[xf="red"] .style-customizer .button-border,
[xf="red"] .style-customizer a.button.button-border,
[xf="red"] .p-header,
[xf="red"] .p-nav,
[xf="red"] .p-nav-list .p-navEl.is-menuOpen,
[xf="red"] .p-navgroup-link.is-menuOpen,
[xf="red"] .p-footer,
[xf="red"] .p-body-main .block-header,
[xf="red"] .block-minorHeader

There is a prefix code that you need to use for each field where you want to change the color.

[xf ="red"] you must put this code in front of the css format you want to change.

You need to follow the same procedure for other shades.

If you want to apply the same color tones to your areas with different color tones, you can use the similar codes given below in the extra.less template.

Example code:

Code:
Code:
[xf="red"] .p-staffBar {
    background: fade(xf-default(@xf-xtr_color_schemes_red_background, transparent), 80%);
    color: fade(xf-default(@xf-xtr_color_schemes_red_color, transparent), 80%);
    border-bottom: @xf-borderSize solid rgba(255, 255, 255, 0.15);
}
[xf="red"] .p-staffBar a {
    color: fade(xf-default(@xf-xtr_color_schemes_red_color, transparent), 80%);
}
[xf="red"] .p-staffBar-link:hover {
    background: {{ property('xtr_color_schemes_red_background') }};
}

As you can see in the example above, there are three different colors in the Staff Bar area. Background, - Color and Border Bottom. With this example, you can make color changes for the fields you want to change.

Note: If you share the color codes that you have developed under this source topic, I can add the codes you have given to future updates on the plugin.
  • style-switcher-blue.png
    style-switcher-blue.png
    314.8 KB · Views: 3
  • style-switcher-green.png
    style-switcher-green.png
    352 KB · Views: 4
  • style-switcher-yellow.png
    style-switcher-yellow.png
    460.4 KB · Views: 3
  • style-switcher-options.png
    style-switcher-options.png
    669 KB · Views: 3
  • style-switcher-style-properties.png
    style-switcher-style-properties.png
    883.4 KB · Views: 3
  • style-switcher-teal.png
    style-switcher-teal.png
    476.9 KB · Views: 3
  • style-switcher-slate.png
    style-switcher-slate.png
    484.5 KB · Views: 3
  • style-switcher-red.png
    style-switcher-red.png
    500.4 KB · Views: 2
  • style-switcher-violet.png
    style-switcher-violet.png
    528.4 KB · Views: 3
FateKid
Author FateKid
Level
11
5,910 pts
1.0.2 Version
2 Downloads
180 Views
Published
Updated
0.00 star(s) 0 ratings Average Rating (0)

More files from FateKid

Customize Your XenForo 2 Community

[XTR] Style Switcher provides ultimate customization to your XenForo 2 community website! Enjoy powerful features that make your site stand out. Combine this add-on with XenForo 2 styles from our site and kickstart your online community now.

Why Download Our XenForo 2 Add-ons?

  • Easily enhance the quality of your XenForo online community.
  • Expand your XenForo 2 functionality with thousands of unique options.
  • Create unbelieveable user-experiences with advanced features.

Explore Other Resources

Are you looking for something different? Explore our thousands of unique and special XenForo 2 add-ons, available to download right now. FateKid shared this wonderful resource to you for free, so remember to share your appreciation by liking the resource and reviewing it.

Get started today and make your next project truly unique.

Top Bottom