Board index PBase HTML and Style Sheets Eliminating Size options and centering

HTML and Style Sheets

Eliminating Size options and centering

Customize your galleries.
pixelthatphotography
 
Posts: 5

Eliminating Size options and centering

Post Tue Jun 30, 2009 7:00 am


Can someone please help me....am a newbie and can't seem to figure out what my problem is. My website is: www.pixelthatphotography.com

2 problems:
first, when I click on small thumbnail to go to larger thumbnail the big thumbnail is not centered and the next/previous buttons on the top right appear to almost go off the page

second, I only want to allow a medium size file for the larger thumbnail. Is there a way to eliminate the "other sizes: small, medium,, large, original" options?

Any help would be greatly appreciated....getting pretty frustrated here.
Thanks in advance

Code below I believe is my existing CSS. I have tried to make as many notes as possible to remind me what does what:

/* Thumbnail Gallery*/
/* CSS Document */
body table td a img {display:none;}
.thumbnails table img {display:none;}
table img {display:block;}
.display, .display img {display:block;}
.thumbnails table, .thumbnails table img, .display, p.small{
display: inline; }




A, TD.A, A:link
{
color: #969696;
text-decoration: none;
}
A:hover { color: #FF0000; text-decoration: underline; }
A:visited { color: #D2D2D2; }
A:hover { color: #FF0000; text-decoration: underline; }
A:active { color : #969696; }
A:hover { color: #FF0000; text-decoration: underline; }



.caption {
FONT-SIZE: 12pt;
color: #D2D2D2;

}



/*Description of Gallery*/

div.galleryheader
{
margin-top: 0px
}

.galleryheader
{
text-align: left;
COLOR: #FF8C00;
LETTER-SPACING: 0px;
font-size: 9pt;
FONT-FAMILY: system;

}
div.galleryheader
{
margin-bottom: 1px
}



BODY {
MARGIN-TOP: 10px;
BACKGROUND: Black;
}


.message_body {
FONT-SIZE: 10pt;
COLOR: #D2D2D2;
FONT-FAMILY: verdana;
LETTER-SPACING: 1px;
text-align: left;
BACKGROUND-COLOR: Black
}


div, th, tr, td, table, font, li, ul, form, blockquote, font, span, center, p, b, i, h1, h2, h3, h4, h5 {
border: 0px;
FONT-SIZE: 10pt;
COLOR: #aaaaaa;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
LETTER-SPACING: 1px;
margin-left: 5px;
margin-top: 5px;
}


/* header bar*/
b {
FONT-WEIGHT: normal;
FONT-SIZE: 10pt;
COLOR: #D2D2D2;
TEXT-ALIGN: center;
LETTER-SPACING: 2px;
margin-right: 10px; margin-left: 10px
}


/* row beneath header bar and above pixel that image*/
/* this eliminates Topside Images and makes it a blank row*/
H2 {
FONT-WEIGHT: normal;COLOR: #000000;
FONT-FAMILY: Tahoma;
FONT-SIZE: 0pt;
}


/* gallery title beneath header bar and above pixel that image*/
#mytitle
{
font-size: 12pt;
font-weight: normal;
text-align: center;
letter-spacing: 8px;
padding-top: 0px;
padding-bottom: 15px;
margin-left: 2px;
margin-right: 2px;
background-color: black;
color: white;
}

#mytitle:first-letter
{
color: #d5ae83;
font-style: bold;
font-size: 22pt;
}


/* row beneath gallery title*/
/* --font size doesn't work--*/
p {
PADDING: 10px;
FONT-SIZE: 9pt;
COLOR: #aaaaaa;
FONT-FAMILY: verdana;

LETTER-SPACING: 1px;
text-align: center;
margin-left: 2px;
margin-right: 2px
}

.copyright {
font-size: 9pt;
font-weight: bold;
font-style: italic;
}

/* --photo thumbnails--*/
IMG.thumbnail {
BACKGROUND-COLOR: Black;
border: #404040 0px solid;
horizontal-align: middle;
vertical-align: middle;
}

a.thumbnail {
border: #292929 1px solid;
width: 170px; height: 165px;
horizontal-align: middle;
vertical-align: middle;
background: Black;
display: block;
margin-bottom: -12px;
padding-top: 18px;
padding: 8px;
}

a.thumbnail:hover {
border: #808080 1px solid;
horizontal-align: middle;
vertical-align: middle;
width: 170px; height: 165px;
background: Black;
display: block;
margin-bottom: -12px;
padding-top: 18px;
padding: 8px;
}

td.thumbnail font {
font-variant: small-caps;
FONT-SIZE: 11pt;
color: gray;
}

/* --click on thumbnails for full image line--*/
.gallery_hitcounts{
font-size: 14pt;
font-weight: bold;
text-align: center;
}



TABLE.imagetable {
background : #000000;
border-style : solid;
border-width : 0pt;
border-color : #000000;
}


IMG.display {
border-style : solid;
border-width : 0pt;
border-color : #000000;
horizontal-align: middle;
vertical-align: middle;
}

.lid{
background: #373737;
color: #666666;
font: 11px Verdana, Tahoma, Helvetica, sans-serif;
text-decoration: none;
}
.display {
border: #000000 0px solid;
background: #AFAFAF;
}
/*--color is black to remove it from being seen--*/
.date {
color: #000000;
font-style: italic;
font-size:14px;
}


div#commentlist
{
margin-top: 20px
}


#commentlist .from
{
color: #aaaaaa;
background-color: Black;
font-weight: bold;
font-size: 9pt;
padding: 1px;
}
#commentlist .message_body
{
color: #aaaaaa;
background-color: Black;
font-size: 9pt;
border-bottom: #404040 1px solid;
padding: 1px;
}

.location
{
font-size: 10pt;
text-align: center;
}


/* --??? Not sure???--*/
TEXTAREA {
COLOR: #D2D2D2;
FONT-FAMILY: verdana;
BACKGROUND-COLOR: Black
}

heliocristovao
 
Posts: 25
Location: Portugal

Re: Eliminating Size options and centering

Post Tue Aug 25, 2009 4:28 pm


pixelthatphotography wrote:

Is there a way to eliminate the "other sizes: small, medium,, large, original" options?

}




Hello,
I would also like to learn how to eliminate these options in the PBase galleries. I only "use" original sizes, varying from 500 to 650 pix. (largest side) and that´s how I would like people to see the images. So, the size option becomes dispensable for me... Thanks in advance.
Photographer Hélio Cristóvão
Visit Website


Board index PBase HTML and Style Sheets Eliminating Size options and centering

Who is online

Users browsing this forum: ryanroberts and 1 guest