Post by Eleanor Afolayan on May 16, 2017 14:15:05 GMT
[attr="id","tut"][newclass="#tut"]width: 500px; text-align: justify;margin: 20px auto; } #tut h2 { font: 20px 'Roboto Condensed'; text-transform: uppercase; } #tut b, #tut a { color: [var="accent"];[/newclass][var name="accent" value="#5A9AC1"][googlefont="Roboto+Condensed"]Hello friends. I promised SUMMER and elih kartal a tutorial to easily convert templates from CSS/HTML to Proboards BBCode. This guide isn't at all complete (it needs helpful pictures to guide you along the way), but I won't have time to fix it for a few days, so I figured I'd post it here for now. Feel free to PM or DM me with questions, if you have any.
Keep in mind that this was written under the assumption that readers do know their basic CSS/HTML. Depending on the complexity of your code, you can convert anything in 5 minutes or less, or maybe more if your code's heavy on HTML and not CSS. But why would you ever do that, right?
Special thanks to Zephyr Hart for being the mastermind behind this conversion trick (and just an amazing friend tbh.)
1. Only works if the Style Tags plugin is active in the forum you're posting your template in. This also means your template will be literally unviewable in mobile mode. All the important text will still be there, though!
2. If you're converting tabs or any other bit of code that requires a different plugin, you're going to have to convert those separately. This trick only helps convert templates that use traditional CSS (and most CSS3.)
3. You will need to post a long string of text once before your template is fully converted, so before using it please try posting it in a testing forum or subforum!
4. There are multiple variations to the process explained below. If you wish to do any step differently, feel free to do so. As long as the end result after each step is the same, you should be good.
5. Try to style your template using CSS exclusively, as much as possible. Keep HTML to a minimum, and remember Jscript isn't supported by the plugin! Furthermore, it only allows for one class/id to be applied to each element, so sadly we can't use multiple class/id selectors.
6. Note that data attributes, @import, :root variables aren't supported either.
1. Take your CSS. Yes, all of it. Copy it to your clipboard for now.
2. Now, go to your testing thread, and begin by typing down [nospaces]. Then, paste your CSS and hit post.
3. You will see a very long string of code. Don't worry, this is part of the process. Select your code as it looks in the final post, and copy it to your clipboard. We will need this in the next step.
4. We're going to edit our post now. Select everything, and push that backspace key of yours. Yes, delete everything.
It's time for some newclasses. Begin by typing [newclass=", and then paste the code you got from the previous step. When you're sure the entire code is there, delete the last } from your CSS and replace it with [/newclass][nospaces].
But wait! We're not done yet. Go back to the very beginning of your post, to where your first element is, and replace that first { with "]. Your first newclass tag should look something like [newclass="yourdiv"]. Delete any extra spaces after your div's name, if any.
5. Good job! We've got the CSS part down now. Next, you're going to have to grab your HTML and replace all the <> with []. Feel free to use a text replacer for this part.
All your <div class="yourdiv"> will need to be changed into their Proboards + plugins counterpart: [div][attr="class","yourdiv"], as well. The case is similar with div ids. I recommend doing this part first, and replace all lingering chevrons with square brackets afterwards.
6. Post it. That's literally it. Enjoy your easily converted template!
Keep in mind that this was written under the assumption that readers do know their basic CSS/HTML. Depending on the complexity of your code, you can convert anything in 5 minutes or less, or maybe more if your code's heavy on HTML and not CSS. But why would you ever do that, right?
Special thanks to Zephyr Hart for being the mastermind behind this conversion trick (and just an amazing friend tbh.)
Preliminary tips
1. Only works if the Style Tags plugin is active in the forum you're posting your template in. This also means your template will be literally unviewable in mobile mode. All the important text will still be there, though!
2. If you're converting tabs or any other bit of code that requires a different plugin, you're going to have to convert those separately. This trick only helps convert templates that use traditional CSS (and most CSS3.)
3. You will need to post a long string of text once before your template is fully converted, so before using it please try posting it in a testing forum or subforum!
4. There are multiple variations to the process explained below. If you wish to do any step differently, feel free to do so. As long as the end result after each step is the same, you should be good.
5. Try to style your template using CSS exclusively, as much as possible. Keep HTML to a minimum, and remember Jscript isn't supported by the plugin! Furthermore, it only allows for one class/id to be applied to each element, so sadly we can't use multiple class/id selectors.
6. Note that data attributes, @import, :root variables aren't supported either.
THE STEPS
1. Take your CSS. Yes, all of it. Copy it to your clipboard for now.
2. Now, go to your testing thread, and begin by typing down [nospaces]. Then, paste your CSS and hit post.
3. You will see a very long string of code. Don't worry, this is part of the process. Select your code as it looks in the final post, and copy it to your clipboard. We will need this in the next step.
4. We're going to edit our post now. Select everything, and push that backspace key of yours. Yes, delete everything.
It's time for some newclasses. Begin by typing [newclass=", and then paste the code you got from the previous step. When you're sure the entire code is there, delete the last } from your CSS and replace it with [/newclass][nospaces].
But wait! We're not done yet. Go back to the very beginning of your post, to where your first element is, and replace that first { with "]. Your first newclass tag should look something like [newclass="yourdiv"]. Delete any extra spaces after your div's name, if any.
5. Good job! We've got the CSS part down now. Next, you're going to have to grab your HTML and replace all the <> with []. Feel free to use a text replacer for this part.
All your <div class="yourdiv"> will need to be changed into their Proboards + plugins counterpart: [div][attr="class","yourdiv"], as well. The case is similar with div ids. I recommend doing this part first, and replace all lingering chevrons with square brackets afterwards.
6. Post it. That's literally it. Enjoy your easily converted template!
