Hi everyone!
With all the new template customization options, I've noticed an increase of interest in creating your own templates. Doing this from scratch can be really hard, especially if you're new to it, so many people prefer to work from one of the existing free-for-all RPR templates to modify to their liking. As long as it's from the official free-for-all templates this is absolutely fine and not against any rules.
It can be tricky to fetch the base code, adjust all the image paths and ensure the copy and pasted code works as intended before you start messing around with it. I want to help everyone out by providing ready to copy and paste coding to put into a new template sheet. All of this is 100% okay with Kim because the RPR owns these templates. Unfortunately I can't really help with the editing itself, but I hope to make the step to get started yourself easier!
I will be adding more templates regularly, please open the collapse tag of the appropriate template to reveal the code. Is there a particular template you want the code for asap? Let me know and I'll prioritize it!
How to use these
Copy the code of your desired template, then follow the instructions for "How do I make my own custom template?" and paste the code in the textbox. Save, and then edit to your heart's content!
The Templates
With all the new template customization options, I've noticed an increase of interest in creating your own templates. Doing this from scratch can be really hard, especially if you're new to it, so many people prefer to work from one of the existing free-for-all RPR templates to modify to their liking. As long as it's from the official free-for-all templates this is absolutely fine and not against any rules.
It can be tricky to fetch the base code, adjust all the image paths and ensure the copy and pasted code works as intended before you start messing around with it. I want to help everyone out by providing ready to copy and paste coding to put into a new template sheet. All of this is 100% okay with Kim because the RPR owns these templates. Unfortunately I can't really help with the editing itself, but I hope to make the step to get started yourself easier!
I will be adding more templates regularly, please open the collapse tag of the appropriate template to reveal the code. Is there a particular template you want the code for asap? Let me know and I'll prioritize it!
How to use these
Copy the code of your desired template, then follow the instructions for "How do I make my own custom template?" and paste the code in the textbox. Save, and then edit to your heart's content!
The Templates
Steampunk
Instructions: Check the checkbox for "Do not load the default CSS". No Google Fonts necessary.
Instructions: Check the checkbox for "Do not load the default CSS". No Google Fonts necessary.
Code:
/* **********************************************************************************************************
CSS Normalize - aims to make the "starter" styles the same between all browsers
********************************************************************************************************** */
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
a { background: transparent; }
a:active, a:hover { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: 700; }
dfn { font-style: italic; }
h1 { font-size: 2em; margin: .67em 0; }
mark { background: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -.5em; }
sub { bottom: -.25em; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 1em 40px; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
pre { overflow: auto; }
code, kbd, pre, samp { font-family: monospace,monospace; font-size: 1em; }
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input { line-height: normal; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em; }
legend { border: 0; padding: 0; }
textarea { overflow: auto; }
optgroup { font-weight: 700; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
/* **********************************************************************************************************
Hidden & Behavioral Elements, such as the popup window for making a character tie.
********************************************************************************************************** */
ul#toolbar-dropdown-nav li, #toolbar ul ul.open-dropdown { display: block; }
#toolbar-dropdown-nav { position: absolute; display: none; }
.nestedPages { position: absolute; display: none; padding: 0; }
.nestedPages li { display: block; }
#toolbar-dropdown-nav.open-dropdown, .nestedPages.open-dropdown { display: block; }
.hiddenCharacterWindow { display: none; color: #000; font-family: cambria, arial, helvetica, sans-serif; }
.hiddenCharacterWindow textarea { width: 100%; }
.hiddenCharacterWindow h5 { color: #000000; padding-top: 0px; margin-top: 10px; margin-bottom: 10px; font-size: 20px; font-family: cambria, arial, helvetica, sans-serif; }
table.game { float: left; margin-right: 5px; text-align: center; width: 80px; font-size: .7em; }
.labelfor-publicnote { display: block; }
#form_optionalpublicnote { width: 95%; box-sizing: border-box; }
.widget-clear { clear: both; }
/* basic BBCode setup */
a img { border: 0px; }
.bbcode_img { max-width: 100%; }
ul.bbcode_list, #nowidgets ul { list-style-type: disc; }
.bbcode_collapse { padding-top: 2px; }
.bbcode_collapse .collapse_name { padding-top: 2px; cursor: pointer; }
.bbcode_collapse .collapse_content { display: none; padding-top: 2px; padding-left: 14px; margin-bottom: 10px; padding-bottom: 2px; }
table.bbcode_columns td { vertical-align: top; }
.bbcode_column { padding-left: 20px; }
.bbcode_firstcolumn { padding-left: 0px; }
.bbcode_column img { max-width: none; }
.bbcode_quote, .bbcode_code { border: 1px solid #000; margin: 20px 0; }
.bbcode_quote_head, .bbcode_code_head { padding: 5px 20px; }
.bbcode_quote_body, .bbcode_code_body { padding: 10px 20px; }
.bbcode_code_body { overflow-x: scroll; }
.bbcode_center .bbcode_columns { margin: auto auto; }
/* mobile elements */
.mobileonly { display: none; }
.mobiletabletonly { display: none; }
.desktoponly { display: block; }
/* mobile menus */
.menutoggle { float: right; font-size: 25px; }
.menutoggle.fa { font-size: 25px; }
#toolbar a { text-decoration: none; }
.toolbartoggle { height: 25px; padding: 10px 20px; line-height: 25px; }
/* Dropdown menus */
#toolbar-dropdown-nav, .nestedPages { z-index: 50; }
span.mobiledropdowntoggle { float: right; padding: 0 10px; text-align: center; display: none; font-size: 16px; line-height: 20px; }
/* This code relates to making youtube videos not overflow the page, even if the template is narrow or being viewed on a mobile device */
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.bbcode_center .video-container { margin: auto auto; }
/* **********************************************************************************************************
Mobile tweaks to hidden & behavioral elements
********************************************************************************************************** */
@media screen and (max-width: 500px) { .mobilesupportenabled { /* Fix for BBCode lists inside indents at small sizes */ }
.mobilesupportenabled .bbcode_indent { margin-left: 2em !important; }
.mobilesupportenabled .bbcode_indent ul.bbcode_list { margin-left: 15px; } }
@media screen and (max-width: 880px) { .mobilesupportenabled .bbcode_column img { max-width: 100%; } }
@media screen and (max-width: 500px) { .mobilesupportenabled table.bbcode_columns td { display: block; } }
@media screen and (max-width: 880px) { .mobilesupportenabled #toolbar ul li, .mobilesupportenabled #pagetabs li { margin-right: 0; }
.mobilesupportenabled .mobiletabletonly { display: block; }
.mobilesupportenabled .desktoponly { display: none; }
.mobilesupportenabled #toolbar ul, .mobilesupportenabled #pagetabs { display: none; }
.mobilesupportenabled #toolbar > ul.open, .mobilesupportenabled #pagetabs.open { display: block; }
.mobilesupportenabled #toolbar ul li, .mobilesupportenabled #pagetabs li { display: block; }
.mobilesupportenabled #toolbar-dropdown-nav, .mobilesupportenabled .nestedPages { position: relative; left: 0px !important; }
.mobilesupportenabled #toolbar a, .mobilesupportenabled #pagetabs a { display: block; padding: 5px 20px; }
.mobilesupportenabled #toolbar-dropdown-nav a, .mobilesupportenabled #pagetabs .nestedPages a { padding-left: 40px; }
.mobilesupportenabled ul#toolbar-dropdown-nav li, .mobilesupportenabled #charheader ul#pagetabs li ul.nestedPages li { width: auto; }
.mobilesupportenabled #alltabs { clear: both; padding-top: 20px; }
.mobilesupportenabled span.mobiledropdowntoggle { display: block; } }
@media screen and (max-width: 500px) { .mobilesupportenabled .mobileonly { display: block; } }
/* **********************************************************************************************************
Layout
********************************************************************************************************** */
#charheader a { text-decoration: none; }
ul#pagetabs { list-style-type: none; }
div#sitecontainer { max-width: 1400px; margin: 0 auto; }
#footer, #charcontent { clear: both; margin-top: 50px; }
div#adspace { padding-top: 20px; }
#ad { text-align: center; width: 100%; font-size: .8em; }
#ad a { text-decoration: none; }
#ad .removead { margin-bottom: 0; }
@media screen and (max-width: 880px) { .mobilesupportenabled #ad img { max-width: 100%; } }
@media screen and (max-width: 500px) { .mobilesupportenabled #adspace { height: 100px; } }
@media screen and (max-width: 880px) { .mobilesupportenabled body { min-width: 100%; }
.mobilesupportenabled div#sitecontainer { width: 95%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } }
@media screen and (max-width: 500px) { .mobilesupportenabled div#sitecontainer { width: 100%; padding: 0 5%; } }
/* **********************************************************************************************************
Background decorations & basic text styles
********************************************************************************************************** */
body { background: url(http://www.rprepository.com/templates/2.0/stylesheets/steampunk/rusty.png) repeat; background-color: #151515; color: #bc9363; font-size: 16px; font-family: Garamond, "Hoefler Text", "Times New Roman", Times, serif; }
h1, h2, h3, h4, h5, h6 { font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; }
#leftheaderside, #rightheaderside, #charheader { float: left; height: 170px; margin-top: 20px; }
#leftheaderside { background: url(http://www.rprepository.com/templates/2.0/stylesheets/steampunk/leftiron.png) no-repeat right top; width: 10%; }
#rightheaderside { background: url(http://www.rprepository.com/templates/2.0/stylesheets/steampunk/rightiron.png) no-repeat left top; width: 10%; }
#charheader { background: url(http://www.rprepository.com/templates/2.0/stylesheets/steampunk/woodbar.png) repeat-x; width: 80%; margin-bottom: 30px; }
#charheader h1#characterName { color: #a16b23; margin: 0; margin-top: 17px; }
#charheader h2#playedBy { color: #845619; font-size: 18px; margin-top: 10px; }
#charheader a { color: #bc9363; }
#charheader h2 a { color: #a16b23; }
.pagetitle { border-bottom: 1px solid #482D0E; font-size: 35px; line-height: 35px; padding-bottom: 3px; }
a { color: #a16b23; }
a:focus { color: #482d0e; }
a:hover { color: #482d0e; }
a:active { color: #fff; }
.bbcode_spoiler { background: #a16b23; color: #a16b23; }
.bbcode_collapse .collapse_name { border-bottom: 1px dashed #a16b23; color: #a16b23; }
.bbcode_collapse .collapse_name:hover { color: #482d0e; border-color: #482d0e; }
#charheader a, #footer a { text-decoration: none; }
#footer { text-align: center; }
#toolbar ul, #pagetabs { list-style-type: none; margin: 0; padding: 0; }
#toolbar ul li, #pagetabs li { display: inline-block; margin-right: 20px; }
#toolbar ul ul li, #pagetabs ul li { display: block; margin-right: 0; }
#toolbar ul ul li a, #pagetabs ul li a { display: block; padding: 5px 10px; }
#toolbar ul, #pagetabs { margin: 0; padding: 0; }
@media screen and (max-width: 500px) { .mobilesupportenabled li.widget h3 { padding: 0; background: none; margin-left: 0; } }
/* **********************************************************************************************************
Header
********************************************************************************************************** */
#charheader .portraitcontainer { height: 95px; width: 95px; border: 0px; background: url(http://www.rprepository.com/templates/2.0/stylesheets/steampunk/portraitback.png) no-repeat; margin: 11px 10px 0px 10px; padding: 28px 43px 30px 27px; text-align: center; float: left; }
#charheader .portraitcontainer img { max-height: 95px; position: relative; top: 51%; -webkit-transform: translateY(-51%); -ms-transform: translateY(-51%); transform: translateY(-51%); }
.pagetitle { background: rgba(0, 0, 0, 0.65); font-style: italic; color: #a16b23; padding: 5px; padding-left: 15px; border: 2px solid #482d0e; width: 78%; margin: 40px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
h1#characterName { margin-top: 49px; font-size: 35px; display: inline-block; line-height: 35px; margin-bottom: 10px; }
h2#playedBy { font-size: 23px; line-height: 23px; margin-top: 10px; }
#charheader a { color: #bc9363; }
#charheader a:hover, #charheader a:focus, #toolbar a:hover, #toolbar a:focus { color: #e5caab; }
#charheader .nestedPages a:hover, #charheader .nestedPages a:focus, #toolbar #toolbar-dropdown-nav a:hover, #toolbar #toolbar-dropdown-nav a:focus { border-bottom: 0; }
/* Styles for dropdown menus */
#toolbar ul#toolbar-dropdown-nav a, #charheader ul.nestedPages a { color: #a16b23; text-decoration: none; background: none; }
ul#toolbar-dropdown-nav, #charheader ul.nestedPages { background-color: #151515; border: 2px solid #482D0E; }
ul#toolbar-dropdown-nav li, #charheader ul#pagetabs li ul.nestedPages li { width: 150px; text-align: left; font-weight: normal; }
#toolbar ul#toolbar-dropdown-nav .dropdown-hover, #charheader ul.nestedPages .dropdown-hover { background: #e5caab; }
#toolbar ul#toolbar-dropdown-nav .dropdown-hover a, #charheader ul.nestedPages .dropdown-hover a { color: #151515; }
.toolbartoggle { color: #a16b23; background: rgba(0, 0, 0, 0.65); border: 2px solid #482d0e; text-transform: uppercase; }
@media screen and (max-width: 880px) { .mobilesupportenabled #toolbar a, .mobilesupportenabled #toolbar ul#toolbar-dropdown-nav a, .mobilesupportenabled #charheader ul.nestedPages a, .mobilesupportenabled #pagetabs a { color: #a16b23; text-decoration: none; background: #151515; }
.mobilesupportenabled #charheader #pagetabs, .mobilesupportenabled #toolbar > ul { border: 1px solid #482D0E; border-top: 0; }
.mobilesupportenabled ul#toolbar-dropdown-nav, .mobilesupportenabled #charheader ul.nestedPages { background-color: #151515; border: 0px; }
.mobilesupportenabled #toolbar ul#toolbar-dropdown-nav .dropdown-hover, .mobilesupportenabled #charheader ul.nestedPages .dropdown-hover, .mobilesupportenabled #charheader #pagetabs a:hover, .mobilesupportenabled #charheader #pagetabs a:focus, .mobilesupportenabled #toolbar a:hover, .mobilesupportenabled #toolbar a:focus, .mobilesupportenabled #toolbar ul#toolbar-dropdown-nav a:hover, .mobilesupportenabled #toolbar ul#toolbar-dropdown-nav a:focus, .mobilesupportenabled #toolbar ul#toolbar-dropdown-nav .dropdown-hover a, .mobilesupportenabled #charheader ul.nestedPages .dropdown-hover a { color: #151515; background: #a16b23; }
.mobilesupportenabled span.mobiledropdowntoggle { background: #a16b23; color: #151515; }
.mobilesupportenabled .dropdown-hover span.mobiledropdowntoggle, .mobilesupportenabled a:hover span.mobiledropdowntoggle, .mobilesupportenabled a:focus span.mobiledropdowntoggle { background: #151515; color: #a16b23; } }
.currentPage { font-weight: bold; }
.currentPage li { font-weight: normal; }
#pagetabs li { padding: 5px 0; }
#pagetabs li li { padding: 0; }
#toolbar { text-align: center; padding-bottom: 30px; }
@media screen and (max-width: 880px) { .mobilesupportenabled #pagetabs li { margin-bottom: 0; }
.mobilesupportenabled #charheader a:hover, .mobilesupportenabled #charheader a:focus { border-bottom: 0; }
.mobilesupportenabled #alltabs { margin-top: 10px; }
.mobilesupportenabled #toolbar { text-align: left; }
.mobilesupportenabled #leftheaderside, .mobilesupportenabled #rightheaderside { display: none; }
.mobilesupportenabled #leftheaderside, .mobilesupportenabled #rightheaderside, .mobilesupportenabled #charheader { float: none; height: auto; }
.mobilesupportenabled #charheader { background: none; width: 100%; margin-bottom: 30px; } }
@media screen and (max-width: 500px) { .mobilesupportenabled #charheader .portraitcontainer { float: none; margin: 20px auto; display: block; }
.mobilesupportenabled h1#characterName { margin-top: 0; display: block; text-align: center; font-size: 30px; line-height: 30px; }
.mobilesupportenabled #charheader h2#playedBy { font-size: 18px; }
.mobilesupportenabled .pagetitle { font-size: 30px; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }
.mobilesupportenabled h1, .mobilesupportenabled h2 { text-align: center; } }
/* **********************************************************************************************************
Content
********************************************************************************************************** */
ul.inUseWidgets { list-style-type: none; margin: 0; padding: 0; background: rgba(0, 0, 0, 0.65); padding: 25px; width: 78%; margin: 40px auto; border: 2px solid #482D0E; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@media screen and (max-width: 880px) { .mobilesupportenabled ul.inUseWidgets, .mobilesupportenabled .pagetitle { width: 100%; } }
/* **********************************************************************************************************
Widgets
********************************************************************************************************** */
li.widget { margin-bottom: 40px; }
ul.inUseWidgets li.widget:last-child { margin-bottom: 0; }
ul.inUseWidgets li.widget h3 { background: url(http://www.rprepository.com/templates/2.0/stylesheets/steampunk/gear.png) no-repeat top left; padding: 15px 20px 13px 25px; font-size: 23px; font-weight: bold; color: #e5caab; margin: 0px; margin-top: 10px; }
/* Journal widget */
ul.journal li { padding: 10px 0 25px 0; }
span.postdate, span.prev { float: right; }
@media screen and (max-width: 880px) { .mobilesupportenabled span.postdate { float: none; } }
@media screen and (max-width: 500px) { .mobilesupportenabled ul.journal h4 span.postdate { display: block; margin-left: 0; margin-top: 10px; } }
/* Always/Never widget*/
.alwaysnever { background: #222222; }
.alwaysnever td { border-color: #080808; }
@media screen and (max-width: 880px) { .mobilesupportenabled .alwaysnever td { display: block; }
.mobilesupportenabled .alwaysnever td.alwaystitle, .mobilesupportenabled .alwaysnever td.sometimestitle, .mobilesupportenabled .alwaysnever td.maybetitle, .mobilesupportenabled .alwaysnever td.nevertitle { display: none; }
.mobilesupportenabled .alwaysnever td.alwayscolumn::before { content: "Always"; font-weight: 600; padding: 5px; font-size: 1.2em; }
.mobilesupportenabled .alwaysnever td.sometimescolumn::before { content: "Sometimes"; font-weight: 600; padding: 5px; font-size: 1.2em; }
.mobilesupportenabled .alwaysnever td.maybecolumn::before { content: "Maybe"; font-weight: 600; padding: 5px; font-size: 1.2em; }
.mobilesupportenabled .alwaysnever td.nevercolumn::before { content: "Never"; font-weight: 600; padding: 5px; font-size: 1.2em; } }
/* Flexible stat widget*/
table.flexstatstable td.statlabel, table.flexstatstable td.statlevel { border: 1px solid #222222; }
table.flexstatstable td.statlabel { border-right: 0px; }
table.flexstatstable td.statlevel { border-left: 0px; }
table.flexstatstable .filleddisc { background-color: #a16b23; border: 2px outset #deaa66; }
table.flexstatstable .emptydisc { background-color: #33200a; border: 2px solid #33200a; }
@media screen and (max-width: 950px) { .mobilesupportenabled table.flexstatstable td.statlabel, .mobilesupportenabled table.flexstatstable td.statlevel { float: left; border: 0px; }
.mobilesupportenabled table.flexstatstable td.statlabel { clear: both; } }
@media screen and (max-width: 450px) { .mobilesupportenabled table.flexstatstable td.statlevel { clear: both; padding-top: 0px; margin-bottom: 15px; } }
table.flexstatstable, h4.flexstatsdivider { margin: 20px 0; }
h4.flexstatsdivider { font-size: 22px; }
/* Notifications widget */
ul.notifications li { border-bottom: 1px solid #482D0E; }
/* Guestbook & kudos widgets */
div.kudosForm h4, .guestbooktitle { font-size: 22px; }
p.guestbookcomment, p.guestbookreply { margin-left: 107px; }
@media screen and (max-width: 500px) { .mobilesupportenabled p.guestbookcomment, .mobilesupportenabled p.guestbookreply { margin-left: 0; } }
div.guestbookwidget textarea, div.kudosForm textarea, div.guestbookwidget select, div.guestbookwidget .typedname { color: #e5caab; background-color: #3b3b3b; border: 2px #080808 inset; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
div.guestbookwidget .guestbooksubmit, div.kudosForm .submitButton, .hiddenCharacterWindow input[type="submit"] { padding: 5px 10px; }
div.guestbookwidget .guestbooksubmit, div.kudosForm .submitButton, .hiddenCharacterWindow input[type="submit"] { color: black; background-color: #a16b23; border: 2px #cb872c outset; }
div.guestbookwidget .guestbooksubmit:hover, div.kudosForm .submitButton:hover, div.guestbookwidget .guestbooksubmit:focus, div.kudosForm .submitButton:focus, .hiddenCharacterWindow input[type="submit"]:hover, .hiddenCharacterWindow input[type="submit"]:focus { border: 2px #e2b67b outset; background: #d99f51; }
div.guestbookwidget .guestbooksubmit:active, div.kudosForm .submitButton:active, .hiddenCharacterWindow input[type="submit"]:active { border: 2px #231708 inset; background: #774f1a; }
.guestbookcommenter, .commenttime { color: #e5caab; }
div.guestbookwidget ul.guestbook { border-bottom: 1px solid #482D0E; }
.guestbookwidget .pagenumbers .prev { float: right; }
/* **********************************************************************************************************
BBCode tweaks
********************************************************************************************************** */
.bbcode_list { margin: 20px; }
.bbcode_list li { margin-bottom: 10px; }
.bbcode_quote, .bbcode_code { border-color: #3B3B3B; }
.bbcode_quote_head, .bbcode_code_head { background: #3B3B3B; color: #a16b23; }
Victorian Lace
Instructions: Check the checkbox for "Do not load the default CSS". No Google Fonts necessary.
Instructions: Check the checkbox for "Do not load the default CSS". No Google Fonts necessary.
Code:
/* **********************************************************************************************************
CSS Normalize - aims to make the "starter" styles the same between all browsers
********************************************************************************************************** */
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
a { background: transparent; }
a:active, a:hover { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: 700; }
dfn { font-style: italic; }
h1 { font-size: 2em; margin: .67em 0; }
mark { background: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -.5em; }
sub { bottom: -.25em; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 1em 40px; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
pre { overflow: auto; }
code, kbd, pre, samp { font-family: monospace,monospace; font-size: 1em; }
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input { line-height: normal; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em; }
legend { border: 0; padding: 0; }
textarea { overflow: auto; }
optgroup { font-weight: 700; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
/* **********************************************************************************************************
Hidden & Behavioral Elements, such as the popup window for making a character tie.
********************************************************************************************************** */
ul#toolbar-dropdown-nav li, #toolbar ul ul.open-dropdown { display: block; }
#toolbar-dropdown-nav { position: absolute; display: none; }
.nestedPages { position: absolute; display: none; padding: 0; }
.nestedPages li { display: block; }
#toolbar-dropdown-nav.open-dropdown, .nestedPages.open-dropdown { display: block; }
.hiddenCharacterWindow { display: none; color: #000; font-family: cambria, arial, helvetica, sans-serif; }
.hiddenCharacterWindow textarea { width: 100%; }
.hiddenCharacterWindow h5 { color: #000000; padding-top: 0px; margin-top: 10px; margin-bottom: 10px; font-size: 20px; font-family: cambria, arial, helvetica, sans-serif; }
table.game { float: left; margin-right: 5px; text-align: center; width: 80px; font-size: .7em; }
.labelfor-publicnote { display: block; }
#form_optionalpublicnote { width: 95%; box-sizing: border-box; }
.widget-clear { clear: both; }
/* basic BBCode setup */
a img { border: 0px; }
.bbcode_img { max-width: 100%; }
ul.bbcode_list, #nowidgets ul { list-style-type: disc; }
.bbcode_collapse { padding-top: 2px; }
.bbcode_collapse .collapse_name { padding-top: 2px; cursor: pointer; }
.bbcode_collapse .collapse_content { display: none; padding-top: 2px; padding-left: 14px; margin-bottom: 10px; padding-bottom: 2px; }
table.bbcode_columns td { vertical-align: top; }
.bbcode_column { padding-left: 20px; }
.bbcode_firstcolumn { padding-left: 0px; }
.bbcode_column img { max-width: none; }
.bbcode_quote, .bbcode_code { border: 1px solid #000; margin: 20px 0; }
.bbcode_quote_head, .bbcode_code_head { padding: 5px 20px; }
.bbcode_quote_body, .bbcode_code_body { padding: 10px 20px; }
.bbcode_code_body { overflow-x: scroll; }
.bbcode_center .bbcode_columns { margin: auto auto; }
/* mobile elements */
.mobileonly { display: none; }
.mobiletabletonly { display: none; }
.desktoponly { display: block; }
/* mobile menus */
.menutoggle { float: right; font-size: 25px; }
.menutoggle.fa { font-size: 25px; }
#toolbar a { text-decoration: none; }
.toolbartoggle { height: 25px; padding: 10px 20px; line-height: 25px; }
/* Dropdown menus */
#toolbar-dropdown-nav, .nestedPages { z-index: 50; }
span.mobiledropdowntoggle { float: right; padding: 0 10px; text-align: center; display: none; font-size: 16px; line-height: 20px; }
/* This code relates to making youtube videos not overflow the page, even if the template is narrow or being viewed on a mobile device */
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.bbcode_center .video-container { margin: auto auto; }
/* **********************************************************************************************************
Mobile tweaks to hidden & behavioral elements
********************************************************************************************************** */
@media screen and (max-width: 500px) { .mobilesupportenabled { /* Fix for BBCode lists inside indents at small sizes */ }
.mobilesupportenabled .bbcode_indent { margin-left: 2em !important; }
.mobilesupportenabled .bbcode_indent ul.bbcode_list { margin-left: 15px; } }
@media screen and (max-width: 880px) { .mobilesupportenabled .bbcode_column img { max-width: 100%; } }
@media screen and (max-width: 500px) { .mobilesupportenabled table.bbcode_columns td { display: block; } }
@media screen and (max-width: 880px) { .mobilesupportenabled #toolbar ul li, .mobilesupportenabled #pagetabs li { margin-right: 0; }
.mobilesupportenabled .mobiletabletonly { display: block; }
.mobilesupportenabled .desktoponly { display: none; }
.mobilesupportenabled #toolbar ul, .mobilesupportenabled #pagetabs { display: none; }
.mobilesupportenabled #toolbar > ul.open, .mobilesupportenabled #pagetabs.open { display: block; }
.mobilesupportenabled #toolbar ul li, .mobilesupportenabled #pagetabs li { display: block; }
.mobilesupportenabled #toolbar-dropdown-nav, .mobilesupportenabled .nestedPages { position: relative; left: 0px !important; }
.mobilesupportenabled #toolbar a, .mobilesupportenabled #pagetabs a { display: block; padding: 5px 20px; }
.mobilesupportenabled #toolbar-dropdown-nav a, .mobilesupportenabled #pagetabs .nestedPages a { padding-left: 40px; }
.mobilesupportenabled ul#toolbar-dropdown-nav li, .mobilesupportenabled #charheader ul#pagetabs li ul.nestedPages li { width: auto; }
.mobilesupportenabled #alltabs { clear: both; padding-top: 20px; }
.mobilesupportenabled span.mobiledropdowntoggle { display: block; } }
@media screen and (max-width: 500px) { .mobilesupportenabled .mobileonly { display: block; } }
/* **********************************************************************************************************
Layout
********************************************************************************************************** */
#charheader a { text-decoration: none; }
ul#pagetabs { list-style-type: none; }
div#sitecontainer { max-width: 1400px; margin: 0 auto; }
#footer, #charcontent { clear: both; margin-top: 50px; }
div#adspace { padding-top: 20px; }
#ad { text-align: center; width: 100%; font-size: .8em; }
#ad a { text-decoration: none; }
#ad .removead { margin-bottom: 0; }
@media screen and (max-width: 880px) { .mobilesupportenabled #ad img { max-width: 100%; } }
@media screen and (max-width: 500px) { .mobilesupportenabled #adspace { height: 100px; } }
@media screen and (max-width: 880px) { .mobilesupportenabled body { min-width: 100%; }
.mobilesupportenabled div#sitecontainer { width: 95%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } }
@media screen and (max-width: 500px) { .mobilesupportenabled div#sitecontainer { width: 100%; padding: 0 5%; } }
/* **********************************************************************************************************
Background decorations & basic text styles
********************************************************************************************************** */
body { background: url(http://www.rprepository.com/templates/2.0/stylesheets/steampunk/rusty.png) repeat; background-color: #151515; color: #bc9363; font-size: 16px; font-family: Garamond, "Hoefler Text", "Times New Roman", Times, serif; }
h1, h2, h3, h4, h5, h6 { font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; }
#leftheaderside, #rightheaderside, #charheader { float: left; height: 170px; margin-top: 20px; }
#leftheaderside { background: url(http://www.rprepository.com/templates/2.0/stylesheets/steampunk/leftiron.png) no-repeat right top; width: 10%; }
#rightheaderside { background: url(http://www.rprepository.com/templates/2.0/stylesheets/steampunk/rightiron.png) no-repeat left top; width: 10%; }
#charheader { background: url(http://www.rprepository.com/templates/2.0/stylesheets/steampunk/woodbar.png) repeat-x; width: 80%; margin-bottom: 30px; }
#charheader h1#characterName { color: #a16b23; margin: 0; margin-top: 17px; }
#charheader h2#playedBy { color: #845619; font-size: 18px; margin-top: 10px; }
#charheader a { color: #bc9363; }
#charheader h2 a { color: #a16b23; }
.pagetitle { border-bottom: 1px solid #482D0E; font-size: 35px; line-height: 35px; padding-bottom: 3px; }
a { color: #a16b23; }
a:focus { color: #482d0e; }
a:hover { color: #482d0e; }
a:active { color: #fff; }
.bbcode_spoiler { background: #a16b23; color: #a16b23; }
.bbcode_collapse .collapse_name { border-bottom: 1px dashed #a16b23; color: #a16b23; }
.bbcode_collapse .collapse_name:hover { color: #482d0e; border-color: #482d0e; }
#charheader a, #footer a { text-decoration: none; }
#footer { text-align: center; }
#toolbar ul, #pagetabs { list-style-type: none; margin: 0; padding: 0; }
#toolbar ul li, #pagetabs li { display: inline-block; margin-right: 20px; }
#toolbar ul ul li, #pagetabs ul li { display: block; margin-right: 0; }
#toolbar ul ul li a, #pagetabs ul li a { display: block; padding: 5px 10px; }
#toolbar ul, #pagetabs { margin: 0; padding: 0; }
@media screen and (max-width: 500px) { .mobilesupportenabled li.widget h3 { padding: 0; background: none; margin-left: 0; } }
/* **********************************************************************************************************
Header
********************************************************************************************************** */
#charheader .portraitcontainer { height: 95px; width: 95px; border: 0px; background: url(http://www.rprepository.com/templates/2.0/stylesheets/steampunk/portraitback.png) no-repeat; margin: 11px 10px 0px 10px; padding: 28px 43px 30px 27px; text-align: center; float: left; }
#charheader .portraitcontainer img { max-height: 95px; position: relative; top: 51%; -webkit-transform: translateY(-51%); -ms-transform: translateY(-51%); transform: translateY(-51%); }
.pagetitle { background: rgba(0, 0, 0, 0.65); font-style: italic; color: #a16b23; padding: 5px; padding-left: 15px; border: 2px solid #482d0e; width: 78%; margin: 40px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
h1#characterName { margin-top: 49px; font-size: 35px; display: inline-block; line-height: 35px; margin-bottom: 10px; }
h2#playedBy { font-size: 23px; line-height: 23px; margin-top: 10px; }
#charheader a { color: #bc9363; }
#charheader a:hover, #charheader a:focus, #toolbar a:hover, #toolbar a:focus { color: #e5caab; }
#charheader .nestedPages a:hover, #charheader .nestedPages a:focus, #toolbar #toolbar-dropdown-nav a:hover, #toolbar #toolbar-dropdown-nav a:focus { border-bottom: 0; }
/* Styles for dropdown menus */
#toolbar ul#toolbar-dropdown-nav a, #charheader ul.nestedPages a { color: #a16b23; text-decoration: none; background: none; }
ul#toolbar-dropdown-nav, #charheader ul.nestedPages { background-color: #151515; border: 2px solid #482D0E; }
ul#toolbar-dropdown-nav li, #charheader ul#pagetabs li ul.nestedPages li { width: 150px; text-align: left; font-weight: normal; }
#toolbar ul#toolbar-dropdown-nav .dropdown-hover, #charheader ul.nestedPages .dropdown-hover { background: #e5caab; }
#toolbar ul#toolbar-dropdown-nav .dropdown-hover a, #charheader ul.nestedPages .dropdown-hover a { color: #151515; }
.toolbartoggle { color: #a16b23; background: rgba(0, 0, 0, 0.65); border: 2px solid #482d0e; text-transform: uppercase; }
@media screen and (max-width: 880px) { .mobilesupportenabled #toolbar a, .mobilesupportenabled #toolbar ul#toolbar-dropdown-nav a, .mobilesupportenabled #charheader ul.nestedPages a, .mobilesupportenabled #pagetabs a { color: #a16b23; text-decoration: none; background: #151515; }
.mobilesupportenabled #charheader #pagetabs, .mobilesupportenabled #toolbar > ul { border: 1px solid #482D0E; border-top: 0; }
.mobilesupportenabled ul#toolbar-dropdown-nav, .mobilesupportenabled #charheader ul.nestedPages { background-color: #151515; border: 0px; }
.mobilesupportenabled #toolbar ul#toolbar-dropdown-nav .dropdown-hover, .mobilesupportenabled #charheader ul.nestedPages .dropdown-hover, .mobilesupportenabled #charheader #pagetabs a:hover, .mobilesupportenabled #charheader #pagetabs a:focus, .mobilesupportenabled #toolbar a:hover, .mobilesupportenabled #toolbar a:focus, .mobilesupportenabled #toolbar ul#toolbar-dropdown-nav a:hover, .mobilesupportenabled #toolbar ul#toolbar-dropdown-nav a:focus, .mobilesupportenabled #toolbar ul#toolbar-dropdown-nav .dropdown-hover a, .mobilesupportenabled #charheader ul.nestedPages .dropdown-hover a { color: #151515; background: #a16b23; }
.mobilesupportenabled span.mobiledropdowntoggle { background: #a16b23; color: #151515; }
.mobilesupportenabled .dropdown-hover span.mobiledropdowntoggle, .mobilesupportenabled a:hover span.mobiledropdowntoggle, .mobilesupportenabled a:focus span.mobiledropdowntoggle { background: #151515; color: #a16b23; } }
.currentPage { font-weight: bold; }
.currentPage li { font-weight: normal; }
#pagetabs li { padding: 5px 0; }
#pagetabs li li { padding: 0; }
#toolbar { text-align: center; padding-bottom: 30px; }
@media screen and (max-width: 880px) { .mobilesupportenabled #pagetabs li { margin-bottom: 0; }
.mobilesupportenabled #charheader a:hover, .mobilesupportenabled #charheader a:focus { border-bottom: 0; }
.mobilesupportenabled #alltabs { margin-top: 10px; }
.mobilesupportenabled #toolbar { text-align: left; }
.mobilesupportenabled #leftheaderside, .mobilesupportenabled #rightheaderside { display: none; }
.mobilesupportenabled #leftheaderside, .mobilesupportenabled #rightheaderside, .mobilesupportenabled #charheader { float: none; height: auto; }
.mobilesupportenabled #charheader { background: none; width: 100%; margin-bottom: 30px; } }
@media screen and (max-width: 500px) { .mobilesupportenabled #charheader .portraitcontainer { float: none; margin: 20px auto; display: block; }
.mobilesupportenabled h1#characterName { margin-top: 0; display: block; text-align: center; font-size: 30px; line-height: 30px; }
.mobilesupportenabled #charheader h2#playedBy { font-size: 18px; }
.mobilesupportenabled .pagetitle { font-size: 30px; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }
.mobilesupportenabled h1, .mobilesupportenabled h2 { text-align: center; } }
/* **********************************************************************************************************
Content
********************************************************************************************************** */
ul.inUseWidgets { list-style-type: none; margin: 0; padding: 0; background: rgba(0, 0, 0, 0.65); padding: 25px; width: 78%; margin: 40px auto; border: 2px solid #482D0E; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@media screen and (max-width: 880px) { .mobilesupportenabled ul.inUseWidgets, .mobilesupportenabled .pagetitle { width: 100%; } }
/* **********************************************************************************************************
Widgets
********************************************************************************************************** */
li.widget { margin-bottom: 40px; }
ul.inUseWidgets li.widget:last-child { margin-bottom: 0; }
ul.inUseWidgets li.widget h3 { background: url(http://www.rprepository.com/templates/2.0/stylesheets/steampunk/gear.png) no-repeat top left; padding: 15px 20px 13px 25px; font-size: 23px; font-weight: bold; color: #e5caab; margin: 0px; margin-top: 10px; }
/* Journal widget */
ul.journal li { padding: 10px 0 25px 0; }
span.postdate, span.prev { float: right; }
@media screen and (max-width: 880px) { .mobilesupportenabled span.postdate { float: none; } }
@media screen and (max-width: 500px) { .mobilesupportenabled ul.journal h4 span.postdate { display: block; margin-left: 0; margin-top: 10px; } }
/* Always/Never widget*/
.alwaysnever { background: #222222; }
.alwaysnever td { border-color: #080808; }
@media screen and (max-width: 880px) { .mobilesupportenabled .alwaysnever td { display: block; }
.mobilesupportenabled .alwaysnever td.alwaystitle, .mobilesupportenabled .alwaysnever td.sometimestitle, .mobilesupportenabled .alwaysnever td.maybetitle, .mobilesupportenabled .alwaysnever td.nevertitle { display: none; }
.mobilesupportenabled .alwaysnever td.alwayscolumn::before { content: "Always"; font-weight: 600; padding: 5px; font-size: 1.2em; }
.mobilesupportenabled .alwaysnever td.sometimescolumn::before { content: "Sometimes"; font-weight: 600; padding: 5px; font-size: 1.2em; }
.mobilesupportenabled .alwaysnever td.maybecolumn::before { content: "Maybe"; font-weight: 600; padding: 5px; font-size: 1.2em; }
.mobilesupportenabled .alwaysnever td.nevercolumn::before { content: "Never"; font-weight: 600; padding: 5px; font-size: 1.2em; } }
/* Flexible stat widget*/
table.flexstatstable td.statlabel, table.flexstatstable td.statlevel { border: 1px solid #222222; }
table.flexstatstable td.statlabel { border-right: 0px; }
table.flexstatstable td.statlevel { border-left: 0px; }
table.flexstatstable .filleddisc { background-color: #a16b23; border: 2px outset #deaa66; }
table.flexstatstable .emptydisc { background-color: #33200a; border: 2px solid #33200a; }
@media screen and (max-width: 950px) { .mobilesupportenabled table.flexstatstable td.statlabel, .mobilesupportenabled table.flexstatstable td.statlevel { float: left; border: 0px; }
.mobilesupportenabled table.flexstatstable td.statlabel { clear: both; } }
@media screen and (max-width: 450px) { .mobilesupportenabled table.flexstatstable td.statlevel { clear: both; padding-top: 0px; margin-bottom: 15px; } }
table.flexstatstable, h4.flexstatsdivider { margin: 20px 0; }
h4.flexstatsdivider { font-size: 22px; }
/* Notifications widget */
ul.notifications li { border-bottom: 1px solid #482D0E; }
/* Guestbook & kudos widgets */
div.kudosForm h4, .guestbooktitle { font-size: 22px; }
p.guestbookcomment, p.guestbookreply { margin-left: 107px; }
@media screen and (max-width: 500px) { .mobilesupportenabled p.guestbookcomment, .mobilesupportenabled p.guestbookreply { margin-left: 0; } }
div.guestbookwidget textarea, div.kudosForm textarea, div.guestbookwidget select, div.guestbookwidget .typedname { color: #e5caab; background-color: #3b3b3b; border: 2px #080808 inset; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
div.guestbookwidget .guestbooksubmit, div.kudosForm .submitButton, .hiddenCharacterWindow input[type="submit"] { padding: 5px 10px; }
div.guestbookwidget .guestbooksubmit, div.kudosForm .submitButton, .hiddenCharacterWindow input[type="submit"] { color: black; background-color: #a16b23; border: 2px #cb872c outset; }
div.guestbookwidget .guestbooksubmit:hover, div.kudosForm .submitButton:hover, div.guestbookwidget .guestbooksubmit:focus, div.kudosForm .submitButton:focus, .hiddenCharacterWindow input[type="submit"]:hover, .hiddenCharacterWindow input[type="submit"]:focus { border: 2px #e2b67b outset; background: #d99f51; }
div.guestbookwidget .guestbooksubmit:active, div.kudosForm .submitButton:active, .hiddenCharacterWindow input[type="submit"]:active { border: 2px #231708 inset; background: #774f1a; }
.guestbookcommenter, .commenttime { color: #e5caab; }
div.guestbookwidget ul.guestbook { border-bottom: 1px solid #482D0E; }
.guestbookwidget .pagenumbers .prev { float: right; }
/* **********************************************************************************************************
BBCode tweaks
********************************************************************************************************** */
.bbcode_list { margin: 20px; }
.bbcode_list li { margin-bottom: 10px; }
.bbcode_quote, .bbcode_code { border-color: #3B3B3B; }
.bbcode_quote_head, .bbcode_code_head { background: #3B3B3B; color: #a16b23; }
This post is reserved for when the previous post exceeds its character limit.
This post is also reserved for when the previous post exceeds its character limit.
Hope that doesn't happen but there are a LOT of templates...
Hope that doesn't happen but there are a LOT of templates...
You are on: Forums » Art & Creativity » Copy and Paste - Official RPR Templates
Moderators: Mina, Keke, Cass, Claine, Sanne, Dragonfire, Ilmarinen, Darth_Angelus