The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Code & Spoiler Design

View previous topic View next topic Go down

Solved Code & Spoiler Design

Post by Sozinho on April 7th 2014, 5:24 am

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:



Last edited by Sozinho on April 7th 2014, 3:21 pm; edited 1 time in total

Sozinho
Forumember

Male Posts : 172
Reputation : 4
Language : English
Location : Philippines

http://appzxor.omgforum.net

Back to top Go down

Solved Re: Code & Spoiler Design

Post by Ange Tuteur on April 7th 2014, 8:55 am

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. Wink

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Code & Spoiler Design

Post by Sozinho on April 7th 2014, 11:15 am

That works, but it lacks this:


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

Sozinho
Forumember

Male Posts : 172
Reputation : 4
Language : English
Location : Philippines

http://appzxor.omgforum.net

Back to top Go down

Solved Re: Code & Spoiler Design

Post by Ange Tuteur on April 7th 2014, 11:19 am

If you write :
Code:
[quote="Author"]text[/quote]

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

ex :

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Code & Spoiler Design

Post by Michael_vx on April 7th 2014, 11:38 am

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

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: Code & Spoiler Design

Post by Sozinho on April 7th 2014, 12:16 pm

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

Sozinho
Forumember

Male Posts : 172
Reputation : 4
Language : English
Location : Philippines

http://appzxor.omgforum.net

Back to top Go down

Solved Re: Code & Spoiler Design

Post by Ange Tuteur on April 7th 2014, 12:26 pm

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
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Code & Spoiler Design

Post by Michael_vx on April 7th 2014, 1:54 pm

@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
 Shocked

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: Code & Spoiler Design

Post by Sozinho on April 7th 2014, 2:55 pm

@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.

Sozinho
Forumember

Male Posts : 172
Reputation : 4
Language : English
Location : Philippines

http://appzxor.omgforum.net

Back to top Go down

Solved Re: Code & Spoiler Design

Post by Sozinho on April 7th 2014, 3:15 pm

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

Sozinho
Forumember

Male Posts : 172
Reputation : 4
Language : English
Location : Philippines

http://appzxor.omgforum.net

Back to top Go down

Solved Re: Code & Spoiler Design

Post by Ange Tuteur on April 8th 2014, 12:23 am

You're welcome

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum