Skip to main content

Help » Using and creating custom character styles

Table of Contents

What are custom styles?

Custom character styles are unofficial styles for character profiles that have been created by RPR users just like you. Only epic members are able to apply them to their characters, but any member can create and preview custom styles, or even share their custom looks with other epic members if they are feeling generous.

Because custom styles are user-made, the RP Repository can't vouch for their completeness. If you find a problem with a user-created style, you'll have to contact the user who designed the style to get it fixed rather than submitting a bug report to the RPR.

How do I use custom styles?

If you have an Epic Account, simply look for styles labelled "User Created Style" in the style library, and pick "Use this style" just as you would any official style.

Don't have an epic account, but still curious? Click the "preview" link on the style instead, to see how your character would look with that style.

How do I make my own custom style?

Every style on the RP Repository, whether officially made or custom made by our users, is created using CSS. CSS is the same tool professional web designers use, and allows for fine control over nearly every element on your character sites. With CSS, the number of looks you can create for your character pages is infinite!

To create your first custom style...

  1. Navigate to Your Stuff (or Your Stuff » Characters).
  2. Click the pencil icon next to any character.
  3. Click "[Character Name]'s Style" (it's the icon that looks like a paint brush )
  4. Pick "Your Style Workshop" from the sidebar.
  5. Click the "Create New Style" button.

After you've created your first custom style, you can go to Your Stuff » Styles

Where do I learn CSS?

There are hundreds of resources online for learning CSS, many of them free. We suggest that you start by Googling the topic!

I already know CSS. What should I know about your box model to get started?

Refer to the following diagram to get a sense of how the HTML for character profiles is laid out.

div#sitecontainer
div#toolbar
div#headerholder
div
#left
header
side
div#charheader
div
.portrait
container
div#characterName
div#playedBy
ul#pagetabs
li.pagetab
li.pagetab
li.pagetab
div
#right
header
side
div#charcontent
div.pagetitle
.row
.col-12
ul.widgets
li.widget
div.widgetTitle
li.widget
div.widgetTitle
.row
.col-6
ul.widgets
li.widget
div.widgetTitle
li.widget
div.widgetTitle
.col-6
ul.widgets
li.widget
div.widgetTitle
li.widget
div.widgetTitle
div#footer

What happens if I am using a custom style and my Epic membership expires?

Your characters will revert to using the last "official" style they sported before you chose a custom style.

What happens if I created custom styles, and then my epic membership expires?

Although you won't be able to use your custom styles without an epic membership, all your hard work won't be lost. Your styles are saved, and will become available for you to use again as soon as you renew your epic account. If you have shared styles, they will remain available for other epic members to use.

What happens if I start using a custom style that has been shared by another user, and then they decide they don't want to share anymore?

Sadly, not all good things can last. Every user who generously shares their work also has the right to unshare their work.

When a custom style becomes unavailable for some reason, every character that had been using that template will automatically revert to using the last "official" style they sported. Since you can never be 100% sure that another user will keep their work available forever, it's a good idea to pick an official RPR style first and then go hunting through the shared custom library, so that if a style gets unshared you will have something to fall back on.

I want to add mobile support to my style

Fantastic! Here's some starter CSS for you to use and edit:

Code:
/* Look of mobile menu bars */ .toolbartoggle {background-color: #666; color: #fff; text-align: left; font-weight: bold;} /* Corrections that begin at tablet size */ @media screen and (max-width: 900px) { .mobilesupportenabled .mobiletabletonly { display: block; } .mobilesupportenabled .desktoponly { display: none; } .mobilesupportenabled #sitecontainer {width: 90%;} .mobilesupportenabled .bbcode_column img { max-width: 100%; } /* Small or touch screen navigation -- you may need to change colors in this section! */ .mobilesupportenabled #toolbar ul li, .mobilesupportenabled #pagetabs li { margin-right: 0; } .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; } .mobilesupportenabled #toolbar a, .mobilesupportenabled #toolbar ul#toolbar-dropdown-nav a, .mobilesupportenabled #charheader ul.nestedPages a, .mobilesupportenabled #pagetabs a { color: #0645AD; text-decoration: none; background: #ffffff; } .mobilesupportenabled #charheader #pagetabs, .mobilesupportenabled #toolbar > ul { border: 1px solid #666; border-top: 0; } .mobilesupportenabled ul#toolbar-dropdown-nav, .mobilesupportenabled #charheader ul.nestedPages { background-color: #ffffff; 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: #ffffff; background: #666; } .mobilesupportenabled span.mobiledropdowntoggle { background: #666; color: #ffffff; } .mobilesupportenabled .dropdown-hover span.mobiledropdowntoggle, .mobilesupportenabled a:hover span.mobiledropdowntoggle, .mobilesupportenabled a:focus span.mobiledropdowntoggle { background: #ffffff; color: #666; } } /* Corrections that begin at mobile size */ @media screen and (max-width: 500px) { .mobilesupportenabled .mobileonly { display: block; } .mobilesupportenabled #sitecontainer {width: 100%; padding: 0 8%;} /* Character header corrections */ .mobilesupportenabled #charheader .portraitcontainer {float: none; text-align: center; display: block; margin: 20px auto;} .mobilesupportenabled #charheader h1, .mobilesupportenabled #charheader h2 {text-align: center;} /* 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; } /* Fix for BBCode columns at small sizes */ .mobilesupportenabled table.bbcode_columns td { display: block; } /* Fix for flexible stat widgets at small sizes */ .mobilesupportenabled table.flexstatstable td.statlabel, .mobilesupportenabled table.flexstatstable td.statlevel { float: left; border: 0px; } .mobilesupportenabled table.flexstatstable td.statlabel { clear: both; } /* Fix for always/never widget at small sizes */ .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; } } @media screen and (max-width: 450px) { /* Fix for flexible stat widgets at even smaller sizes */ .mobilesupportenabled table.flexstatstable td.statlevel { clear: both; padding-top: 0px; margin-bottom: 15px; } }

I want to add support for columns and rows

If you have checked "Do not load the default CSS" for your style, then you'll need to manually add back support for columns and rows. This will do the basics for you in most styles. Add this somewhere near the top of your CSS:

Code:
.row {clear: both; margin-bottom: 2rem;} .row_end {clear:both;} .rows { margin: 0 40px;} ul.widgets {list-style-type: none; padding: 0; margin: 0;} .col-11,.col-10,.col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3,.col-2,.col-1 {float: left; padding-right: 15px; padding-left: 15px; box-sizing: border-box;} .row-interior > div:first-child {padding-left: 0;} .row-interior > div:last-child {padding-right: 0;} .col-1 {flex: 0 0 8.3333333333%; width: 8.3333333333%;} .col-2 {flex: 0 0 16.6666666666%; width: 16.6666666666%;} .col-3 {flex: 0 0 24.9999999999%; width: 24.9999999999%;} .col-4 {flex: 0 0 33.3333333332%; width: 33.3333333332%;} .col-5 {flex: 0 0 41.6666666665%; width: 41.6666666665%;} .col-6 {flex: 0 0 49.9999999998%; width: 49.9999999998%;} .col-7 {flex: 0 0 58.3333333331%; width: 58.3333333331%;} .col-8 {flex: 0 0 66.6666666664%; width: 66.6666666664%;} .col-9 {flex: 0 0 74.9999999997%; width: 74.9999999997%;} .col-10 {flex: 0 0 83.333333333%; width: 83.333333333%;} .col-11 {flex: 0 0 91.6666666663%; width: 91.6666666663%;} .col-12 {width: 100%;}

Related Articles