• Before posting a question, please check our Frequently Asked Questions page as well as previous threads here. Odds are you aren't the first to ask, and you may find the answer without having to post!

Stylish [In-Browser CSS Editor]

Doctor Calgori

Doctor Calgori

Minister of Science, Shhh.....
Moderator's Note This thread is for those who need more CSS customization than what is already provided by the AD Styler or the Color Picker (which can be found at the bottom left-hand corner of the site). Stylish is not officially supported by RoleplayZone but we as a site and staff will attempt to support you with as much information as we can.



Some folks have expressed interest in a way to tame the website CSS to their liking. Note that this method does require some knowledge of web tech and CSS in general. Alternatively, if you've got the patience, I can post a generic style template that mutes all the whiteness and replaces your background with spinning chef dogs.


Anyways, I'm currently using Stylish. Here are the links for the Chrome and Firefox versions, as well as the dev's website.


Firefoff


Goggle Chrome


dev site


Opera users might be able to change CSS on a site-by-site basis using the User CSS feature of the browser, depending on what version they are using. Alternatively, it looks like there are a few Stylish equivalents for Opera that will do the same thing.


Not sure about IE or the mobile versions of anything at all; sorry phonies :C


The guide is pretty self explanatory. Feel free to shout out in here if you do get stylish. We can form a sooper trooper web source snooper club, which will make solving the CSS easier. I also recommend using some sort of development tool to assist in finding each element's style. I personally use Firebug, although I'm pretty sure that most browsers can inspect elements via mouseover.


Here is a quick example of what you can do with Stylish. Note that changing any pictures/editing actual site behavior will require other tools.

ac17bad3dc.png

yes that is comic sans
 
Last edited by a moderator:
What exactly would I look for to try to find an Opera equivalent? I have no idea what I'm doing, and I would really like to not have my eyes feel burned every time I spend more than ten minutes on this site.
 
This has been moved to Questions & Information (as some want to use this for our site specifically). Thank you for your contribution (as always), @Admiral Calgori
 
Ah, I got it to work. Now to figure out CSS. Been WAY too long since I did anything resembling coding...
 
Melissia said:
Ah, I got it to work. Now to figure out CSS. Been WAY too long since I did anything resembling coding...
Click to expand...
We would be glad to help you if you want, just let us know what you want portion of the site you want to edit color wise.


To find HEX codes for CSS background colors, a good resource is one provided by W3C. http://www.w3schools.com/tags/ref_colorpicker.asp


It will let you find almost any shade of color in the universe that exists on a computer.
 
I know hex codes, I just don't know the actual names for what the styles are.


For example, this:

Code: 
body {
   background-color: #151515;
}

... does nothing apparently. Was just trying it out, since it's been so long, though, so I probably screwed something up.


Something like the image that Admiral Calgori posted would be ideal for me I think...
 
So here's the weird thing. When I tried Melissa's code it worked like the AD Styler and changed the proper background to black. Now, how do I change the middle column/table to black, because Calgori's code isn't working for me?
 
I have the same question, honestly. I managed to et my code to work, I just don't know how to get the middle column and other such places to be dark.
 
Alright, HTML and CSS is a simple tihng that becomes very complex in large sites such as a forum software.


All HTML is wrapped in a element called body. So, when you change the background of the body, you change the background of the entire site. All colors on top of that stay the same. The body is the background basically.


The white center column can be targed though the use of the following CSS:

Code: 
#content .pageContent {
   background: #COLOUR;
}
 
Ah, found it. Looks like Calgari put an extra { } bracket set.


Is there a way I can make the text entry section, the code section, etc darker?


Don't want them black, just not glaringly bright white.
 
Melissia said:
Ah, found it. Looks like Calgari put an extra { } bracket set.
Is there a way I can make the text entry section, the code section, etc darker?


Don't want them black, just not glaringly bright white.
Click to expand...
Are you talking about the add-on
 
DreamingofRoses said:
Are you talking about the add-on
Click to expand...
Yes.


Take his code section, remove the { bracket at the beginning and the } bracket at the end, and it works.
 
Melissia said:
Yes.
Take his code section, remove the { bracket at the beginning and the } bracket at the end, and it works.
Click to expand...
Aaaah.


See, I only got like 7% into the CSS course on Codecademy, I've been focused on Ruby and Javascript.
 
I never went to a code academy. I had one semester of C-Sharp coding and that was it.

Pineapple said:
Code: 
.messageList .message

That will target the post area.
Click to expand...
One more thing hwile I'm bugging you... how do I change the color of quote boxes?
 
Code: 
.bbCodeQuote .attribution

.bbCodeQuote .quoteContainer

The first one targets the 'who said this' the second targets what was said.
 
I'm going to have to play with this for a while, as I have noooooo idea what I'm doing, heh.
 
Miz said:
We would be glad to help you if you want, just let us know what you want portion of the site you want to edit color wise.
To find HEX codes for CSS background colors, a good resource is one provided by W3C. http://www.w3schools.com/tags/ref_colorpicker.asp


It will let you find almost any shade of color in the universe that exists on a computer.
Click to expand...
I know nothing about coding. Everything after Miz's post here confuzzles the Kaerri. :( I do get HEX codes though. Would someone be able to write me a thingy for this Stylish thingy to make all the white thingies into #D1E0E0 thingies instead? That's close enough to white that alternate text colors should still be visible, but colored enough not to hurt my eyes.
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
Back
Top