Tessisamess

Previous | Next

The Back to Basics Code Collection




Welcome to the Back to Basics series! This month's codes are all in one post, and they'll all focus on the most basic codes we RPers need, in their most basic (or nearly so) forms. If you've ever searched around specifically trying to find simple codes to work with for your games or characters and found yourself stuck using table codes from over five years ago, this post is for you! You can even mix and match some of these codes inside of each other!

TEXT FORMATTING
One of the simplest things you can do to make an entry look nice is a little bit of basic text formatting! This code is responsive and has all your font specs covered so you can edit them on a whim. Additionally, you can add any of the footers and headers below to the inside of this code to build something more complex and unifying!

Morbi a justo placerat, finibus nibh vel, sollicitudin ligula. Nulla elementum dolor nibh, eget hendrerit ex cursus quis. Aenean condimentum felis vitae pharetra venenatis. Aliquam erat volutpat. Mauris sed turpis augue. Cras eleifend quis velit quis consequat. Donec augue leo, pretium at enim sit amet, vestibulum vehicula diam.

Nam condimentum, risus at molestie suscipit, nunc ligula ornare sapien, commodo pellentesque nisl velit ac orci. Donec vestibulum rhoncus mi non scelerisque. Maecenas massa ante, aliquam eget nulla viverra, ultricies tincidunt augue. Proin ipsum mi, euismod eu enim vel, consequat congue orci. In vitae scelerisque augue. Donec faucibus consequat mi, ut iaculis urna malesuada vel. In gravida nibh libero, a pharetra quam vehicula sit amet.

EASY COLUMNS
Need to break up your content into columns? Unsure of how to do that without tables? Here's a flex solution for easy columns that you can reorder on the fly! In the demo I have given each column an inner div for styling, but you can easily do styling in the percentage width div as well.

Just remember to set your margin and padding in a percent value and subtract it x2 from the column width. This can easily be nested into the Text Formatting code if you take out the container's width!

Three columns is 100% divided by 3 (33.3%)
Three columns is 100% divided by 3 (33.3%)
Three columns is 100% divided by 3 (33.3%)
Full-width column is 100%
Two columns is 100% divided by 2 (50%)
Two columns is 100% divided by 2 (50%)


CONTENT HEADERS
Using the same header on all of your game entry posts is a simple and effective way to unify all game information and make it feel cohesive!

HEADER #1

One of the simplest things you can do: A large text header with a border! Personalizing this header is as easy as editing the font family and color! Change #222 for the font and #ddd for the border!

TITLE HERE




HEADER #2

Now let's get a little flashier; don't worry, it's just as easy to edit! You can add a background image to BACKGROUNDHERE and leave it at that, or change #fff for the font color. Font sizes are next to each title and can be easily changed too. You can even change 200px to adjust the height and your titles will stay centered!

TITLE HERE
SUBTITLE HERE


POST FOOTERS
These footers can go into any existing code you may be using for your game info, or in the text formatting provided in this series! Just fill it out once and paste it in, or use it outside of any codes you may have, depending on preference! Font family will change based on your code, so if you're not putting it into another code you'll want to add one.

Footer #1

This footer uses basic text links for your entry navigation footers. Change #ddd for the border and #000 for the link color! You can separate each link with any symbol you like; I've used &bull; to denote separators in the demo. Use <br> to break links into multiple lines to avoid hanging symbols!


Footer #2

This footer uses flex to display simple block links for your entry navigation footers. Change #ddd for the background and #000 for the link color! Change width:100px; to widen your links!



JOURNAL NAVIGATION
These simple but effective game navigation codes will work on any journal page, no matter what your entry width is! They're built with flex, so you can rearrange links on the fly, and the individual link styles are extremely easy to edit to match your game coding. No font family is specified, so it will adapt to your journal layout to match.

Since these codes are meant to be viewed on your main journal page I've included an option for base HTML and CSS that you can add to your journal layout's CSS for no-clutter editing of your entry. (CSS-separated versions include :hover state functions.)

JOURNAL NAV #1

This navigation uses flex to display simple block links for your game navigation. Change #ddd for the background and #000 for the link color!



SELF-CONTAINED CODE


CSS & HTML


JOURNAL NAV #2

This footer also uses flex to display simple block links for your entry navigation footers. This is really just the same code as above except with a bottom border instead of a background color; I just wanted to show how easy it is to change the appearance of links. Change #ddd for the border and #000 for the link color!



SELF-CONTAINED CODE


CSS & HTML
GAME APPLICATION
After all the biography codes I've done over the years, I've never actually made game application templates before. Weird, I know!

This application code uses the fieldset tag to contain the application, and the legend tag for a character icon to make accepting and adding to cast lists quicker! Change #eee for heading borders and #ddd for container border. Change #000 and arial black for header text.

NAME HERE
AN EXTRA LINE

IN CHARACTER
FIELD. Info
FIELD. Info
FIELD. Info
FIELD. Info
FIELD. Info

FIELD. Nunc tempus enim vel velit gravida tempor. Phasellus efficitur nec elit venenatis placerat.

FIELD. Cras scelerisque ligula eget rutrum pretium. Maecenas ornare porttitor elit, eu tempor neque bibendum ac. Nam et eros in dolor gravida iaculis. Maecenas vitae arcu nulla. Integer vel finibus purus. Mauris eget varius nisl. In hac habitasse platea dictumst.

HISTORY
CANON HISTORY. Nunc tempus enim vel velit gravida tempor. Phasellus efficitur nec elit venenatis placerat. Cras scelerisque ligula eget rutrum pretium.

IN-GAME HISTORY. Maecenas ornare porttitor elit, eu tempor neque bibendum ac. Nam et eros in dolor gravida iaculis. Maecenas vitae arcu nulla. Integer vel finibus purus. Mauris eget varius nisl. In hac habitasse platea dictumst.

SAMPLES
FIELD. Sample Link
FIELD. Sample Link
FIELD. Sample Link

NAME. name TZ. time PB. pbname DISCORD. username#1234
AVAILABILITY. usual availability here


CAST LIST
There are so many cast lists available, and a lot of them can be pretty time consuming to edit. Sometimes you just want something simple and straightforward. This flex cast list allows for icon-sized pictures so you won't need to spend time editing larger images, and the container is a responsive width, so people on smaller screens should never need to side scroll. Edit #000 for text color!





NESTING EXAMPLE
In this example I am nesting three of the provided codes into the text formatting code. I have removed all lj-raw tags except for the outermost ones since only one set is needed. When nesting my header, I removed width:75%;max-width:700px;min-width:400px;margin:0 auto; and font-family:helvetica,arial,sans-serif; since the outer container already has widths and fonts specified.

Additionally, I removed max-width:900px;margin:0 auto;font-family:helvetica,arial,sans-serif; from the cast list code and ADDED margin:20px 0; to the cast list code's container just to give it a little room to breathe. I have also removed max-width:600px; from the post footer. ALL codes are inside of the text formatting code, one right after the other.





NOTES & COMMENTS
♥ All of these codes are usable within a journal entry without a cut. If you'd like to use them this way, I recommend removing any font or link styling (aside from font sizes) so that they match your journal layout.

♥ If you experience width issues for your inner content when nesting these codes inside of each other, I recommend removing width specs from the outer container of the code you're nesting into another container.

♥ If you're planning to use these in entries without a cut so that the content is viewable without clicking into the entry you can separate your CSS into your journal layout CSS like I've shown in the Journal Navigation section!

Comments

Jan. 29th, 2018 05:51 pm (UTC)
Absolutely! You're just going to want to set the specs from align-items:center; (which centers content heights on each line) to align-items:flex-start; (which aligns them to the top of each line) and you're good to go!
Jan. 30th, 2018 04:10 am (UTC)
Aha! Thank you so much; I'll credit you when I eventually convert the entire list to this code.