Tutorials

This is the page where I keep some basic tutorials and additional information relating to other resources I have on this site. Each section will have a 'Notable Resources' section that will link to pages with supplemental information that I recommend looking into. Not all of it is information that you will strictly need, but can give a lot of extra context to help you get more comfortable with coding or interacting with code. Above all else, I recommend either taking or watching a crash course on basic HTML and CSS before trying to code on Lioden just to get yourself more familiar. I found that was a great jumping off point myself when I started coding on LD years ago.

Den Boxes

The den boxes found on my free CSS page are already styled to work with the default night layout, but if you're here I'm guessing you have either a free or custom layout currently applied to your page, so you'll still want to add additional style information such as the background color, text color, and borders yourself to make it match the rest of your page. There's already placeholder information for the background and border colors included, but you can easily add more style information by adding more CSS properties to the style attribute.

For example, if you wanted to change the default borders, you would add something like border: 1px solid #333 onto the style information. You can do the same with anything else you want to change about the boxes. You could also take the file that I have the default code in and duplicate and edit however you'd like if you'd rather make changes with CSS as opposed to in the HTML. I recommend this if you are already familiar with CSS as it will make it much easier to make quick changes. I find that CSS files are easier to read from than the style attribute on an html element since—depending on what software you're coding in— there's usually better spacing between the CSS properties.

HTML Templates

Do you want to make your own custom HTML template for a thread? Then this is the section for you! I will be including the base template I use for all of my free ones that you are welcome to edit as much as you like. I just ask that the credit section that links to my page remain intact as I am the one who coded the base you're editing. By extension, I'd rather the base not be used for commissions or remixed into any further free HTML as I don't want anyone selling or distributing anything with my name on it but me or specifically my bestie because I let her do whatever she wants all the time.

When it comes to choosing a background image, it is much different from choosing an image for a CSS layout. In this case, smaller is better. What you'll want for the best results I've found is a small, smoothly repeatable image. I find that the best places to find those are through fabric websites (I like to look at cotton fabrics since they usually have a super wide array of options) and pattern generaters. Since you shouldn't be using these for commissions, there's less to worry about when it comes to things like copyright, but I still avoid copyrighted material as a rule of thumb. Simple repeating patterns with only one or two main colors are typically the easiest to work with. From there, you'll just need to screenshot the portion you want repeated, resize it down a bit if necessary, host it somewhere, and then it's ready to be linked as your background image.

That's really the toughest part of making a template. The rest is just the repetitive process of replacing any of the colors, fonts, and borders with what you want, which becomes easier and easier the more practice you get.

Although, it's also important to keep in mind how fonts work on Lioden forums. You can't import any fonts onto your threads, so your best bet is to stick to what are called Web Safe Fonts. But choosing a web safe font still doesn't guarantee it'll work for everyone who views your thread. For example, Brush Script MT is a gorgeous font and works great on my home computer, but on my phone and chromebook, Brush Script MT isn't supported. That's why backup fonts are so important. In the event that someone viewing your thread isn't on a browser that supports the first font you pick, you should always list one or two and end it with a generic font-family such as serif or sans-serif. After all, your thread with Brush Script MT headers would give off an entirely different vibe to someone who the only cursive font their browser supports is Comic Sans (which is the case on my chromebook). Basically, just always have a second and third favorite in mind and add them on there just to be safe. The people who view your threads will be grateful for the extra work.

Bio Boxes

I've also got this code for if you wanna spice up the bio for one of your lions. You can see an example of it on a lot of my recent kings. I don't recommend changing the width as I set it the way I did so it would display nicely on phones. Aside from that, I encourage you to play around with it.

Miscellaneous Tips

This section is under contruction! Thank you very much for your patience.

If you have any questions about any of the previous sections or anything you'd like included somewhere on this tutorial page, feel free to message me or leave a response on the thread. As long as I am not on a break/hiatus, I should hopefully be able to get back to you within a day or two.