Quote layout - where and how to change? (BBC code "Quote" + "Code")

[sangham.net]

Dear programmers and professionals,

I would need some help for dummies in regard of the layout of the quote "frame". We use SMF 2.0.4 and the theme is based on the core-theme.

My immodest perception and wish of a different layout would be a slight frame, backround in the opposite color of the post or previous quote and maybe a slight shadow effect.

I attached a sample

Great if you would have any advices where to find or where to do. If somebody would have joy to do such directly it would be even grandiose (as told, I am a dummy in such stuff). But I guess it's great to know general, maybe somebody else like to modify it as well.

[Sir Osis of Liver]

It's in /css/index.css. Look for -

Code Select Expand



/* A quote, perhaps from another post. */
blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote



[sangham.net]

Thought there is a bug on my screen

Thanks a lot, Krash!

If somebody has some hints how to program such, would be great. I don't have much experiences with that.

[Vector’s Shadow]

If your monitor still works after trying to squash the bug, ...

Where Krash. told you, assuming you are using the default theme for 2.0, have a look where it says

Code Select Expand

/* Alterate blockquote stylings */
blockquote.bbc_standard_quote
{
background-color: #d7daec;
}
blockquote.bbc_alternate_quote
{
background-color: #e7eafc;
}

You will want to play around with the #rrggbb stuff there. You can get the color codes from here: color picker.

That should allow you to change the background color as you see fit. HTH

[sangham.net]

Never smash a bug! You would hurt your self at the first place. They just follow their nature.

Thanks a lot Vector's Shadow!



Color picker is a great tool, I came across it.
Would it be proper to assume that all frame issues are also found in this section "* Alterate blockquote stylings *"? Color, size, corner, where...

I also assume that this color setting in a style like this would be a static one and not in relation to the background of the post color, as this would change from post to post.

[sangham.net]

I am delighted! 30min work to get into that stuff.

Easy and great! Even for dummies like me.

THANKS!



Just for the case somebody like to use it as well (for quote and code BBC), it includes side borders and radius and colors and other stuff is easy to change:

Code Select Expand


/* Some BBC related styles.
------------------------------------------------------- */

/* A quote, perhaps from another post. */
blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote
{
   font-size: x-small;
   color: #5F5F5F;
   line-height: 1.4em;
   background: url(../images/theme/quote.png) 0.02em 0.02em no-repeat;
   border-top: 2.5px solid #999;
   border-bottom: 1.5px solid #EAEAE5;
   border-left: 1.5px solid #999;
   border-right: 1.5px solid #EAEAE5;
   border-bottom-right-radius:0.5em;
   border-bottom-left-radius:0.5em;
   border-top-right-radius:0.5em;
   border-top-left-radius:0.5em;
   padding: 1.1em 1.4em;
   margin: 0.1em 0 0.3em 0;
   overflow: auto;
}

/* Alterate blockquote stylings */
blockquote.bbc_standard_quote
{
   background-color: #F9F9F7;
}
blockquote.bbc_alternate_quote
{
   background-color: #ffffff;
}

/* A code block - maybe PHP ;). */
code.bbc_code
{
   display: block;
   font-family: "dejavu sans mono", "monaco", "lucida console", "courier new", monospace;
   font-size: x-small;
   background: #F9F9F7;
   border-top: 1px solid #999;
   border-bottom: 1px solid #999;
   border-left: 1px solid #999;
   border-right: 1px solid #999;
   border-bottom-right-radius:0.2em;
   border-bottom-left-radius:0.2em;
   border-top-right-radius:0.2em;
   border-top-left-radius:0.2em;
   line-height: 1.5em;
   padding: 3px 1em;
   overflow: auto;
   white-space: nowrap;
   /* Show a scrollbar after about 24 lines. */
   max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.codeheader, .quoteheader
{
   color: #666;
   font-size: x-small;
   font-weight: bold;
   padding: 0 0.3em;
}

It would look like the attached screen shot

Good infos about the css codes in regard of this can be found: http://www.w3schools.com/cssref/pr_border.asp

[Vector’s Shadow]

I'm glad it worked out for you. There's also this, since you mentioned shadow in the beginning: box shadow. But it will work only in newer browsers.

Theoretically, you should also be able to replace

Code (css) Select Expand

   border-bottom-right-radius:0.5em;
   border-bottom-left-radius:0.5em;
   border-top-right-radius:0.5em;
   border-top-left-radius:0.5em;
with just

Code (css) Select Expand

border-radius:.5em;

[sangham.net]

These are the hints and short cuts of the specialists and skilled. Thanks for the generously share, dear Vector's Shadow!

[Vector’s Shadow]

You're welcome!