Styles selector

This plugin is made with fiction blogs and webnovels in mind so users can choose night mode or some styles they find better to read.

Author:Alfonso (profile at wordpress.org)
WordPress version required:5.2
WordPress version tested:5.2.3
Plugin version:1.1.1
Added to WordPress repository:29-09-2019
Last updated:13-10-2019
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
Rating, %:0
Rated by:0
Plugin URI:https://github.com/Chafalleiro/Styles-selecto...
Total downloads:190
plugin download
Click to start download

Plugin for altering several items in a theme in order to change the visualization. You can choose which kind of item will be,
an individual CSS element or an entire class by specifing the type of element.
If you have a theme switcher, like “multidevice switcher”, you can also alter several themes (up to five).
Once you have saved the themes, their elements and the name of the option, a widget will be created with a menu list of the options you did,
so the users can set the display options they want.

The main idea of this plugin came when reading some webnovel in my cellphone and couldn’t change the color of the text when the light changed.
It provides the user an instant change of the colors of the screen, colors preselected by the administrator in order to not change very much the design of the page,
also it has the advantage of not reloading the content, since there is no change of the theme, just an alteration of the CSS properties.

Usage

This plugin creates a select menu that lets a user change the color style of a page or post to be changed acording the settings that the blog administrator sets.

Admin menu

  • The admin can choose up to five different themes from the installed ones to be changed by selecting them in a drop down at the beginning of each tab of the configuration page. Note that you can select the same theme several times if you run out of mods.
  • You can force the selector to be displayed at the top of the page instead of using a widget or a shortcode.
  • You can configure the style of the selector for each theme.
  • At each theme tab the admin can set up to ten color modifications to classes or individual elements.
    ### Admin menuOptions fields

    • Name an option to be displayed to the user. This option will be added in the select input field.
    • Select wich type of style will be changed, class or individual element. If you used the web developer tools of yor browser to determine the elements you want to alter, an individual element is named by an “id”, and class by “class”. A class often has several elements. Remember to enter exactly the name, errors will be thrown if the names are incorrect and maybe the page functionality will be altered.
    • Type the element id or class to be altered.
    • Select the color of the background in the color selector tool.
    • Select the color of the font in the color selector tool.
    • Choose the transparency of the background, it will be dinamically updated over an image below.
    • Choose the transparency of the text, it will be dinamically updated over an image below.
    • The option button indicates if the edited option will be used by the plugin. No options will be added if they aren’t active.
    • Save yor changes clicking the blue button at the end of the page

Displaying the select drop down

* There are currently two options, fist is to add the "Style selector widget" that this plugin creates to any sidebar. You can also configure a title for the widget.
* The second is via a shortcode. Place the shortcode "[s_selector]" anywherw to display the drop down menu
* Additionally is a last minute adittion, you can uncoment the las line of the widget-selector.php file in the /public/partials dir of the pulugin directory using the wordpress plugin editor to show the drop down at the start of each page.

Frontend

* The user can choose between a default "Restore" option, and the ones defined by you. This option is persistent.
* The user can select the size of the text. This option is not persistent.<h3>TODO</h3>

Prepare code for translation.
Clean a bit the code.
Add background image backend option.

Directories explanation

  • styleselector: contains subdirectories, license, readme and unistall files.
    “styleselector.php” Bootstrap
    “uninstall.php” Unistall file made by the boilerplate plugin generator.
    “index.php” Blank file made by the boilerplate plugin generator.

  • admin: Where the config routines reside. Has an css dir with the styles of the config page, a js dir with client side routines, mostly appearence related ones. Partials, where the display of options are made. And two files, index.php, bank, and class-styleselector where main routines reside.

  • public: has the same structure of the admin one. In partial has also a widget management routines file.
  • assets: images and media needed by the plugin.
  • includes: general routines to make the pluging integrate witn WordPress.