Welcome to Charming, where swirling petticoats, the language of flowers, and old-fashioned duels are only the beginning of what is lying underneath…
After a magical attempt on her life in 1877, Queen Victoria launched a crusade against magic that, while tidied up by the Ministry of Magic, saw the Wizarding community exiled to Hogsmeade, previously little more than a crossroad near the Hogwarts School of Witchcraft and Wizardry. In the years that have passed since, Hogsmeade has suffered plagues, fires, and Victorian hypocrisy but is still standing firm.
Thethe year is now 1895. It’s time to join us and immerse yourself in scandal and drama interlaced with magic both light and dark.
Complete a thread started and set every month for twelve consecutive months. Each thread must have at least ten posts, and at least three must be your own.
Did You Know?
Did you know? Jewelry of jet was the haute jewelry of the Victorian era. — Fallin
This is where I'll be posting any codes (new or old!) for other people to use on Charming!
-
00 Month, 1888
— Mr/Mrs. Name Here —
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium commodo dui, quis placerat mi aliquet vitae. Morbi a suscipit nulla, et tincidunt justo. Donec in ultrices nisl. Pellentesque sagittis diam sit amet metus pellentesque euismod. Morbi at leo leo. Duis dapibus tempor ultricies. Vestibulum scelerisque nibh sit amet magna fermentum, vel interdum lacus interdum. Etiam volutpat suscipit ante, nec ultricies nisi. Sed egestas dignissim urna.
— Mr/Mrs. Name Here —
Show
Code:
<center><link href="https://fonts.googleapis.com/css?family=Italianno" rel="stylesheet">-<div style="background-repeat: repeat; background-image: url('https://image.ibb.co/jtfp9R/ricepaper_v3.png'); color: #625d48; width: 430px; padding: 20px; border: 10px solid #f4f0df; text-align: left; font-family: 'Italianno', cursive; font-size: 29px;"><div align="right">00 Month, 1888</div><center>— Mr/Mrs. Name Here —</center>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium commodo dui, quis placerat mi aliquet vitae. Morbi a suscipit nulla, et tincidunt justo. Donec in ultrices nisl. Pellentesque sagittis diam sit amet metus pellentesque euismod. Morbi at leo leo. Duis dapibus tempor ultricies. Vestibulum scelerisque nibh sit amet magna fermentum, vel interdum lacus interdum. Etiam volutpat suscipit ante, nec ultricies nisi. Sed egestas dignissim urna.
<center>— Mr/Mrs. Name Here —</center></div></center>
-
00 Month, 1888
— Mr/Mrs. Name Here —
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium commodo dui, quis placerat mi aliquet vitae. Morbi a suscipit nulla, et tincidunt justo. Donec in ultrices nisl. Pellentesque sagittis diam sit amet metus pellentesque euismod. Morbi at leo leo. Duis dapibus tempor ultricies. Vestibulum scelerisque nibh sit amet magna fermentum, vel interdum lacus interdum. Etiam volutpat suscipit ante, nec ultricies nisi. Sed egestas dignissim urna.
— Mr/Mrs. Name Here —
Show
Code:
<center><link href="https://fonts.googleapis.com/css?family=Rochester" rel="stylesheet">-<div style="background-repeat: repeat; background-image: url('https://image.ibb.co/kVHK9R/xv.png'); color: #686868; width: 430px; padding: 20px; border: 10px solid #f0f0f0; text-align: left; font-family: 'Rochester', cursive; font-size: 22px;"><div align="right">00 Month, 1888</div><center>— Mr/Mrs. Name Here —</center>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium commodo dui, quis placerat mi aliquet vitae. Morbi a suscipit nulla, et tincidunt justo. Donec in ultrices nisl. Pellentesque sagittis diam sit amet metus pellentesque euismod. Morbi at leo leo. Duis dapibus tempor ultricies. Vestibulum scelerisque nibh sit amet magna fermentum, vel interdum lacus interdum. Etiam volutpat suscipit ante, nec ultricies nisi. Sed egestas dignissim urna.
<center>— Mr/Mrs. Name Here —</center></div></center>
Below you will find the results of your Nastily Exhausting Wizarding Tests. Congratulations on completing your schooling, and good luck in your future endeavors.
Below you will find the results of your Nastily Exhausting Wizarding Tests. Congratulations on completing your schooling, and good luck in your future endeavors.
<center>
<table width="90%" style="text-transform: uppercase;">
<tr><td width="75%">Astronomy</td><td width="25%" align="right">Grade</td></tr>
<tr><td width="75%">Charms</td><td width="25%" align="right">Grade</td></tr>
<tr><td width="75%">Defence Against the Dark Arts</td><td width="25%" align="right">Grade</td></tr>
<tr><td width="75%">Herbology</td><td width="25%" align="right">Grade</td></tr>
<tr><td width="75%">History of Magic</td><td width="25%" align="right">Grade</td></tr>
<tr><td width="75%">Potions</td><td width="25%" align="right">Grade</td></tr>
<tr><td width="75%">Transfiguration</td><td width="25%" align="right">Grade</td></tr>
</table></center>
Yours sincerely,
Professor Meserimus Valendruis
</div></div></center>
ORDINARY WIZARDING LEVELS
Dear Mister/Miss _________,
Below you will find the results of your Ordinary Wizarding Levels. Consider your results carefully when choosing your classes for the next school term.
Below you will find the results of your Ordinary Wizarding Levels. Consider your results carefully when choosing your classes for the next school term.
<center>
<table width="90%" style="text-transform: uppercase;">
<tr><td width="75%">Astronomy</td><td width="25%" align="right">Grade</td></tr>
<tr><td width="75%">Charms</td><td width="25%" align="right">Grade</td></tr>
<tr><td width="75%">Defence Against the Dark Arts</td><td width="25%" align="right">Grade</td></tr>
<tr><td width="75%">Herbology</td><td width="25%" align="right">Grade</td></tr>
<tr><td width="75%">History of Magic</td><td width="25%" align="right">Grade</td></tr>
<tr><td width="75%">Potions</td><td width="25%" align="right">Grade</td></tr>
<tr><td width="75%">Transfiguration</td><td width="25%" align="right">Grade</td></tr>
</table></center>
Yours sincerely,
Professor Meserimus Valendruis
</div></div></center>
— MJ is MAGICAL —
April 22, 2018 – 7:54 PM
Last modified: August 7, 2020 – 11:42 PM by Edric Umbridge.
Head of the Department of Magical Accidents & Catastrophes; Member of the Wizengamot
42 year old Pureblood
5 ft. 9 in.
❤ Married
Played by Bree
547 Posts
323 Likes
I've been convinced to share how I do my posts, which basically changes the < b > tag into colored text without the need for editing each bold with the colors.
The code looks like this:
PHP Code:
<link href="https://dl.dropbox.com/s/64jiqehr4rchbgm/postlogscolorized.css?dl=0" rel="stylesheet"><div class="USERGROUPlog"> TEXT </div>
Each usegroup has their own "log" class that changes the color. Most of them align with the actual usergroup name:
There are certain usergroups (spirit, beast, portrait) that I haven't yet added because there are no played characters from those groups, but you can always poke me on skype when you need them! This is what they all look like:
Have you wanted to make a hover box but have no clue how to do the hover code? I have a pretty blank-slate hover code that you can personalize to your heart's content :P
It can be a circle or a square (or anything you can code??). There are a few things it always needs to work:
The width of the "niceboxy" div needs to be 20px less width and height than the div you put it inside. This is because the padding is 10px, while means it takes 10px on all sides (which equates to 20px height + width) to fit perfectly.
Backgrounds, heights, widths.
Customizable options:
border-radius: #px will make the corners rounder.
fonts, line-height (which makes more fit inside), basically anything from a normal div
margin-left: #px and margin-right: #px can separate the box from text if you're wanting to make it wrap. These would go on the outside div rather than the niceboxy one.
float: left or float: right will make it "float" (aka have text wrap around it) on whichever side you choose. This would go on the outside div rather than the niceboxy one.
If you want a background image for the outside div, use background-image:url('URLHERE') rather than the example code.
Code:
<link href="https://dl.dropbox.com/s/kk49gw9b5aupdn6/niceboxy.css?dl=0" rel="stylesheet"><div style="width: #px; height: #px; border-radius: #px; background: CAN BE IMAGE OR COLOR;"><div class="niceboxy" style="background: WHITE RECOMMENDED; width: 180px; height: #px; border-radius: #px;"></div></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet scelerisque est sit amet consectetur. Nam rutrum felis nibh, pharetra convallis nibh ultrices ac. Cras tristique sit amet risus nec bibendum. Pellentesque vestibulum leo a accumsan facilisis. Nunc a iaculis sem, in dapibus dolor. Donec ac orci ut dui rutrum sodales ac vitae sem. Nam sollicitudin urna nisl, eget scelerisque leo vestibulum eget. Duis pretium hendrerit nibh a egestas. Etiam sapien nibh, volutpat vehicula dui non, consectetur vehicula magna. Ut nec feugiat nisi.
Sed pulvinar sapien nec velit tempor pretium. Aenean turpis nulla, cursus sed metus eget, ultricies ultrices erat. Duis sagittis consectetur dui. Nulla vel laoreet lectus. Curabitur et felis gravida, aliquet eros eget, pretium ex. In molestie risus at congue luctus. Vivamus ut enim mauris. Vivamus accumsan nec augue sed condimentum. Nunc semper augue magna, vitae imperdiet ex ultricies ac. Nunc convallis purus varius mi vulputate vulputate. In et aliquet velit. Duis at lobortis augue. In eget eros tristique, fermentum turpis nec, dapibus erat. Cras suscipit ante ligula, vel ornare felis porta ut. Nullam nisi dui, maximus vel quam id, ultrices placerat est. Sed in imperdiet mi.
Vestibulum sit amet erat rhoncus, semper orci auctor, eleifend metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque at luctus nisl, et tempus ligula. In hac habitasse platea dictumst. Praesent convallis enim id diam dictum pretium. Mauris eu mi at tortor porta semper. Sed hendrerit lacus est, id vulputate ipsum bibendum a. Fusce vel tincidunt sem.
— Miss. Name Here —
Code:
<link href="https://fonts.googleapis.com/css?family=Mr+Bedfort" rel="stylesheet"><center><div style="min-height: 300px; color: #937948; text-align: left; font-size: 24px; padding: 5%; width: 70%; font-family: 'Mr Bedfort', cursive; background: linear-gradient(#ffeed8, #fce4b5);"><div align="right">May 11, 1888</div>
<center>— Mr. Name Here —</center>
Vestibulum sit amet erat rhoncus, semper orci auctor, eleifend metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque at luctus nisl, et tempus ligula. In hac habitasse platea dictumst. Praesent convallis enim id diam dictum pretium. Mauris eu mi at tortor porta semper. Sed hendrerit lacus est, id vulputate ipsum bibendum a. Fusce vel tincidunt sem.
<center>— Miss. Name Here —</center></div></center>
The two < br >s make it so it's not up against the text. The max-width: 90% makes it so it doesn't overflow on a number of devices, and the border color can be changed to whatever you'd like! So can the border radius; 0px is a complete rectangle.
<blockquote><div class="thead" style="padding: 10px;">First Last</div>
<center><span style="letter-spacing: 5px; font-size: 10px;"/>HOUSE ALUMNUS/ALUMNA/STUDENT ('##) | TRAIT | TRAIT</span></center>
<img src="ANY-SIZE-GIF-HERE" align="right" hspace="10" style="max-width: 35%;"/>PUT
YOUR
BLURB
HERE
OR
SUFFER
<div class="thead" style="padding: 10px;">1888</div>
<center><span style="letter-spacing: 5px; font-size: 10px;"/><b>CURRENT</b> | <font color="#b2b2b2">INCOMPLETE</font> | FINISHED</span></center>
<b>00.00.1800 | <a href="URL">Current Thread</a> | with Character Name</b>
00.00.1800 | <a href="URL">Finished Thread</a> | with Character Name
00.00.1800 | <a href="URL">Finished Letter Thread</a> | with Character Name, ✉
<b>00.00.1800 | <a href="URL">Current Letter Thread</a> | with Character Name, ✉</b>
<font color="#b2b2b2">00.00.1800 | <a href="URL">Dead Thread</a> | with Character Name</font>
<div class="thead" style="padding: 10px;">PRE-1888</div>
<center><span style="letter-spacing: 5px; font-size: 10px;"/><b>CURRENT</b> | <font color="#b2b2b2">INCOMPLETE</font> | FINISHED</span></center>
<b>00.00.1800 | <a href="URL">Current Thread</a> | with Character Name</b>
00.00.1800 | <a href="URL">Finished Thread</a> | with Character Name
00.00.1800 | <a href="URL">Current Letter Thread</a> | with Character Name, ✉
<b>00.00.1800 | <a href="URL">Current Letter Thread</a> | with Character Name, ✉</b>
<font color="#b2b2b2">00.00.1800 | <a href="URL">Dead Thread</a> | with Character Name</font>
</blockquote>
Head of the Department of Magical Accidents & Catastrophes; Member of the Wizengamot
42 year old Pureblood
5 ft. 9 in.
❤ Married
Played by Bree
547 Posts
323 Likes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor eros et est ullamcorper accumsan. Vestibulum fringilla magna quis metus convallis molestie. Integer ac odio lacinia magna venenatis ornare. Vivamus hendrerit porttitor elit vel malesuada. Praesent a lacinia sem, non dapibus magna. Curabitur iaculis nibh vel erat consectetur scelerisque. Sed pellentesque nisl sem, sed maximus justo lobortis et. Mauris condimentum quam eget mauris iaculis, nec auctor quam blandit. Nulla vulputate quam a maximus luctus.
Proin et imperdiet felis. Nulla orci justo, dapibus eu dui ut, dignissim aliquam erat. Etiam elementum urna est, sit amet tincidunt eros maximus commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin orci tortor, pharetra et lorem in, ultricies condimentum sem. Nunc mollis nibh ac purus sodales, a feugiat neque iaculis. Vivamus sit amet tristique ligula. Aliquam justo libero, lobortis sit amet congue id, efficitur vitae neque. In scelerisque, lacus in molestie tincidunt, dolor dui scelerisque arcu, non congue dui leo ac quam. Suspendisse at fringilla dui.
Nunc convallis interdum quam, eu tempor mauris consectetur pulvinar. Nulla felis erat, varius eu porttitor eget, imperdiet a ipsum. Maecenas tempor erat quis nisl egestas, id tempus libero lobortis. Praesent eu lacinia ante, facilisis ultricies tellus. Nam porta eget orci ac vehicula. Quisque dui leo, fringilla in commodo id, facilisis et dui. Sed molestie ornare magna. Phasellus finibus ut dolor vel consequat. Donec ullamcorper nulla vitae velit ultrices blandit. Suspendisse potenti. Proin congue malesuada justo id semper. Vestibulum eget augue metus. Nunc vitae viverra diam, vel dignissim nisi.
IT'S