Topic: Cooler Quote Boxes in Default Theme

[dtm.exe]

I don't know about you, but I absolutely HATE the purple background in the quote boxes of the SMF Default Theme.  I decided today that I'd change that, and while I was at it, I made the quote boxes look even cooler .

In style.css, find:

Code: [Select]

.quote
{
color: #000000;
background-color: #C3B8D0;
border: 1px solid #000000;
margin: 1px;
padding: 1px;
font-size: x-small;
}
Replace with:

Code: [Select]

.quote
{
color: #000000;
border: 2px dashed #6B8EAE;
margin: 1px;
padding: 3px;
font-size: x-small;
line-height: 1.4em;
}
Live Demo

-Dan The Man

[xenovanis]

Hmmm.. Firefox doesn't seem to like dotted lines. Looks more like morsecode.

Nice tip though. 

[dtm.exe]

Hmmm.. Firefox doesn't seem to like dotted lines. Looks more like morsecode.

Nice tip though. 

Wow, you're right...weird...

-Dan The Man

[[Unknown]]

It doesn't like 2.5px.  Try 2.6px.

-[Unknown]

[dtm.exe]

It doesn't like 2.5px.  Try 2.6px.

-[Unknown]

OK.

-Dan The Man

[dtm.exe]

Turns out Firefox doesn't like any pixels in decimal format .  It's been changed to 2px.

-Dan The Man

[codenaught]

Looks cool. 

But is there a reason why when I quote someones post there it doesn't show? 

I just get

Code: [Select]

[quote author=akabugeyes link=topic=509.msg3026#msg3026 date=1120160121]

[/quote]
Notice the blank space....

[dtm.exe]

Looks cool. 

But is there a reason why when I quote someones post there it doesn't show? 

I just get

Code: [Select]

[quote author=akabugeyes link=topic=509.msg3026#msg3026 date=1120160121]

[/quote]
Notice the blank space....

You mean on my forums?  Well, if you're quoting an image, I have it so that images can't be quoted .

-Dan The Man

[nokonium]

That looks good, thanks

[dtm.exe]

That looks good, thanks

No problem .

-Dan The Man

[TarantinoArchives]

i mostly use DASHED instead of DOTTED.

thanks for the tip

[nokonium]

They don't all have to be the same see here

[dtm.exe]

I've updated the code to make the quote boxes look even cooler .

-Dan The Man

[tomis]

Since the "live link" to an example in the opening post is dead, I'll post another live link, so people can get an idea of how to make the quotes & code sections look cooler.

Live link

Here's the code, just put it in your css file.

Code: [Select]

.quote {
color: #000000;
background-color: #FFFBEF;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
margin: 1px 11px 11px 11px;
padding: 8px;
}
.code {
color: #000000;
background-color: #FFFBEF;
font-family: "courier new", "courier", monospace;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 1px 11px 11px 11px;
padding: 8px;
white-space: nowrap;
overflow: auto;
max-height: 24em;
}
.quoteheader, .codeheader {
color: #000;
text-decoration: none;
font-style: normal;
font-weight: bold;
padding-left: 10px;
padding-top: 8px;
}
Lest my link also go bad with time, I'll include a pic

[L.G.S]

Hey thanks for this.

I have one problem.

I used this tip on my forum, although I have a custom theme installed. The CSS obviously is different and has more quote code.

Here is an example of what quotes look like after the edit:

http://www.tactical-illusion.com/board/index.php?topic=7771.msg50465#msg50465

What I need is someone to tell and show me which parts of the CSS (hopefully you can do it for me) need to be changed to have the COLOURS like the above post, although I want the general layout to remain the same.

CSS:

Code: [Select]

/* Little Image Boarvder Fix, for SMF 1.1 RC2 */
img{
   border: 0;
}
/* Normal, standard links. */
a:link
{
text-decortext-align: center;ation: underline; font-weight:normal; color: #CAE5FF
}
a:visited, a:hover
{
   color: #9FB5C1;
   font-weight:normal;
   text-decoration: underline;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
   color: #C0C0C0;
   text-decoration: none;
}
a.nav:hover
{
   font-weight: bold;
   color: #808080
   text-decoration: underline;
}

/* Tables should show empty cells. */
table
{
   empty-cells: show;
}

/* By default (td) use Tahoma in black. */
td
{
   color: #98ADB9;
   font-size: small;
   font-family: Tahoma, arial, helvetica, serif;
}

/* The main body of the entire forum. */
body
{
height: 27px;
background-image: url(images/bg.gif);
background-position: top;
background-repeat: repeat-x;
  color: white;
background-color:#2B3136;
   margin: 0px;
   padding: 0px;
   color: #FFFFFF;
   font-size: small;
   font-family: Tahoma, arial, helvetica, serif;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
   font-size: 9pt;
   color: #000000;
   font-family: Tahoma, arial, helvetica, serif;
}

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
   font-size: 8pt;
   font-weight: normal;
   color: #000000;
   font-family: Tahoma, arial, helvetica, serif;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
   height: 1px;
   border: 0;
   color: #666666;
   background-color: #666666;
}

/* A quote, perhaps from another post. */

.quote
{
   color: #000000; 
   background-color: #3f464c;
   background-image: url(images/quote-bg2b.gif);
   background-position: bottom right;
   background-repeat: no-repeat;
   border-bottom: 1px solid #0D2335;
   border-right: 1px solid #0D2335;
   border-left: 7px solid #1D3D57;
   padding: 0px 20px 10px 20px;
   font-size: 8.5pt;
}
.quote .quote
{
   background-color: #3f464c;
}
.quote .quote .quote
{
   background-color: #3f464c;
}
.quote .quote .quote .quote
{
   background-color: #3f464c;
}
.quote .quote .quote .quote .quote
{
   background-color: #3f464c;
}
.quote .quote .quote .quote .quote .quote
{
   background-color: #3f464c;
}
.quoteheader
{
   background-color: #3f464c;
   background-image: url(images/quote-bg3b.gif);
   background-repeat: no-repeat;
   border-top: 1px solid #0D2335;
   border-right: 1px solid #0D2335;
   border-left: 7px solid #1D3D57;
   height: 15px;
   padding: 0 0 0 20px;
   color: #000000;
   text-decoration: none;
   font-style: normal;
   font-weight: bold;
   font-size: 8pt;
}

/* A code block - maybe even PHP ;). */
.code
{
   color: #FFFFFF;
   background-color: #F3F7F9;
   border: 1px solid #000000;
   padding: 1px;
   font-family: "courier new", helvetica, "times new roman", serif;
   font-size: x-small;
   width: 99%;
   margin: 1px auto 1px auto;
   white-space: nowrap;
   overflow: auto;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
   color: #FFFFFF;
   text-decoration: none;
   font-style: normal;
   font-weight: bold;
   font-size: x-small;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help
{
   cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
   color: red;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
   width: 96%;
}

/* Highlighted text - such as search results ;). */
.highlight
{
   background-color: yellow;
   font-weight: bold;
   color: black;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg
{
   color: #FFFFFF;
   background-color: #3F464C;
}
.windowbg2
{
   color: #ffffff;
   background-color: #3F464C;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg

{
   background-repeat: repeat-x;
   background-image: url(images/titlebg.gif);
}
.titlebg, tr.titlebg td, .titlebg a:link, .titlebg a:visited
{
   color: #CAE5FF;
   font-style: normal;
}
.titlebg a:hover
{
   color: #FFFFFF;
}

/* This is used for categories, page indexes, and several other areas in the forum. */
.catbg, .catbg2
{
background-position: center;
background-image: url(images/catbg.gif);
background-repeat: no-repeat;
width: 840px;
height: 24px;
}

.catbg, .catbg2, .catbg a:link, .catbg a:visited, .catbg2 a:link, .catbg2 a:visited
{
text-align: center;
   font-weight: bold;
   color: #BEC4C8;
}

/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
   background-color: #212C31;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
   border: 1px solid #121A1F;
   padding: 0px;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
   font-size: x-small;
   font-family: Tahoma, arial, helvetica, serif;
   color: #9FB5C1;
}
.normaltext
{
   font-size: small;
   color: #FFFFFF;
}
.largetext
{
   font-size: large;
   color: #FFFFFF;
}

/* This is the white header area where the title, menu bars, and header boxes are. */
#headerarea
{
   background-color: #353C41;
}
/* This is the main area of the forum, the part that's gray. */
#bodyarea
{
   background-color: #353C41;
}
/* And this is the bottom, where the copyright is, etc. */
#footerarea
{
   background-image: url(images/p109514.gif);
   color: black;
   background-color: #2F363D;
}

/* This is for the special header boxes on the top (user info, key stats, news box.) */
.headertitles
{
   background-color: #000000;
   border: 1px solid #333333;
}
.headerbodies
{
background-repeat: no-repeat;
   border: 1px solid #333333;
   background-color: #000000;
   background-position: bottom;
}



/* Little Image Boarvder Fix, for SMF 1.1 RC2 */
img{
   border: 0;
}
/* Normal, standard links. */
a:link
{
text-decortext-align: center;ation: underline; font-weight:normal; color: #CAE5FF
}
a:visited, a:hover
{
   color: #9FB5C1;
   font-weight:normal;
   text-decoration: underline;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
   color: #C0C0C0;
   text-decoration: none;
}
a.nav:hover
{
   font-weight: bold;
   color: #808080
   text-decoration: underline;
}

/* Tables should show empty cells. */
table
{
   empty-cells: show;
}

/* By default (td) use Tahoma in black. */
td
{
   color: #98ADB9;
   font-size: small;
   font-family: Tahoma, arial, helvetica, serif;
}

/* The main body of the entire forum. */
body
{
width: 100%;
height: 27px;
background-image: url(images/bg.gif);
background-position: top;
background-repeat: repeat-x;
  top: 0%;
  left: 2%;
  color: white;
background-color:#2B3136;
   margin: 0px;
   padding: 0px;
   color: #FFFFFF;
   font-size: small;
   font-family: Tahoma, arial, helvetica, serif;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
   font-size: 9pt;
   color: #000000;
   font-family: Tahoma, arial, helvetica, serif;
}

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
   font-size: 8pt;
   font-weight: normal;
   color: #000000;
   font-family: Tahoma, arial, helvetica, serif;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
   height: 1px;
   border: 0;
   color: #666666;
   background-color: #666666;
}

/* A quote, perhaps from another post. */

.quote {
color: #000000;
background-color: #FFFBEF;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
margin: 1px 11px 11px 11px;
padding: 8px;
}
.code {
color: #000000;
background-color: #FFFBEF;
font-family: "courier new", "courier", monospace;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 1px 11px 11px 11px;
padding: 8px;
white-space: nowrap;
overflow: auto;
max-height: 24em;
}
.quoteheader, .codeheader {
color: #000;
text-decoration: none;
font-style: normal;
font-weight: bold;
padding-left: 10px;
padding-top: 8px;
}
}
.quoteheader, .codeheader {
color: #000;
text-decoration: none;
font-style: normal;
font-weight: bold;
padding-left: 10px;
padding-top: 8px;
}

/* A code block - maybe even PHP ;). */
.code
{
   color: #FFFFFF;
   background-color: #F3F7F9;
   border: 1px solid #000000;
   padding: 1px;
   font-family: "courier new", helvetica, "times new roman", serif;
   font-size: x-small;
   width: 99%;
   margin: 1px auto 1px auto;
   white-space: nowrap;
   overflow: auto;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
   color: #FFFFFF;
   text-decoration: none;
   font-style: normal;
   font-weight: bold;
   font-size: x-small;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help
{
   cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
   color: red;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
   width: 96%;
}

/* Highlighted text - such as search results ;). */
.highlight
{
   background-color: yellow;
   font-weight: bold;
   color: black;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg
{
   color: #FFFFFF;
   background-color: #3F464C;
}
.windowbg2
{
   color: #ffffff;
   background-color: #3F464C;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg

{
   background-repeat: repeat-x;
   background-image: url(images/titlebg.gif);
}
.titlebg, tr.titlebg td, .titlebg a:link, .titlebg a:visited
{
   color: #CAE5FF;
   font-style: normal;
}
.titlebg a:hover
{
   color: #FFFFFF;
}

/* This is used for categories, page indexes, and several other areas in the forum. */
.catbg, .catbg2
{
background-position: center;
background-image: url(images/catbg.gif);
background-repeat: no-repeat;
width: 840px;
height: 24px;
}

.catbg, .catbg2, .catbg a:link, .catbg a:visited, .catbg2 a:link, .catbg2 a:visited
{
text-align: center;
   font-weight: bold;
   color: #BEC4C8;
}

/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
   background-color: #212C31;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
   border: 1px solid #121A1F;
   padding: 0px;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
   font-size: x-small;
   font-family: Tahoma, arial, helvetica, serif;
   color: #9FB5C1;
}
.normaltext
{
   font-size: small;
   color: #FFFFFF;
}
.largetext
{
   font-size: large;
   color: #FFFFFF;
}

/* This is the white header area where the title, menu bars, and header boxes are. */
#headerarea
{
   background-color: #353C41;
}
/* This is the main area of the forum, the part that's gray. */
#bodyarea
{
   background-color: #353C41;
}
/* And this is the bottom, where the copyright is, etc. */
#footerarea
{
   background-image: url(images/p109514.gif);
   color: black;
   background-color: #2F363D;
}

/* This is for the special header boxes on the top (user info, key stats, news box.) */
.headertitles
{
   background-color: #000000;
   border: 1px solid #333333;
}
.headerbodies
{
background-repeat: no-repeat;
   border: 1px solid #333333;
   background-color: #000000;
   background-position: bottom;
}




/* Little Image Boarvder Fix, for SMF 1.1 RC2 */
img{
   border: 0;
}
/* Normal, standard links. */
a:link
{
text-decortext-align: center;ation: underline; font-weight:normal; color: #CAE5FF
}
a:visited, a:hover
{
   color: #9FB5C1;
   font-weight:normal;
   text-decoration: underline;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
   color: #C0C0C0;
   text-decoration: none;
}
a.nav:hover
{
   font-weight: bold;
   color: #808080
   text-decoration: underline;
}

/* Tables should show empty cells. */
table
{
   empty-cells: show;
}

/* By default (td) use Tahoma in black. */
td
{
   color: #98ADB9;
   font-size: small;
   font-family: Tahoma, arial, helvetica, serif;
}

/* The main body of the entire forum. */
body
{
width: 100%;
height: 27px;
background-image: url(images/bg.gif);
background-position: top;
background-repeat: repeat-x;
  top: 0%;
  left: 2%;
  color: white;
background-color:#2B3136;
   margin: 0px;
   padding: 0px;
   color: #FFFFFF;
   font-size: small;
   font-family: Tahoma, arial, helvetica, serif;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
   font-size: 9pt;
   color: #000000;
   font-family: Tahoma, arial, helvetica, serif;
}

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
   font-size: 8pt;
   font-weight: normal;
   color: #000000;
   font-family: Tahoma, arial, helvetica, serif;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
   height: 1px;
   border: 0;
   color: #666666;
   background-color: #666666;
}

/* A quote, perhaps from another post. */

.quote
{
   color: #000000; 
   background-color: #e6e6e6;
   background-image: url(images/quote-bg2b.gif);
   background-position: bottom right;
   background-repeat: no-repeat;
   border-bottom: 1px solid #0D2335;
   border-right: 1px solid #0D2335;
   border-left: 7px solid #1D3D57;
   padding: 0px 20px 10px 20px;
   font-size: 8.5pt;
}
.quote .quote
{
   background-color: #B2B2B2;
}
.quote .quote .quote
{
   background-color: #B2B2B2;
}
.quote .quote .quote .quote
{
   background-color: #B2B2B2;
}
.quote .quote .quote .quote .quote
{
   background-color: #B2B2B2;
}
.quote .quote .quote .quote .quote .quote
{
   background-color: #B2B2B2;
}
.quoteheader
{
   background-color: #B2B2B2;
   background-image: url(images/quote-bg3b.gif);
   background-repeat: no-repeat;
   border-top: 1px solid #0D2335;
   border-right: 1px solid #0D2335;
   border-left: 7px solid #1D3D57;
   height: 15px;
   padding: 0 0 0 20px;
   color: #000000;
   text-decoration: none;
   font-style: normal;
   font-weight: bold;
   font-size: 8pt;
}

/* A code block - maybe even PHP ;). */
.code
{
   color: #FFFFFF;
   background-color: #F3F7F9;
   border: 1px solid #000000;
   padding: 1px;
   font-family: "courier new", helvetica, "times new roman", serif;
   font-size: x-small;
   width: 99%;
   margin: 1px auto 1px auto;
   white-space: nowrap;
   overflow: auto;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
   color: #FFFFFF;
   text-decoration: none;
   font-style: normal;
   font-weight: bold;
   font-size: x-small;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help
{
   cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
   color: red;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
   width: 96%;
}

/* Highlighted text - such as search results ;). */
.highlight
{
   background-color: yellow;
   font-weight: bold;
   color: black;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg
{
   color: #FFFFFF;
   background-color: #3F464C;
}
.windowbg2
{
   color: #ffffff;
   background-color: #3F464C;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg

{
   background-repeat: repeat-x;
   background-image: url(images/titlebg.gif);
}
.titlebg, tr.titlebg td, .titlebg a:link, .titlebg a:visited
{
   color: #CAE5FF;
   font-style: normal;
}
.titlebg a:hover
{
   color: #FFFFFF;
}

/* This is used for categories, page indexes, and several other areas in the forum. */
.catbg, .catbg2
{
background-position: center;
background-image: url(images/catbg.gif);
background-repeat: no-repeat;
width: 840px;
height: 24px;
}

.catbg, .catbg2, .catbg a:link, .catbg a:visited, .catbg2 a:link, .catbg2 a:visited
{
text-align: center;
   font-weight: bold;
   color: #BEC4C8;
}

/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
   background-color: #212C31;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
   border: 1px solid #121A1F;
   padding: 0px;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
   font-size: x-small;
   font-family: Tahoma, arial, helvetica, serif;
   color: #9FB5C1;
}
.normaltext
{
   font-size: small;
   color: #FFFFFF;
}
.largetext
{
   font-size: large;
   color: #FFFFFF;
}

/* This is the white header area where the title, menu bars, and header boxes are. */
#headerarea
{
   background-color: #353C41;
}
/* This is the main area of the forum, the part that's gray. */
#bodyarea
{
   background-color: #353C41;
}
/* And this is the bottom, where the copyright is, etc. */
#footerarea
{
   background-image: url(images/p109514.gif);
   color: black;
   background-color: #2F363D;
}

/* This is for the special header boxes on the top (user info, key stats, news box.) */
.headertitles
{
   background-color: #000000;
   border: 1px solid #333333;
}
.headerbodies
{
background-repeat: no-repeat;
   border: 1px solid #333333;
   background-color: #000000;
   background-position: bottom;
}

[tomis]

just look for the .quote identifier in your css file and change the background-color and border attributes

Code: [Select]

background-color: #FFFBEF;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;



[L.G.S]

I don't get it...I have done what was on the last page and it still wont change

[tomis]

I don't get it...I have done what was on the last page and it still wont change

In your style.css file, find this:

Code: [Select]

/* A quote, perhaps from another post. */
.quote
{
color: #000000;
background-color: #D7DAEC;
border: 1px solid #000000;
margin: 1px;
padding: 1px;
font-size: x-small;
line-height: 1.4em;
}

/* A code block - maybe even PHP ;). */
.code
{
color: #000000;
background-color: #dddddd;
font-family: "courier new", "times new roman", monospace;
font-size: x-small;
line-height: 1.3em;
/* Put a nice border around it. */
border: 1px solid #000000;
margin: 1px auto 1px auto;
padding: 1px;
width: 99%;
/* Don't wrap its contents, and show scrollbars. */
white-space: nowrap;
overflow: auto;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
color: #000000;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
line-height: 1.2em;
}

And replace with this:

Code: [Select]

.quote {
color: #000000;
background-color: #FFFBEF;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
margin: 1px 11px 11px 11px;
padding: 8px;
}
.code {
color: #000000;
background-color: #FFFBEF;
font-family: "courier new", "courier", monospace;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 1px 11px 11px 11px;
padding: 8px;
white-space: nowrap;
overflow: auto;
max-height: 24em;
}
.quoteheader, .codeheader {
color: #000;
text-decoration: none;
font-style: normal;
font-weight: bold;
padding-left: 10px;
padding-top: 8px;
}I hope that helps you

[L.G.S]

Thanks a bunch!

[tomis]

Thanks a bunch!

Re-reading the topic, it looks like you want to do something a bit different from what I've done, but hopefully my code will help you.

[L.G.S]

Damn, if you check my CSS I posted a few pages back you will see that mine is different to where you say 'find'

[Skipdawg]

This is a very kewl idea. Thanks for sharing. I may have to play with it a bit. 

[tomis]

This is a very kewl idea. Thanks for sharing. I may have to play with it a bit. 

Yep, add some padding & margin so it looks better then tweak the border so it looks "inset"   I thought it was pretty neat.

[Farmacija]

In which program style.css file can be edit?

[Niteblade]

In which program style.css file can be edit?

Personally, I use notepad2.

[Farmacija]

Thanx. i've already done that :>

[zigzag]

Hello 
Here's another one if you want a curly quote image:

.quote{
color:#000; background:transparent url(images/quotes.gif) left top no-repeat;
padding-left: 34px;
padding-bottom: 10px;
margin:1px;
font-style: italic;
line-height:1.4em}

You might need to tidy up the css as it's not my strong point, was going to attach the " quote image but there's no attachment option 

[tapirul]

In which program style.css file can be edit?

Personally, I use notepad2.

I am using PHP Designer and I am quite satisfied.