Punny Side Up
  Lioden Edition  

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:

  1. If a credit is required on that resource, leave the credit in tact.
  2. Premade resources provided here are only for use on Lioden.com.
  3. 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

Pink Magnolias

  Den Code:

  Cave URL:

  Branch Code:

Floral Arrangement

  Den Code:

  Cave URL:

  Branch Code:

Spring Fresh

  Den Code:

  Cave URL:

  Branch Code:

Take Flight Series

Beauty in Everything

  Den Code:

  Cave URL:

  Branch Code:

Aquatic Series

Sea Turtle

  Den Code:

  Cave URL:

  Branch Code:

Animal Kingdom Series

Monochromatic Lion

  Den Code:

  Cave URL:

  Branch Code:

Television, Movie & Manga Inspired

Seven Deadly Sins

  Den Code:

  Cave URL:

  Branch Code:

Winnie the Pooh

  Den Code:

  Cave URL:

  Branch Code:

Bungo Stray Dogs

  Den Code:

  Cave URL:

  Branch Code:

Miscellaneous

Enter the Cosmos

  Den Code:

  Cave URL:

  Branch Code:

Pride: Equalizer

  Den Code:

  Cave URL:

  Branch Code:

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

Pink Magnolias

  Forum Code:

Floral Arrangement

  Forum Code:

Spring Fresh

  Forum Code:

Take Flight Series

Beauty in Everything

  Forum Code:

Aquatic Series

Sea Turtle

  Forum Code:

Television, Movie & Manga Inspired

Seven Deadly Sins

  Forum Code:

Miscellaneous

Enter the Cosmos

  Forum Code:

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

Text Overlay (Photo)

  Forum Code (Lion Facing Left):

  Forum Code (Lion Facing Right):

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
<a href="URL">Text</a>

This would be displayed as:

Text

Image Link
<a href="URL"><img src="IMAGE-URL"></a>

This would be displayed as:

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:

  1. An item
  2. Another item
  3. 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.

©     PUN (#139)