Resource bippity boppity boo.

[christy]

bippity boppity boo.

hello! i am luna and this is my resource thread where i will be posting free-to-use codes for character sheets, ic posts, etc. please just remember to never remove my watermark/credit, and it would be nice if you hearted what you used so i know! thanks for stopping by. if you'd like to make a request for a code, check out my code shop here!

 

[christy]

01

earl grey.

code type: character sheet w/ tabs
mobile friendly?: nope.
link to code: here!
i made this for a group rp so this works best for very detailed character sheets, considering the number of tabs. feel free to fiddle around with the colour scheme and the little gif icons can be edited by replacing the links! and please remember: don't remove the watermark/credit.

[class name=titleslide] width: 100%; height: 300px; font-family: Avenir; [/class] [class=tag] background: #6f3fa6; text-transform: uppercase; padding: 0px 3px 0px 3px; font-size: 9px; letter-spacing: 1px; display: inline-block; color: white; margin-top: 10px; line-height: 16px; [/class] [class=gifs] display: flex; flex-direction: row; padding-bottom: 15px; [/class] [class name=tab] box-sizing: border-box; text-align: center; font-family: Avenir; font-size: 15px; color: #333; background: #f8f8f8; width: 66px; padding: 10px; padding-top: 20px; padding-bottom: 20px; text-transform: uppercase; transition: all .5s ease-in-out; border-left: 3px solid #f8f8f8; border-right: 3px solid #f8f8f8; transition: all .4s ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=selectedtab] box-sizing: border-box; text-align: center; font-family: Avenir; font-size: 15px; color: #6f3fa6; background: #f3f3f3; width: 66px; border-left: 3px solid #6f3fa6; border-right: 3px solid #f3f3f3; padding: 10px; padding-top: 20px; padding-bottom: 20px; text-transform: uppercase; transition: all .4s ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab state=hover] background: #f3f3f3; border-left: 3px solid #f3f3f3; border-right: 3px solid #f3f3f3; transition: all .4s ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=selectedtab state=hover] border-left: 3px solid #6f3fa6; border-right: 3px solid #f3f3f3; transition: all .4s ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [script class=tab on=click] hide tabcontents hide titleslide removeClass selectedtab tab set currentTab (getText) if (eq ${currentTab} 01) (addClass selectedtab tabone) if (eq ${currentTab} 02) (addClass selectedtab tabtwo) if (eq ${currentTab} 03) (addClass selectedtab tabthree) if (eq ${currentTab} 04) (addClass selectedtab tabfour) if (eq ${currentTab} 05) (addClass selectedtab tabfive) if (eq ${currentTab} 01) (show tabcontentsone) if (eq ${currentTab} 02) (show tabcontentstwo) if (eq ${currentTab} 03) (show tabcontentsthree) if (eq ${currentTab} 04) (show tabcontentsfour) if (eq ${currentTab} 05) (show tabcontentsfive) [/script]

character name

"You could put a character quote here."

[div class="tab tabone"]01

[div class="tab tabtwo"]02

[div class="tab tabthree"]03

[div class="tab tabfour"]04[/div] [div class="tab tabfive"]05[/div] [/div]

[div class=titleslide]

a

title?

a subtitle?

[div class="tabcontents tabcontentsone" style="display: none;"]

[div class=gifs]

[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info [/div][/div] [div class="tabcontents tabcontentstwo" style="display: none;"]

[div class=gifs]

[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info [/div][/div] [div class="tabcontents tabcontentsthree" style="display: none;"]

[div class=gifs]

[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info [/div][/div] [div class="tabcontents tabcontentsfour" style="display: none;"]

[div class=gifs]

[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info [/div][/div] [div class="tabcontents tabcontentsfive" style="display: none;"]

[div class=gifs]

[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info [/div][/div] [/div][/div] [/div]

coded by luna.

 

[christy]

02

reincarnate.

code type: character sheet w/ tabs
mobile friendly?: not at all.
link to code: here!
this was also for a group rp so this works best for detailed character sheets since it has four tabs. feel free to fiddle around with the colour scheme and the image placeholders can be edited by replacing the links! and please remember: don't remove the watermark/credit.

[class=tabscontainer] width: 205px; height: 300px; display: flex; flex-direction: column; [/class] [class=tab] box-sizing: border-box; font-size: 12px; letter-spacing: 2px; width: 100%; padding-top: 30px; justify-content: space-around; font-family: Montserrat; border-bottom: 1px solid #f6f6f6; padding-left: 30px; text-transform: uppercase; color: #bbb; flex: 1; transition: all 0.5s ease-in-out; flex: 1; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=tag] font-size: 10px; text-transform: uppercase; display: inline-block; padding-left: 4px; padding-right: 4px; color: #000; background: #ffd59e; letter-spacing: 1px; margin-top: 10px; [/class] [class=selectedtab] font-size: 12px; letter-spacing: 2px; width: 220px; box-sizing: border-box; padding-top: 30px; background: #f0be7d; padding-left: 60px; text-transform: uppercase; font-family: Montserrat; border-bottom: 1px solid #f6f6f6; flex: 1; color: #000; transition: all 0.5s ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab state=hover] color: #000; transition: all 0.5s ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [script class=tab on=click] hide tabcontents removeClass selectedtab tab set currentTab (getText) if (eq ${currentTab} general.) (addClass selectedtab tabone) if (eq ${currentTab} appearance.) (addClass selectedtab tabtwo) if (eq ${currentTab} persona.) (addClass selectedtab tabthree) if (eq ${currentTab} background.) (addClass selectedtab tabfour) if (eq ${currentTab} general.) (show tabcontentsone) if (eq ${currentTab} appearance.) (show tabcontentstwo) if (eq ${currentTab} persona.) (show tabcontentsthree) if (eq ${currentTab} background.) (show tabcontentsfour) [/script]

character name.

[div class="tabcontents tabcontentsone"]

general info.

[div class=tag]tag

info
[div class=tag]tag

info
[div class=tag]tag

info
[div class=tag]tag

info
[div class=tag]tag

info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info [/div] [/div] [/div] [/div] [div class="tabcontents tabcontentstwo" style="display: none;"]

appearance info.

[div class=tag]tag

info
[div class=tag]tag

info
[div class=tag]tag

info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info [/div] [/div] [/div] [/div] [div class="tabcontents tabcontentsthree" style="display: none;"]

persona info.

[div class=tag]tag

info
[div class=tag]tag

info
[div class=tag]tag

info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info [/div] [/div] [/div] [/div] [div class="tabcontents tabcontentsfour" style="display: none;"]

background info.

[div class=tag]tag

info
[div class=tag]tag

info
[div class=tag]tag

info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info [/div] [/div] [/div] [/div]

[div class=tabscontainer] [div class="tab tabone"]general.

[div class="tab tabtwo"]appearance.[/div] [div class="tab tabthree"]persona.[/div] [div class="tab tabfour"]background.[/div] [/div] [/div] [/div] [/div]

coded by luna.

 

[christy]

03

boxed in.

code type: character sheet w/ tabs
mobile friendly?: nope.
link to code: here!
i made this for a character sheet for a group rp so this works best for very detailed sheets, considering the number of tabs. feel free to fiddle around with the colour scheme and the little gif icons can be edited by replacing the links! and please remember: don't remove the watermark/credit.

[class=tag] font-size: 10px; text-transform: uppercase; display: inline-block; padding: 0px; color: #000; letter-spacing: 1px; background: #fa927a; font-family: Montserrat; margin-top: 10px; height: 8px; font-weight: bold; [/class] [class=tab] box-sizing: border-box; font-size: 10px; letter-spacing: 2px; width: 100%; padding-top: 20px; padding-bottom: 20px; justify-content: space-around; font-family: Montserrat; border-bottom: 1px solid #f0f0f0; text-align: left; text-transform: uppercase; color: #ccc; flex: 1; transition: all 0.5s ease-in-out; flex: 1; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=selectedtab] font-size: 10px; letter-spacing: 2px; box-sizing: border-box; padding-top: 20px; padding-left: 20px; text-transform: uppercase; border-bottom: 1px solid #de735b; font-family: Montserrat; flex: 1; color: #de735b; transition: all 0.5s ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab state=hover] color: #de735b; transition: all 0.5s ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=titleslide] background: #fff; padding: 10px; font-family: Montserrat; text-transform: lowercase; color: #000; text-align: center; font-size: 30px; box-sizing: border-box; [/class] [script class=tab on=click] hide tabcontents hide titleslide removeClass selectedtab tab set currentTab (getText) if (eq ${currentTab} general.) (addClass selectedtab tabone) if (eq ${currentTab} appearance.) (addClass selectedtab tabtwo) if (eq ${currentTab} persona.) (addClass selectedtab tabthree) if (eq ${currentTab} background.) (addClass selectedtab tabfour) if (eq ${currentTab} general.) (show tabcontentsone) if (eq ${currentTab} appearance.) (show tabcontentstwo) if (eq ${currentTab} persona.) (show tabcontentsthree) if (eq ${currentTab} background.) (show tabcontentsfour) [/script]

[div class="tab tabone"]general.

[div class="tab tabtwo"]appearance.

[div class="tab tabthree"]persona.[/div] [div class="tab tabfour"]background.[/div] [/div]

[div class=titleslide]

boxed in

❮ some quote comes here. ❯

[div class="tabcontents tabcontentsone" style="display: none;"]

[div class=tag]

tag.

info
[div class=tag]

tag.

[/div] info
[div class=tag]

tag.

[/div] info
[div class=tag]

tag.

[/div] info [/div] [/div] [div class="tabcontents tabcontentstwo" style="display: none;"]

[div class=tag]

tag.

info
[div class=tag]

tag.

[/div] info
[div class=tag]

tag.

[/div] info
[div class=tag]

tag.

[/div] info [/div] [/div] [div class="tabcontents tabcontentsthree" style="display: none;"]

[div class=tag]

tag.

info
[div class=tag]

tag.

[/div] info
[div class=tag]

tag.

[/div] info
[div class=tag]

tag.

[/div] info [/div] [/div] [div class="tabcontents tabcontentsfour" style="display: none;"]

[div class=tag]

tag.

info
[div class=tag]

tag.

[/div] info
[div class=tag]

tag.

[/div] info
[div class=tag]

tag.

[/div] info [/div] [/div] [/div]

[/div]

coded by luna.