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.

Stylized border for quotes?

View previous topic View next topic Go down

Solved Stylized border for quotes?

Post by Hax4Ever on March 1st 2015, 2:59 am

I am the main graphical artist for the Cave Story Roleplay forums. I wanted to use quotes to replicate the message boxes in the original Cave Story to use them for a better feel.

Base Image (Sorry for lack of transparency)


I don't want to use a generic scretching method. It would have a horrifying result...
...Yeah.

I want to simply make a texture that repeats instead of stretching.
I made a set of images that would act as the repetitive texture.

Bottom
Left
Right
Top


Here's an example of what I think the output would look like:


So yeah, It would really help if someone could write some code.

My forum uses punbb last time I checked. I would appreciate help!

Hax4Ever
Forumember

Male Posts : 27
Reputation : 2
Language : English
Location : California

http://cavestoryroleplay.forumotion.com/

Back to top Go down

Solved Re: Stylized border for quotes?

Post by Ange Tuteur on March 1st 2015, 10:57 pm

Hello @Hax4Ever,

To do what you wanted, I've decided to use content plus the pseudo selectors ::before and ::after. Since we can only use 1 pseudo selector on an element I went ahead an applied it to the whole codebox since it allowed me to utilize the title(<DT>) as an extra element for two more pseudos.

Add the following rules to your stylesheet :
Display > Colors > CSS stylesheet
Code:
/* codebox properties */
dl.codebox, dl.codebox dd { position:relative }
dl.codebox dd {
  color:#FFF;
  background:#192142;
  border:1px solid #FFB500;
  margin-top:4px;
}
/* spoiler fix */
dl.codebox dd.spoiler_closed:not(.hidden) + dd, dl.codebox dd.spoiler_closed:not(.hidden) + dd:before, dl.codebox dd.spoiler_closed:not(.hidden) + dd:after {
  background:none;
  border:none;
}

/* left / right pseudo presets */
dl.codebox dt:before, dl.codebox dt:after {
  content:".";
  font-size:0;
  width:4px;
  position:absolute;
  top:22px;
  bottom:0;
}

/* top / bottom pseudo presets */
dl.codebox dd:before, dl.codebox dd:after {
  content:".";
  font-size:0;
  height:4px;
  position:absolute;
  left:0;
  right:0;
}

/* left and right border */
dl.codebox dt:before { background:url(http://i.imgur.com/D7P0gIS.png) repeat-y; left:-3px; }
dl.codebox dt:after { background:url(http://i.imgur.com/6M4MC2d.png) repeat-y; right:-3px; }

/* top and bottom border */
dl.codebox dd:before { background:url(http://i.imgur.com/DgQoFC0.png) repeat-x; bottom:-4px; }
dl.codebox dd:after { background:url(http://i.imgur.com/Xs7q1Y4.png) repeat-x; top:-4px; }

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Stylized border for quotes?

Post by Hax4Ever on March 2nd 2015, 1:13 am

Ah! Thank you for the help, Second time today for me. As long as it works, It's completely fine!

Hax4Ever
Forumember

Male Posts : 27
Reputation : 2
Language : English
Location : California

http://cavestoryroleplay.forumotion.com/

Back to top Go down

Solved Re: Stylized border for quotes?

Post by Ange Tuteur on March 2nd 2015, 7:17 am

You're welcome ^^

Topic archived

Ange Tuteur
Forumaster

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