Threading Template

[stefunii]

Hello, 
I've noticed a variety of roleplay sites that have implemented the thread templates 


i.e cdn.discordapp.com/attachments/514886221126959104/674936794923532288/Screen_Shot_2020-02-06_at_3.16.28_AM.png

I haven't the slightest clue on how to get my [DOHTML] template codes to convert to whatever people are using on Pro boards. It would be amazing if I could get a bit of help/insight. 

[Retread]

Feb 6, 2020 3:18:27 GMT -8 stefunii said:

Hello, 
I've noticed a variety of roleplay sites that have implemented the thread templates 


i.e cdn.discordapp.com/attachments/514886221126959104/674936794923532288/Screen_Shot_2020-02-06_at_3.16.28_AM.png

I haven't the slightest clue on how to get my [DOHTML] template codes to convert to whatever people are using on Pro boards. It would be amazing if I could get a bit of help/insight. 

Hi stefunii

If you'd like to post some or all of your template codes in a post here, one of us can evaluate them and explain the sort of changes you'd need to make.

Be sure to wrap them in [code][/code] tags so we can see them but they won't execute.

[stefunii]

Retread



[dohtml]<center><link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
#shakespeare1{
background: #000;
width:400px;
height:auto;
padding:40px;
position:relative;
margin:20px auto;
margin-bottom: 0px;
overflow: hidden;
border: .5px solid rgba(0,0,0,0.08);
outline: 1px solid  rgba(0,0,0,0.08);
outline-offset: 10px;
}

#shakespeare1 text{
position: relative;
z-index: 1;
display:block;
color:#fff;
font: 400 12px/16px Montserrat;
line-height:190%;
text-align:justify;
letter-spacing: 0.8px;
padding-bottom: 20px;
}

.shakespeare1-text h1 {
font-size: 20px;
font-weight: 400;
text-align: right;
text-transform: uppercase;
color: #fff;

}

.shakespeare1-text hr {
height: 1px;
background-color: #A6A39A;
border: 0;
margin-bottom: 8px;
}

.shakespeare1-text b, .shakespeare1-text i { color: rgba(217, 30, 24, 1); }


</style>
<div id="shakespeare1">
<div class="shakespeare1-text h1">
<text><h1><b>title </b>here</h1>
<hr>

THREAD TEXT GOES HERE



</text><center>
</div></div>
[/dohtml]


[Retread]

Hey stefunii ,

That's some interesting stuff. I guess some forum systems allow placing html within a post, including a local style sheet. Unfortunately that's not possible on ProBoards.

ProBoards BBCode does support a wide variety of elements that are used in html, but not classes and IDs. So it would be necessary to use inline styling.

For instance you define the styling for the <hr> in your local Style Sheet. On a ProBoards post it would be necessary to use the style attribute and define it inline:
[hr style="height: 1px;background-color: #A6A39A;border: 0;margin-bottom: 8px;]

If you use <center> in BBCode with these brackets: [] rather than <>, the preview editor will change that to: [div align="center"] No big deal, it will accomplish the desired task.

One challenge you'll face is that BBCode will respect line breaks in the text, whereas HTML will ignore them unless you specify them explicitly with a <br> or <br/>. This means you'll need to be mindful of not hitting the enter key to create new lines unless you want those line breaks in the post.

I don't think the <text> element you're using is actually an element in html, but html will still respect it and apply the CSS to anything between the tags. But if you try to use that in BBCode, it will just be appear as the word text with brackets around it. So you would need to replace that with something that BBCode would recognize as an element. In this case a [span] should do.

To accomplish (almost) exactly what you have in your template, the BBCode would look like this:
[div style="background:#000;width:400px;height:auto;padding:40px;margin:20px auto;margin-bottom:0px;overflow:hidden;border:.5px solid rgba(0,0,0,0.08);outline:1px solid rgba(0,0,0,0.08);"][div][span style="color:#fff;font:400 12px/16px Montserrat;line-height:190%;text-align:justify;letter-spacing:0.8px;padding-bottom:20px;"][h1 style="font-size:20px;font-weight:400;text-align:right;text-transform:uppercase;color:#fff;"][b style="color:rgba(217, 30, 24, 1);"]title [/b]here[/h1][hr style="height:1px;background-color:#A6A39A;border:0;margin-bottom:8px;"]THREAD TEXT GOES HERE[/span][div align="center"][/div][/div][/div]

However, the Montserrat font-family won't be valid unless the forum has linked to that google font. This:<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">would work in the Forum Wrapper or in the Global Header, but that can't be done locally in a post, to the best of my knowledge. 

Also, the outline property is valid for inline styling in BBCode. But for some reason unbeknownst to me, the outline-offset property seems to not be valid.

title here

---

THREAD TEXT GOES HERE

Since I'm out of my depth here, I'll tag a few experts and see if any of them might weigh in with some additional ideas: Chris Peter Brian

[elli]

To make threading templates, most of us use these plugins:

support.proboards.com/thread/430830/plugin-google-web-fonts - This will make it possible to use Montserrat
support.proboards.com/thread/470310/style-tag-plugin-support-thread - This will make it possible to use CSS classes

And with those installed, here is your DOHTML converted to be compatible with ProBoards. I've simplified it for you; there were some unnecessary CSS properties, like position: relative where there was nothing to contain:

[nospaces][googlefont="Montserrat"]

[div][attr="class","shakespeare1"]
[div][attr="class","shakespeare1-text"]
[div][attr="class","shakespeare1-header"][b]title[/b] here[/div]
[div]THREAD TEXT GOES HERE[/div]
[/div]
[/div]

[newclass=".shakespeare1"]background: #000; border: 0.5px solid rgba(0,0,0,0.08); font: 400 12px "Montserrat", sans-serif; margin: 20px auto; outline: 1px solid rgba(0,0,0,0.08); outline-offset: 10px; padding: 40px; width: 400px;[/newclass]
[newclass=".shakespeare1-text"]color: #fff; letter-spacing: 0.8px; line-height: 190%; padding-bottom: 20px; text-align: justify;[/newclass]
[newclass=".shakespeare1-header"]border-bottom: 1px solid #A6A39A; color: #fff; font-size: 20px; font-weight: 400; margin-bottom: 8px; padding-bottom: 8px; text-align: right; text-transform: uppercase;[/newclass]
[newclass=".shakespeare1-header b"]color: rgba(217, 30, 24, 1);[/newclass]
Also note that this format does not support using IDs as identifiers -- only class names.

Let me know if you need any changes to it! You can find more threading templates on these sites:

adoxographyv2.boards.net/
pixel-perfect.boards.net/