Zay
SWRP Writer
- Joined
- Jan 8, 2014
- Messages
- 2,538
- Reaction score
- 960
Yo, I put together this thread to help those who aren't savvy at the sites code. I'm completely self taught and learned what I have by spending hours dissecting character profiles I've liked in the past and wanted to offer a way for people on the site to do the same. All of the profiles below are free to use without asking. The only thing I ask is that you leave the "Template by Zaypat" on the templates that have it.
To help those trying to learn I'm going to put all of the code used and what they do. I know there are a few posts with this info, but I wanted to basically make a one stop shop for all things code. Of course I'll link any threads that I find helpful.
Also, complements are encouraged. :D
Font Size
Text Alignment
Misc.
Google Fonts
Tables
Boxes
Special Boxes
Tabs, Column, & Etc.
Tab
Stylized
Basic Code
Bold
Italics
Underline
The three above are super straight forward. Each alters the look of words within the code. I use Bold and Italics constantly, not only to pretty up my profiles, but also to help add extra emotion or feeling to a post. I don't use Underline very often. If you use the URL code it auto underlines things so keep that in mind when you're using it.
Strike
This code is great for showing an edit or being snarky. lol. I don't personally use it, but it's a fun code to whip out when you wanna add something fun to a post.
Image
Hyperlink
For more info on the above I recommend checking this post out by the amazing @Vosrik. In this post Vosrik covers changing font's and color. With it being laid out so well in their post I didn't see a need to cover it here.
Font Size
Size
Exsize
This font size is great for finding the font that's just right for whatever your trying to do. It gives you way more control thank the regular size code and is the one I use most. Both work and both have instances where they work better than the other.
Text Alignment
Center
Left
Right
Justify
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet imperdiet nulla. Nullam aliquam justo sit amet mi finibus interdum. Donec dignissim varius convallis. Nullam vel justo sed justo varius facilisis. Ut et auctor sapien. Nam rhoncus orci eget luctus sodales. Suspendisse vitae massa id elit sagittis laoreet. Morbi quis fermentum ipsum. Sed tristique vestibulum dolor, ut elementum odio. Suspendisse eu ante sem.
Float
Float is a really cool tool that allows you to drop pictures into text. It can be used in other ways, but this is the main way it will be seen on this site.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet imperdiet nulla. Nullam aliquam justo sit amet mi finibus interdum. Donec dignissim varius convallis. Nullam vel justo sed justo varius facilisis. Ut et auctor sapien. Nam rhoncus orci eget luctus sodales. Suspendisse vitae massa id elit sagittis laoreet. Morbi quis fermentum ipsum. Sed tristique vestibulum dolor, ut elementum odio. Suspendisse eu ante sem.
Sed finibus, lectus a sagittis aliquam, nulla orci ullamcorper dolor, vel tempor lacus enim id mauris. In sit amet eros imperdiet neque feugiat euismod. Praesent et ipsum eget justo semper molestie in at odio. Curabitur fringilla fringilla nulla ut ultricies. Sed pharetra posuere dapibus. Nulla ullamcorper augue in dignissim tincidunt. Sed pulvinar sem ut placerat ultrices. Nullam pretium aliquet elit nec sollicitudin. Curabitur lectus mi, varius nec magna in, finibus cursus est. Maecenas luctus placerat congue. Ut non sem dignissim, pulvinar urna non, rutrum magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet imperdiet nulla. Nullam aliquam justo sit amet mi finibus interdum. Donec dignissim varius convallis. Nullam vel justo sed justo varius facilisis. Ut et auctor sapien. Nam rhoncus orci eget luctus sodales. Suspendisse vitae massa id elit sagittis laoreet. Morbi quis fermentum ipsum. Sed tristique vestibulum dolor, ut elementum odio. Suspendisse eu ante sem.
Sed finibus, lectus a sagittis aliquam, nulla orci ullamcorper dolor, vel tempor lacus enim id mauris. In sit amet eros imperdiet neque feugiat euismod. Praesent et ipsum eget justo semper molestie in at odio. Curabitur fringilla fringilla nulla ut ultricies. Sed pharetra posuere dapibus. Nulla ullamcorper augue in dignissim tincidunt. Sed pulvinar sem ut placerat ultrices. Nullam pretium aliquet elit nec sollicitudin. Curabitur lectus mi, varius nec magna in, finibus cursus est. Maecenas luctus placerat congue. Ut non sem dignissim, pulvinar urna non, rutrum magna.
Miscellaneous
Abbreviation
Example. Hover your mouse cursor over this text.
Anchor (A.K.A The table of contents code)
This code actually requires two parts which can be confusing for those new to this feature. The JUMPTO code is what sends the viewer to the anchor. The anchor is established by the ANAME code. When put together correctly one can create a thread that's really long but, gives the reader the ability to jump around quickly without needing to manually scroll. It's also a fancy feature. lol 10/10 am using it in this thread.
Spoiler
List
List is one of my favorite codes to use when working on a profile. It's a really versatile code that can be manipulated to create some cool effects. Also, that maybe the nerdiest thing I've ever wrote... ¯\_(ツ)_/¯
Google Fonts
Google fonts are back! But they're a little funky right now. The code to use a google fonts is:
Be very careful when using this code. I've run into two little glitches with it. The first one seems to interfere with the preview function. The second completely deletes your code. If you want to use Google fonts I'd wait until you've completely finished the code you're working on and then add in the code. Be sure to copy your code before you hit save just in case. I'll update this once it's all sorted. I know @Aberforth is aware so I'm sure it'll be fixed soon.
Tables
This is a basic example of a table. It utilizes the Header code (TH) in the top section and then uses the regular row code in the second section. Thats where the color difference comes from. There are two other colors you can use by changing The TR to TR1, or TR2.
Example:
[TR1][TD]TH example[/TD][TD]This is a header cell.[/TD][/TR1]
[TR2][TD]TR example[/TD][TD]This is a default row.[/TD][/TR2]
Boxes
Boxes on this site are the main way to lay the foundation for anything from your latest character profile to a planet submission. They keep things in order and allow us to dictate how big or small our submissions are. There are two different ways to control the size of boxes on the site: Percentage, and Pixel size. Percentage (%) is based on the current screen the box is being viewed from. % is the best when one is using a very simple layout. In my opinion, % allows for content to be easily read on both your computer and a mobile. Pixel is based on how many pixels wide you want the box to be. This size, once set, will not mold to the size of the screen the box is being viewed on. Mobile users will find that some pages cant full be viewed because their screen simply isn't big enough. Computer Master-race! FTW!! :D
There are three normal box styles and two special box styles. I will not be displaying every version of each box, but I will provide the code needed to use them and a brief description of the variation.
ABOX
The Abox is transparent. It's perfect for tightening up posts, or sizing pictures for your layout.
Abox Variations:
CBOX
To help those trying to learn I'm going to put all of the code used and what they do. I know there are a few posts with this info, but I wanted to basically make a one stop shop for all things code. Of course I'll link any threads that I find helpful.
Also, complements are encouraged. :D
Table of Contents
Basic CodeFont Size
Text Alignment
Misc.
Google Fonts
Tables
Boxes
Special Boxes
Tabs, Column, & Etc.
Templates
Generic Tab
Stylized
Basic Code
Bold
Code:
[b]Bold[/b]
Italics
Code:
[i]Italics[/i]
Underline
Code:
[u]Underline[/u]
The three above are super straight forward. Each alters the look of words within the code. I use Bold and Italics constantly, not only to pretty up my profiles, but also to help add extra emotion or feeling to a post. I don't use Underline very often. If you use the URL code it auto underlines things so keep that in mind when you're using it.
Code:
[s]Strike[/s]
This code is great for showing an edit or being snarky. lol. I don't personally use it, but it's a fun code to whip out when you wanna add something fun to a post.
Image
Code:
[IMG]http://i.imgur.com/Kp06qyi.png[/IMG]
Hyperlink
Code:
[URL=http://www.google.com/]Link to a page.[/URL]
For more info on the above I recommend checking this post out by the amazing @Vosrik. In this post Vosrik covers changing font's and color. With it being laid out so well in their post I didn't see a need to cover it here.
Font Size
Size
Code:
[SIZE="1"]Font sizing.[/size]
Exsize
Code:
[EXSIZE=12]Font Sizing.[/EXSIZE]
Text Alignment
Center
Code:
[CENTER]Alignment - Center[/CENTER]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet imperdiet nulla. Nullam aliquam justo sit amet mi finibus interdum. Donec dignissim varius convallis. Nullam vel justo sed justo varius facilisis. Ut et auctor sapien. Nam rhoncus orci eget luctus sodales. Suspendisse vitae massa id elit sagittis laoreet. Morbi quis fermentum ipsum. Sed tristique vestibulum dolor, ut elementum odio. Suspendisse eu ante sem.
Left
Code:
[LEFT]Alignment - Left[/LEFT]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet imperdiet nulla. Nullam aliquam justo sit amet mi finibus interdum. Donec dignissim varius convallis. Nullam vel justo sed justo varius facilisis. Ut et auctor sapien. Nam rhoncus orci eget luctus sodales. Suspendisse vitae massa id elit sagittis laoreet. Morbi quis fermentum ipsum. Sed tristique vestibulum dolor, ut elementum odio. Suspendisse eu ante sem.
Right
Code:
[RIGHT]Alignment - Right[/RIGHT]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet imperdiet nulla. Nullam aliquam justo sit amet mi finibus interdum. Donec dignissim varius convallis. Nullam vel justo sed justo varius facilisis. Ut et auctor sapien. Nam rhoncus orci eget luctus sodales. Suspendisse vitae massa id elit sagittis laoreet. Morbi quis fermentum ipsum. Sed tristique vestibulum dolor, ut elementum odio. Suspendisse eu ante sem.
Justify
Code:
[JUSTIFY]Alignment - Justify[/JUSTIFY]
Float
Float is a really cool tool that allows you to drop pictures into text. It can be used in other ways, but this is the main way it will be seen on this site.
Code:
[float_right][img]image link[/img][/float_right]Filler text that will display the text bending around the picture.
Sed finibus, lectus a sagittis aliquam, nulla orci ullamcorper dolor, vel tempor lacus enim id mauris. In sit amet eros imperdiet neque feugiat euismod. Praesent et ipsum eget justo semper molestie in at odio. Curabitur fringilla fringilla nulla ut ultricies. Sed pharetra posuere dapibus. Nulla ullamcorper augue in dignissim tincidunt. Sed pulvinar sem ut placerat ultrices. Nullam pretium aliquet elit nec sollicitudin. Curabitur lectus mi, varius nec magna in, finibus cursus est. Maecenas luctus placerat congue. Ut non sem dignissim, pulvinar urna non, rutrum magna.
Code:
[float_left]][img]image link[/img][/float_left]Filler text that will display the text bending around the picture.
Sed finibus, lectus a sagittis aliquam, nulla orci ullamcorper dolor, vel tempor lacus enim id mauris. In sit amet eros imperdiet neque feugiat euismod. Praesent et ipsum eget justo semper molestie in at odio. Curabitur fringilla fringilla nulla ut ultricies. Sed pharetra posuere dapibus. Nulla ullamcorper augue in dignissim tincidunt. Sed pulvinar sem ut placerat ultrices. Nullam pretium aliquet elit nec sollicitudin. Curabitur lectus mi, varius nec magna in, finibus cursus est. Maecenas luctus placerat congue. Ut non sem dignissim, pulvinar urna non, rutrum magna.
Miscellaneous
Abbreviation
Code:
[ABBR="Text"]Abbreviation[/ABBR]
Anchor (A.K.A The table of contents code)
Code:
[JUMPTO=anchor_1]Anchor link[/JUMPTO]
Code:
[ANAME=anchor_1]Anchor destination[/ANAME]
Spoiler
Code:
[SPOILER=Title]Context[/SPOILER]
Context
List
- Example1
- Example2
- Example3
Code:
[list][*]Example1
[*]Example2
[*]Example3[/list]
- Example1
- Example2
- Example3
Code:
[list=1][*]Example1
[*]Example2
[*]Example3[/list]
List is one of my favorite codes to use when working on a profile. It's a really versatile code that can be manipulated to create some cool effects. Also, that maybe the nerdiest thing I've ever wrote... ¯\_(ツ)_/¯
Google Fonts
Google fonts are back! But they're a little funky right now. The code to use a google fonts is:
Code:
[gfont=font name] CONTENT [/gfont]
Be very careful when using this code. I've run into two little glitches with it. The first one seems to interfere with the preview function. The second completely deletes your code. If you want to use Google fonts I'd wait until you've completely finished the code you're working on and then add in the code. Be sure to copy your code before you hit save just in case. I'll update this once it's all sorted. I know @Aberforth is aware so I'm sure it'll be fixed soon.
Tables
Code:
[TABLE]
[TR][TH]TH example[/TH][TH]This is a header cell.[/TH][/TR]
[TR][TD]TR example[/TD][TD]This is a default row.[/TD][/TR]
[/TABLE]
TH example | This is a header cell. |
---|---|
TR example | This is a default row. |
Example:
[TR1][TD]TH example[/TD][TD]This is a header cell.[/TD][/TR1]
[TR2][TD]TR example[/TD][TD]This is a default row.[/TD][/TR2]
Boxes
Boxes on this site are the main way to lay the foundation for anything from your latest character profile to a planet submission. They keep things in order and allow us to dictate how big or small our submissions are. There are two different ways to control the size of boxes on the site: Percentage, and Pixel size. Percentage (%) is based on the current screen the box is being viewed from. % is the best when one is using a very simple layout. In my opinion, % allows for content to be easily read on both your computer and a mobile. Pixel is based on how many pixels wide you want the box to be. This size, once set, will not mold to the size of the screen the box is being viewed on. Mobile users will find that some pages cant full be viewed because their screen simply isn't big enough. Computer Master-race! FTW!! :D
There are three normal box styles and two special box styles. I will not be displaying every version of each box, but I will provide the code needed to use them and a brief description of the variation.
ABOX
Code:
[abox=400px]Content[/abox]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet imperdiet nulla. Nullam aliquam justo sit amet mi finibus interdum. Donec dignissim varius convallis. Nullam vel justo sed justo varius facilisis. Ut et auctor sapien. Nam rhoncus orci eget luctus sodales. Suspendisse vitae massa id elit sagittis laoreet. Morbi quis fermentum ipsum. Sed tristique vestibulum dolor, ut elementum odio. Suspendisse eu ante sem.
The Abox is transparent. It's perfect for tightening up posts, or sizing pictures for your layout.
Abox Variations:
- abox, transparent box
- abox2, transparent box w/border
- abox3, transparent box, centered
- abox4, transparent box, centered w/border
CBOX
Code:
[cbox=400px]Content[/cbox]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet imperdiet nulla. Nullam aliquam justo sit amet mi finibus interdum. Donec dignissim varius convallis. Nullam vel justo sed justo varius facilisis. Ut et auctor sapien. Nam rhoncus orci eget luctus sodales. Suspendisse vitae massa id elit sagittis laoreet. Morbi quis fermentum ipsum. Sed tristique vestibulum dolor, ut elementum odio. Suspendisse eu ante sem.
- cbox, darkest box
- cbox2, darkest box w/border
- cbox3, darkest box, centered
- cbox4, darkest box, centered w/border
Special Boxes
These boxes are uniquely acting boxes that add extra style or creativity to a post/profile. The Fancy Box is a box that requires no size limit. It automatically stretches to the size of the screen it's on. Of course, it's size can be determined by another box. I use the abox to alter the size of my fancy boxes. The second special box is the PBOX. This code is really cool. It allows you to place a picture as the background of your box. It's become super popular recently so chances are you've seen it around.
Fancy Box
Example 1:
Example 2:
Example 1:
Example 2:
PBOX
This box is covered extensively in Vosrik's post because of that I won't go over it here. If you have questions feel free to ask. :)
Tabs, Column, & Etc.
Both of these brand new codes are amazing and really simplify the profile creation process. To learn more about them and the other super helpful things that have been added check out Aberforth's post. It gives you all the info needed to utilize the code effectively. Of course, if you have questions, I'm happy to help however I can. ;D
Fancy Box
Example 1:
Code:
[fancybox]Content[/fancybox]
Code:
[fancybox3=http://i.imgur.com/IaNPjo5.png]Content[/fancybox3]
Example 1:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet imperdiet nulla. Nullam aliquam justo sit amet mi finibus interdum. Donec dignissim varius convallis. Nullam vel justo sed justo varius facilisis. Ut et auctor sapien. Nam rhoncus orci eget luctus sodales. Suspendisse vitae massa id elit sagittis laoreet. Morbi quis fermentum ipsum. Sed tristique vestibulum dolor, ut elementum odio. Suspendisse eu ante sem.
Example 2:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet imperdiet nulla. Nullam aliquam justo sit amet mi finibus interdum. Donec dignissim varius convallis. Nullam vel justo sed justo varius facilisis. Ut et auctor sapien. Nam rhoncus orci eget luctus sodales. Suspendisse vitae massa id elit sagittis laoreet. Morbi quis fermentum ipsum. Sed tristique vestibulum dolor, ut elementum odio. Suspendisse eu ante sem.
- fancybox, box with single border
- fancybox2, box with double borders
- fancybox3, box with single border & image
- fancybox4, box with double borders & image
PBOX
This box is covered extensively in Vosrik's post because of that I won't go over it here. If you have questions feel free to ask. :)
Tabs, Column, & Etc.
Both of these brand new codes are amazing and really simplify the profile creation process. To learn more about them and the other super helpful things that have been added check out Aberforth's post. It gives you all the info needed to utilize the code effectively. Of course, if you have questions, I'm happy to help however I can. ;D
Last edited: