Board index PBase HTML and Style Sheets Add Bold print capability to Style Sheet?

HTML and Style Sheets

Add Bold print capability to Style Sheet?

Customize your galleries.
enthios
 
Posts: 3

Add Bold print capability to Style Sheet?

Post Mon Apr 05, 2004 2:28 pm


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!

robert
 
Posts: 114

Bolding problem

Post Mon Apr 05, 2004 3:18 pm


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;}

-->

robert
 
Posts: 114

Fonts

Post Mon Apr 05, 2004 3:36 pm


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.

enthios
 
Posts: 3

Repaired CSS

Post Mon Apr 05, 2004 5:21 pm


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!

robert
 
Posts: 114

Validator

Post Tue Apr 06, 2004 5:13 am


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.

pmphotos
 
Posts: 33

Actually,

Post Tue Apr 06, 2004 2:58 pm


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"

pentaxchallenge
 
Posts: 2

Bold Fonts

Post Tue Apr 13, 2004 7:43 pm


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

ukexpat
 
Posts: 1193

Re: Bold Fonts

Post Tue Apr 13, 2004 8:52 pm


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?

arjunrc
 
Posts: 1003

Re: Bold Fonts

Post Wed Apr 14, 2004 1:01 am


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


Board index PBase HTML and Style Sheets Add Bold print capability to Style Sheet?

Who is online

Users browsing this forum: ClaudeBot and 0 guests