Moderneopets

Create Account

Signup Applications are closed!

We need to do some improvements on our end for managing the site to the best of our capability, and we will be focusing on that, to that end we are not currently taking new users for the foreseeable future.

BBCode & CSS Guide

BBCode & CSS Guide

Since we use a different system than what most Neopians are used too, we'll be listing the available codes to use and give examples of HTML vs BBCode in situations where you might have used to use HTML.

CSS / Styling

On Moderneopets we seperate the descriptions/bbcode and the styling/css for security reasons. This also makes it easier to organise your codes (and gives you more character space overall!). This change means you no longer need to put your CSS in style tags!

In the future we plan on allowing LESS support for your lookups/pet pages/shops - allowing you to structure your CSS in a more managable and readable way, at the cost of loading speeds for said pages.

As we use the Tailwind CSS Framework for a lot of our website - so can you! Tailwind has hundreds of pre-made CSS classes that allows you to style your divs purely by class names alone. Though it is still possible to give your divs a custom class and style them via CSS yourself.

BBCodes - General

These BBCodes can be used throughout the whole website on all fields that support BBCode.

Bold

Code:[b]Look ma, I'm bold![/b]
Look ma, I'm bold!

Italics

Code:[i]Look pa, I'm slanted![/i]
Look pa, I'm slanted!

Underlined

Code:[u]Look ma, I'm important![/u]
Look ma, I'm important!

Strike Through

Code:[s]Look pa, I'm dead![/s]
Look pa, I'm dead!

Left

Code:[left]I'm at the left[/left]
I'm at the left

Center

Code:[center]I'm the center of attention![/center]
I'm the center of attention!

Right

Code:[right]I'm always right![/right]
I'm always right!

Justify

Code:[justify]My actions are justified, my purpose is clear. I am here to make sure the text spans the whole width of the container, even if it means leaving larger spaces between the words![/justify]
My actions are justified, my purpose is clear. I am here to make sure the text spans the whole width of the container, even if it means leaving larger spaces between the words!

URL

Code:[url="https://www.google.com/"]Google![/url]
Google!

Colour / Color

Code:[color=red]I'm Red![/color] [colour=#0000FF]I'm Blue (Hex)[/colour][color="rgba(0, 0, 0, 0.5)"] I'm semi transparent black![/color]
I'm Red! I'm Blue (Hex) I'm semi transparent black!

Code

Code:[code][b]BOLD[/b][/code]
Code:[b]BOLD[/b]

List

Code:[list]
[*] Unordered List
[*] List Item
[list][*] Nested List Item[/list][/list]

  • Unordered List
  • List Item
    • Nested List Item

Numbered List

Code:[olist]
[*] Ordered List
[*] List Item
[olist][*] Nested List Item[/olist][/olist]

  1. Ordered List
  2. List Item
    1. Nested List Item

Headers

Code:[h1]Header[/h1][h2]Header[/h2][h3]Header[/h3][h4]Header[/h4][h5]Header[/h5][h6]Header[/h6]

Header

Header

Header

Header

Header
Header

Paragraph

Code:[p]Paragraph[/p]

Paragraph

Horizontal Rule

Code:[hr]

Quote

Code:[quote=User]I have a feeling I'm being quoted...[/quote] [quote="User With Spaces Or Special Characters"]I have that feeling too...[/quote] [q=User]I'm being quoted again! D:[/q]
User
I have a feeling I'm being quoted...
User With Spaces Or Special Characters
I have that feeling too...
User
I'm being quoted again! D:

Font Size

Maximum Size: 50
Code:[size=20]I'm 20 pixels large![/size]
I'm 20 pixels large!

Image

Optional Parameters:

alt - This is the text displayed on a failed image load.

title - This is the text displayed on mouse hover.

height - The desired height of the image.

width - The desired width of the image.

Code:[img]/images/pets/small_happy/aisha_red.gif[/img]

[img alt="This is a happy aisha"]/images/pets/small_happy/aisha_red.gif[/img]

[img title="This is a happy aisha"]/images/pets/small_happy/aisha_red.gif[/img]

[img alt="This aisha is secretly dead inside" title="This is a happy aisha"]/images/pets/small_happy/aisha_red.gif[/img]
This is a happy aisha This aisha is secretly dead inside

Image Left

Optional Parameters:

alt - This is the text displayed on a failed image load.

title - This is the text displayed on mouse hover.

height - The desired height of the image.

width - The desired width of the image.

Code:[imgleft alt="This aisha is secretly dead inside" title="This is a happy aisha"]/images/pets/small_happy/aisha_red.gif[/imgleft] And this text goes to the right of it, as image left floats the image to the left as you'd expect.
This aisha is secretly dead inside And this text goes to the right of it, as image left floats the image to the left as you'd expect.

Image Center

Optional Parameters:

alt - This is the text displayed on a failed image load.

title - This is the text displayed on mouse hover.

height - The desired height of the image.

width - The desired width of the image.

Code:[imgcenter alt="This aisha is secretly dead inside" title="This is a happy aisha"]/images/pets/small_happy/aisha_red.gif[/imgcenter]
This aisha is secretly dead inside

Image Right

Optional Parameters:

alt - This is the text displayed on a failed image load.

title - This is the text displayed on mouse hover.

height - The desired height of the image.

width - The desired width of the image.

Code:[imgright alt="This aisha is secretly dead inside" title="This is a happy aisha"]/images/pets/small_happy/aisha_red.gif[/imgright] Text to the left of the image, as the image is being floated to the right!
This aisha is secretly dead inside Text to the left of the image, as the image is being floated to the right!

BBCodes - Pet Lookup / Pet Pages

These BBCodes can only be used in pet lookup / pet pages.

Pet Name

Code:[name]

Owner Name

Code:[owner]

Pet Gender

Code:[gender]

Pet Colour

Code:[petcolour]

Species

Code:[species]

Level

Code:[level]

Fishing

Code:[fishing]

Faerie Agency Jobs Completed

Code:[jobs_completed]

Faerie Agency Jobs Failed

Code:[jobs_failed]

Strength Flavour Text

Code:[strength]

Defence Flavour Text

Code:[defence]

Movement Flavour Text

Code:[movement]

Intelligence Flavour Text

Code:[intelligence]

Pet's Area

Code:[area]

Pet's Activity

Code:[activity]

Pet's Greeting

Code:[greeting]

Pet Image

Optional Parameters:

flip - Should the image be horizontally flipped?

type - Type of pet image to load (available options below)

Accepted Values - 'angry', 'beaten', 'circle', 'close', 'defended', 'happy', 'hit', 'ranged', 'sad', 'small_happy', 'small_sad'

Code:[petimg]

[petimg flip]

[petimg type="defended"]

[petimg type="close" flip]

BBCodes - All Except Boards & NeoMail

These BBCodes can only be used in pages where you can customize the content "fully". Examples are your shop, gallery, user lookup and pet pages/lookups.

DIV Container

Optional Parameters:

class - If you want to add classes with a different syntax.

id - If you want to add a unique ID to the div.

Code:[div="classname anotherclassname"]Content[/div]
Content
---

Using Class Param

Code:[div class="classname anotherclassname"]Content[/div]
Content
---

Using Tailwind Classes

Code:[div class="bg-green-200 p-5 my-3 uppercase font-bold rounded-xl"]Content[/div]
Content
---

Using Custom Classes

Code:[div class="myclass"]Content[/div]

In CSS box:

Code:.myclass{
background: rgba(255, 0, 0, 0.5);
font-size: 20px;
border-radius: 20px;
overflow: hidden;
padding: 10px;
margin: 10px;
}
Content
---

Using Unique ID's

Code:[div class="myclass" id="pancakes"]PANCAKES[/div]
PANCAKES
(This will allow what's known as "Anchor Links", which CSS savvy people can use for neat things such as navigation tabs for profiles!) For an example of an anchor link using our BBCode system, scroll down to the bottom of the page!



































































































Code:[url=#pancakes]Go to pancakes[/url]
Go to pancakes

BBCodes - Image Maps

Image maps allow you to create clickable areas on an image, where different parts of the image link to different URLs. This is perfect for creating interactive navigation images, custom buttons, or graphics with small easter eggs in! You can combine it with the anchor tags (shown above) to have a cool custom tabbing navigation in threads and petpages etc!

Basic Image Map Syntax

Code:[imagemap]https://www.moderneopets.com/images/misc/imagemapexample.png
[poly href="https://www.image-map.net/" title="Poly -- Image Map Helper"]195,104,175,147,130,158,162,181,141,226,186,194,246,229,222,168,263,134,211,140[/poly]
[rect href="https://www.moderneopets.com/boards" title="Rect -- Boards"]153,13,272,73[/rect]
[circle href="https://www.moderneopets.com/help/bbcode" title="Circle -- BBCode Help"]54,71,53[/circle]
[/imagemap]
/images/misc/imagemapexample.png



 Image map

Using Online Image Map Tools

The easiest way to create image maps is using online tools like image-map.net. Here's how:

Step 1: Generate your image map
  1. Go to image-map.net
  2. Upload your image or enter your image URL
  3. Use the tools to draw rectangles, circles, or polygons on your image
  4. Set the URL and title for each area
  5. Click "Show me the code!"
Step 2: Convert the HTML to BBCode

You'll get HTML code like this:

Code:<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://www.moderneopets.com/images/misc/imagemapexample.png" usemap="#image-map">

<map name="image-map">
<area target="" alt="Circle -- BBCode Help" title="Circle -- BBCode Help" href="https://www.moderneopets.com/help/bbcode" coords="54,71,53" shape="circle">
<area target="" alt="Rect -- Boards" title="Rect -- Boards" href="https://www.moderneopets.com/boards" coords="153,13,272,73" shape="rect">
<area target="" alt="Poly -- Image Map Helper" title="Poly -- Image Map Helper" href="https://www.image-map.net/" coords="195,104,175,147,130,158,162,181,141,226,186,194,246,229,222,168,263,134,211,140" shape="poly">
</map>
Step 3: Convert to BBCode format

Convert each <area> tag to BBCode:

Code:<area target="" alt="Circle -- BBCode Help" title="Circle -- BBCode Help" href="https://www.moderneopets.com/help/bbcode" coords="54,71,53" shape="circle">
  • target="" -- CAN BE IGNORED
  • alt="" -- CAN BE IGNORED
  • title="Circle -- BBCode Help" -- Stays the same, acts as an argument inside of the opening tag
  • href="https://www.moderneopets.com/help/bbcode" -- Stays the same, acts as an argument inside the opening tag
  • coords="54,71,53" -- Take the contents between the quotation marks and put it in-between the BBCodes ([circle]54,71,53[/circle])
  • shape="circle" -- This would be the BBCode tag (eg [circle][/circle])
You could work your way backwards:
Take the shape and make it the bbcode:
Code:[circle][/circle]
Take the co-ords and stick them between:
Code:[circle]54,71,53[/circle]
Take the href and paste it inside the [circle] with a space after circle:
Code:[circle href="https://www.moderneopets.com/help/bbcode"]54,71,53[/circle]
Take the title and put it after the href:
Code:[circle href="https://www.moderneopets.com/help/bbcode" title="Circle -- BBCode Help"]54,71,53[/circle]
And there you have it!

Area Types

Rectangle Areas
Code:[rect href="https://example.com" title="Rectangle Area"]x1,y1,x2,y2[/rect]

Defines a rectangular area. Coordinates: top-left (x1,y1) and bottom-right (x2,y2)

Circle Areas
Code:[circle href="https://example.com" title="Circle Area"]center_x,center_y,radius[/circle]

Defines a circular area. Coordinates: center (center_x,center_y) and radius

Polygon Areas
Code:[poly href="https://example.com" title="Polygon Area"]x1,y1,x2,y2,x3,y3,x4,y4[/poly]

Defines a polygonal area. List all corner points in order

Complete Example

Code:[imagemap]https://www.moderneopets.com/images/misc/imagemapexample.png
[poly href="Poly -- Image Map Helper" title="Poly -- Image Map Helper"]195,104,175,147,130,158,162,181,141,226,186,194,246,229,222,168,263,134,211,140[/poly]
[rect href="https://www.moderneopets.com/boards" title="Rect -- Boards"]153,13,272,73[/rect]
[circle href="https://www.moderneopets.com/help/bbcode" title="Circle -- BBCode Help"]54,71,53[/circle]
[/imagemap]

Create Account

Signup Applications are closed!

We need to do some improvements on our end for managing the site to the best of our capability, and we will be focusing on that, to that end we are not currently taking new users for the foreseeable future.

Discord Join us on Discord!