PHP Classes

PHP CSS Editor Maker: Visual editor for CSS theme files using templates

Recommend this page to a friend!
  Info   Screenshots Screenshots   View files View files (11)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog (1)    
Ratings Unique User Downloads Download Rankings
Not yet rated by the usersTotal: 112 This week: 2All time: 9,504 This week: 77Up
Version License PHP version Categories
css-maker 1.0.0Freely Distributable5HTML, PHP 5, GUI, Applications, Global
Description 

Author

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

Innovation Award
PHP Programming Innovation award nominee
January 2023
Number 3
CSS is a language to describe styles that many developers use to define details of the presentation of their Web site pages.

Sometimes developers provide customizable themes for their site presentation by changing the CSS stylesheets.

This package provides a visual editor application that lets developers edit and show previews of the presentation of their CSS theme files.

Manuel Lemos
Picture of Alec Sherman
  Performance   Level  
Name: Alec Sherman <contact>
Classes: 1 package by
Country: Mexico Mexico
Innovation award
Innovation award
Nominee: 1x

Screenshots  
  • CSSmaker1.png
  Files folder image Files  
File Role Description
Accessible without login Plain text file wtkRed.css Data Red color theme
Accessible without login Plain text file wtkPurple.css Data Purple color theme
Accessible without login Plain text file wtkSkyDark.css Data Sky-Dark color theme
Accessible without login Plain text file wtkGoldGreen.css Data Gold-green color theme
Accessible without login Plain text file wtkGreen.css Data Green color theme
Accessible without login Plain text file wtkBlue.css Data Blue color theme
Accessible without login Plain text file wtkDark.css Data use for Dark theme
Accessible without login Plain text file wtkLight.css Data use for Light theme
Accessible without login Plain text file wtkGlobal.css Data Global CSS override file
Accessible without login Plain text file ajxSaveCSS.php Aux. creates CSS file
Accessible without login Plain text file cssMaker.php Appl. Primary file for viewing/creating CSS styles

 Version Control Unique User Downloads Download Rankings  
 0%
Total:112
This week:2
All time:9,504
This week:77Up