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.
widowmaker: (Default)

[personal profile] widowmaker 2012-09-24 01:19 am (UTC)(link)
(I really am! Thanks again.)

And here you go: Normal comment box position with the beta OFF, right under the comment I've selected to reply to.

Mashed to the right comment box position with the beta testing enabled.
widowmaker: (Default)

[personal profile] widowmaker 2012-09-26 05:44 pm (UTC)(link)
That does not seem to have done anything, BUT, you are correct - it is something about the beta theme, and I hadn't even realized; it must have been an effect of another change they made, because it wasn't doing it earlier. I apologize for ascribing it to your skin. D: I'll go leave some feedback in the appropriate place!
widowmaker: (Default)

[personal profile] widowmaker 2012-09-26 05:50 pm (UTC)(link)
It's not changing anything for me still - and yeah, I'm in Firefox.

No rush, it really is something with the beta thing, I apologize for not having caught it. @_@
widowmaker: (Default)

[personal profile] widowmaker 2012-09-27 07:42 pm (UTC)(link)
All right, I cracked open Chrome and installed + used that fix, and it works aligning it properly in Chrome! Still no dice in Firefox though - but, I did go mention the issue on the beta page, and it's been noted, so they may very well fix the entire thing eventually.
widowmaker: (Default)

[personal profile] widowmaker 2012-09-27 07:45 pm (UTC)(link)
OH WAIT, I just got it!! I used "margin: 0px!important;" without the space in between 0px! and important, which I tried on a whim.

Jeez, Firefox.
widowmaker: (Default)

[personal profile] widowmaker 2012-09-27 07:48 pm (UTC)(link)
Yes! I'm thrilled. Also mildly exasperated at myself, but hey.

Thank you again for your enormous patience.