How to Implement a Visual PHP CSS Editor to Create and Preview Site Presentation Themes - PHP CSS Editor Maker package blog

About the PHP CSS Editor Maker Package

The package PHP CSS Editor Maker is one of the few PHP packages that was considered notable recently because it does something that is worth paying attention.

The basic purpose is: Visual editor for CSS theme files using templates

Here follows in more detail what it does:

This package implements a visual editor for CSS theme files using templates.

It provides forms to let users edit CSS files using MaterializeCSS.
library.

For instance, the CSS template files have some template marks to set color values.

The editor allows the users to change the template mark values, so users can see a preview of how pages will look using the values entered in the visual editor.

Initially built for Wizards Toolkit and MaterializeCSS, this can easily be modified for any HTML/CSS library.

This simple utility requires PHP for the retrieving and saving of CSS files. Of course, you can easily modify the HTML in cssMaker.php for other HTML/CSS libraries like Bootstrap or whatever you use.

For a demonstration of how it works, see this video at https://youtu.be/t4o8vOx_j80 .

The basic concept is your library will have a core CSS file. For this version, we use materialize.css. Using variables with Cascading Style Sheets is extremely powerful.

We want to override their default colors in a way that affects all the many HTML elements. So we created a wtkGlobal.css file with the global overrides. We wanted both a Light theme and a Dark theme option, so we also created a wtkLight.css and wtkDark.css.

Next, we wanted to overlay different color themes. So we created wtk{SomeColorName}.css files, which are nothing but a set of CSS variables. Listing them in this order in your HTML it properly sets up everything.

* materialize.min.css (or whatever CSS framework you are using)

* wtk{YourColor}.css

* wtkLight.css or wtkDark.css

* wtkGlobal.css

This utility allows you to pick any CSS files in the folder and see how the page will look.

This requires the CSS file to start with 'wtk' and excludes our wtkLight, wtkDark, and wtkGlobal files. You can then modify each of the main color types and see the effect immediately in both Light and Dark mode. Once you have designed a color theme you as you can save it.

A slightly modified version has been uploaded to our website as a demo to see how it works. You can build color themes and have the CSS shown in a browser tab for you to "Save As".

https://wizardstoolkit.com/css-maker/

This simple PHP and JavaScript utility is brought to you by Wizards Toolkit, the PHP, SQL, and JavaScript low-code development library.

Wizards Toolkit: https://wizardstoolkit.com

MaterializeCSS: https://materializecss.com

JScolor: https://jscolor.com

Conclusion

The PHP CSS Editor Maker can be downloaded from download page or be installed using the PHP Composer tool following instructions in the Composer install instructions page.

This package was considered notable for implementing its benefits in a way that is worth noticing.

Notable PHP packages can be often considered innovative. If this package is also innovative, it can be nominated to the PHP Innovation Award and the author may win prizes and recognition for sharing innovative packages.

If you also developed your own notable or innovative packages consider sharing them, so you can also earn more visibility for your package as well nice prizes.

One nice prize that many PHP developers want and you may like is the PHP elePHPant mascot plush.