Pre 1.5 Gallery Skins: Creating & Customizing Tutorial

PLEASE NOTE THAT GALLERY 1.5 RUNS A LITTLE DIFFERENTLY. The css files have been renamed in an attempt to make customizing/skinning easier. Please read the information at the top of each css file to find out more until we can get more detailed documentation together.

I'm sure that if Jade gets a chance she will upgrade this tutorial further.

--Gaile (aka PixelPoet)

----------------------------------------------------------------------------------
After setting up your Gallery you have decided that even with the skins provided you want to do something different. This tutorial will bring you through the steps creating a new skin and how to apply that skin to your Gallery.

1) Go to /skins/ folder and create a new folder and name it for your skin. (do not use special characters or spaces in the name)

2) The easiest way to create a new skin is to copy over the files from an existing skin. There are three main types of skins.
Plain: has a basic bar for the titles and background colors which could be swapped with backgrounds.
Left Image: has an extra image to the left of the titles.
Highlight: has an image to the left and right along with a middle background to create a highlight of the titles. This one could also be used to do something like my LOTR site (the one which started the whole skin thing)

Decide which you want to base your new skin from and copy the files into the new folder.

3) There are two folders /css/ and /image/ and a file called style.def. This file contains the information that the Config Wizard reads to list the Skins for selection. Open the file in a Text editor (do not use Word or Wordpad) and change the title and description accordingly.

<?php
$name=_("jade001");
$description=_("Green & blue bar with white background");
?>

save.

4) Now there are two ways to enable the new skin so you can work with it through your installed Gallery.

First Method - Open the config.php file located in the main gallery folder and edit this line.

$gallery->app->skinname = "jade001";

Very Important notice that the name is exactly the same as in the style.def and in lowercase. If by chance you type in the name wrong your gallery will just default to the plain (original) settings and your skin will disappear.

Second way is to CHMOD .htaccess, config.php and the folder /setup/ to 755. Then go to your main page and run through the Config Wizard and your new folder will be listed in the Skins area for selection. Note: this will not loose any prior settings, you can change these anytime by rerunning the Config Wizard. Then CHMOD .htaccess and config.php to 644 and the folder /setup/ to 400.

5) Now you are back to your Gallery you can see the Skin that you copied over and you are ready to change it and create your own. The easiest way to change the graphics is to open the entire set in an image editor and create the same size images to replace them. If you are more familiar in creating images you can go ahead and change some of the sizes, but do note that if they are to big you may need to chage a couple files in /layout/ folder. (I'll do another tutorial on that later). Name your new files the same as the old names and upload to your site. Once you refresh your Gallery you should see your images right away.

6) The images that you find in the Skins are entirely controlled by the skins CSS file. If you do not know CSS This site is a good place to start and learn.

You will see two files in the /skins/yourskin/css/ folder standalone_style.css and embedded_style.css. We do nothing with the standalone_style.css so you can just ignore it. Everything is controlled by the embedded_style.css so go ahead and open it in a text editor (do not use Word or Wordpad).

This may seem a bit confusing at first, especially to someone new to CSS. Each segment is noted as to what goes where.

To briefly go over some of the changes you could make and perhaps to clarify some of the CSS for new people.

Below is a typical CSS from one of the skin files. It is also the #1 confusion for people trying to edit their album descriptions. The reason these are seperate is to enable the admin have seperate control over the way the actual descriptions and the names of the author, then have something else for the entire background of the description box.

.albumdesc  /*album description includes all text and background*/
	{
	  font-family:verdana, arial, sans-serif;
	  color:#404040;
	  font-size:x-small;
	  font-weight:bold;
	  background-color: #ffffff;
	  line-height:140%;
	  padding:2px;
	  margin-top:2px;		
	  border:0px solid #404040;
	}

The first part is the "global" setting for the album description, this is what it effects

.desc  /* album descriptions on main page just description and author*/
	{ 
	  font-family:verdana, arial, sans-serif;
	  color:#404040;
	  font-size:x-small;
	  font-weight:bold;
	  line-height:140%;
	  padding:2px;
	  margin-top:2px;		
	  letter-spacing: .2em; 
	}

Now the Description and Author have their own setting so that you can have it bolded, larger, spaced(kerning), or different color.

below is the same CSS from another skin, you can see that this other skin has a background image for the album description and a border.

.albumdesc  /*album description includes all text and background*/
	{
	  font-family:verdana, arial, sans-serif;
	  color:#742d45;
	  font-size:x-small;
	  font-weight:bold;
	  background-image: url(../images/mod_descbg.jpg);
	  line-height:140%;
	  padding:2px;
	  margin-top:2px;		
	  border:1px dashed #000000;
	}
.desc  /* album descriptions on main page just description and author*/
	{ 
	  font-family:verdana, arial, sans-serif;
	  color:#742d45;
	  font-size:x-small;
	  font-weight:bold;
	  line-height:140%;
	  padding:2px;
	  margin-top:2px;		
	  text-transform:uppercase;
	  letter-spacing: .2em; 
	}

Not to go into every setting of the CSS file, but I can say that most of the areas have a setting just for a background image and another for text.

Another note on changing the CSS atributes, you can do just about anything you have knowlege to do. Whatever you put as an atribute to each area will appear on your Gallery. Below I will list some of the CSS you can include on these sheets. The different browsers and computers will render CSS differently, so be sure to check across as many platforms as you can to ensure greatest compatiblity of your site.

BACKGROUND

background-image: url(../images/mod_descbg.jpg);
background-repeat: repeat-x; (used for a single row)
background-repeat: repeat-y; (used for a single column)

OR
background-color: #000fff;

BORDER

border: 1px dashed #000000; (typical in the skins css)
border: size|| style || Color;

List of available styles:
dashed
dotted
double
groove
hidden
inset
none
outeset
ridge
solid

BORDER-TOP, BORDER-BOTTOM, BORDER-LEFT, BORDER-RIGHT
You can use the same atributes as BORDER however this allows you betther control over your borders.

FONT SIZE
font-size:x-small;

Styles available
xx-small
x-small
small
medium
large
x-large
xx-large

OR
font-size: 10pt;

FONT WEIGHT
font-weight: bold;

styles available
bold
bolder
lighter
normal

You can also set a numerical value to determine font weight.
100
200
300
through
900

MARGIN
This controls the space to any side of the CSS element, so everything is not squished together.

margin-top:2px;
margin-bottom: 3px;
margin-left: 5px;
margin-right: 8px;

OR

margin: 10px 20px;

notice there are no : or ; between 10px and 20px. This is because all four margins are set with this one line. 10 px refers to the top and bottom of the element and 20px refers to the right and left.

POSITION

Ocasionally you will run into a problem where things are not aligning the way you want them to go. This additional attribute will allow you to add that additional control over your skin.

position: relative; right: 5px; left: 10px; top: 2px; bottom: 5px;

You will want to use the "relative" atribute (just trust me on this one)

This will enable you to nudge the text around such as I did on the new Gallery Skins upgraded site. (more soon on this I promise)

Well that should be enough to get you started. I'll post another tutorial in a couple days about the layout files.

=)
Jade

margin refers to how much space you leave around your object.

For example I wanted to move the description text away from the edge of a border. I would use

.desc {
margin-left: 10px;
}

margin only refers to the CSS classifications in the Skins/skinname/css/embedded_style.css file.

Margin can be used in the CSS body tag to create a larger space around your gallery. But I would recomend wrapping Gallery in a header/footer table to control the width of the gallery. You can see how that is done by using PixelPoet's tutorial (another sticky in this forum).

If you do not know CSS, you will need to learn the basics to modify these files.

=)
Jade

It does seem a bit misleading, but I put all the CSS tags originally in embedded_styles.css when I did the skins for v1.3.3. The Dev Team took the code from my altered files and incorporated it with their own to make 1.4.1 skins. They kept the original idea of having one file control everything.

I'm working on the files for 1.4.1 to upgrade my site Gallery Visual Tutorials (currently still in version 1.3.3). It does take many hours to sort and document the code. Hopefully I will have this fully available soon.

Also I will have the entire Skinning system broken down and explained along with tips on further visual modifications.

I'm working on a better navigation menu to better point out the more frequent questions about customizing.

Soon, I promise!
=)
Jade

This forum doesn't seem to be very active anymore, but if someone does happen to come along and would like to help me out, I was able to get all of my header images to display and the links work fine. There is just one little problem still.... If you look at the "Home" link at the bottom of my header it is outside of the table for some reason.
Here is the link to my gallery once again:

http://www.strangehappenings.org/Ghost_Photos_Pictures_Of_Ghosts_Spirits/gallery/albums.php

Any ideas on how to fix this?

Thanks,
Aedryan