About
Punny Side Up: Lioden Edition is a collection of free resources created by Pun (#139) to provide aesthetics in the form of den and shop CSS, forum HTML layouts and other neat little snippets. Everything provided here is 100% free to use anywhere on Lioden without the need to ask permission. You only need to follow these few simple rules:
- If a credit is required on that resource, leave the credit in tact.
- Premade resources provided here are only for use on Lioden.com.
- Please note that requests are not custom orders. I will do these as I want to.
That's it! Now that we have those out of the way, use the navigation expander in the top left corner of the page to browse everything that is available. Happy coding!
This website was not designed for mobile devices. Proceed on mobile at your own risk.
Den CSS
You may edit these as your heart desires, but do not remove the credit. All den and shop codes must include a link back to here. It is not required on caves as long as the credit is on your den.
Floral Series
Take Flight Series
Aquatic Series
Animal Kingdom Series
Television, Movie & Manga Inspired
Miscellaneous
Forum HTML
You may edit these as your heart desires, but do not remove the credit. All forum HTML layouts must include a link back to here.
Floral Series
Take Flight Series
Aquatic Series
Television, Movie & Manga Inspired
Miscellaneous
Code Snippets
You can edit these as your heart desires without restrictions. Code snippets do not require visual credit back, but if someone asks it would be nice of you to direct them to this page.
Advertising Snippets
Tutorials
Some of these (especially as you get further down the list) may seem a bit complicated if you're unfamiliar with HTML and/or CSS. Stick with me, though! I promise that I won't put anything too difficult in here. Take some of the examples, copy and paste them into your den or topic and mess around with them. I've found that most of the time people learn best by doing it themselves. Don't get frustrated! I believe in you! You CAN do everything here! <3
General HTML
Bolded Text
<b>Your text here.</b>
This would be displayed as:
Your text here.
Italicized Text
<i>Your text here.</i>
This would be displayed as:
Your text here.
Underlined Text
<u>Your text here.</u>
This would be displayed as:
Your text here.
Striked Out Text
<s>Your text here.</s>
This would be displayed as:
Your text here.
Image
<img src="IMAGE-URL">
This would be displayed as:
Text Link
Aligning Text/Images
<p align="center">Center</p>
This would be displayed as:
Center
<p align="left">Left</p>
This would be displayed as:
Left
<p align="right">Right</p>
This would be displayed as:
Right
Dividers
Some text<hr>Some more text.
This would be displayed as:
Some text
Some more text.
Making Lists
Unordered (Bullet)
<ul><li>An item</li><li>Another item</li><li>And another item</li></ul>
This would be displayed as:
- An item
- Another item
- And another item
Ordered (Number)
<ol><li>An item</li><li>Another item</li><li>And another item</li></ol>
This would be displayed as:
- An item
- Another item
- And another item
General Font CSS
Font Size
Font size is determined by a number. The larger the number, the larger the text will be.
<span style="font-size: 10px;">This is text.</span>
This would be displayed as:
This is text.<span style="font-size: 15px;">This is text.</span>
This would be displayed as:
This is text.<span style="font-size: 20px;">This is text.</span>
This would be displayed as:
This is text.Font Color
Font color can be determined by the color name or the hex "color" code (for examples, see this website). Each color name also has a hex code.
<span style="color: Red;">This is text.</span>
This would be displayed as:
This is text.<span style="color: #FF0000;">This is text.</span>
This would be displayed as:
This is text.Font Family
Font family is the "face" of the font. There are many different types (see this website for examples).
<span style="font-family: Avantgarde;">This is text.</span>
This would be displayed as:
This is text.<span style="font-family: Impact;">This is text.</span>
This would be displayed as:
This is text.Font Styles
Font style refers to how the text "stands out."
<span style="font-style: italic;">This is text.</span>
This would be displayed as:
This is text.<span style="font-weight: bold;">This is text.</span>
This would be displayed as:
This is text.<span style="text-transform: uppercase;">This is text.</span>
This would be displayed as:
This is text.<span style="font-variant: small-caps;">This is text.</span>
This would be displayed as:
This is text.Letter Spacing
Letter spacing determines how far apart each letter is.
<span style="letter-spacing: 1px;">This is text.</span>
This would be displayed as:
This is text.<span style="letter-spacing: 5px;">This is text.</span>
This would be displayed as:
This is text.Font Combos
Everything here can be combined into a condensed style if you want multiple features on the same text. Just separate each item with a semicolon (;).
<span style="font-style: italic; color: Red; font-size: 20px;">This is text.</span>
This would be displayed as:
This is text.<span style="font-weight: bold; font-variant: small-caps; font-family: Avantgarde; color: Orange; letter-spacing: 5px;">This is text.</span>
This would be displayed as:
This is text.Submit Request
To submit a request, head over to this lioden topic. I'm always open to taking ideas. Please note that a request is not a custom order. I may or may not end up completing them. I ask that you don't send me demanding messages. I do these for fun in my spare time and in the order than I'm inspired to.
All requests that I end up completing will be made available for free public use here.
Disclaimer
This website is in no way, shape or form an official part of Lioden. It is an unofficial fan/player created resource website that claims no rights to the Lioden game whatsoever. All Lioden related content is copyright Lioden Ltd.