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.

Spoiler and Code box

View previous topic View next topic Go down

Solved Spoiler and Code box

Post by Kirbs on September 6th 2014, 2:43 am

Hello forumotion!

I was wondering how could I make my spoiler and code boxes appearance (style) on my forum change like the ones currently on forumotion?


Example:

Code:

example #1

Spoiler:

example #2


Last edited by Kirbs on September 7th 2014, 11:29 pm; edited 1 time in total

Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Spoiler and Code box

Post by Ange Tuteur on September 6th 2014, 2:54 am

Hello Kirbs,

What is the version of your forum ?

It is a simple design :
Code:
blockquote, .codebox {
  background:#EEE;
  border:1px solid #CCC;
  border-left-width:5px;
}

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Spoiler and Code box

Post by Kirbs on September 6th 2014, 2:56 am

my forum is phpBB2 i want the code and spoiler boxes to look exactly like the ones on here but ofcourse i will change the images on the corner and colors o.o

thanks!

EDIT:

added that code this is how it looks

http://gyazo.com/8bacf650c7eac15037410554c6a4f501
http://gyazo.com/b0851d65ae687fc4341d09748f706cf9

not really like these:
http://gyazo.com/0db86fe5750aeea8ebe7bc2a2ca7708c

the most important part is the images on the top left corner Sad

Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Spoiler and Code box

Post by Ange Tuteur on September 6th 2014, 8:20 am

The only problem with phpbb2 is that the quote does not have it's own unique selector, because of this the code and quote images are shared.

CSS :
Code:
dl.codebox { background:url(http://illiweb.com/fa/subsilver/icon_delete.gif) no-repeat 3px 3px }
dl.codebox.spoiler { background:url(http://illiweb.com/fa/subsilver/icon_report.gif) no-repeat 3px 3px }

dl.codebox {
  background-color:#EEE;
  border:1px solid #CCC;
  border-left-width:5px;
  padding:3px 3px 3px 25px;
  margin:3px 10px;
}

dl.codebox dt, dl.codebox dt span {
  color:#555;
  font-weight:bold;
}

dl.codebox dd, dl.codebox div.spoiler_content {
  background:none;
  border:none;
}

Spoiler has it's own class, though.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Spoiler and Code box

Post by Kirbs on September 6th 2014, 4:04 pm

Thanks ange! it works but there's only one problem, http://gyazo.com/3c6b41763ee5eb1c7088662ff28d9681 

How can I move the text in it to the right a little more? i mean the word "Spoiler" and "Code" and "Kirbs said", etc

Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Spoiler and Code box

Post by Ange Tuteur on September 7th 2014, 1:28 am

Adjust the 25px in this declaration :
Code:
padding:3px 3px 3px 25px;

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Spoiler and Code box

Post by Kirbs on September 7th 2014, 11:28 pm

Thank you ange! it works

Solved.

Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Spoiler and Code box

Post by Ange Tuteur on September 8th 2014, 12:56 am

You're welcome

Topic archived

Have a nice day. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
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