Horje
Adds a list (or multiple list) of stylesheets in the frontend to allow visitors to choose a different visual look for the website. Wordpress Tutorial

Noted That:

  • To install correctly this wp-user-stylesheet-switcher.zip .
  • Fisrt Download the wp-user-stylesheet-switcher.zip to your computer
  • Extract/Open wp-user-stylesheet-switcher.zip to Your Computer.
  • Then, Find readme.txt file inside wp-user-stylesheet-switcher.zip and Open readme.txt .
  • Now, Read the Requirements of this plugin. Which Wordpress Version and PHP Version are required to run this Plugin in Your Wordpress Site.
  • Then, Follow the Tips Below.

Start the Tips:

1. First Download " wp-user-stylesheet-switcher.zip " Plugin to your Local Computer. (Click Download)

2. Then, Login to your " yourdomain.com/wp-admin " Dashboard.

/stack/wp/e1593231376d7d849d2-4597-4fa3-a6ff-1eca18f72aab.png

3. Then, Click on " Plugins " + " Add New " from left sidemenu of Dashboard.

/stack/wp/e1593231378Screenshot20.png

4. Now, Click on "Upload Plugin" button.

/stack/wp/e1593231380Screenshot-2019-4-2AddPluginsHorjeWordPress.png

 

5. Now, Browse " wp-user-stylesheet-switcher.zip "  Downloaded plugin from your computer, Where you downloaded wp-user-stylesheet-switcher.zip According to Step – 1 Above then, click on " Install Now"

/stack/wp/e15931461531577025694plugin.png

6. Now, Click on " Active Plugin"

/stack/wp/e15932313830ca45529-bf73-4101-8178-53ae60ce549f.png

7. Then, See left sidemenu. " WP User Stylesheet Switcher " folder is added on left sidemenu. Now, Click on " WP User Stylesheet Switcher " folder.

   Noted that: If you do not see " WP User Stylesheet Switcher " folder on left sidemenu then, see at left sidemenu " Settings " or " Tools ".

8. Now you configure yourself oR Watch video tutorial below about  WP User Stylesheet Switcher Configurtions and Settings or How to work " WP User Stylesheet Switcher " in your WordPress site.

 

oR

After Activated Plugin According to Step-6 then,

  1. Go to " Plugins " + " Installed Plugin " from Wordpress Admin Panel Leftside Menu.
  2. or Direct go to: https://yourdomain/wp-admin/plugins.php
  3. Then, Find " WP User Stylesheet Switcher " Activated Plugin from Plugin List.
  4. Then, Click on " Settings " from Plugin that is WP User Stylesheet Switcher
  5. Now, Edit/Add/Config the setting and Click on " Save Changes " button,
WP Plugin Setting



Guide
  1. Place the wp_user_stylesheet_switcher folder in the wp-content/plugins folder.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.
  3. Go in Settings-> WP User Stylesheet Switcher to setup the alternative stylesheet files. The CSS files should be in the same folder as the other CSS files. Most commonly, this is the theme folder or the child-theme folder.
  4. Add an optional icon file for each stylesheet if you want to use the icon list instead of the dropdown list
  5. Tell WordPress to show the stylesheet list by adding the shortcode [wp_user_stylesheet_switcher] in a page/post or put the widget in a sidebar. Alternatively, you can use the php function show_wp_user_stylesheet_switcher() in your theme, for example to have the list in the footer on every pages of your website (see details below).
  6. If using icons, customize the look of the list in the CSS files.

Options for the shortcode

  • switcher_id : Reference of the switcher to display (shown in the switcher admin page)
  • list_title : Used to set a title to the list of stylesheets
  • list_type : Select between “dropdown” “icon” or “button”. The dropdown list is set by default. “Button” will show only only button to rotate between available stylesheets.
  • show_list_title : Set to “false” if you don’t want any list title. “true” by default.

Example : [wp_user_stylesheet_switcher switcher_id="s0" list_title="Available styles" list_type="icon" show_list_title="false"]

If using the php function show_wp_user_stylesheet_switcher(), you can customize the list using an array of variables (similar to the shortcode) : array('switcher_id'=> 's0', 'list_title'=> 'Available styles', 'show_list_title'=> 'true', 'list_type'=> 'icon')

By default will show a dropdown list with the default list title. But you can also pass an array like this :
show_wp_user_stylesheet_switcher(array(‘switcher_id’=> ’s0’, ‘list_title’=> ’Available styles’, ‘show_list_title’=> ’true’, ‘list_type’=> ’dropdown’));?>

To customize the icon list, place the icons in your the theme folder (where the CSS are).
You can give a different look for the icon list for each CSS files.
If no icon files are specified in the admin settings, the buttons will show the name of the stylesheet.

If you want to offer the option of desactivating all stylesheets, you have to add an option give a name to that option and specify a an empty css file in the configuration page. Then, select that option in the droplist “Option to remove stylesheets”.

Show icon link

If showing the available stylesheets as icons, you can also print the name of the stylesheets before, after, over or under the icon. In php, you would add ‘icon_names’=> ’after’ to the array to show the names after each icon.

Automatic stylesheet rotation

This option offer to possibility to automatically change the stylesheet. There are different options (weekday, week, month, year or random)

The switcher will simply rotate one stylesheet after the other. So if you want a different stylesheet for each season, setup 4 different stylesheet options and set the default to the actual season.

If you don’t want any automatic rotation (default), select “none”.

CSS classes to use

  • button.wp_user_stylesheet_switcher_button : for the general buttons aspect
  • img.wp_user_stylesheet_switcher_icon : for the image inside the buttons
  • button.wp_user_stylesheet_switcher_button:active : for the button being pressed
  • button.wp_user_stylesheet_switcher_active_option : for the active stylesheet

Here an example:
button.wp_user_stylesheet_switcher_button {
padding: 0;
margin: 1px;
border: none;
}


img.wp_user_stylesheet_switcher_icon { border: none; padding: 0px; margin: 0px; width: 30px; height: 30px; vertical-align:middle;
}
button.wp_user_stylesheet_switcher_button:active { padding: 0; margin: 1px;
}
button.wp_user_stylesheet_switcher_active_option { padding-bottom: 1px; border-bottom: 3px rgb(185, 50, 7) solid; border-radius: 0px;
}

list , adds , multiple , stylesheets , frontend , allow , visitors , choose , different , visual ,

Name

Read Article
https://develop.horje.com/learn/1434/reference