Code & Spoiler Design

How can I design the code & spoiler?
My forum is phpbb2 and I use the caller for code (.code) while spoiler (.spoiler)

I want to achieve a design with something like this:

Hello Sozinho,

You can add a shadow to elements using the box-shadow property.

Add the following to your CSS :
Administration panel > display > colors > CSS stylesheet

Code:

.code, .spoiler dd, .quote { box-shadow:0 0 3px #AC0; }

The first value, 0, changes the horizontal position of the shadow.

The second value, 0, changes the vertical position of the shadow.

The third value, 3px, changes the softness of the shadow.

The fourth value, #AC0, changes the color of the shadow.

Change all the values as you wish.

That works, but it lacks this:


I want to include what's indicated in the image above.

If you write :

Code:

[quote="Author"]text[/quote]

The author of the quote will display, this is default.

ex :

hi sorry to be here but is this possible to have design for the code box like this

What I see in this image is that the Author is not inside the box. That's what I want.

If you want those two to appear attached, you'll need to use this CSS :

Code:

.codebox dt {
    background:#FAFAFA;
    border:1px solid #D1D7DC;
    border-bottom:none;
}
.codebox dd { border-top:none !important; }

Note that you must change the border, and background colors to the colors of your quote, code, ect.

Ange Tuteur wrote:If you want those two to appear attached, you'll need to use this CSS :

Code:

.codebox dt {
    background:#FAFAFA;
    border:1px solid #D1D7DC;
    border-bottom:none;
}
.codebox dd { border-top:none !important; }

Note that you must change the border, and background colors to the colors of your quote, code, ect.

is this one for me or the topic owner because it didnt make the change im looking for
 

Ange Tuteur wrote:If you want those two to appear attached, you'll need to use this CSS :

Code:

.codebox dt {
    background:#FAFAFA;
    border:1px solid #D1D7DC;
    border-bottom:none;
}
.codebox dd { border-top:none !important; }

Note that you must change the border, and background colors to the colors of your quote, code, ect.

Is this also possible for the rest of spoiler and quote? As I can see it only edits the codebox.

I just solved the design for quote and , never mind the spoiler. Thanks

You're welcome

Topic solved and archived