PBase

Hi. I've created my own style sheet by copying and pasting from others. However, I'm not really sure what I'm doing, i.e. what styles refer to what parts of the actual page. If you don't mind, please take a look at my CSS here: http://www.pbase.com/enthios

In the "description" part of the picture or gallery, it SHOULD be possible to make words bold by using standard html such as <b> followed by </b>. I've noticed this is possible in other people's style sheets. However it does NOT work in mine. Is there something in the CSS that has that function 'turned off?"

Also, I'd like to change the font color and size of the "Title", "Caption", "Location", and "tech notes" fields, but cannot find any reference to them in the CSS text. Could you tell me which refers to which?

Thanks so much!

I found and fixed a number of errors. This code will give you a bold description. There are still a few errors but they are not critical. You can run it through a vaildator and debug it more.

<!--
A, TD.A, A:link
{
color: #D5AE83;
text-decoration: none;
}
A:hover { color: #00FF00; font-weight:bold }
A:visited { color: #D5AE83; font-style:italic}
A:active { color : #d5ae83; }
}
a.td.thumbnail, a:link.td.thumbnail, a:visited.td.thumbnail, a:active.td.thumbnail {
border: rgb(0, 0, 0) 1px solid;
margin-bottom: -45px;
padding-top: 5px;
width: 172px;
display: block;
background: rgb(35, 35, 35);
height: 197px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}
a:hover.td.thumbnail {
border: rgb(128, 128, 255) 1px solid;
margin-bottom: -45px;
padding-top: 5px;
width: 172px;
display: block;
background: rgb(30, 30, 30);
height: 197px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
body{
margin-bottom: 20px;
margin-top: 0px;
margin-left: 10px;
margin-right: 10px;
background: rgb(45, 45, 45);
}
div, th, tr, table, font, li, ul, form, blockquote, p, b, i, h1, h2, h3, h4, h5, font, center {
border: 0px;
color: rgb(221, 221, 255);
font: 12px verdana, arial, sans-serif;
font-weight: bold;
}
font {
margin-left: 4px;
margin-right: 4px;
width: 170px;
display: block;
color: rgb(225, 225, 225);
font: 10px Verdana, Tahoma, Helvetica, sans-serif;
font-weight: bold;
letter-spacing: 0px;
}
h1, h2 {
border: 1px none;
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
margin-bottom: 1em;
margin-left: -10px;
margin-right: 5px;
padding: 5px;
width: 100%;
display: block;
background: rgb(0, 0, 0);
color: rgb(128, 128, 255);
font-size: 18px;

letter-spacing: 6px;
text-align: right;
height: 21px;
position: relative;
filter:
progid:DXImageTransform.Microsoft.gradient(gradientType=1,enabled='true',startColorstr
='#2D2D2D',endColorstr='#000000');
}

h2:first-letter
{
color: #D5AE83;
font-size: 22pt;
font-weight: bold;

}
h3 {
border-bottom: rgb(0, 0, 0) 1px none;
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
padding: 2px;
width: 400px;
display: block;
background: rgb(40, 40, 40);
color: rgb(91, 91, 101);
font-size: 12px;
font-weight: normal;
letter-spacing: 0px;
text-align: center;
}
h5 {
padding-left: 2px;
width: 150px;
display: block;
color: rgb(204, 204, 255);
font-size: 12px;
font-weight: normal;
filter:
progid:DXImageTransform.Microsoft.gradient(gradientType=1,enabled='true',startColorstr
='#000000',endColorstr='#2D2D2D');
}
img{
border: rgb(0, 0, 0) 1px none;
}
img.thumbnail {
border: rgb(0, 0, 0) 1px solid;
margin: 0px;
padding: 0px;
background: rgb(45, 45, 45);
vertical-align: middle;
}input {
border: rgb(0, 0, 0) 1px solid;
}
table.thumbnail {
width: 10%;
}
td {
border: 1px none;
background: none;
border-collapse: collapse;
empty-cells: show;
}
td.message_body {
border-bottom: rgb(0, 0, 0) 1px none;
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
display: block;
background: rgb(40, 40, 40);
}
.caption {
color: rgb(95, 121, 216);
font-size: 12px Verdana, Tahoma, Helvetica, sans-serif;
font-style: italic;
}
.display {
border: rgb(0, 0, 0) 1px solid;
margin-top: 1em;
background: rgb(0, 0, 0);
filter:
progid:DXImageTransform.Microsoft.Shadow(color="#141414",Direction=135,Strength=8);
}
.lid{
background: rgb(55, 55, 55);
color: rgb(102, 102, 102);
font: 11px Verdana, Tahoma, Helvetica, sans-serif;
text-decoration: none;
}
.message_body {
margin: 5px 5px 10px;
color: rgb(91, 91, 101);
font: 10px Verdana, Tahoma, Helvetica, sans-serif;
}
.sb{
background: rgb(91, 91, 101);
color: rgb(225, 225, 225);
font: 14px Verdana, Tahoma, Helvetica, sans-serif;
text-decoration: none;
}


BODY { margin-top: 0px; top: 0px; }
HR { position : relative;}
BODY { margin-top: 0px; top: 0px; }
HR { position : relative;}
BODY { margin-top: 0px; top: 0px; }
HR { position : relative;}
BODY { margin-top: 0px; top: 0px; }
HR { position : relative;}
BODY { margin-top: 0px; top: 0px; }
HR { position : relative;}

-->

You can find out which color goes with which font by trial and error in the CSS editor. For example....

A:hover { color: #00FF00; font-weight:bold }
A:visited { color: #D5AE83; font-style:italic}
A:active { color : #D5AE83; }

these colors control the hyperlink colors.

Thanks so much for helping. However that just turned all of my text bold. I would like to have the ability to have bold type in the text by simply using html like <b> and </b>

Also, could you show me which changes you made, so that I can learn from them? That would be awesome.

Thanks again!

I ran your URL through a CSS validator which spotted a number of incorrect font entries.

http://jigsaw.w3.org/css-validator/validator-uri.html

Then I added: font-weight: bold; to
}
div, th, tr, table, font, li, ul, form, blockquote, p, b, i, h1, h2, h3, h4, h5, font, center {

I don't have time to spend on it. Perhaps, someone else can answer your question about selective bolding.

to do "selective" bold, it shouldn't have anything to do with your css. Just do the <b> </b> in the description field, AND make sure you check the box underneath the description field that says "check if using html in the description"

Alas, we are back to the beginning. When I use <b> and </b>, NOTHING happens. That is the whole point.

pentaxchallenge wrote:Alas, we are back to the beginning. When I use <b> and </b>, NOTHING happens. That is the whole point.

Are you using these codes in the description field of the gallery or image (rather than in the the CSS)? Have you checked the "use HTML" box?

pentaxchallenge wrote:Alas, we are back to the beginning. When I use <b> and </b>, NOTHING happens. That is the whole point.

Instead of <b> and </b> try <strong> </strong>

I think the reason why <b> is not doing anything is because the CSS has:

div, th, tr, table, font, li, ul, form, blockquote, p, b, i, h1, h2, h3, h4, h5, font, center {
border: 0px;
color: rgb(221, 221, 255);
font: 12px verdana, arial, sans-serif;
}

Note the b tag in this definition - its likely this is overriding the 'bold' effect. Alternately, if you remove the b from the above list, it should work too.

regds
arjun