rainfall: A girl stands in the midst of fallen leaves. You can't see her face. (Default)
Libek ([personal profile] rainfall) wrote2012-01-04 04:19 pm

LJ Skin, AKA Tropospherical Blue for Dreamwidth

First, a disclaimer: This is not my brainchild. It was created by [personal profile] emiri and you can see her original post here. But I've made so many tweaks in the comments on that post that trying to organize them now is incredibly messy.

So, I'll assume you want Tropospherical Blue -- or more specifically my edited widescreen version of it. Here's a preview:




KNOWN ISSUES
LIST OF BUG FIXES FROM THE ORIGINAL
INSTRUCTIONS AND CODE FOR FIREFOX
INSTRUCTIONS AND CODE FOR CHROME
ALTERNATE COLOR SCHEMES

KNOWN ISSUES
  • Not enough space in the header (see screenshot; icon is right up against blue line beneath, which causes minor visual issues when user is not signed in)


LIST OF BUG FIXES FROM THE ORIGINAL
  • Full width of the layout to fill the screen. (Not a bug.)

  • Fixed a number of small CSS errors.

  • Fixed a padding issue with the login bar.

  • Updated image replacement links that were broken.

  • Created alternate color schemes.

  • Fixed the full-width bug that was causing scrollbars to appear inappropriately!

  • Removed a border that was showing up on Chrome.

  • Edited code so that footer became #canvas #page footer and stopped affecting other Dreamwidth layouts.

  • Changed .cmtbar .icon's padding to margin and added the !important declaration, which the weird border in Chrome was trying to fix.

  • Successfully centered the text in the footer.

  • Removed a line that was causing the recaptcha to not show up on the create-account page.

  • Edited the Greasemoneky/Tampermonkey script so that the replacements also work on secure Dreamwidth pages, like the account creation page.

  • Fixed an inconsistency that caused the white background to not completely replace the gray!

  • Fixed an issue where the contextual hover menu links were too pale for comfort.

  • Added more classes to all CSS, so that nothing will accidentally override a style on a custom journal layout.

  • Fixed bugs caused by the extra classes! IT'S ALL GOOD NOW, I PROMISE.

  • Fixed link to DW logo after another code push changed it again.

  • Fixed an issue where the entry wasn't expanding. I think an ID / DIV was removed or renamed, but it works now.

  • Updated for DW codepush (9/23/12)

  • Updated for comment page beta (9/23/12)


INSTRUCTIONS AND CODE FOR FIREFOX
(Also works for Cometbird, at least as of version 3.6.16!)
  1. Set your theme to Tropospherical Purple.

  2. Install Greasemonkey.

  3. Restart your browser.

  4. Install this Greasemonkey script.

  5. Restart your browser.

  6. Locate the Greasemonkey icon in the top right corner of your browser. Left-click the option arrow and go to "Manage User Scripts". From there, click "Options", find where it says "Included Pages" (on the "User Settings" tab) and click "Add". Paste in https://*dreamwidth.org/* and click "OK".

  7. Install Stylish.

  8. Restart your browser.

  9. Locate the Stylish icon in the bottom left corner of your browser. (You may have to first enable the Add-on Bar: "View"-->"Toolbars"-->"Add-on Bar".)

  10. Left-click on the Stylish icon. Choose "Write new style"-->"Blank Style".

  11. Give the style a name, like "Tropospherical Blue" or "LJ Classic".

  12. Paste this code into the textarea below that.

  13. Click save!

  14. Admire your new layout!


INSTRUCTIONS AND CODE FOR CHROME
  1. Set your theme to Tropospherical Purple.

  2. Install Tampermonkey.

  3. Restart your browser.

  4. Install this Tampermonkey script.

  5. Restart your browser.

  6. Locate the Tampermonkey icon in the top right corner of your browser. Left-click the icon and choose "Options". From there, locate and click on "Dreamwidth site skin detector", then click on the "Settings" tab. Where it says "User includes", click "Add...". Paste in https://*dreamwidth.org/* and click "OK".

  7. Install Stylish.

  8. Restart your browser.

  9. Locate the Stylish icon in the top right corner of your browser.

  10. Left-click on the Stylish icon. Choose "Manage installed styles".

  11. Click "Write new style".

  12. Give the style a name, like "Tropospherical Blue" or "LJ Classic".

  13. Where it says "Code", paste this into the textarea below that.

  14. Where it says "Applies to", choose "URLs on the domain" and type in "dreamwidth.org". (You don't need to click "Add".)

  15. Where it says "Enable", check the tickybox.

  16. Click save!

  17. Refresh.

  18. Admire your new layout!


ALTERNATE COLOR SCHEMES

Very small edits, these affect the color of the super-pale blue highlight in this layout. You can either have a darker blue or a white:




Find the code at the bottom, where it says "COLOR CHANGES", and replace it entirely with your desired color. Be careful to leave the final } where it is!

TROPOSPHERICAL GREEN


Just find where it says "COLOR CHANGES" and replace it entirely with this.

This theme defaults to a pale green background rather than a white one. To change that, find the below:

body.tropo #canvas {
background: #f5fbf8 !important;
}


and replace it in its entirety with this code:

body.tropo #canvas {
background: #ffffff !important;
}


Alternately, this is a good code for an even softer green that's not quite white:

body.tropo #canvas {
background: #fffbf8 !important;
}



NON-WHITE BACKGROUND

Find this:

html {
background: #ffffff;
}

body.tropo #canvas {
background: #ffffff !important;
}


Delete it!

Note: If you are using an older version of the code and you don't see that, find both instances of body.trop #canvas and delete the background-color declarations.
I haven't finished skinning this completely, but maybe someday! So these are the only tweaks I offer right now.
keepcalmhyrule: Keep Calm Hyrule Icon (Default)

Troposcope Green CSS

[personal profile] keepcalmhyrule 2012-01-05 02:27 am (UTC)(link)
Using the same steps above, you can also have green!




Just paste this code into the box instead of the one above.



While I have the really light green for the background because of my visual needs (that much unbroken white can be difficult for me to read text on) you can change that to white if you want, go to the "COLOR CHANGES" Section, find this code:

body.tropo #canvas {
background: #f5fbf8 !important;
}

and replace it in it's entirety with this code:

body.tropo #canvas {
background: #ffffff !important;
}

and voila!

Alternately, this is a good code for an even softer green that's not quite white:

body.tropo #canvas {
background: #fffbf8 !important;
}
Edited 2012-01-05 02:31 (UTC)
justice: (Default)

[personal profile] justice 2012-01-10 02:29 am (UTC)(link)
Hello! Thank you for editing the code the way you have. I've come across a new problem, even with these edits. I'm not sure if my tab tree is what's causing it or what, but you can see the coding here. I'm not sure what the problem is, but it's like the thread runs out of the area it's allowed to be in and then it goes gray.
melodise: (Default)

[personal profile] melodise 2012-01-15 07:14 pm (UTC)(link)
Thank you for these! I'm new to dreamwidth and these edits are such an improvement on the default theme. I'm really glad I found these.

I'm using Chrom(ium) by the way, just so you know they work fine in this browser.
maerhys: elementary | joan watson (Default)

[personal profile] maerhys 2012-02-14 11:46 pm (UTC)(link)
Thank you so much!
lielac: Nita and Kit casting a spell (Default)

[personal profile] lielac 2012-06-25 04:34 pm (UTC)(link)
I like the color, but I prefer the padding DW has around the edges. How would I go about modifying the given code so I get that effect?
widowmaker: (Default)

[personal profile] widowmaker 2012-09-23 04:00 am (UTC)(link)
I'm dropping this comment here because I remember going back and forth with you trying to figure some bugs out on [personal profile] emiri's post way back when, and I know she's said she's not keeping it up anymore - I'm sure you've noticed if you're still using this skin that it's got some issues now with the recent code push. Denise had this to say, and I'm hoping somebody can figure out how to fix it, haha. I've looked at it but it's way beyond me.

Halp?
signatures: most icons <user name="heretics"> (Default)

[personal profile] signatures 2012-09-23 08:52 pm (UTC)(link)
Hi there!

Have you managed a fix for the chrome version, by chance? Here's what it looks like.

(Anonymous) 2012-10-26 06:38 pm (UTC)(link)
Do you think you'd have the time to make a Tropical Sphere Red one? I've been trying to edit it myself but things like the dropdown menus and some other things aren't transitioning well.

(Anonymous) 2012-11-26 06:50 am (UTC)(link)
Hi, I'm trying to use this as a manually imported CSS in Opera.

I had to comment out the @moz line to get it to work somewhat, but it still doesn't display properly.. I need it as a plain CSS. Can you please assist?
qikiqtarjuaq: (sherlock)

[personal profile] qikiqtarjuaq 2013-01-03 07:29 am (UTC)(link)
Sorry to bother you so late, but I'm having the same problem as [personal profile] signatures and not seeing the colour change with the latest Stylish code for Chrome. I'm wondering if something has changed in between the September update or if there might be something I'm missing? I followed every step exactly as is.
yrbirdcanscene: late to the thread, what did i miss? (late to the thread)

[personal profile] yrbirdcanscene 2013-02-01 10:48 am (UTC)(link)
So, I largely suspect that the culprit for my issue is Firefox and the fact that it's jumped from like version 4 to version 19 over the course of the last few months (Seriously, Firefox. Get it together. Nobody likes a showoff!), but I cannot figure out how to get the action box where you swap between comment pages to show up in blue. I'm reasonably certain that it used to be just fine, and now it is showing up in the tropo purple from the underlying theme. Is there something I can edit in the CSS to fix this? Or do I have to wait for Firefox to stop being a butt? Thanks!

tl;dr: the box is purple, when it should be blue. what do??? (helpfully included: a visual aid!)


Edit: I feel I should note that the Chrome version displays just fine, which is what leads me to believe that this is just a Firefox issue. And thank you so much for tweaking this lovely script! I've been loving it since I migrated here. <3
Edited (I always think of more words. :V) 2013-02-01 10:50 (UTC)
sellsweed: (Default)

[personal profile] sellsweed 2013-06-08 09:38 am (UTC)(link)
I was just wondering if you have a fix for the new push code? There seems to be a fix resintalling the entire Stylish code from scratch, but there is no gap between the post subject and the post text. Plus, the purple bars at top and bottom of page are back with the bright purple background on the paginator (as shown in the above comment).

Any help would be much appreciated.
Edited 2013-06-08 09:39 (UTC)
kalliope9: (Default)

[personal profile] kalliope9 2013-09-03 05:51 am (UTC)(link)
Thank you SO much! I had to reset Firefox to its default settings and just spent forever trying to find the updated code for this. Bookmarking now. :D
rediant: (✟ the civilian)

[personal profile] rediant 2014-05-28 05:05 pm (UTC)(link)
Is it possible you could reupload the code for the Chrome version here? I'm considering moving to Chrome in general, but the default DW layout drives me insane and I can't seem to get this to work in Tampermonkey just by porting over all the text from the Greasemonkey versions.
hiddencorners: (rhyme ღ collect and select)

[personal profile] hiddencorners 2014-08-21 03:38 pm (UTC)(link)
The userscripts site has been down for quite some time. You can't even download anything from there anymore.
watchword: (Default)

[personal profile] watchword 2014-12-29 02:48 am (UTC)(link)
just another wondering if this could be reupped! would be greatly appreciated ♥
gunsandchocolate: (Default)

[personal profile] gunsandchocolate 2014-12-30 08:21 am (UTC)(link)
Hi there! No idea if you still check this post since it's been like 2 years since anyone last commented, but I've been a big fan of this fix for DW since you and emiri first posted about it. I recently got a new computer and tried to reinstall all this though, and the Greasemonkey script apparently is no longer downloadable (nothing happens when I click, or it gives me an error page).

If you have any idea where else to get this script or if there's anything else like it around, I would really appreciate some advice. I have googled to no avail. :(

Thank you for your time!
kalliope9: (Default)

[personal profile] kalliope9 2015-01-13 04:46 am (UTC)(link)
Hi! I wasn't sure if you were aware that the link to the Stylish code/script is also broken?

I also just got a new computer and thankfully my old one is still running, since I find it too hard to use DW without this theme. :) I was able to grab both the Greasemonkey script and the Stylish code from my old laptop.

I've saved them as a user.js file and a .txt file, respectively, with credit to both [personal profile] emiri and [personal profile] rainfall in the document names. I hope I'm not stepping on any toes here (and if so, I apologize!), but if anyone needs copies, message me and I'll be happy to send them to you.
paperforest: touhou project (Default)

[personal profile] paperforest 2015-03-04 07:28 pm (UTC)(link)
For anyone who'd like an easy one-click installation of the site skin Greasemonkey script, I've re-uploaded it here on Gist. Should work on both Firefox and Chrome!
Edited 2015-03-04 19:42 (UTC)
kalliope9: (Default)

[personal profile] kalliope9 2016-09-20 02:01 am (UTC)(link)
I've uploaded the Stylish code to my google drive.

For reference (and if for some reason you don't need/want a one-click installation??), the Greasemonkey script file is on my google drive here.

Both files are labeled with proper credit. :)
Edited 2016-09-20 02:02 (UTC)