Carterlake/AJAX/PHP Template - Style Editor

Let's Chat
,
1

Weather Display/PHP/AJAX Website Template Set - Style Editor

Update: 03/06/08 - The Style Editor is officially launched

Weather Display/PHP/AJAX Website Template Set - Style Editor by Mike Challis
http://www.carmosaic.com/weather/template/style-edit.php

This script allows you to edit the colors for a Weather Display/PHP/AJAX Website Template Set - Style Editor.
I programmed it from scratch, took about 40 hours.
I plan to use it to better the style color themes.

You edit the styles using the narrow theme, but the downloaded zip file will include both wide and narrow css files. It generates two new CSS files called weather-screen-custom-narrow.css and weather-screen-custom-wide.css. You can install one of the new css files as your main css, or you can install my Color Theme Switcher Plugin and allow your users to have many styles to select from.

It has two edit modes:
Basic Settings: (simple changes like header, table and link colors)
Advanced Settings: (advanced changes, including all the simple changes, and body background colors)

Advanced settings will allow making reverse color styles like light text on a darker background.
I will make a sample style of a light text on a darker background for that real soon.

Acceptable input is letters, numbers and # sign only
You can use hex code like this: #CC6600 (# sign required)
You can use simple color name like this: white (no # sign)

The css file, settings, and installation instructions can be saved in a zip file for you to download instantly.

You can paste settings into a textarea box from your last session and edit it again.
If you run out of time while editing and want to save your work in progress, just copy the settings from the bottom of the form page and save to a text file on your computer. When you come back, just paste the settings into a textarea box and click submit. You can now edit some more.
This makes it easy to come back and make a slight adjustment. If you downloaded a style from this style editor before, the settings are at the bottom of the form page and in the readme.txt of the zip file you downloaded.

You can also share styles in the forum by pasting your settings into the forum, then others can copy them and paste into the textarea on the style editor page, click submit and the style editor page uses the style instantly. The style can then be edited some more or downloaded in a zip file.

These other scripts I made also complement the Weather Display/PHP/AJAX Website Template Set:

Weather Display/PHP/AJAX Website Template - Color Theme Switcher Plugin
http://www.carmosaic.com/weather/template/

Wind Direction Graphics Generator
http://www.carmosaic.com/weather/scripts-wind-graphics.php

2

More features added: a color picker and a function to check for the basic color names that are valid css.

Added a feature: Select a working style to begin with.
Select Blue, Green, Orange, Red, or Teal, then edit to transform it into any color style you want.

3

I like this idea very much, a choice of style is always a great thing to have
I also like the idea of a full screen as well, well done and thank you, i will use
it once its released :slight_smile:

4

I too am impressed…a very useful addition . :D…and…like bashy…will implement it as soon as it is released.

5

I’m impressed Mike! Another great script and very useful addition to the template set – folks will be able to tweak/tune the template look/feel to their hearts content!

AWESOME! =D> =D> :greenjumpers:

Best regards,
Ken

6

I added a new feature tonight:

You can paste settings into a textarea box from your last session and edit it again. This makes it easy to come back and make a slight adjustment. The settings are always shown at the bottom of the form page while you are editing and if you downloaded a style from this style editor before, the settings in the readme.txt of the zip file you downloaded.

If you run out of time while editing and want to save your work in progress, just copy the settings from the bottom of the form page and save to a text file on your computer. When you come back, just paste the settings into a textarea box and click submit. You can now edit some more.

You can also share styles in the forum by pasting your settings into the forum, then others can copy them and paste into the textarea on the style editor page, click submit and the style builder site uses the style instantly. The style can then be edited some more or downloaded in a zip file.

Lets have a style contest :popcorn:
Would someone like to try making some nice styles?
Start here:
http://www.carmosaic.com/weather/template/style-edit.php
After you make one that looks nice, come back here and paste the settings for review.

PS You build the styles using the narrow theme, but the downloaded zip file will include both wide and narrow css files 8) :lol:

Here is my favorite Blue style I made:

#header background-color: #3173B1
.headerTitle a color: white
.headerTemp color: white
.subHeader color: white
.subHeader background-color: #666666
.subHeaderRight color: white
.subHeaderRight background-color: #666666
.subHeader a color: white
.subHeader a background-color: #666666
.leftSideBar .sideBarTitle color: white
.leftSideBar .sideBarTitle background-color: #5B9AD2
.leftSideBar a color: #336699
.leftSideBar a:visited color: #336699
.leftSideBar a:hover background-color: #336699
#main-copy h1 color: #3173B1
#main-copy a color: #336699
.table-top color: black
.table-top background-color: #96C6F5
.column-dark color: black
.column-dark background-color: #F1F8FE
.ajaxDashboard .datahead color: white
.ajaxDashboard .datahead background-color: #5B9AD2
#footer color: black
#footer background-color: #d5d5d5
#footer a color: black
#footer a:visited color: #708090

7

I added a red and teal style, I also modified the orange and green a bit.

I really hope someone can help build some more nice looking color themes, then I can release a download package of the Carterlake/AJAX/PHP Color Theme Switcher Plugin.

8

Hi Mike,

Maybe the colour sensitive amongst us will indeed have a go at making some colour schemes 8). However, I had a go at using the scheme Style Editor, (and OK I selected some pretty garish colours in the process) but I discovered that when submitted, the editor came up with the colours initially but within 2 seconds some (not all) reverted back to the default. Thus I was unable to work through in a build up, line by line manner and see my efforts as they unfolded. I have had a look at the instructions again, but I can’t see that I was doing anything out of the ordinary. :oops: I used the cut and paste method to put the colours #'s in from the external programme and thought that if this (the external colour selector prog) could somehow be integrated within your Style Editor at the box insert level it would make the Editor even more of a wow.

Keep up the good work… The potential for the Style Editor is fantastic :smiley:

9

Do you use Internet explorer? You are probably seeing a “cached” version of the page.
This problem has been addressed in the programming code, please try again.

10

Well… :oops: I did think of it being a cache problem, but seeing the colour revert before my eyes completely threw me. However, I have done as listed above and lo and behold…the colours stuck and did not revert…yer lives and learns…Now to do some more experimenting this evening…I do like this idea. :slight_smile:

11

Glad it fixed it :slight_smile: I just added a help link next to the submit button for IE users

12

Hi Mike…this is terrible…you can get completely hooked…hours of fun and zillions of permutations…I’m really looking forward to the promulgation of the plugin/Style Editor… :smiley: :smiley:

13

Mike, have you tried adding

<?php
//------------------------------------------------
header("Cache-Control: no-cache,no-store,  must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
$NOWdate = gmdate("D, d M Y H:i:s", time());
header("Expires: $NOWdate GMT");
header("Last-Modified: $NOWdate GMT");
?>

at the very top of your script page (as first entry starting in the page)? That set of headers should force IE to not cache the page even if you don’t do the IE changes you outlined.

It’s the code I use at the top of all my pages to make sure the browser sees a ‘fresh copy’ … original code was by Tom at carterlake.org

Best regards,
Ken

14

Ken that works for web pages but the browser will still cache the css (IE with the setting we talked about)

I found a easy fix: adding a “timestamp” to the stylesheet’s URI, like

<link href="style.css?20060526T2150" ...

I duplicated the problem in IE and then verified this fix.

This will not be a problem with the style switcher by the way because it does not recycle the same css filename. It was only a problem in the style editor when editing a style with IE and the cache setting not set to reload always.

15

Good solution Mike! Tricking the browser into thinking it’s invoking a script/CGI using the ‘?’.

Best regards,
Ken

16

The Style Editor has been updated
http://www.carmosaic.com/weather/template/style-edit.php

It now has two modes:
Basic Settings: (simple changes like header, table and link colors)
Advanced Settings: (advanced changes including simple changes and body background colors)

Advanced settings will allow making reverse color styles like light text on a darker background.
I will make a sample style of a light text on a darker background for that real soon.

17

The style editor is officially launched:
http://www.carmosaic.com/weather/template/style-edit.php

18

Thats a very nice plugin. Very simple to install and implement and it looks very good. Thanks for all of your hard work on this!!!

19

Version: 1.02 08-Mar-2008 updated all the css templates to tighten the line spacing of the navigation links
also changed the #main-copy h1 text to not be italic,
h1 is used for the big words on that say “Records and Stats” in the wxgraphs.php page

My the Style Editor and my demo template is using all the new changes
http://www.carmosaic.com/weather/template/index.php

20

Would it be possible to add a feature to allow people to increase/decrease the font size?