CSS color wheel mk 2

  • Turns out my problems with this last night were to do with my host not the color wheel script :-).
    I like the idea of having a dynamic way of working with the WP color settings as opposed to typing in individual colors to each css style. It makes customization for the less technically minded a lot easier. As long as the starting css is resonable, the results are likely to be reasonable too. It would also be possible to reset the end result to web-safe colors if that was desired.
    What it does:
    Copies the target css file eg, wp_layout.css to a working file. Provides controls to alter all or some of the color settings in the css file. Then prints to the screen the effect of those changes on your target blog front page (and saves a css file of your settings in case you want them). It is specifically designed for WPs css but actually it will work on almost anything using hexadecimal color (ie CSS, HTML).
    You can use it to explore design options, you could use it to serve a different color mix option every day, you could use it to allow surfers to play with the color scheme and even save it for their use again later (some of these would require a little more development).
    I did it for fun, but if enough people find it of interest I can make it more easily useable for others. I find it useful myself. If you want to try it go to my test page:
    color wheel demo
    All controls are at the top left of the page. The mask controls allow you to select a subset of the colors in the chart and apply any changes only to that subset eg GSMask + Lightness (+50%) will lighten only the greyscale colors (r=g=b). With these controls you can work your way through almost any combination of colors for your blog. The numerical controls work with -100 to +100 other than hue which goes from -180 to +180.
    This is only a demo and if multiple people are using it at the same time it will give strange results – as their changes will work on your changes, but still the demo give an idea of what is happening and what is possible.
    andrew

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi Andrew_h
    I find your project very interesting. For a past few days I’ve been playing with almost the same idea – Dynamic CSS color adjustment (yes, typing the colors is boring). There is a need for it. I will join my ideas with your thread since I have no programming skills.
    Idea: “Lazy Admin Tool #1 – BG Colors”
    The objective would be to develop a tool which would enable every admin (member, user too?) to point and click his/her favorite colors and then update the CSS. Voila, the blog has a new color scheme.
    Reason for doing it:
    Thanks to recent CSS competition WP now has a wealth of wonderful styles and layouts. But as the user base of WP grows to many thousands it will not be enough. There will be countless sites who will be using unaltered CSS files. It will be rather boring (seen it happening elsewhere).
    WP is rather standardized and CSS based. It should not be impossible to write such a tool. Lazy admins (many of us?) will then pick a wonderful design and change its colors simply by pointing a color and clicking.
    ************
    This is how I imagined it would work (please add in all technical stuff I do not know):
    The sript would scan the CSS file and find every ” background: #XXXXXX; ” tag. It would extract this data and name these with their class names (e.g., BODY, HEADER, MENU, COMMENTFORM, …) or simply with alphabets: Color A, B, C, …
    Then it would print a standard (index?) page using the same CSS. It would insert into that page a form which has the following content:
    Description—color_value—color_sample/preview_of_size_x_by_y
    [BODY color:] [aaaaaa] [size x by size y color sample of color aaaaaa]
    [HEADER color:] [bbbbbb] [ x by y color sample of color bbbbbb]
    [MENU color:] [cccccc] [x by y color sample of color cccccc]
    …
    A small window would pop up. It would have a selection of ‘available/ web safe?’ colors and your (andrew_h) CSS color wheel functionality?
    Usage:
    First click a row (radio button?) and then click a color on the pop up window. The new color would replace old values. Then repeat for the next row. Finally click update and the site will have new color scheme. Repeat and change some colors till satisfied.
    I have borrowed ideas from these sites:
    https://www.csscreator.com/version1/index.php
    https://www.csscreator.com/version2/pagelayout.php
    If more interaction is technically possible it would be welcome. For example choose HEADER color row to edit, choose a color, and the color of the page header would change instantly …
    I have not seen such a tool in any other blog – anyone?
    *************
    It is SO easy to daydream: “Lazy Admin tool #2 – Text” ; “Lazy Admin tool #3 – Spacing” ??
    Cheers!

    Thread Starter andrew_h

    (@andrew_h)

    Hi Jules
    I’d have to spend some time looking at what you are suggesting to give a definitive answer but you are thinking along exactly the same lines as I am. With my tool I do not think it would be at all difficult to make adjustment to do what you are saying.
    But much of the time it is not necessary because if you play with the tool you will find it can get you there quickly by an inuitive experimental approach which does not require thinking one css header at a time anyway. If the stylesheet starts off with reasonable differentiation then a process of playing with the controls and using the masks will quickly yield an almost infinite number of variations.
    The next stage would be to plug in an easy way to pick from a range of starting css files (for example the ones from the contest) – and then each user can just fiddle with the controls until they hit something that they like. At that point all they have to do is to rename the col.css to their reference css and they have locked it in. That can easily be automated too.
    The immediate changes that would be useful would be to have masks that pull out “backgound” styles, “link styles” and “not background, not links”. The way the masks work is they select a subset of all the colors and then apply any changes to them.
    I was also thinking like you about how I would like to have a similar way of altering
    1, individual layout blocks.
    For example, I like, under my blog heading, to having
    poster name >> time >> category.
    To get that I had to mess around in index.php. That means every update I have to mess around again. I would like to see an external reference file that orders each block of the built up page. That is a far bigger change than the colorwheel but it would be very useful and would open up this tool much better to the non-technical people.
    2, alter font sizes, font types etc in each individual block.
    Once the index.php is built to facilitate this, this would not be hard at all I believe.
    But I better say now, I am only an enthusiastic newbie. I started my first blog less than a week ago and found WP only 5 days ago, so it may well be that my ideas are out of line with a sensible direction for development, or already being done.
    Andrew

    I spent some more time with Color wheel:
    There is a learning curve to color wheel: First you learn to appreciate the “reset” checkbox. But after many attempts one starts to get the joy of discovery: “WOW – I couldn’t have have visioned that effect on my own”.
    It’s greatest asset is that it changes almost everything at once – it is a speedster. The approach I proposed could not do that – it is a sloth.
    As you point out it could be “…adapted further…separating controls for backgrounds versus text”. In many occasions I got great colors but the text was unreadable. Some form of selective control is needed. I mean: It would be useful to freeze e.g. some colors and tweake text colors further. Or freeze the header and correct the menu background or text.
    If I understand correctly very much depends on what color values (‘seed’) the original CSS file has. Color wheel allows to explore starting on that premise. If all colors are white it is unable to tweak, correct? – If so, it needs a way to modify the ‘seed’ color values. Say I want to get a bluish or greenish design. I should be able to start quickly into that direction.
    I guess the problem here is to combine easy exploration and easy (selective) control? Color wheel demo is advanced tweaker’s tool good for color exploration purposes. It shows what advanced controls could be made available. It is a first.
    Would it be possible to develope it in a way that would have NO need to modify the current WP ‘infrastructure’. I mean to make it a ‘module’ that can be added. It would alter the contents of the CSS file only as it currently does (correct?). This way its development would not take any resources away from the core development.
    This is just my opinion but I think this avenue should be explored. It would expand the available colors schemes and (possibly) provide an easy way for an admin (user?) to customize his site AND retain WP’s aesthetically pleasing text styling. Let Lazy admins to play with the colors and leave advanced subject of text formatting to WP .css developers? WP’s original design concept (pleasing text) would prevail and unlimited color variations would be ‘available’ for each different design.
    greetings, jules

    Thread Starter andrew_h

    (@andrew_h)

    Hi again Jules,
    I’ll answer your full points tomorrow when I’ve had a bit more sleep but for now: with the demo it is very easy to separate the text from the colors for the simple reason that the text is greyscale and there is a greyscale mask. So, for example, try simultaneously ticking “GS Mask” and invert.
    Or, first just do “invert”. Then tick G Mask and give Gr (green) -100 and Bl (blue) -100.
    But I agree it would be better with more controls, especially individual controls for text and backgrounds and in fact it is easy to do.
    I’ll answer more fully tomorrow but at this stage I am not sure anyone else but you sees much merit in the idea ??
    andrew

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS color wheel mk 2’ is closed to new replies.