vgstef

<p>Sometimes, we just want to offer visitors simple variations of our website theme. Sometimes, we simply want to offer a stylesheet with improved accessbility. There are plugins that let you choose a different theme, but this plugin offers you to change only the stylesheet. In the admin settings, you can configure as many different stylesheets as you want. Those possibilities are offered in a list on the front page.</p>
<p>The list of available stylesheets can be shown in a dropdown list or as a series of icons. It can be shown using the widget or in a page/post using the shortcode, or directly in the template using the php function.</p>
<p>On the frontend, when a choice is made in the dropdown list, the webpage is reloaded using the chosen stylesheet.</p>
<h4>Plugin Features</h4>
<ul>
<li>Easy installation/setup</li>
<li>Any number of switchers</li>
<li>Each switcher can have any number of stylesheet options</li>
<li>Set a default stylesheet</li>
<li>Multiple instances of switchers/stylesheet lists can be present on the same page.</li>
<li>Choice between a dropdown or icon list for each list</li>
<li>Can be used with a shortcode in a post/page, with the widget and with a php function in the theme</li>
<li>For each list, possibility to show/hide the title</li>
<li>Optional single switcher button (text or icon)</li>
<li>Chose between theme relative path or absolute path (useful to customize multisite)</li>
<li>Optional automatic theme rotation (weekday, week, month, year or random)</li>
<li>Ready for internationalization</li>
<li>Complete uninstall (removes options and widgets)</li>
</ul>
<h4>Languages already available</h4>
<ul>
<li>English</li>
<li>French</li>
<li>Spanish (thanks to Andrew Kurtis from WebHostingHub)</li>
<li>Serbo-Croatian (thanks to Andrijana Nikolic from WebHostingGeeks)</li>
</ul>
<p>To see an example, visit <a href="http://web.globulesverts.org/wp-user-stylesheet-switcher" rel="nofollow ugc">plugin page</a>.</p>


WP User Stylesheet Switcher

I'm using this on a site I'm developing that will have a "feminine style" and a "masculine style".  The site is in development so I didn't want to replace the default style.css as that would mean updating two stylesheets (ugh!).  Because the style switcher is loaded in the header after the main stylesheet, this is  what I did to cut down work ...

In the plugin I identified the default stylesheet as "Feminine Style" and entered a fake stylesheet name so it would never get replaced.  I then created a real "Masculine Style" and entered it's correct stylesheet name.  

This way the masculine overrides just the feminine styles I add to it to change :D  It works great.

Works Great

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

Kevin Batdorf

<p>The missing inline block CSS editor for the Gutenberg editor. Very powerful with synced patterns as well. And it pairs well with global styles.</p>
<p>This plugin is perfect for users looking to add CSS for blocks without needing to create a child theme, or use a bloated plugin. Client safe too. CSS won’t leak outside of the block, and only valid block CSS is persisted.</p>
<p>Star it on <a href="https://github.com/KevinBatdorf/pattern-css" rel="nofollow ugc">GitHub</a><br />
Follow me on Twitter <a href="https://twitter.com/kevinbatdorf" rel="nofollow ugc">@kevinbatdorf</a></p>
<h4>How to</h4>
<ul>
<li>Every block will have a new “Pattern CSS” settings panel</li>
<li>Open it and add any CSS. It will be scoped to the block</li>
<li>To target the block directly, you must use the <code>[block]</code> selector</li>
<li>To target any element <em>inside</em> the block, use the normal CSS selector</li>
<li>Use <code>!important</code> to override your theme styles (use sparingly)</li>
</ul>
<h4>Global Editor</h4>
<ul>
<li>Access global styles under the options menu (three dots) in the top right corner of the editor</li>
<li>Additionaly, you can open from the Pattern CSS block editor controls</li>
</ul>
<h4>Features</h4>
<ul>
<li>Powered by WebAssembly for fast and secure CSS parsing</li>
<li>Smart loading. Only loads the CSS when the block is present</li>
<li>Styles persist when changing themes</li>
<li>Scopes styles to the block so that parent/sibling blocks are not affected</li>
<li>It’s fast</li>
<li>CSS is minified and optimized</li>
<li>It’s safe. Invalid, non-spec CSS is never persisted</li>
<li>Supports reusable (synced or not-synced) patterns</li>
<li>See changes on the page as you make them</li>
<li>Combines adjacent rules (to decrease size)</li>
<li>Minifies colors and math functions to simplify according to spec</li>
<li>Supports CSS nesting</li>
</ul>
<h4>Basic Example</h4>
<pre><code>/* Target the block directly */
[block] {
  background: antiquewhite;
  padding: 2rem;
}
/* Target any inner elements */
a {
  text-decoration-color: burlywood;
  text-decoration-thickness: 2px;
  text-decoration-style: solid !important;
}
a:hover {
  text-decoration-color: darkgoldenrod;
}

/* Output: */
.pcss-a1b7b016{background:#faebd7;padding:2rem}.pcss-a1b7b016 a{text-decoration-color:#deb887;text-decoration-thickness:2px;text-decoration-style:solid!important}.pcss-a1b7b016 a:hover{text-decoration-color:#b8860b}
</code></pre>
<h4>Supports Media Queries</h4>
<pre><code>@media (prefers-color-scheme: dark) {
  [block] {
    border-color: blue;
  }
}

/* Output: */
@media (prefers-color-scheme:dark){.pcss-cddaa023{border-color:#00f}}
</code></pre>
<h4>Combines Rules</h4>
<pre><code>[block] {
  color: red;
}
.bar {
  color: red;
}

/* Output: */
.pcss-3aa0f0fc,.pcss-3aa0f0fc .bar{color:red}
</code></pre>
<h4>Fixes redundant properties</h4>
<pre><code>[block] {
  padding-top: 5px;
  padding-left: 50px;
  padding-bottom: 15px;
  padding-right: 5px;
}

/* Output: */
.pcss-3aa0f0fc{padding:5px 5px 15px 50px}
</code></pre>
<h4>Supports CSS nesting</h4>
<pre><code>[block] {
  padding: 1rem;
  a {
    color: red;
  }
  background: white;
  /* Including media queries */
  @media (prefers-color-scheme: dark) {
    background: black;
    color:white;
  }
}

/* Output: */
.pcss-f526bb2d{background:#fff;padding:1rem;& a{color:red}@media (prefers-color-scheme:dark){&{color:#fff;background:#000}}}
</code></pre>
<p>Check browser support for <a href="https://caniuse.com/css-nesting" rel="nofollow ugc">CSS nesting</a></p>


Pattern CSS – The CSS Editor For Blocks


This is exactly what I need. Very easy to use. Love that you can scope to current item with [block] {}



JANUARY 2025 UPDATE: after a year of use and having installed on at least 20 client sites, I now look at this as indispensable to my work as a website developer. No complaints whatsoever.


really, really great CSS control

Add a CSS editor to your blocks and patterns! Loads only where necessary. Supports adding global CSS too.

WP User Stylesheet Switcher vs Pattern CSS – The CSS Editor For Blocks