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

(Anonymous)
Jan. 24th, 2018 01:41 am (UTC)
You? Are AMAZING. jsyk. 💗💗💗
Jan. 24th, 2018 01:44 am (UTC)
Awww, thank you so much anon! ♥ I'm SUPER EXCITED to finally have this all written and posted, haha.
Jan. 24th, 2018 02:51 am (UTC)
! Thank you so much! This is amazing!
Jan. 24th, 2018 05:35 am (UTC)
Hee, thank you! 💞 I'm so glad I finally got these all made and organized!
Jan. 24th, 2018 05:32 am (UTC)
A+++ post!
Jan. 24th, 2018 05:36 am (UTC)
Eee, ty ty! ❤
Jan. 24th, 2018 03:54 pm (UTC)
THANK YOU SO MUCH.
Jan. 24th, 2018 04:42 pm (UTC)
Aw, YOU'RE WELCOME! 💞
Jan. 24th, 2018 05:19 pm (UTC)
Oh man! This is exactly what I've needed! Thank you so much. You're incredible!
Jan. 24th, 2018 11:29 pm (UTC)
Aw, yay; I'm so glad it helps!! ♥
Jan. 25th, 2018 02:55 am (UTC)
Oh wow, this is FANTASTIC! Thank you so much!
Jan. 25th, 2018 03:11 am (UTC)
Aw, thank you! You're so welcome! ♥
Jan. 27th, 2018 01:24 am (UTC)
With the cast list, is it the <a> code that keeps each character contained? Because I tried taking it out for the period/fantasy PB icon list where I don't want everything linked and got, uh, this.
Jan. 27th, 2018 01:34 am (UTC)
It is! You're gonna want to replace the a with div instead and then you'll be able to link individual items inside of each character's block! This is the code you'll need for it to look exactly like I've done, except without the whole block being a link:

<div style="width:100px;margin:2%;">
<img src="ICONURL" style="height:100px;margin-bottom:5px;">
<b>NAME HERE</b><br>
(PB NAME)
</div>
Jan. 27th, 2018 02:01 am (UTC)
That did the trick, thank you! I shall keep playing around before converting the lists entirely - I've been so tired of manually moving the table rows and wanting to change to divs for ages.
Jan. 27th, 2018 02:04 am (UTC)
Np! ♥ Man, those table cast lists'll kill ya LOL. It's so easy to miss something and have everything go sideways.
Jan. 29th, 2018 12:29 pm (UTC)
Do you know of an inline way to make the blocks vertically align (specifically to the top) when their contents are different sizes? I Googled the heck out of it and just kept finding actual CSS, but alas, this being an icon post and thus under a cut, it's very much to be viewed as an entry rather than on the journal.
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.
Jan. 27th, 2018 11:59 pm (UTC)
All these codes make me SO happy.

Question (or maybe verification that my conclusion after all my searching last weekend was correct): I'm guessing a hover text option isn't available on a journal page, since you've specifically stated that it is included in the CSS versions on the navigation info above.

Basically I've got html codes for game info pages that I would dearly love to have a hover state option on, but my final conclusion was 'only possible where you can define css', which is what this seems to suggest. Is that accurate?
Jan. 28th, 2018 12:05 am (UTC)
Right! But if you're displaying them without an lj-cut so that it's viewable on the main journal page you could give the container an id or give the specific link a class so that you can add a hover function in your layout's CSS.

Something I like to do for games is set it to one entry per page, then I don't use lj-cuts on anything and I make sure everything is posted on a unique date; that way I can link to the posting date rather than the entry, and you can view it within the layout and everything stays styled (and you get more CSS options.)

Obviously, if someone clicked into the entry it would look different, but usually most games only need members to be able to access comments on contact/holds/stuff like that.

So that could be an option!
Jan. 28th, 2018 12:17 am (UTC)
I spent so much time trying to figure out if it was an option, lol, but I'm glad that I ended up with the right answer and not just missing something.

That's definitely a possibility. I like navigation links to link directly to the top of the div cause it's prettier, which is why I've had the ljcut cause it makes it easy, but now that I'm typing this out - you could probably use an anchor to do the same thing, couldn't you?
Jan. 28th, 2018 12:25 am (UTC)
You definitely could, yeah! Just use <a name="ANCHORNAME"></a> before your code or text content (don't wrap the code in it, just put it before it as is with the closing tag right next to the opening anchor tag), and then you'd just put #ANCHORNAME at the end of the link URL.
Jan. 28th, 2018 12:31 am (UTC)
I think this could be a workable option, thanks for the tip!
Feb. 17th, 2018 05:25 am (UTC)
Hi! Wondering if you can answer a few questions for me. I cobbled together a faux webpage for a character using the code provided here, but there are a few things that I can't work through:

1. I left the max-width at 900px and separated my page into two columns (the left just for info, the right using your cast list coding to create a faux shop area). If I leave the code as is, it becomes all overlapped and squished together when viewing on mobile or resizing the page, and my bottom three images don't fit the left hand column. If I set the left column's min-width to 300px to match the size of the top image I'm using, my bottom images fit, and the shop area will resize if I drag the window, but the problem that I have is it only appears properly (as two columns) in one of my browsers - everywhere else, it views as one column (the right column appearing under the left one). I'm not sure how to fix this, if I should change the max-width or what I should do. I tried playing around with it a little and experimenting but wasn't able to resolve.

2. I added a box for an OOC note on the bottom right side of the page, and I'm wondering if there's a way to anchor that div to the bottom of the container. I can't figure out how I might get the bottom of the OOC box to align with the bottom of the left hand column.

http://claudiacampbell.insanejournal.com/11869.html is the page that I'm working on. I'd appreciate any insight you may have! Thanks in advance for your time and for putting together these amazing resources.
May. 28th, 2018 01:49 am (UTC)
I'm taking the simple cast list and just tweaking it the font and such to fit my liking. Any specific way I can credit you?
May. 28th, 2018 02:16 am (UTC)
Aw, it's okay! This post is mostly just base templates, but if you want to add credit in you can do it any way you like! If you want one that sits at the bottom of the code you can use this inside of it after your icon links!

<a href="http://tessisamess.insanejournal.com/" style="color:#999;text-align:right;width:100%;text-decoration:none;">CODE BY</a>
Jul. 12th, 2018 03:24 pm (UTC)
So on Firefox, the image doesn't center on the application. Did I break something with the details tag?

Because I love the simplicity of these and need them! Here's a link.
Jul. 12th, 2018 04:26 pm (UTC)
This is... really weird. I had the same issue and nothing fixed it that made sense to try? So... this is kind of silly, but add this to the image coding: margin:0 205px; and it'll force the image to center by calculating the amount of space on either side of it and accounting for it.

If you change the width of the whole container, I did this to get the margin number: minus 20px from the whole width (since that's the legend padding) and then divide the remaining number in half; that'll be the margin on either side of the image.