• Starlight Academy
    A MODERN FANTASY ROLEPLAY



  • Welcome

    If you are reading this, then you are a very special person. Unique, gifted, different; it does not matter how you wish to phrase it. As a result, I would like to congratulate you on your invitation to Starlight Academy. We are looking forward to meeting you.

    Starlight Academy is a laid back roleplaying community with a goal in mind: to have fun while roleplaying. We post at our own pace, we plot to our hearts desire, and you decide how your roleplaying experience will be.
Dismiss Notice
Threads: 16,541
Posts: 185,754
Members: 865
Dismiss Notice
Interested in learning about Starlight Academy? Our SA Success Guide includes an overview of the site, and has helpful links to everything you might want to know!

how do i code for this site?

This post serves as a guide to the utter basics of coding on SA. Primarily, it exists to help those who already have at least some coding experience get used to Xenforo. If you're looking for a full guide of how to make tables and post templates... unfortunately won't find it here.

GENERAL BASICS OF SA CODING:

YOU CANNOT USE BBCODE WITHIN PARSEHTML TAGS OR VICE VERSA. IT WILL BREAK YOUR ENTIRE CODE.

The first rule above all is that if you can do it just in BBCode, do it just in BBCode. It'll be way easier on you, and have way less compatibility issues. Plenty of things can be done without BBCode, and pure BBCode is more likely to be compatible with phones and other out of date browsers. Similar thing with drawers - really, try and avoid them if at all possible (spoilers can now be nested, so use those instead).

That said, if you want to do fancy things, here we go!

First of all, absolutely don't do any coding in the default WYSIWYG editor. Before you do ANY coding, you're going to need to head into the default BBCode editor. To swap over, click 'use BBCode editor' in the top right.

[​IMG]

From there, you need to wrap your HTML in parsehtml tags.

So, rather than:

Code:
<span style="font-weight: bold;"><span style="color: crimson;">P</span><span style="color: tomato;">l</span><span style="color: goldenrod;">o</span><span style="color: lightgreen;">t</span><span style="color: cornflowerblue;">s</span></span>
You would put in:

Code:
[parsehtml]<span style="font-weight: bold;"><span style="color: crimson;">P</span><span style="color: tomato;">l</span><span style="color: goldenrod;">o</span><span style="color: lightgreen;">t</span><span style="color: cornflowerblue;">s</span></span>[/parsehtml]
There are a few tricks with this. Everything inside a parsehtml will be treated as HTML, which means line breaks are ignored. To line break properly, you need to add a <br><br> or a <p>.

CENTERING A WHOLE TEMPLATE:

This is a bit of a tricky thing. Essentially, wrapping a parsehtml inside another tag will cause issues. You can't, for example, wrap the whole thing in center or align=center tags, as it'll just break the parsehtml.

Instead, make the first thing inside the parsehtml a <center> tag, and wrap the whole template in it.

RANDOM TIPS AND TRICKS:

  • Don't use hard numbers for width. If you set the width of a table to, say, 400px, than anyone on a mobile browser will have the contents extend off the screen, making it impossible to read. Stick to % instead for mobile-compatibility.
  • If you have a header and a footer but don't have any code effecting the middle, you can use more than one parseHTML. Just end the one at the top and start a new parseHTML at the bottom, allowing you to type in the middle without line breaks.
  • Don't feel the need to get fancy. People have made some really nice looking plotters and trackers, all without touching parseHTML at all.

SWAPPING FROM JCINK:

Jcink is pretty similar to how we do things here. Basically, just swap dohtml tags with parsehtml tags, and the overwhelming majority will work with only slight edits needed.

SWAPPING FROM PROBOARDS:

A bit trickier than jcink, because proboards uses an expanded form of BBCode rather than parsing HTML. The absolute easiest way is using the inspect element feature. I'm using google chrome, and I'll use that to explain how to do it. Pull up your proboards post template, and right click the template itself (the text is probably the best) and choose 'inspect element' on the dropdown.

[​IMG]

From there, the inspect window will pop up, either along the bottom of your window or as a separate window. The part of the HTML that makes up your post text should be selected (grey highlight in the picture). Running your mouse over the different elements will highlight them on the template. Find the part of the code that includes all elements of the template but not the site itself, and right click that.

Please click this link for an example, because it's a pretty large screenshot.

From there, right click and choose edit as HTML. This will bring you up a selection of your entire template - just copy paste the whole thing. From there, you're basically done. Slap it into a parsehtml tag on SA, and the template should be mostly converted. Some small things might need tweaking, but this takes the majority of the work out of recoding a template for SA.

[​IMG]

In my example template, I just need to change the indent on the tag section at the top, and revert it to a normal tag.

ALT: Do I use HTML or BBCode? Do I need to use DOHTML? How do I make post templates?
Category:
Technical
Published:
Apr 8, 2017
Page Views:
718
FAQ Manager ©2018 Iversia from RPGfix.


Be appropriate - Don't spam - Don't advertise - Don't roleplay - Stay on topic
KEY:
ADMIN
MOD
RANGER




RPG-D Rise of the Believers

Southern Winds Weyr
MANTA CARLOS WEATHER