ethel turner codes

03 January 2026 @ 11:07 pm

I'm trying to get back into reading again and I know a lot of people here are big readers so I thought I'd share this code that I've made to track books read in a year. Very easy to modify in terms of colour and widths etc. Let me know if you need any help though!

<div style="width:100%;background-color:#fff;text-align: center; font-family: verdana, sans-serif; font-size: 40px;padding:10px;">BOOKS READ IN 2026</div>

<div style="width:100%;background-color:#fff; text-align: right; font-family: verdana, sans-serif; font-size: 15px;padding:5px;">☆ = Did Not Finish
★ = Don't know why I read it
★★ = Eh it was okay
★★★ = Enjoyed it but nothing to write home about
★★★★ = Enjoyable, glad I read it
★★★★★ = Highly recommend, will def reread at some point
</div>

<div style="width:20%;background-color:#fff;"><img src="BOOK COVER HERE" width="100%"></div> 
<div style="width:20%;background-color:#fff;padding:10px;"><b>Title</b> 
<b>Author</b>

<b>Rating</b>

<i>brief review etc here</i>

</div>

<div style="width:20%;background-color:#fff;"><img src="BOOK COVER HERE" width="100%"></div> 
<div style="width:20%;background-color:#fff;padding:10px;"><b>Title</b> 
<b>Author</b>

<b>Rating</b>

<i>brief review etc here</i>

</div>

Tags: code: media tracker

Leave a comment

24 May 2025 @ 02:18 pm

Character Concept Document

I've had in mind to make something like this for awhile now. You can see a version I've put together for an idea of how it looks like when its completed

You should be able to make a copy of the blank document to use if you wish.

Tags: resource: character concept doc, resource: google docs

Leave a comment

10 May 2024 @ 10:13 am

CR Chart: Gotta Catch 'Em All

Please find a matching cr chart to this character roster.

( code & instructions etc )

Tags: code: cr chart

Leave a comment

02 January 2023 @ 12:51 am

Repost: Journal Code - Twitter circa 2013

So I coded this years ago, but as you might have guessed I'm moving all my codes over to this journal to make it easier (mostly for me) to find things. I was actually fairly proud of this even though its a super old twitter layout.

Large Preview

<table align="center" width="800px" background="http://i.imgur.com/YX5QJrx.png"><tr valign="top"><td><table align="center" width="700px" bgcolor="#C0DEED" cellspacing="5px"><tr valign="top"><td><table width="200px"><tr><td bgcolor="#ffffff" width="200px"><font face="verdana" size="2px">TWEETS</font></td></tr>
<tr><td bgcolor="#EDEDED"><font face="verdana" size="2px">Following</font></td></tr>
<tr><td bgcolor="#EDEDED"><font face="verdana" size="2px">Followers</font></td></tr>
<tr><td bgcolor="#EDEDED"><font face="verdana" size="2px">Favorites</font></td></tr>
<tr><td bgcolor="#EDEDED"><font face="verdana" size="2px">Lists</font></td></tr></table>

<table width="200px" bgcolor="#ffffff"><tr valign="top"><td><font face="verdana" size="1px">Who to follow</font> <font face="verdana" size="1px" color="#0084B4">Refresh  View All</font>

<table><tr valign="top"><td><img src="img" width="30px" height="30px"></td><td><font face="verdana" size="1px"><b>Name</b> @username
Similar to <a href=LINK><font color="#0084B4" size="1px">Name</font></a>
<a href="http://www.insanejournal.com/friends/add.bml?user=JOURNALNAME"><font color="#0084B4" size="1px">Follow</font></a></td></tr>
<tr valign="top"><td><img src="img" width="30px" height="30px"></td><td><b>Name</b> @username
Similar to <a href=LINK><font color="#0084B4">Name</font></a>
<a href="http://www.insanejournal.com/friends/add.bml?user=JOURNALNAME"><font color="#0084B4">Follow</font></a></td></tr></table>

<font color="#0084B4" size="1px" face="verdana">Browse Categories  Find Friends</font></td></tr></table>

<table width="200px" bgcolor="#ffffff"><tr valign="top"><td><font size="1px" face="verdana">Worldwide Trends</font> <font size="1px" face="verdana" color="#0084b4">Change

#trend
#trend
#trend
trend
#trend
trend
#trend
#trend
#trend</td></tr></table>

</td><td width="500px"><table width="400px" align="center"><tr background="http://i.imgur.com/6zTyL7A.png"><td colspan="3"><center>
<img src="img" width="50px" height="50px" style="border-color:#ffffff;border:10px;">

<font color="#ffffff" size="3px" face="verdana"><b>Name</b>
@username</font>

<font color="#ffffff" size="2px" face="verdana">About
Location Website</font>

</td></tr>
<tr bgcolor="#ffffff"><td cellpadding="5px"><font face="verdana" size="2px">18,831</font>
<font face="verdana" size="2px" color="#cccccc">TWEETS</font></td><td cellpadding="5px"><font face="verdana" size="2px">108</font>
<font face="verdana" size="2px" color="#cccccc">FOLLOWING</font></td><td valign="middle"><font face="verdana" size="2px">108</font>
<font face="verdana" size="2px" color="#cccccc">FOLLOWERS</font> <img src="http://www.theladyunicorn.net/dmbutton.png" align="right"></td>
</table>

<table bgcolor="#ffffff" cellpadding="5px" width="400px" align="center"><tr><td><font size="3" face="verdana"><b>Tweets</b></font></td></tr>

<td><font size="2" face="helvetica" color="#333333"><b><font color="#2277BB">Character Username</font></b> @<font color="#2277BB">character tweet is to</font> Tweet message goes here. <font color="#2277BB">#tags</font></font>
<font size="1" face="verdana" color="#999999">3 hours ago</font></td></tr>

<td><font size="2" face="helvetica" color="#333333"><img src="http://i24.photobucket.com/albums/c20/Sandroalexander/again-3.png" style="vertical-align: bottom;"> <b><font color="#2277BB">twittername</font></b> Dear @<font color="#2277BB">username2</font>,tweet goes here. <font color="#2277BB">#hashtag</font></font>
<font size="1" face="verdana" color="#999999">3 hours ago<br />Retweeted by twitter name</font></td></tr></table>

</td></tr></table>

The images that are the uploaded ones (twitpic etc) are 60x60
Who to follow icons are 30x30
Tweet icons are 48x48. Thanks to

chaperon for the original coding for the tweets. That code is from here

Tags: code: social media

Leave a comment

02 January 2023 @ 12:49 am

Repost: Character Roster - Rounded

I made this ages ago for a character roster but never did much with it.

You can write whatever you want her. Perhaps a mini bio or even their name, journal, game details, canon point, relationship status and quotes. The more you write the more it curves around the image.

You could even use it for OOC contact, bio, character roster. It really is quite versitle :)

You can see two examples here (one character per row) and here (two characters per row)

Tags: code: character roster

Leave a comment

02 January 2023 @ 12:47 am

Repost: Character Bio - Bubbles

Originally posted at

abeautifulmind

<table align="center" width="800px" bgcolor="#ffff00" colspan="100px" style="border-radius: 40px"><tr><td colspan="2" bgcolor="#990000" style="border-radius: 40px"><center><font face="impact" size="+5" color="#ffff00">CHARACTER NAME</font></td></tr>

<tr><td bgcolor="#990000" width="400px" style="border-radius: 40px"><font face="impact" size="+3" color="#fff">Facts</font>
<font face="verdana" color="#fff"><b>Name:</b>
<b>Age:</b>
<b>Gender:</b>
<b>Orientation:</b>
<b>Hometown:</b>

<b>Height:</b>
<b>Weight:</b>
<b>Hair:</b>
<b>Eyes:</b></td>

</tr>

<tr><td colspan="2" bgcolor="#990000" style="border-radius: 40px"><font face="Impact" size="+3" color="#fff">History</font>

<blockquote><font face="verdana" color="#fff">History goes here</font>

</td></tr>
<tr><td colspan="2" bgcolor="#990000" style="border-radius: 40px">
<center><img src="http://www.insanejournal.com/userpic/20389844/960118" style="-moz-border-radius: 50px; -webkit-border-radius: 50px; height:50px; width:50px;">  <img src="http://www.insanejournal.com/userpic/20389844/960118" style="-moz-border-radius: 50px; -webkit-border-radius: 50px; height:50px; width:50px;">  <img src="http://www.insanejournal.com/userpic/20389844/960118" style="-moz-border-radius: 50px; -webkit-border-radius: 50px; height:50px; width:50px;">  <img src="http://www.insanejournal.com/userpic/20389844/960118" style="-moz-border-radius: 50px; -webkit-border-radius: 50px; width:50px; height:50px;">  <img src="http://www.insanejournal.com/userpic/20389844/960118" style="-moz-border-radius: 50px; -webkit-border-radius: 50px; height:50px; width:50px;">
<hr></td></tr>

<tr><td colspan="2" bgcolor="#990000" style="border-radius: 40px"><font face="Impact" size="+3" color="#fff">Personality</font>

<blockquote><font face="verdana" color="#fff">Personality goes here</font></td></tr>

<tr><td colspan="2" bgcolor="#990000" style="border-radius: 40px"><font face="verdana" color="#fff"><center><b>Name</b> ♥ <b>AIM</b> ♥ <b>Timezone</b> ♥ <b>CDJ</b> ♥ <b>Email</b> ♥ <b>PB</b></tr></table>

Please make sure to credit

cymbeline thanks!

Tags: code: character bio

Leave a comment

02 January 2023 @ 12:46 am

Repost: Character Bio - Simple

Moved from

abeautifulmind

Static Preview
Live: here

Code

<table align="center" width="700px" border="1px" cellpadding="10px" cellspacing="3px" bgcolor="#000000"><tr bgcolor="#ffffff"><td colspan="2"><div align="justify"><span style="font-size: 12px; line-height: 120%; letter-spacing: 0px; font-family: arial; color: #999999;"><center><span style="font-size: 40px;  letter-spacing: -2px; font-family: arial; color: #cccccc;">CHARACTER NAME</span><br><span style="font-size: 30px; font-family: georgia;">CHARACTER NAME</span></span></div></center></td></tr>
<tr valign="top"><td width="200px" bgcolor="#ffffff"><b>Name:</b> 
<b>Age:</b> 
<b>DOB:</b> 
<b>Location:</b> 
<b>Occupation:</b> 
<b>Mother:</b> 
<b>Father:</b> 
<b>Siblings:</b> </td><td><img src=GIF GOES HERE></td></tr>

<tr><td colspan="2" bgcolor="#ffffff"><div align="justify"><span style="font-size: 12px; line-height: 120%; letter-spacing: 0px; font-family: arial; color: #999999;"><center><span style="font-size: 30px; font-family: georgia;">APPEARANCE</span></span></div></center>

Appearance goes here

PB: PB Name</td></tr>  
<tr><td colspan="2" bgcolor="#ffffff"><div align="justify"><span style="font-size: 12px; line-height: 120%; letter-spacing: 0px; font-family: arial; color: #999999;"><center><br><span style="font-size: 30px; font-family: georgia;">HISTORY</span></span></div></center>

History goes here

</td></tr>
<tr><td colspan="2" bgcolor="#ffffff"><div align="justify"><span style="font-size: 12px; line-height: 120%; letter-spacing: 0px; font-family: arial; color: #999999;"><center><span style="font-size: 30px; font-family: georgia;">PERSONALITY</span></span></div></center>
 
Personality goes here.

</td></tr>
</table>

Tags: code: character bio

Leave a comment

02 January 2023 @ 12:45 am

Repost: Character Profile - Fake Scribbld Page

So this was born out of liking the layouts for Scribbld but being too lazy to constantly go over there and use it, plus I like having the bio on IJ as it is.

Large Preview
Live Preview:

dancinglouisa

Code

<table align="center" background="http://i303.photobucket.com/albums/nn127/immortalaussie/Patterns/006d.png" cellspacing="5px" width="800px"><tr valign="top"><td rowspan="2"><table width="260px" height="310px" border="3px" cellpadding="3px" rowspan="2" bgcolor="#fff"><tr><td><center><img src="IMG" width="250px" height="300px"></td></tr></table></td><td><table width="260px" border="3px" cellpadding="3px" bgcolor="#fff"><tr><td><font size="5" color="#990000"><b>BASICS</b></font>

<b>Name:</b> 
<b>Age:</b> 
<b>DOB:</b> 
<b>Sexuality:</b> 
<b>Marital Status:</b> 
<b>Hometown:</b> 
<b>Occupation:</b> 
</td><tr></table></td><td><table width="260px" border="3px" cellpadding="3px" bgcolor="#fff"><tr><td><font size="5" color="#990000"><b>FAMILY</b></font>

<b>Mother:</b> 
<b>Father:</b> 
<b>Siblings:</b>
<b>Other Relatives:</b> </td></tr></table></td></tr>

<tr valign="top"><td><table width="260px" border="3px" cellpadding="3px" bgcolor="#fff"><tr><td><font size="5" color="#990000"><b>OOC CONTACT</b></font>

<b>PB:</b> 
<b>Timezone:</b> 
<b>Info:</b> 
<b>Journal/AIM:</b> 
<b>Credit:</b> <user site="insanejournal.com" user="pemberley">

</td></tr></table></td> <td><table width="260px" border="3px" cellpadding="3px" bgcolor="#fff"><tr><td><font size="5" color="#990000"><b>MISC INFO</b></font>

</td></tr></table></td></tr>

<tr valign="top"><td colspan="3"><table border="3px" cellpadding="3px" bgcolor="#fff"><tr><td><font size="5" color="#990000"><b>PERSONALITY</b></font>

Lorem ipsum dolor sit amet, pri in accusamus constituam, nam ne delectus laboramus. Ea mea fugit semper senserit, legendos percipitur vel id. Feugiat tacimates sit ad, sit no tale vidit, est laudem denique ut. Malis ludus has an, vis argumentum eloquentiam repudiandae te. At legendos sensibus definitiones sed.</td></tr></table></td></tr>

<tr valign="top"><td colspan="3"><table border="3px" cellpadding="3px" bgcolor="#fff"><tr><td><font size="5" color="#990000"><b>HISTORY</b></font>

Ne has suas laboramus evertitur. Vim habeo etiam te, ut detraxit consequat nec. Pri praesent referrentur cu, sit et primis gubergren delicatissimi. Et dicit mentitum mei, at pri admodum perfecto prodesset. Ex quando qualisque argumentum eum.</td></tr></table></td></tr>

<tr valign="top"><td colspan="3"><table border="3px" cellpadding="3px" bgcolor="#fff"><tr><td><font size="5" color="#990000"><b>STORYLINES</b></font>

All of your storylines go here. Describe your storylines here.</td></tr></table></td></tr>
</table>

( Notes )

Tags: code: character bio

Leave a comment

02 January 2023 @ 12:44 am

Repost: Journal Layout: s2 Bloggish Purple

Static Preview
Live Example:

abeautifulmind

The Code

/* S2 Bloggish Layout 
http://pemberley.insanejournal.com (backgpreviously http://asylums.insanejournal.com/abeautifulmind */

body {background-image:url("http://www.songsofstardust.com/patterns/5006.GIF");
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
color:#FFFFFF;
}

a, a:visited, a:hover { 
color:#2E0854;
}

#container { 
width:800px;
margin: 0px auto;
padding:2px;
}

#container-inner {
width:700px;
}

#banner {
width:700px;
background-image:url("");
height:10px;
}

h1#banner-header { display:none;
}

h2#banner-description {
display:none;
}

#pagebody { width:800px;
background-color:#CC99CC;
}

#beta { background-color:#CC99CC;
color:#000000;
width:600px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#alpha { background-color:#CC99CC;
color:#FFFFFF;
width:200px;
-moz-border-radius: 15px;
border-radius: 15px;
}

.content-nav, .content-nav a, .content-nav a:hover { color:#660000;
}

h2.date-header { font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#2E0854;
background-color:#CC99CC;
}

.skiplinks { font-size:9px;
color:#2E0854;
}

.entry { border:2px;
border-color:#990000;
width:550px;
color:#000000;
background-color:#FFFFFF;
-moz-border-radius: 15px;
border-radius: 15px;
}

h3.entry-header {color:#000;
font-size:16px;
text-align:center;
}

.entry-userpic {display:none;
}

.entry-content {line-height:normal;
}
.entry-body {line-height:normal;}

.metadata {display:inherit;
}

.ljtags { float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#000000;
}

.entry-footer {background:background-color:#FFFFFF;
color:#000000;
}

.module {width:200px;
background-color:#CC99CC;
color:#664400;
padding:1px;
}

.module-photo {display:none;
}

.module-viewlinks { background-color:#CC99CC;
color:#FFFFFF;
}
.module-calendar {display:none;!important}

.module-typelist {font-size:10px;
color:#664400;
background-color:#CC99CC;
}
.module-categories {
color:#2E0854;
background-color:#CC99CC;
}
.module-pagesummary  {display:none;}
.module-syndicate {display:none;}
.module-powered {display:none;}
.module-header {font-size:14px;
color:#554422;
background-color:#CC99CC;
}
.module-content {font:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
}	
ul.module-list {background-color:#CC99CC;
color:#2E0854;
}
li.module-list-item a {color:#fff}

.comments {width:550px;
background-color:#fff;
color:#000000;
text-align:center;
}

h3.comments-header { width:550px;
font-size:14px;
color:#000;
}

h3.comment-header { font-size:12px;}
.comment-userpic {float:right;}
.comment-content {font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#668888;
background-color:#fff;}
.comment-footer {font-size:9px;
color:#ee8811;
}
.comment-replies {background-color:#fff;
color:#000000;
}

Background Image

( Read more... )

Tags: layout: s2 bloggish

Leave a comment

11 April 2019 @ 01:07 pm

Character Roster: Gotta Catch 'Em All

As inspired by this website.

REPLACEMENTS

#ffa5001

#003366

#228b22

#999

( full size + code )

Tags: code: character roster

Leave a comment

22 February 2019 @ 01:38 pm

Layout: Welcome to the Nineties

cym3

As inspired by the Captain Marvel website.

( replacements & code )

Tags: layout: s2 complete style

Leave a comment

31 January 2019 @ 04:05 pm

Character Roster: Flowers

( full example & code )

Tags: code: character roster

2 comments | Leave a comment

28 December 2018 @ 04:42 pm

Code: Media Tracker

Alas you can't code the titles to be handwritten *siiiiiiiigh*

Please note it is coded in lj-raw so make sure you include < br > in between each line :)

media in 2019

BOOKS

MOVIES

TV SHOWS

BOOKS

1. Book Name by Author
2. Book Name by Author
3. Book Name by Author

MOVIES

1. Movie
2. Movie
3. Movie

TV SHOWS

1. TV Show
2. TV Show
3. TV Show

©

cymbeline

code

<lj-raw><div style="margin: 0 auto;width:420px;background-color:#ccc;padding:5px;font-family:verdana;display: flex;flex-wrap: wrap;">

<div style="width:370px;margin: 0 auto;background-color:#fff;text-transform: uppercase;padding:15px;text-align:center;font-size:30px;font-family:verdana;">media in 2019</div>

<div style="width:25%;background-color:#fff;margin:5px auto 0;;height:400px;"><a href=#books>BOOKS</a><br><br>

<a href=#movies>MOVIES</a><br><br>

<a href=#tvshows>TV SHOWS</a><br><br>

</div>
<div style="width:281px;background-color:#fff;height:400px;margin:5px 10px auto 0;overflow:hidden;background:url(https://i.imgur.com/JxFBuov.png);">
<a name="books"></a><div style="overflow:auto;height:400px;padding-right:10px;margin: 0 auto;"><div style="text-align:center;font-family:verdana;font-size:20px;">BOOKS</div>
<br><br>
1. Book Name by Author<br>
2. Book Name by Author<br>
3. Book Name by Author<br>
</div>
<a name="movies"></a><div style="overflow:auto;height:400px;padding-right:10px;margin: 0 auto;"><div style="text-align:center;font-family:verdana;font-size:20px;">MOVIES</div>
<br><br>
1. Movie<br>
2. Movie<br>
3. Movie<br>
</div>

<a name="tvshows"></a><div style="overflow:auto;height:400px;padding-right:10px;margin: 0 auto;"><div style="text-align:center;font-family:verdana;font-size:20px;">TV SHOWS</div>
<br><br>
1. TV Show<br>
2. TV Show<br>
3. TV Show<br>
</div>

</div>

Leave a comment

26 December 2018 @ 08:33 pm

OOC Contact

Three versions of the same code. Usual deal, I'm sure everyone knows it by now :)

CHARACTER NAME HERE

game · Application · Timezone ·

cdj
Comments Screened · Discord Name

Code by

cymbeline

( replacements & code )

CHARACTER NAME HERE

game · Application · Timezone ·

cdj
Comments Screened · Discord Name

Code by

cymbeline

( replacements & code )

character name

IC Tags || OOC Tags
Fandom || Canon Point

"Character Quote"

player name

Timezone ||

cdj
Email || Discord

Any other information

Code by

cymbeline

( replacements & code )

Tags: code: ooc contact

Leave a comment

22 December 2018 @ 09:41 am

Character Bio: Compact Shadow

( live example )

REPLACEMENTS

Verdana = all headers
#990000 Text Shadow

CODE

<table align="center" width="900px" cellpadding="10px" border="2px" cellspacing="15px" style="border-top-right-radius: 25px;"><tr><td colspan="2"><div style="text-transform: uppercase;padding:15px;text-align:center;font-size:50px;font-family:verdana; text-shadow: 2px 2px #990000;text-align:center;">character name</div></td></tr>

<tr><td><center><img src="http://i.imgur.com/W71gxOq.jpg" style="border-radius: 50%; margin-right: 15px;"></center></td> <td valign="top"><center><div style="font-size:20px;color:#990000;padding:5px;">
<font face="verdana">BASICS</font></center></div>

<b>Name:</b> name here
<b>Age:</b> age here
<b>Species:</b> species here
<b>Fandom:</b> fandom here
</td></tr>

<tr><td><details style="padding:20px;">
<summary style="cursor:pointer;font-size:0px;"><div style="font-size:20px;color:#990000;"><font face="verdana">OOC PERMISSIONS</font>
</summary>

OOC Permissions
</details></td>

<td rowspan="3" valign="top"><center><div style="font-size:20px;color:#990000;"><font face="verdana">PERSONALITY</font></div></center>

Personality Here </div>

</td></tr>

<tr><td><details style="padding:20px;">
<summary style="cursor:pointer;font-size:0px;"><div style="font-size:20px;color:#990000;">IC PERMISSIONS</summary>

IC Permissions
</details></td></tr>

<tr><td rowspan="2" valign="top"><center><div style="font-size:20px;color:#990000;"><font face="verdana">HISTORY</font></div></center>

History Here </div>

</td></tr>

<b>Name:</b>
<b>Timezone:</b>
<b>Email:</b>
<b>Discord:</b>
<b>CDJ:</b>
</td></tr>
<tr><td colspan="2"><center><font size="small"><a href=http://cymbeline.insanejournal.com>Code by Cymbeline</a></center></td></tr>
</table>

Leave a comment

07 December 2018 @ 01:19 pm

Layout: Vintage Punk

cym2

( instructions & code )

Tags: layout: s2 complete style

3 comments | Leave a comment

04 December 2018 @ 09:53 am

Charcter Roster: Circle More

( full size )

ABOUT

A basic cast list that makes use of the more info section so you can put as much information as you want while still looking compact.

REPLACEMENTS

IMGURL - Character Image. 200x200
color: red - character name colour
background-color:#999 - background colour of the header & footer
font-family:century gothic,arial,sans-serif - header & footer

CODE

<div style="width:100%;background-color:#999;color:#fff;text-transform: uppercase;padding:5px;text-align:center;font-size:50px;font-family:century gothic,arial,sans-serif;">current characters</div>
<div style="display: flex;">
<div style="width:25%"><img src="IMGURL" width="200px" height="200px" style="border-radius: 50%; margin-right: 15px;  shape-outside: circle(); shape-margin: 15px; float: left;">
<div style="font-size:25px;text-transform: uppercase;color: red;letter-spacing: 3px;text-align:center;"><b>character name</b></div>
<details>
<summary style="font-size:0;"><div style="font-size:15px;text-transform: lowercase;letter-spacing: 2px;text-align:center;">more info</summary>
Anything you want here
</details></div>

<div style="width:25%"><img src="IMGURL" width="200px" height="200px" style="border-radius: 50%; margin-right: 15px;  shape-outside: circle(); shape-margin: 15px; float: left;">
<div style="font-size:25px;text-transform: uppercase;color: red;letter-spacing: 3px;text-align:center;"><b>character name</b></div>
<details>
<summary style="font-size:0;"><div style="font-size:15px;text-transform: lowercase;letter-spacing: 2px;text-align:center;">more info</summary>
Anything you want here
</details></div>

<div style="width:25%"><img src="IMGURL" width="200px" height="200px" style="border-radius: 50%; margin-right: 15px;  shape-outside: circle(); shape-margin: 15px; float: left;">
<div style="font-size:25px;text-transform: uppercase;color: red;letter-spacing: 3px;text-align:center;"><b>character name</b></div>
<details>
<summary style="font-size:0;"><div style="font-size:15px;text-transform: lowercase;letter-spacing: 2px;text-align:center;">more info</summary>
Anything you want here
</details></div>
</div>
<div style="width:100%;background-color:#999;color:#fff;text-transform: lowercase;padding:5px;text-align:center;font-size:12px;font-family:century gothic,arial,sans-serif;">@ <user site="insanejournal.com" user="gamename"></div>
</div></div>

Leave a comment

10 November 2018 @ 09:13 am

Character Roster: Purple Galore

I wanted to challenge myslef both with flex div's and hiding the arrow of the details tag. For some reason divs and I just don't get along but I made it work! It was heavily expired by various things of both

paddle and

tessisamess who both do amazing things. Also a big shout out to

transilience for cluing me in on how to actually hide it cause the solutions I found required a CSS stylesheet which obviously wouldn't work on IJ for this sort of thing.

Also yes there's all the purple. Purple is amazing.

( live example & code )

Tags: code: character roster

Leave a comment

21 October 2018 @ 07:44 pm

Char Bio: Old & New Patchwork

CHARACTER NAME
	Name: Name Name Age: Age Gender: Gender Occupation: Job
PERSONALITY PERSONALITY GOES HERE HISTORY HISTORY GOES HERE OOC Name: Timezone: Email: Discord: CDJ:
© cymbeline

ABOUT

You'll have noticed both

tessisamess &

marvolian have been using the details tag recently in their layouts and you have to admit, they're pretty snazzy. I kind of love them. I wanted to try and learn to use them and as neither of them had done a character profile with them (that I've seen!) I thought I'd give it a shot. I tried making this in divs but... Well divs tend to hate me. It's like photoshop. I can do something exactly how it should be done but it doesn't work. It's a thing.

So the old? This is done in a table. I love tables. I can code them in my sleep. The new? Is the detail tags.

CODE

<table align="center" width="600px" cellspacing="15px" background="https://i.imgur.com/KCDnPZI.jpg" cellpadding="3px"><tr bgcolor="#fff"><td colspan="2"><font face="impact" size="25px" bgcolor="#fff"><center>CHARACTER NAME</font></td></tr>

<tr><td bgcolor="#000" align="middle"><img src="URL" width="400px" height="150px"></td><td bgcolor="#fff"><b>Name:</b> Name Name
<b>Age:</b> Age
<b>Gender:</b> Gender
<b>Occupation:</b> Job</td></tr>
<tr bgcolor="#fff"><td colspan="2" bgcolor="#fff"><details style="margin:10px 0;border:1px #000;padding:2px 6px;border-radius:25px;font-size:12px;text-align:left;font-weight:bold;text-transform:uppercase;background:#fff;">
	<summary>
	PERSONALITY
	</summary>

PERSONALITY GOES HERE
</details>

<details style="margin:10px 0;border:1px #000;padding:2px 6px;border-radius:25px;font-size:12px;text-align:left;font-weight:bold;text-transform:uppercase;background:#fff;">
	<summary>
	HISTORY
	</summary>

HISTORY GOES HERE
</details>

<b>Name:</b>
<b>Timezone:</b>
<b>Email:</b>
<b>Discord:</b>
<b>CDJ:</b>
</details>
</td></tr>
<tr bgcolor="#fff"><td><small>© <user site="insanejournal.com" user="cymbeline"></table>

Tags: code: character bio

Leave a comment

19 October 2018 @ 07:56 pm

Layout: Spooky

cym1

( instructions & code )

Tags: layout: s2 complete style

Leave a comment