Stylish [In-Browser CSS Editor]

[Thief of Words]

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.

I'm in the same boat. Everything I know about coding has to do with relational databases or archival finding aids.

 

[DreamingofRoses]

I'll see if I can do it when I get my computer back this evening if no one else has.


@Kaerri and @Thief of Words : Are you both using stylish and Firefox?

 

[Kaerri]

I'm in Chrome, but yes, have installed Stylish from the link above.

 

[Thief of Words]

Apologies. Took me a minute. Had to step away from the site for a while.

 

[Kaerri]

Also, I should mention that I did turn on the AD Styler and am using the Forest theme, it's just all the other white spaces I'd like to change (the ones that aren't changeable without apps or what have you).

 

[DreamingofRoses]

That's OK. For now, until I get my computer back, you can copy and use Calgori's code here which will make everything dark with light text.

 

[Thief of Words]

likewise I shifted it to a set of darker greys-and-blues. I'd just like to get rid of the painful white spots. Um. I'll wait. I have nothing pressing to do on the site today, and I've got too much of a headache to go look up how to get the font on something that's not Comic Sans.

 

[DreamingofRoses]

Would you all be OK with the column still being white if the actual messages were darker to add a little contrast?

 

[Kaerri]

I think that would be excellent, yes.

 

[DreamingofRoses]

Alright, so here's the code I'm looking at now all in purple. I can change the color to your specifications or you can get the code and change it to your own etc... unfortunately I can't do anything about the message box or the other little white spaces.


http://imgur.com/e1zvYqN


http://imgur.com/hIHUBPq


What do you think?

 

[Millershipper]

Thank you for that dimmer image. The reply box still comes up white but the rest of the screen is much better. I appreciate this even more as I never learned any coding and am completely ignorant about writing such.

 

[Kaerri]

That looks very nice, Roses!

 

[Melissia]

Alright, so here's the code I'm looking at now all in purple. I can change the color to your specifications or you can get the code and change it to your own etc... unfortunately I can't do anything about the message box or the other little white spaces.
http://imgur.com/e1zvYqN


http://imgur.com/hIHUBPq


What do you think?

I like it. Much better looking than my custom Stylish was.

 

[DreamingofRoses]

So, here's the code for Stylish. After you install the Stylish extension all you have to do is click the button that should appear next to your URL bar, go down to "Write New Style" for "www.roleplay.zone" . You'll see this code already written in the code box.

@namespace url(http://www.w3.org/1999/xhtml)
@-moz-document domain("www.roleplay.zone") { Paste the code I'm giving you here. }

Spoiler

 .messageList .message {
 background:  #9E8DA8 ;

 }

 #content .pageContent {
 background: #401967;
}
 .bbCodeQuote .attribution{
 background:  #9E8DA8 ;
 }

 .bbCodeQuote .quoteContainer {
 background-color:  #9E8DA8 ;
 }

 .messageUserBlock {   
 background-color: #9E8DA8; }
 .messageUserBlock div.avatarHolder {

 background-color: #9E8DA8; }



 .nodeList .categoryForumNodeInfo, .nodeList .forumNodeInfo,
 .nodeList .pageNodeInfo, .nodeList .linkNodeInfo
 {  
 background-color: #9E8DA8;
 }
 .node .nodeLastPost
 {

 background-color: #9E8DA8;
 }
 .sidebar .secondaryContent .listInline .username
 {
 background-color: #9E8DA8;
 }
 .quickReply{background-color: #9E8DA8 ;}

Hit "Preview" and see if it works. (It won't change the very back background, use the AdStyler for that.) You will also be able to replace the purple with colors you like by replacing the hex-codes (the things that have 6 letters and/or numbers after the # sign) with colors you prefer. Miz linked that HTML color picker/hexcode site earlier in the thread. You can hit preview after you change the color to see how you like it. Don't forget to save afterwards.


Enjoy, and let me know if you have any questions.

 

[Kaerri]

Ooo shiny! I don't see a preview but it's so quick to use (now that you've done all the hard part! ) that I can just replace the colors and see. Thank you very very much!

 

[DreamingofRoses]

Ooo shiny! I don't see a preview but it's so quick to use (now that you've done all the hard part! ) that I can just replace the colors and see. Thank you very very much!

Do you mean you can just change the code and the change will just show up?

 

[Kaerri]

After changing the code I just hit save, and it shows up that way without having to reload the page. Only here though because that's what I told it to do.

 

[Kaerri]

I ended up changing the color only slightly, but I imagine I'll be playing with it more (I do love to play with colors). Here's what it looks like right now, with the Forest style.


View attachment 3010<p><a href="<fileStore.core_Attachment>/monthly_2014_06/57a8bfe45b08c_Dustypurple.png.ec84a73f2843160d4926eac4279e685f.png" class="ipsAttachLink ipsAttachLink_image"><img data-fileid="24580" src="<fileStore.core_Attachment>/monthly_2014_06/57a8bfe45b08c_Dustypurple.png.ec84a73f2843160d4926eac4279e685f.png" class="ipsImage ipsImage_thumbnailed" alt=""></a></p>

 

[Ignitedstar]

Well, I did get this far.


Trying to figure out how to do change the white lines now...<p><a href="<fileStore.core_Attachment>/monthly_2014_06/57a8bfe472e05_StylishTest.jpg.ec71a4188c73ddb62dff67889811935a.jpg" class="ipsAttachLink ipsAttachLink_image"><img data-fileid="24584" src="<fileStore.core_Attachment>/monthly_2014_06/57a8bfe472e05_StylishTest.jpg.ec71a4188c73ddb62dff67889811935a.jpg" class="ipsImage ipsImage_thumbnailed" alt=""></a></p>

 

[Ignitedstar]

Perhaps a little frivolous, but here's another. Strange whitelines changed, white stripes also changed, though for some reason I cannot also change the tip of the arrows.<p><a href="<fileStore.core_Attachment>/monthly_2014_06/57a8bfe47881f_StylishTest2.jpg.ba56cae91fa3487c70d19b0b6151ab95.jpg" class="ipsAttachLink ipsAttachLink_image"><img data-fileid="24585" src="<fileStore.core_Attachment>/monthly_2014_06/57a8bfe47881f_StylishTest2.jpg.ba56cae91fa3487c70d19b0b6151ab95.jpg" class="ipsImage ipsImage_thumbnailed" alt=""></a></p>

 

[Wolf Rawrrr]

Kudos to all of you guys and gals wrestling with CSS *bark*


Wolf decided to stick with the white for now, and it's not that bad after you get used to it. I played with the AD Styler a bit and got stuff under semi-control.

 

[Kaerri]

The darker-white would have done okay for me, but Roses was already working on it and now I have my dusty purple to match the background. Thanks again, Roses! And thanks Melissia for offering to help as well.