PDA

View Full Version : EE 1.5 RC4 Main Image Border and shadow settings


rob champagne
9th of April 2004 (Fri), 14:45
Hi, I've just managed to get EE 1.5 RC4 running on my local machine and one thing I can't seem to find is how to set image borders and shadows.
I guess it must happen in the Upload process but I can't find any reference to borders or shadows in any of the settings options.

Help please.

Rob Champagne

Pekka
9th of April 2004 (Fri), 15:10
Here's a basic style manual:


HOW STYLES WORK

Use style editor to add styles to EE. For example when you add a style called 'sahara' as styles/sahara.php EE looks now for file styles/sahara.php for each exhibition the style 'sahara' is selected for. File styles/sahara.php contains the style definition. Style Definition gives links to style graphics and defines all colors and fonts. If 'sahara' is selected as exhibition style and styles/sahara.php can not be found, EE will use style 'original'. There is no need to delete unused styles from style list - no one but you will ever see them.

A WORD ABOUT HEXADECIMAL COLOR VALUES

If you don't know anything about hex number notations:

The color value represents Red, Green, and Blue (as in RGB color). Each prime color has its own value pair between 00 and FF (0-255 in decimal notation). level 00 is black and FF is pure white. Hexadecimal numbers go from 0 to 15 as follows 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
so, if you need pure red FF0000 (red channel is topped), pure green is 00FF00. Shades of gray are CCCCCC, DDDDDD, EEEEEE light green could be 99FF99 and darker green could be 33BB33.
Of course, the easy way to determine colors is to use photoshop's color picker where you can read color in HEX (#number).


TEMPLATES

There are photoshop files and actions for logo, tab and shadows included in EE 121, but the frame templates I used were for XaraX (which I used for webdesign).


SHADOWS

The shadow needs the background color as a base color, so you need to know its hex value. Select layer 1, click the toolbar foreground color box , and enter your new hex color there. Now, choose the Paint Bucket Tool and fill the background with the new color. Do this for all three shadow files
"b_r_corner.psd", "bottom.psd" and "right.psd".

After you have filled the backgrounds, make sure you have layers 1 and 2 visible and use the EE_shadow actions (bottom for bottom.psd and corner for b_l_corner.psd etc.). After action has ran, export the image for web as jpg (I use 70%) and after that close that psd. NOTE: DO NOT SAVE THE PSD AFTER ACTION HAS RAN, OR YOU'LL LOOSE THE TEMPLATE.

Shadow is active when

$s_photopage_shadow = "1";

in style definition file.


FRAMES

Frames can be anything you like, only the exporting has to be done in certain way. I have done frames in XaraX (I found it easier than imageready for slicing), but you may use any program capable of exporting images in slices. The "fill.gif" is a TRANSPARENT gif which is used to show EE the frame width. Normally if e.g. corners are 12x12 pixels, fill.gif is also 12x12 pixels. But if you use smaller or bigger fill.gif you can get some interesting effects (the frame starts to repeat when fill.gif is bigger than the corner image).

One frame is normally in its own folder, so it's easy to switch frame type by changing the folder name in style definition file.

http://photography-on-the.net/ee/beta/frame_rects.gif

Frame is active when

$s_photopage_frame = "1";

in style definition file.


STYLE DEFINITION FILES

Style definition files contain all settings for one style. Each line has a variable, equal sign (=), amount enclosed in " " 's and closing ";", like

$s_news_header_color = "cc9900";

I have inserted a lot of comments like

// THUMB LIST image borders

which should help in knowing what the variables do.

ALL COLOR VALUES ARE IN HEX!

If you want to use browser's default values, leave values empty: "";

I have included a useful function into style definitions Function hexcolorshifter is used so that the first parameter is a source color (or variable which was prefedined to some color) and the second is a multiplier to either darken (less than 1) or brighten (more than 1). Use . (dot) as decimal. The function returns the multiplied hex color value automatically. Only note about this function is that if you use a variable as color source, that variable must have been defined before the function is called.

Examples

Back color is set to "something", and you use it as a reference to font color (you want it much brighter than back color)

$s_back_color = "8f6c75";
$s_font_color = hexcolorshifter($s_back_color,"2.2");

If you need back color to be calculated from font color it would not work like this...

$s_back_color = hexcolorshifter($s_font_color,"2.2");
$s_font_color = "8f6c75";

... because when you call "$s_font_color" it has not been defined yet!
Instead, do

$s_back_color = hexcolorshifter( "8f6c75","2.2");
$s_font_color = "8f6c75";

... and it works.

So

$s_font_color = hexcolorshifter($s_back_color,"1.7");

makes color "$s_font_color" brighter
and

$s_font_color = hexcolorshifter($s_back_color,".8");

makes color "$s_font_color" darker.

Hexcolorshifter has been used a lot in my styles e.g. to make detail list automatically choose shades from background. Note that this function multiplies each color channel separately, so if you already have a very bright or dark color, there is a point where color tint can not be held and you end up having color shifts.

rob champagne
9th of April 2004 (Fri), 15:48
Thanks,
I almost wish I hadn't asked.

Rob Champagne

Pekka
9th of April 2004 (Fri), 16:12
Thanks,
I almost wish I hadn't asked.

Rob Champagne

:) the short answer is that shadows and frames are added by style system, they are not written to images. To disable shadow and frame:

Go to style editor and see where the style file is for the style you want to edit.

Remove shadow:
Open the style file (e.g. styles/dusk_feel_2.php) to plain text editor and
change text

$s_photopage_shadow = "1";

to

$s_photopage_shadow = "0";

Remove frame:
Open the style file (e.g. styles/dusk_feel_2.php) to plain text editor and
change text

$s_photopage_frame = "1";

to

$s_photopage_frame = "0";

rob champagne
9th of April 2004 (Fri), 16:32
Done and dusted thank you. Works a treat.

Rob Champagne