(Resolved, For Now!) CSS Editing: Questions

Lexi

Hey all! I'm interested in trying my hand at custom CSS templates. Unfortunately, after a ton of research and reading topics both here and outside sources (google), I'm finding myself really overwhelmed. There's a lot of information to take in and I've gotten myself stuck at not even knowing where to start, so I figured instead of diving straight into creating templates out of scratch, I'd start with something simple; editing existing templates.

I've already been informed that this is commonly done and allowed in terms of tweaking colors and fonts, but what about images? For example, the Candle (Melted Wax) layout. Let's say I want to change the background image where the candle is seen on that black background, and shorten the image itself by lowering its height. If this is even possible, is it allowed? I wasn't sure if that fell into the category of fair use or if that was breaching terms of service or anything like that.

I just didn't want to go ahead with it until I knew it wasn't theft. I simply felt that using a premade / existing template's box model instead of trying to figure out how to make my own right off the bat would help me get the feel for CSS editing and possibly help me make a decent template using the base of another layout. That said, does anyone have any answers/advice for me? I'm so very lost. ; n ;

Kim Site Admin

It is very possible to do this! And thank you very much for asking, that shows fantastic conscientiousness of you. I should probably remember to write this somewhere prominent, but for the time being, I'll write it here: Permission is granted to use any images from our official templates for the purposes of making custom RPR templates, whether they are large or small edits on the original.

Can't wait to see what you come up with!

Lexi Topic Starter

Thanks so much, Kim.

That's good to know! Hopefully I'll be able to figure this out at some point. xD

Silas

This is super helpful to know. If you'd like to tweak any of my RRP codes or need any help, please let me know.

Lexi Topic Starter

I'll be sure to do that Fiebs. c: Thank you for the offer!

Lexi Topic Starter

Alright, I'm back again. xD So... a while back, Kim taught me how to edit an existing CSS template. I know I have to change the url of the images used to the proper path of that specific layout. So far, so good! However, there are three pesky url's that have foiled my plans of editing... the ones in quotes, those being:

Quote:

url("portback.png")

Quote:

.widgetTitle { background: url("widgettitle.png")

Quote:

list-style-image: url("bullet.png");

I've tried several variations of (successfully) adding the proper path to them as I did with the other URL's but to no avail. What am I doing wrong here? These silly quotation marks have left me baffled. xD

For some extra clarification: I'm basically just trying to change the background image of a pre existing template-- namely this one: http://www.rprepository.com/templates/2.0/stylesheets/wolf2-grey/style.css and have so far copy pasted all of that and changed the image directly of the links to that one... but I'm stuck on the ones I listed above. I don't know how to change those properly whatsoever, or if it'll even fix the missing image links I'm having. I used ctrl+F to make sure I found all the url's so unless I'm missing something else here... I dunno. ><;

Sanne Moderator

Code:

url("http://www.rprepository.com/templates/2.0/stylesheets/wolf2-grey/portback.png")

.widgetTitle { background: url("http://www.rprepository.com/templates/2.0/stylesheets/wolf2-grey/widgettitle.png")

list-style-image: url("http://www.rprepository.com/templates/2.0/stylesheets/wolf2-grey/bullet.png");

Does this help?

This is the proper way to complete the image URLs, and you can replace them with whatever you have. Just make sure you keep the quotation marks in place.

Lexi Topic Starter

Unfortunately not, Sanne.

I've double, no- triple checked the links to make sure they're exactly as you've shown them here. It's not giving me any warning that the url's are wrong, however, so maybe it's not those url's responsible for my issue. I took some screenshots to show the differences between the original layout and my copy-pasted adjusted directory version.

Original Layout: https://db.tt/pcUbvP3t

Edited Layout: https://db.tt/4VMtJYQc

The only thing I've changed in the code are the image directories to include that line that you pasted just now. I'm really not sure why certain things aren't showing up the same as they are in the original layout unless I need to edit something else as well. ><

Also-- I cropped those screenshots to be a bit smaller since they're in my original resolution and quite large otherwise. The backgrounds aren't actually cropped out like that-- they're there and fully functional. I just figured I'd minimize the loading time of the images I needed to show, targeting the specific areas that aren't appearing properly.

Also also, is it allowed for me to pastebin the CSS code to show others exactly what I'm working with? If so I'll do that and paste it here if it'll help. Didn't want to do that without asking since I'm not really sure that's okay to do. x.x

Claine Moderator

It'd be much easier to take a look at the code

It's perfectly okay to Pastebin it, or just apply your work-in-progress to one of your characters and people can use that to take a look.

Sanne Moderator

I'm not entirely sure if you're trying to get your base to work properly before you start editing, or if you already had a working base and are making edits that are messing things up now. I'm going to assume it's the former, but please correct me if I'm wrong!

The troubles you're having look like you didn't fully copy and paste the whole CSS for the template. The code I pasted below is a working version. It includes the parts that normalizes the style so you're working from a 'clean base'. Can you compare your code to this, see what's missing or altered?

You're welcome to copy all of this code into your template and start making edits from there if you'd like.

If I misinterpreted the issues you're having, please do provide us with your code so we can take a peek! Pastebin works, but you can also use the [ code ] tags like I did in posts.

Long code is long, click to reveal!

Important: check the box that says "Do not load the default CSS". uncheck the box that says "Do not load the default widget CSS".

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: 950px) { .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: 950px) { .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; } }
/* **********************************************************************************************************
	BEGINNING OF TEMPLATE-SPECIFIC STYLES
********************************************************************************************************** */
/* **********************************************************************************************************
	Layout
********************************************************************************************************** */
#charheader a { text-decoration: none; }

ul#pagetabs { list-style-type: none; }

#footer { clear: both; margin-top: -170px; }

#sitecontainer { margin: 0 auto; width: 1005px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

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: 950px) { .mobilesupportenabled #ad img { max-width: 100%; } }
@media screen and (max-width: 500px) { .mobilesupportenabled #adspace { height: 100px; } }
@media screen and (max-width: 950px) { .mobilesupportenabled body { min-width: 100%; }
  .mobilesupportenabled #sitecontainer { width: 100%; padding: 0 10%; }
  .mobilesupportenabled #charheader, .mobilesupportenabled #charcontent { padding: 0px 0px; } }
@media screen and (max-width: 500px) { .mobilesupportenabled div#sitecontainer { width: 100%; padding: 0 5%; } }
/* **********************************************************************************************************
	Background decorations & basic text styles 
********************************************************************************************************** */
body { background-image: url(bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; background-attachment: fixed; color: #000; background-color: #313131; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 17px; }

h1, h2 { Font-family: 'Amatic sc', serif; font-weight: 400; font-variant: small-caps; }

h3, h4, h5, h6, ul#pagetabs { Font-family: Julee, serif; font-weight: 400; }

#charcontent { background: url(http://www.rprepository.com/templates/2.0/stylesheets/wolf2-grey/contentbg.png) repeat-y center top; padding: 0px 100px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: auto auto; padding-bottom: 200px; }

h1, h2#playedBy { color: #ffffff; font-variant: small-caps; }

h2.pagetitle { color: #000000; font-variant: normal; }

h3, h4, h5, h6 { color: #000000; font-weight: 600; font-variant: normal; }

#leftheaderside, #rightheaderside { display: none; }

#toolbar { text-align: center; font-size: .8em; background: #000; }

a { color: #ffffff; }
a:focus { color: #4e4e4e; }
a:hover { color: #4e4e4e; }
a:active { color: #313131; }

.bbcode_spoiler { background: #ffffff; color: #ffffff; }

.bbcode_collapse .collapse_name { border-bottom: 1px dashed #ffffff; color: #ffffff; }
.bbcode_collapse .collapse_name:hover { color: #4e4e4e; border-color: #4e4e4e; }

#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: 950px) { .mobilesupportenabled #sitecontainer { background-position: center center; background-size: contain; }
  .mobilesupportenabled #toolbar { padding: 0; font-size: 1em; } }
/* **********************************************************************************************************
	Header
********************************************************************************************************** */
#charheader .portraitcontainer { position: absolute; margin-left: 451px; background: url("http://www.rprepository.com/templates/2.0/stylesheets/wolf2-grey/portback.png") no-repeat; width: 103px; height: 103px; padding: 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: table-cell; text-align: center; vertical-align: middle; margin-top: 30px; }

#charheader .portraitcontainer img { max-height: 95px; max-width: 95px; display: block; margin: auto auto; position: relative; top: 51%; -webkit-transform: translateY(-51%); -ms-transform: translateY(-51%); transform: translateY(-51%); }

h1#characterName { float: left; text-align: right; width: 430px; margin-top: 30px; line-height: 103px; font-size: 65px; margin-bottom: 0px; }

h2#playedBy { float: right; text-align: left; width: 430px; margin-top: 30px; line-height: 103px; font-size: 55px; margin-bottom: 0px; }

.pagetitle { font-variant: normal; font-size: 50px; line-height: 50px; margin: 0px; padding: 40px 0; }

/* Styles for dropdown menus */
#toolbar ul#toolbar-dropdown-nav a, #charheader ul.nestedPages a { color: #ffffff; text-decoration: none; background: none; }

ul#toolbar-dropdown-nav, #charheader ul.nestedPages { background-color: #313131; border: 1px solid #4e4e4e; }

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: #ffffff; }

#toolbar ul#toolbar-dropdown-nav .dropdown-hover a, #charheader ul.nestedPages .dropdown-hover a { color: #313131; }

@media screen and (max-width: 950px) { .mobilesupportenabled #toolbar a, .mobilesupportenabled #toolbar ul#toolbar-dropdown-nav a, .mobilesupportenabled #charheader ul.nestedPages a, .mobilesupportenabled #pagetabs a { color: #ffffff; text-decoration: none; background: #313131; }
  .mobilesupportenabled #charheader #pagetabs, .mobilesupportenabled #toolbar > ul { border: 1px solid #4e4e4e; border-top: 0; }
  .mobilesupportenabled ul#toolbar-dropdown-nav, .mobilesupportenabled #charheader ul.nestedPages { background-color: #313131; 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: #313131; background: #ffffff; }
  .mobilesupportenabled span.mobiledropdowntoggle { background: #ffffff; color: #313131; }
  .mobilesupportenabled .dropdown-hover span.mobiledropdowntoggle, .mobilesupportenabled a:hover span.mobiledropdowntoggle, .mobilesupportenabled a:focus span.mobiledropdowntoggle { background: #313131; color: #ffffff; } }
ul#pagetabs { margin: 0px; padding: 0px; height: 25px; background: url(http://www.rprepository.com/templates/2.0/stylesheets/wolf2-grey/contenttop.png) no-repeat top center; margin: auto auto; padding: 0px 100px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 141px; padding-top: 80px; clear: both; margin-top: 0px; }

#pagetabs li { padding: 5px 0; }

#pagetabs li li { padding: 0; }

ul#pagetabs a { color: #000; }

ul#pagetabs a:hover, ul#pagetabs a:focus { color: #ffffff; }

table.flexstatstable .filleddisc, table.flexstatstable .emptydisc { -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; }

.currentPage > a { font-style: italic; }

#toolbar { padding: 5px 0; }

.toolbartoggle { background-color: #313131; color: #ffffff; text-align: left; font-weight: bold; }

@media screen and (max-width: 950px) { .mobilesupportenabled #pagetabs { font-size: 1em; text-align: left; padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: auto; }
  .mobilesupportenabled #pagetabs a { text-shadow: none; }
  .mobilesupportenabled #pagetabs li { margin-bottom: 0; padding: 0; }
  .mobilesupportenabled #charheader a:hover, .mobilesupportenabled #charheader a:focus { border-bottom: 0; }
  .mobilesupportenabled #alltabs { margin-top: 10px; }
  .mobilesupportenabled #toolbar { text-align: left; }
  .mobilesupportenabled #charheader .portraitcontainer { display: block; float: none; margin: 20px auto; position: relative; }
  .mobilesupportenabled #charheader h1, .mobilesupportenabled #charheader h2 { text-align: center; padding: 0; margin: 0; float: none; width: 100%; }
  .mobilesupportenabled #charheader h1 { padding-bottom: 15px; font-size: 35px; line-height: 35px; }
  .mobilesupportenabled #charheader h2 { font-size: 30px; line-height: 30px; }
  .mobilesupportenabled #header-and-content-container { background: none; }
  .mobilesupportenabled .pagetitle { padding-top: 35px; }
  .mobilesupportenabled #charcontent { width: 100%; padding: 10px 20px; padding-bottom: 200px; } }
@media screen and (max-width: 500px) { .mobilesupportenabled .pagetitle { 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; } }
/* **********************************************************************************************************
	Widgets
********************************************************************************************************** */
ul.inUseWidgets li.widget { margin-bottom: 20px; }

ul.inUseWidgets li.widget:first-child h3 { margin-top: 0; }

ul.inUseWidgets li.widget:last-child { margin-bottom: 0; }

.widgetTitle { background: url("http://www.rprepository.com/templates/2.0/stylesheets/wolf2-grey/widgettitle.png") no-repeat bottom left; font-size: 37px; padding-bottom: 12px; margin: 40px 0px; line-height: 37px; padding-left: 5px; margin-bottom: 20px; }

/* Vital stats widget */
ul.inUseWidgets li.widget ul.vitalstats, .bbcode_list, #nowidgets ul { margin-left: 40px; }

ul.vitalstats li, .bbcode_list li, #nowidgets li { margin-bottom: 10px; }

ul.inUseWidgets li.widget ul.vitalstats, li#nowidgets ul { margin-bottom: 10px; }

ul.inUseWidgets li.widget ul.vitalstats, .bbcode_list { list-style-image: url("http://www.rprepository.com/templates/2.0/stylesheets/wolf2-grey/bullet.png"); margin-left: 30px; }

/* Journal widget */
ul.journal li { padding: 10px 0 25px 0; }

span.postdate, span.prev { float: right; }

@media screen and (max-width: 950px) { .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 td { border-color: #C1C1C1; }

@media screen and (max-width: 950px) { .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 #C1C1C1; }

table.flexstatstable td.statlabel { border-right: 0px; }

table.flexstatstable td.statlevel { border-left: 0px; }

table.flexstatstable .filleddisc { background-color: #4D4D4D; border: 2px outset #737373; }

table.flexstatstable .emptydisc { background-color: #C1C1C1; border: 2px solid #C1C1C1; }

@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 #C1C1C1; }

/* 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: #000; background-color: #e7e7e7; border: 2px #b4b4b4 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: #e7e7e7; background-color: #4D4D4D; border: 2px #676767 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 #9a9a9a outset; background: gray; }

div.guestbookwidget .guestbooksubmit:active, div.kudosForm .submitButton:active, .hiddenCharacterWindow input[type="submit"]:active { border: 2px black inset; background: #333333; }

.guestbookcommenter, .commenttime { color: #000000; }

div.guestbookwidget ul.guestbook { border-bottom: 1px solid #C1C1C1; }

.guestbookwidget .pagenumbers .prev { float: right; }

/* **********************************************************************************************************
	BBCode tweaks
********************************************************************************************************** */
.bbcode_quote, .bbcode_code { border-color: #000; }

.bbcode_quote_head, .bbcode_code_head { background: #000; color: #C1C1C1; }

/* **********************************************************************************************************
	Ads
********************************************************************************************************** */
#adspace p { margin-bottom: 0; }

Lexi Topic Starter

Sanne wrote:

Important: check the box that says "Do not load the default CSS". uncheck the box that says "Do not load the default widget CSS".

Oh.

My.

Fictional RP Gods.

It is astonishing just how much one little check box has caused me so much hell... First, I tried the CSS you linked. It worked. I thought... surely, I checked the right box on my version, right? NOPE!! Omg, I feel so obnoxiously stupid right now. xD Checked it, and bam. Working just like the CSS you sent me.

SANNE!! You're a hero. xD Thank you to everyone who took time out of their days/nights to help me. ♥ But it's all fixed now!! Thank you all, and thank you Sanne- for pointing out the one teeny tiny little tidbit that needed fixing. ; w ;

Sanne Moderator

No problem!! I've been doing a lot of fiddling around with this myself and the boxes were giving me some issues as well.

I'm glad it was only a minor issue!! Good luck with your editing adventure!

You are on: Forums » Help » (Resolved, For Now!) CSS Editing: Questions

Moderators: Mina, Keke, Cass, Claine, Sanne, Dragonfire, Ilmarinen, Darth_Angelus