Stylish Sinning: For All Your Coding Needs

by ChiaRoseKuro Sun Dec 18, 2016 10:42 pm

You would have probably noticed that there's a fair few differences from this forum to the MCL one; because of that, Eri (AkashiEri) suggested that we make a coding topic to familiarize everyone with what little we don't know. As such, I'll be putting in whatever comes to mind- so if I'm missing something then feel free to poke me and I'll get onto it. Note that there will be very little that isn't already included in the 'quick reply' option- those buttons lining the top will come in very handy for those who don't want to manually type the codes. However, as some options will not show up there (e.g. the extra fonts), they will only be accessible here.

Because there's lots of coding elements and I'd get a brain aneurysm trying to fit in all into one post, I'll do this in sections. To ensure that everyone isn't lost trying to scroll through and find what's what, I will provide a linked directory below:

Code Directory

Basic Font Coding
Basic Post Coding
Intermediate Font Coding - Google Fonts
Intermediate Post Coding - Tables
Intermediate Post Coding - Images
Advanced Post Coding - Tables

by ChiaRoseKuro Sun Dec 18, 2016 10:58 pm

Basic Font Coding

Nothing much has changed from the original MCL code; bolding is still the same, underlining is still the same and italicizing is still the same. What you will notice, though, is that ~~strikethrough~~ is now an option, as is adjusting the size of text so that it appears larger or smaller. Different alignments like justifying and right-aligned text is also enabled here, as are different fonts (see this link for the full list of non-basic fonts available) and various lists, but colours haven't gotten much of an upgrade.

So let's move onto the coding you'll need to ensure your font is looking nice and fancy ;D

Strikethrough

Code:: [strike]insert text here[/strike]

Size Changes

Code:: [size=10]insert smaller text here[/size] [size=16]insert larger text here[/size] Please note that the sizes available are only 10, 13 (default), 16, 18 and 24

Alignment Changes

Code:: [center]insert centered text here[/center] [right]insert right-aligned text here[/right] [justify]insert justified text here[/justify]

Font Changes

Code:: [font=Font Name]insert text here[/font]

Listing Options

Code:: [list][*]insert item 1 here [*]insert item 2 here[/list] and so on, so forth (for a bulleted list) [list=1][*]insert item 1 here [*]insert item 2 here[/list] and so on, so forth (for a numbered list; note that differing values will change the list value used)

Superscript/Subscript

Code:: [sub]insert text here[/sub] [sup]insert text here[/sup] the former is subscript (i.e. it makes it small and lower); the latter is superscript (i.e. it makes it small and higher)

by ChiaRoseKuro Sun Dec 18, 2016 11:44 pm

Basic Post Coding

Nothing much has changed from MCL for the base coding; spoilers, quotes and codes are still as they are. However, as this is a new site and the themes will be different, everything will look a little different and so I will be providing examples of what everything looks like beneath the relevant code. New additions include the hidden option, embedding the time/date into your post and hosting an image directly onto the thread, rather than uploading it onto an image site and then transferring it here via a link.

Quotes

Code:: [quote]insert text here[/quote]

insert text here

Spoilers

Code:: [spoiler]insert text here[/spoiler]

Spoiler:

Codes

Code:: [code]insert text here[/code] for obvious reasons, I'm not going to provide an example here

Quasi-Quotes (Hidden Text)

Code:: [hide]insert text here[/hide]

Hosting Images

Code:: click the image with a floppy disk in front on your ribbons for your quick reply and follow the instructions there then proceed as normal with the [img][/img] tag an example of Altair's image is shown below

Stylish Sinning: For All Your Coding Needs U_m10

More/Less Button

Code:: [hr]insert text here apparently it's just like a line break and doesn't really act like tumblr's more/less button

insert text here

Inserting Time/Date

Code:: 12.19.2016 15:43:53 both of those were achieved by clicking the calendar button and clicking the clock button, respectively, in your ribbon for obvious reasons again, I'm not going to show an example of this outside of code

Inserting a Table

Code:: [table][tr][td]insert text here[/td][/tr][/table] For more on tables, please look at the post below; for now, have a 1x1 table

insert text here

Inserting Tabs

Code:: [*tabs][*tab=Tab 1]insert text[/*tab][*tab=Tab 2]insert more text[/*tab][/*tabs] Please note that the [*tabs][/*tabs] code is essential for keeping your tabs together, so do not omit them! Remove the * to use the full code, as it didn't seem to work very well in the code box...

[tabs][tab=Tab 1]insert text[/tab][tab=Tab 2]insert more text[/tab][/tabs]

by ChiaRoseKuro Sun Dec 18, 2016 11:58 pm

Intermediate Font Coding - Google Fonts

Unfortunately, only administrators can input additional fonts into the mainframe, so if you have any requests for fonts then please send them to me (@ChiaRoseKuro) as the HTML/CSS modifications needed have already been done by me, so having Eri suffer for them is entirely unnecessary. As such, all the fonts that have been added thus far will be placed below, for everyone's perusal, and the names correspond to the fancy text provided. Please note that all fonts were taken from Google Fonts and I'm not going to get anything that exists outside of it.

There is only so much I can do before I stop coding and start becoming postmodernist art adorning my house.

Raleway
Mirza
Taviraj
Lobster
Crimson Text
Quicksand
Dekko
Delius
Cinzel
Buda
Kalam
Yellowtail
Amatic SC
Courgette
Kaushan Script
Satisfy
Handlee
Permanent Marker
Vidaloka
Economica
Coming Soon
Playball
Bad Script
Neucha
Caveat
Merienda
Sue Ellen Francisco
Zeyada
Sunshiney
Just Me Again Down Here
Patrick Hand
Aclonica
Nothing You Could Do
Marck Script
Acme
Irish Grover
Arima Madurai

by ChiaRoseKuro Mon Dec 19, 2016 2:21 am

Intermediate Post Coding - Tables

Tables are absolutely no fun when you put in the code; no matter what happens, things just don't look right and it took me a while to figure out that tables did not automatically snap to the side of your post unless you forced it to. Please bear in mind that this will involve a lot of coding and that this post will be more of a workshop than anything else, courtesy of this poor sucker here who just spent the better part of an hour trying to figure it out for their profile- but that is another story.

Although I will do my best to cover everything here (hence the usage of a 2x2 table, as opposed to a 1x2 or 2x1), please note that you wil have to figure a few things out through intuition or trail and error. [*tr] stands for the rows, for instance, and [*td] stands for the columns; I've also established that columns must be nestled between rows and not the other way around. But that is inconsequential so I may as well move on.

Basic 2x2 Table
As per the example in the 'Basic Font Coding' post

Code:: [table][tr][td]insert text here[/td][td]insert text here[/td][/tr][tr][td]insert text here[/td][td]insert text here[/td][/tr][/table]

Unfortunately, the results are less than desirable and you get this hellish-looking block of mishmash here:

insert text here	insert text here
insert text here	insert text here

Slightly Less Basic 2x2 Table
So we take it up a notch and hope that it looks a little more desirable in the next edition

Code:: [table][tr][td][color=#f0f0f0]very sus text to expand the table walls here[/color] [center]insert text here[/center] [color=#f0f0f0]very sus text to expand the table walls here[/color][/td][td][color=#f0f0f0]very sus text to expand the table walls here[/color] [center]insert text here[/center] [color=#f0f0f0]very sus text to expand the table walls here[/color][/td][/tr][tr][td][color=#f0f0f0]very sus text to expand the table walls here[/color] [center]insert text here[/center] [color=#f0f0f0]very sus text to expand the table walls here[/color][/td][td][color=#f0f0f0]very sus text to expand the table walls here[/color] [center]insert text here[/center] [color=#f0f0f0]very sus text to expand the table walls here[/color][/td][/tr][/table]

And this time around, it looks like a slightly more manageable 2x2 table:

very sus text to expand the table walls here insert text here very sus text to expand the table walls here	very sus text to expand the table walls here insert text here very sus text to expand the table walls here
very sus text to expand the table walls here insert text here very sus text to expand the table walls here	very sus text to expand the table walls here insert text here very sus text to expand the table walls here

Less Basic 2x2 Table
But because you don't want to be typing invisible text all the time, Oreo showed me this

Code:: [table width="100%"][tr][td]insert text here[/td][td]insert text here[/td][/tr][tr][td]insert text here[/td][td]insert text here[/td][/tr][/table]

Now, with minimal effort and a lot less fuss than the 2nd edition, we have this!

insert text here	insert text here
insert text here	insert text here

Less Basic 2x2 Table, With Borders
And for our fancier folk, we can add borders too

Code:: [table border="1" width="100%"][tr][td]insert text here[/td][td]insert text here[/td][/tr][tr][td]insert text here[/td][td]insert text here[/td][/tr][/table]

You now get exactly the same table as shown just before, but now with borders:

insert text here	insert text here
insert text here	insert text here

So at the end of the day, all you need to do is add a specification for your width so that it snaps to the borders (i.e. width="[percentage]%") and that solved the fuss. If you desire borders, just add (border="[numerical value]") and that will make your table visible. Many thanks to Oreo (@Snowman) for showing me the latter two and for viewing the forumotion video that showed her how to use those, and that's all for tables... for now, anyway.

by ChiaRoseKuro Tue Dec 20, 2016 1:49 am

Imtermediate Post Coding - Images

Recently, the maximum image width had been bumped up to 800px for reasons (read: Shiro got angry when a banner shrunk itself, so they fixed it and threw all the previous 500px images out of whack), which is why this handy-dandy post has been created to revert images back to their proper sizes. You do not necessarily need to change them back to their original 500px limitation but I'll be using that as an example in this tutorial.

For the purposes of this, I'll stick with the original image I'd used in the basic formatting post.

Basic Image: Revisited

Code:: [img]http://i37.servimg.com/u/f37/19/58/90/10/u_m10.jpg[/img]

Much like before, nothing has changed; Altair's image is still its modest size:
Stylish Sinning: For All Your Coding Needs U_m10

Resized Image (%)
This is usually according to your browser proportions (or so I've read).

Code:: [img(30%,30%)]http://i37.servimg.com/u/f37/19/58/90/10/u_m10.jpg[/img]

Now Altair's image is somewhat smaller than it was before:
Stylish Sinning: For All Your Coding Needs U_m10

However, should you revisit your code after you've previewed/sent your post, note that the percentages will have converted themselves to pixels. Unless you remember which proportions you've used, it may be a better idea to do the next one...

Resized Image (px)
Written as (width,height); do not leave spaces in your brackets.

Code:: [img(281px,169px)]http://i37.servimg.com/u/f37/19/58/90/10/u_m10.jpg[/img]

And you've got exactly the same image as before, except it's defined by its width/height in pixels:
Stylish Sinning: For All Your Coding Needs U_m10

Note that, if the ratio is incorrect, you may end up with a horribly squished image that you will have to manually fix, if you're not relying on percentage proportions. The best thing to use, in this instance, is your calculator in figuring out the dimensions. I normally use something like [ (original width)/(original height) x (resized width) = (resized height) ], but you may find that another algorithm works for you. Either way, my advice is opening the image in a new tab and then right-clicking on it to 'Inspect' its properties (and thereby gain its height/width values) if it isn't readily displayed in your tab.

by ChiaRoseKuro Thu Dec 29, 2016 11:54 pm

Advanced Post Coding - Tables Revisited

Thankfully, I'm not going to give everyone a massive post this time around. Instead, this tutorial post is going to be short and sweet, thanks to Oreo (@Snowman) and her amazing skills in finding a very helpful link on tables, as well as a few other types of coding. Please click the link below to access it and prettify your table:

click me

by Sponsored content

Stylish Sinning: For All Your Coding Needs

Stylish Sinning: For All Your Coding Needs

Re: Stylish Sinning: For All Your Coding Needs

Re: Stylish Sinning: For All Your Coding Needs

Re: Stylish Sinning: For All Your Coding Needs

Re: Stylish Sinning: For All Your Coding Needs

Re: Stylish Sinning: For All Your Coding Needs

Re: Stylish Sinning: For All Your Coding Needs

Re: Stylish Sinning: For All Your Coding Needs