Boards < General < Creative < Trying to Make Post Templates....


Poll: Post Template Concept

That's cool!
2 votes / 67%
It's alright.
1 votes / 33%
I don't like that idea.
0 votes / 0%
« Prev | 1 | Next »

  • Nekostories
  • User
  • Posts: 13

Posted at 2018-07-25 22:12:50 — Link

On a different website, one was able to make "post templates", a cool background thing that one could have their posts on that just look fabulous and unique. Thinking that I'd love to make some for this site, I ran into a problem with the hmtl editor. From what I can tell, it always adds the <p> & </p> tags to any new element which causes there to be a sort of whitespace, new-line thing that splits my template into seperate parts instead of a smooth transition. I've managed to smoothly connect the middle and bottom but no matter what I do I can't seem to find a way to get rid of the space below the top part due to the "&nbsp;" that gets added when I don't have text.


My Problem

Sorry if none of this makes much sense but if anyone has suggestions, that'd be awesome!

Also, if I manage to make this work then I'll be starting up a post template shop so if you like what you see and want your own, keep an eye out or keep in touch!

  • Angel
  • Game Developer
  • Posts: 2,972

Posted at 2018-07-28 20:15:25 — Link

Usually you can use <div> tag as wrapper to avoid automatic wrapping in <p> tags, or just add styles to your <p>s to remove bottom padding. Could you please post the actual code? I can check your html and post a workaround for this issue.

  • Nekostories
  • User
  • Posts: 13

Posted at 2018-11-11 22:42:54 — Link

Sorry for such a late reply, thanks for being willing to help! Here is the code I used:

<p style="background-image: url('TOP URL'); width: 100%; padding: 95px 0px 0px 50px; background-repeat: no-repeat; position: static; margin-top: 0px; margin-bottom: 0px;"> </p>

<p style="background-image: url('MIDDLE URL); width: 100%; padding: 20px 0px 20px 50px; background-repeat: repeat-y; position: absolute; top: 95px; margin-top: 0px; margin-bottom: 0px;">Testing Text2</p>

<p style="background-image: url('BOTTOM URL'); width: 100%; padding: 53px 0px 0px 50px; background-repeat: no-repeat; position: relative; top: 32px; margin-top: 0px; margin-bottom: 0px;"> </p>


I didn't think about trying to use div or span, which I recently thought might work, so I'll keep messing around with it, thanks for the suggestion! :)

« Prev | 1 | Next »

Xsolla is an authorized global distributor of BeastKeeper