Board index PBase HTML and Style Sheets no such thing as a stupid question, right?

HTML and Style Sheets

no such thing as a stupid question, right?

Customize your galleries.
ru1036
 
Posts: 14

no such thing as a stupid question, right?

Post Sat Nov 25, 2006 6:53 pm


I'm a simple guy and am content with the existing style sheets save for a few changes to the font size and color. Try as I might, I can't seem to edit the existing style sheets. I've copied source code, pasted, started new style sheets and pasted existing code onto those--nothing comes out right. I know I'm missing something. I've started some of the tutorials, but then have trouble applying it to my page.

I only want to change the font size and color for the david_wnuk pblog style sheet; that's all. maybe then I'll be ready to move onto the more complicated stuff!

Is there still hope for me?

pinemikey
 
Posts: 2751
Location: Cypress, Texas


Post Sat Nov 25, 2006 8:12 pm


I think what you're going through is natural...at least I felt the same way about two years ago.

Now, the font in that pblog stylesheet is called papyrus. If you change that in the stylesheet edit box, you can replace it with one you want. Just so you know, you can't just put in any font you want. In order for others to view the font, they have to have that font on their computer. That's why you'll find three or four font names...if they don't have the first, then maybe they'll have the second or third. If you go here to see a list of common windows [and MAC equivalent] fonts.

The color change is another thing. There are basically three ways of indicating colors. You can type in the basic color description, black, blue, red...but you're pretty limited. You can also use rgb(2,2,2) format where the three numbers in the parentheses range from 0 to 254. Then you can use a hexidecimal format, which looks something like #404863 or #bbbbff. There are millions of combinations. When I want to choose another color I use this website as a guide.

Hope this helps. Again what it would probably only take a couple of minutes to show you is complicated into this post, which maybe took me the better part of an half hour to write and research.

dang
 
Posts: 3780


Post Sat Nov 25, 2006 8:16 pm


Try playing with this version of it, might be a little easier for you and give you a bit more idea whats going on. Sometimes just seeing it a little different can help.


/********************************************/
/* COLOR & STYLE SETTINGS */
/********************************************/

/****************************/
/* ENTIRE DOCUMENT SETTINGS */
/****************************/

/* Main body of the page */
body {
font: 10pt/8pt Papyrus, Poor Richard, Bookman Old Style, verdana, Tahoma, Helvetica, sans-serif;
color: #FFFFFF;
letter-spacing : 3px;
background: #424242;
}

div, a, a:link, a:visited, a:active, a:hover, table, tr, td, b, i, #linkedsubgalleries .other, #linkedsubgalleries .current, h1, h2, h3, h4, h5, #imagepage #localmenu td b {
font-family : Papyrus, Poor Richard, Bookman Old Style, verdana, Tahoma, Helvetica, sans-serif;
font-weight : normal;
font-style : none;
font-size : 8pt;
}
#localmenu, #localmenu a, #slideshow, #slideshow a, #imageinfo, #imageinfo .title , #techinfo .camera, #techinfo .exif {
font-weight : normal;
font-style : normal;
font-size : 8pt;
}

/* Links */
a, td.a, a:link {
font-family : Papyrus, Poor Richard, Bookman Old Style, verdana, Tahoma, Helvetica, sans-serif;
color: #C8B478;
text-decoration: none;
font-size : 8pt;
}
a:visited {
color : #C8B478;
font-size : 8pt;
}
a:active {
color : #C8B478
font-size : 8pt;
}
a:hover {
color: #FFA000;
text-decoration: underline;
font-size : 8pt;
}


/*************************/
/* GALLERY PAGE SETTINGS */
/*************************/

/* Gallery Title */
h2 {
font-size : 18pt;
font-weight : normal;
letter-spacing : 14px;
background : #252525;
border-bottom : solid;
border-color : ##BF8F3B;
border-width : 2px;
}
h2:first-letter {
color : #C8B478;
font-size : 20pt;
font-weight : bold;
}

/* Linked Subgalleries */
#linkedsubgalleries {
color : #C8B478;
}

/* Previous, Next, and Page Number Links */
/* Entire row of links */
#gallery_entries > table {
color : #C8B478;
}

/* Existing and New Comments and Pageview Data */
DIV.gallery_comments, DIV.gallery_hitcounts {
font-size : 10pt;
}

.message_body {
background : #252525;
border-bottom : solid;
border-color : #FFA000;
border-width : 1px;
}

/* Individual Image or Subgallery in Gallery */
.gallery_entry-even, .gallery_entry-odd {
font-size : 12pt;
background : #252525;
border-style : solid;
border-color : #FFA000;
border-width : 2px;
}

/* Image or Gallery Title */
DIV.title-image, DIV.title-gallery {
font-size : 14pt;
}

/* Image Caption */
DIV.image_caption {
color : #FFFFFF;
font-size : 10pt;
}

/* Image date in odd and even item listings */
DIV.gallery_entry-even DIV.image_date,
DIV.gallery_entry-odd DIV.image_date {
font-size : 8pt;
color : #FFFFFF;
}

/* Image thumbnails */
DIV.thumbnail {
background : #FFFFFF;
border-style : solid;
border-color : #424242;
border-width : 10px;
}

/***********************/
/* IMAGE PAGE SETTINGS */
/***********************/

/* Contains Image, Image Date, and Image Artist */
TABLE.imagetable {
background : #252525;
border-style : solid;
border-color : #FFA000;
border-width : 1px;
}

/* Actual Image */
IMG.display {
border-style : ridge;
border-color : #FFFFFF;
border-width : 10px;
}

h3.title {
font-size : 18pt;
}

h3.title, h3.location {
background : #252525;
border-bottom : solid;
border-color : #FFA000;
border-width : 2px;
font-weight : normal;
}


/********************************************/
/* POSITIONING SETTINGS */
/********************************************/

/*************************/
/* GALLERY PAGE SETTINGS */
/*************************/

/* Previous, Next, and Page Number Links */
/* Entire row of links */
#gallery_entries > table {
float : left;
position : relative;
width : 100%;
}


/* Gallery Title */
h2 {
display : block;
position : relative;
top : -1px;
width : 100%;
clear : both;
padding-top : 15px;
padding-bottom : 15px;
margin : 5px;
margin-left : auto;
margin-right : auto;
text-align : center;
}
h2:first-letter {
margin-top : 5px;
}

/* Linked Subgalleries */
#linkedsubgalleries {
position : relative;
width : 100%;
top : 5px;
padding-bottom : 5px;
margin : 0px;
margin-left : auto;
margin-right : auto;
text-align : center;
}

/* Gallery List */
#gallery_entries {
position : relative;
float : left;
width : 90%;
left : 5%;
right : 5%;
margin-right : auto;
margin-left : auto;
text-align : center;
}

/* Existing and New Comments and Pageview Data */
DIV.gallery_comments, DIV.gallery_hitcounts {
position : relative;
float : left;
width : 90%;
left : 5%;
right : 5%;
padding : 0px;
margin-right : auto;
margin-left : auto;
text-align : center;
}
/* Existing and New Comments and Pageview Data merged into one section */
/* Existing and New Comments */
DIV.gallery_comments {
margin-top : 3px;
}
/* Pageview Data */
DIV.gallery_hitcounts {
margin-bottom : 3px;
}

/* Individual Image or Subgallery in Gallery */
.gallery_entry-even, .gallery_entry-odd {
position : relative;
float : left;
width : 100%;
min-height : 220px;
padding : 3px;
margin-right : auto;
margin-left : auto;
margin-top : 30px;
margin-bottom : 30px;
text-align : left;
}

/* Image or Gallery Title */
DIV.title-image,DIV.title-gallery {
position : relative;
text-align : center;
}

/* Gallery Description */
/* Only show description when viewing first page or all contents */
DIV.galleryheader {
display : none;
}
#page-1 DIV.galleryheader, #page-all DIV.galleryheader {
display : block;
width : 90%;
margin-right : auto;
margin-left : auto;
margin-top : 10px;
margin-bottom : 10px;
text-align : center;
}

/* Image date in odd and even item listings */
DIV.gallery_entry-even DIV.image_date,
DIV.gallery_entry-odd DIV.image_date {
position : absolute;
top : -28px;
}

/* Image date in odd item listings */
.gallery_entry-odd DIV.image_date {
left : 0px;
text-align : left;
}
/* Image date in even item listings */
.gallery_entry-even DIV.image_date {
right : 0px;
text-align : right;
}

/* Image thumbnails */
DIV.thumbnail {
padding : 2px;
margin : 5px;
}
/* Image or gallery thumbnails in even item listings */
DIV.gallery_entry-even DIV.thumbnail {
float : right;
}

/* Image or gallery thumbnails in odd item listings */
DIV.gallery_entry-odd DIV.thumbnail {
float : left;
}


/* Image Caption */
DIV.image_caption {
padding : 10px;
}

/* Number of comments and new comment link for image or subgallery */
DIV.comment_count-image,DIV.comment_count-gallery {
float : right;
width : 100%;
margin : 0px;
clear : both;
text-align : right;
}

/* Add gallery to topic form */
DIV.topic_add_form {
position : relative;
width : 90%;
left : 5%;
right : 5%;
padding : 0px;
margin-right : auto;
margin-left : auto;
float : left;
text-align : center;
}
DIV.topic_add_form hr {
display : none;
}


/***********************/
/* IMAGE PAGE SETTINGS */
/***********************/

/* Image Page Contents */
#imagepage {
display : block;
padding : 5px;
margin : 50px;
float : left;
}

/* Profile page, all galleries links */
#localmenu {
position : relative;
top : -55px;
left : -55px;
}

/* Contains Image, Image Date, and Image Artist */
TABLE.imagetable {
padding : 30px;
}

/* Actual Image */
IMG.display {
padding : 1px;
margin : 0px;
}

/* Image Date */
SPAN.date {
width : 0%;
white-space : nowrap;
}

/* Image Artist */
SPAN.artist {
width : 0%;
white-space : nowrap;
}

h3.title, h3.location {
width : 400px;
padding : 10px;
}

/* Image Comments and New Comment Form */
DIV.comment_section {
padding-top : 5px;
}

/* Image pageviews */
DIV.image_hitcounts {
text-align : center;
}

BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }


Board index PBase HTML and Style Sheets no such thing as a stupid question, right?

Who is online

Users browsing this forum: No registered users and 1 guest