New variable themes

griffinmt
griffinmt's picture

Joined: 2009-09-06
Posts: 128
Posted: Sat, 2009-10-24 04:37

I have a modified theme from the original default some time ago, and have kept up with changes that were needed. I think I have most of the 'structure' taken care of, but now, instead of the many shades of gray in the theme, I would like to make a number of changes into some lighter pastel colors.

The first thing I did was to make a copy of my screen.css file and named it screen.master.
Then I editted the .master file, replacing all of the color encodings (EG: #5382bf ) with a php style variable name (EG: $plasticblue ).
After that, for all the inserted variable names, I defined them at the beginning of screen.master in this format:

Quote:
$plasticblue: #5382bf ;

Then, in the views folder I wrote a small class module (enhanced_css.php) that, when used at the beginning of the page.html.php module, would read the .master file, replace (and remove) the variables, and write it back out as screen.css. It would only do this if .master was newer.

Now it will be easier to start making the changes (and expanding on the variables used) incrementally or en-masse.

I got this idea (and much of the code examples) off the web (no restrictions)and mofified it to work with the combined css approach.

Attached is the class module.
Here is the mod to the start of the page.html.php:

Quote:
<?php defined("SYSPATH") or die("No direct script access.") ?> <!-- existing -->
<?php include_once("enhanced_css.php"); ?>
<?php $css = new EnhancedCss("themes/Family/css/screen"); ?>

And a sample chunk of screen.master:

Quote:
/*
$plasticblue: #5382bf ;
$midblue: #4868e8 ;
*/

button.ui-state-hover {
color: $plasticblue !important;
cursor: pointer !important;
text-decoration: none;
-moz-outline-style: none;
}
.g-page-list select {
margin: 1px;
text-align: center;
font-size: .9em;
font-weight: 900;
color: $midblue;
display: inline;
}

Martyn T. Griffin

AttachmentSize
enhanced_css.php_.txt1.49 KB
 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 22888
Posted: Sat, 2009-10-24 05:22

Martyn.
Perhaps you and vizion/vizion2000 could get together and come up with something together.
He has similar, but in my opinion, grandiose ideas, creating a configuration file for changing layout and color/colour.

http://gallery.menalto.com/node/91832

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
griffinmt
griffinmt's picture

Joined: 2009-09-06
Posts: 128
Posted: Sat, 2009-10-24 13:32

I think what I did is a very simplex solution for ease of use, not a full redo that he (she) has in mind. But parts are similar.
I did mine for manipulation the colors, but it also works on all the css attributes, such as those controlling size and positioning.
It's just "version 0.1", but the class can easily be expanded to perform calculations with the variables etc. I had planned to extend it to support multiple color sets, making them appear randomly from session to session.
I suppose that the variable definitions can be stored in a discrete file, but my way always leaves a .css file that is clean and never needs direct manipulation.

Martyn T. Griffin

 
griffinmt
griffinmt's picture

Joined: 2009-09-06
Posts: 128
Posted: Sun, 2009-10-25 20:04

After looking at some other discusions on related subjects, I made a change to the way this runs.
1) Seperated the variable definitions from the css file and modified the class accordingly.
2) Added in support for multiple color scheme within the theme.
3) Put in a simple display page to show all the colors for each scheme along with the color value and the variable name for it.
Attached is a sample of the display output.
The scheme and color selections are only a starting pass!

Martyn T. Griffin

AttachmentSize
colorschemes.jpg71.23 KB
 
griffinmt
griffinmt's picture

Joined: 2009-09-06
Posts: 128
Posted: Sun, 2009-10-25 20:47

OK, I admit it, I am useless with regular expresions!!!

I need to change one and don't know were to start!

Quote:
preg_match_all('/\s*\\$([A-Za-z1-9_\-]+)(\s*:\s*(.*?);)?\s*/', $line, $vars);

This pulls out of the variable $line all the occurences of '$xxx: yyyy;' as well as '$zzzz;', dropping the $ sign in the process.

What I need to do is to be able to extract '$xxxx: rgb(...);' as well (in any case).

Anyone to help me?

Martyn T. Griffin

 
griffinmt
griffinmt's picture

Joined: 2009-09-06
Posts: 128
Posted: Wed, 2009-10-28 14:13

The regular expresion issue above is resolved.
As far as the messed up header/body content is concerned, since no-one had any suggestions, I canned that approach and changed it all to just a bunch of functions, including and executing between the </head> and <body> definitions.

Also, the standalone utility for dispaying the variable definitions was altered to ket it update the .defs file directly.

Martyn T. Griffin

 
metaphist

Joined: 2010-02-24
Posts: 3
Posted: Wed, 2010-02-24 19:37

Do you have any new code for this, or has the original post been updated?

I may need to develop something for a client that will allow him to apply a different tiled background to any album. I think I could perhaps add a custom field to the album details (along side title, description, ect) for a background image url, and pass this value to the css via your method.

What do you think?

 
rross

Joined: 2010-08-22
Posts: 39
Posted: Sun, 2010-08-29 15:00

..