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.
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.
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.
These BBCodes can be used throughout the whole website on all fields that support BBCode.
[b]Look ma, I'm bold![/b][i]Look pa, I'm slanted![/i][u]Look ma, I'm important![/u][s]Look pa, I'm dead![/s][left]I'm at the left[/left][center]I'm the center of attention![/center][right]I'm always right![/right][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][url="https://www.google.com/"]Google![/url][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][code][b]BOLD[/b][/code][b]BOLD[/b][list]
[*] Unordered List
[*] List Item
[list][*] Nested List Item[/list][/list][olist]
[*] Ordered List
[*] List Item
[olist][*] Nested List Item[/olist][/olist][h1]Header[/h1][h2]Header[/h2][h3]Header[/h3][h4]Header[/h4][h5]Header[/h5][h6]Header[/h6][p]Paragraph[/p]Paragraph
[hr][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]I have a feeling I'm being quoted...
I have that feeling too...
I'm being quoted again! D:
[size=20]I'm 20 pixels large![/size]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.
[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]
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.
[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. And this text goes to the right of it, as image left floats the image to the left as you'd expect.
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.
[imgcenter alt="This aisha is secretly dead inside" title="This is a happy aisha"]/images/pets/small_happy/aisha_red.gif[/imgcenter]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.
[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! Text to the left of the image, as the image is being floated to the right!
These BBCodes can only be used in pet lookup / pet pages.
[name][owner][gender][petcolour][species][level][fishing][jobs_completed][jobs_failed][strength][defence][movement][intelligence][area][activity][greeting]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'
[petimg]
[petimg flip]
[petimg type="defended"]
[petimg type="close" flip]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.
class - If you want to add classes with a different syntax.
id - If you want to add a unique ID to the div.
[div="classname anotherclassname"]Content[/div][div class="classname anotherclassname"]Content[/div][div class="bg-green-200 p-5 my-3 uppercase font-bold rounded-xl"]Content[/div][div class="myclass"]Content[/div].myclass{
background: rgba(255, 0, 0, 0.5);
font-size: 20px;
border-radius: 20px;
overflow: hidden;
padding: 10px;
margin: 10px;
}[div class="myclass" id="pancakes"]PANCAKES[/div][url=#pancakes]Go to pancakes[/url]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.
Join us on Discord!