Currently working on: editing the html tmplate and bio box sections to make them a bit easier to find specific things and adding some basic tips for coding on forums.
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.
Coding my den boxes is very simple. The most you will need is a background color, text color, and border, so let's break those down individually as well as look at the style attribute so you can understand how each part works and then put it all together.
The style attribute lets you directly style an element as its name suggests. To do so all you have to do is add it. Let's use one of my den boxes as an example so you can see it in context.
<div class="bigBox" style="">TEXT HERE</div>
This is the Big Box on my Hover Box layout. If you look at the highlighted section, you can see the style attribute that I'm talking about. This attribute tells the browser any styling information that isn't already included in any of the CSS on your page. By adding that style="" bit to any element you can change all kinds of things about it, but we'll just focus on what you need.
The first thing you'll want is the background-color. I recommend setting it to a color that is already on the page or something at a similar value. So if the layout is dark, opt for a dark color for your boxes. This causes less text issues.
To begin, you'll need a basic understanding of the formatting of CSS, which goes property: value; including the semi-colon as that's what the browser uses as like commas in a worded list. You tell your friend you like blue, green, and purple, coders tell the page that they want background-color: pink; color: black; border: none; which will make more sense soon, so I'll give you an example using the same box from the previous section.
<div class="bigBox" style="background-color: #006600;">TEXT HERE</div>
I know that might look like a big jump, but let's break it down. background-color is the property we're wanting to change, and #006600 is the value, which matches the formatting mentioned earlier. Why does the value look different than before? Why isn't it a color? It actually is a color. That is a color written in what's called hex (stay with me here lol). You can find the hexcode for any color using most basic color-picking programs as well at the HTML Color Names page I linked in the Notable Resources box. It has valid color names that you can use as is without a hexcode and if you click Color Picker you can edit the color and it gives you the hexcode for that new color. Hexcodes will always be six digits for a solid color following a # symbol.
Putting these together tells the browser that you want the box to have a background that is #006600, which also happens to be the same dark green I use to highlight.
This one is a bit confusing if you're new to HTML and CSS, but the property to change the text color is just called color. I know, I don't like it either, but it's been that way so long that changing across the entirety of the web would be a nightmare. Let's say you want to change the text of something to be white. You could use either just white as the value or its hexcode which is #ffffff. Let me show you.
<div class="bigBox" style="background-color: #006600; color: #ffffff;">TEXT HERE</div>
Here you can see that just like before there's still that background-color property making the box dark green, but now there's also the color property telling the browser you want the text inside to be white. Hard to read black text on a dark green background, after all. If that seems super simple, awesome! That means this tutorial is doing its job. If not, just remember the formatting for this, property: value; that lets the browser know what you want to change and how you want to change it using the style attribute.
This one is slightly more complicated than the previous two properties. While background-color and color only typically take a single value, the border property is a shorthand property which means you can give it multiple values as long as they're in the correct order. Don't worry, though, because all we're going to be giving it is the width, style, and color of the border.
For the final part of the example, let's say you want a thin, solid border that's white. Simple enough, right? Exactly. Let me show you what that would look like.
<div class="bigBox" style="background-color: #006600; color: #ffffff; border: 1px solid #ffffff;">TEXT HERE</div>
You can see that in the border property it has a value of 1px solid #ffffff which means that the border will be 1px wide, solid in style, and #ffffff as in white in color. You want something different? Then all you'd need to do is swap it out! You want a pink box with a 4px thick dashed border and black borders and text?
<div class="bigBox" style="background-color: pink; color: black; border: 4px dashed black;">TEXT HERE</div>
Or maybe a black box with white text and no border?
<div class="bigBox" style="background-color: black; color: white; border: none;">TEXT HERE</div>
Like I said, as long as you follow the formatting, it's all just giving the browser a list of what you want. Once you've got the hang of it, any changes will be super easy to do. I've also linked in the Notable Reseources box the w3schools pages for the style attribute and border styles in case you still had any questions in regards to either. That website is a great resource for any HTML or CSS questions you might have.
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. I don't know any of y'all like that so you do not get the same privileges she does.
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.
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.
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.