emiri: (Default)
emiri ([personal profile] emiri) wrote2011-01-04 09:50 am

Tropospherical Blue for Dreamwidth!

This is a master post for installation instructions and other FAQ regarding using the Trophospherical Blue skin for Dreamwidth!

What's that?
Simply put, it's a code that will convert Dreamwidth's Tropospherical Purple site scheme into a blue and white scheme reminiscent of Livejournal.

Okay ... why bother?
Some people don't like the Dreamwidth default Tropo layouts, but like the journaling service just fine! If you're happy with Dreamwidth's current site schemes then this is probably not the page for you. This skin was originally designed with LJ's original default colours in mind (white background, light blue comment boxes, wider page width, etc). There currently are not any skins in the works based on Celerity or with a vertical sidebar, so please don't ask. Sorry :(.

How do I know if I'll like it?
Here, have some handy preview pictures!


Click for a bigger preview! If you still need more, there is also this and this!


Awesome. That sounds like something I'm interested in! How do I do it?
Easy as pie! I'm going to assume you don't have any of the following added to your firefox extensions for ease of just having ... everything on the one page, but if you already do (and you'll know if you do, so if you're wondering whether you do or not, you probably don't) then feel free to skip over the relevant steps.

If you've never done this before, relax. It looks like a lot of steps and installs but it actually really shouldn't take you more than 60 seconds.

INSTRUCTIONS:
1. Go here and check that your site scheme is checked as "Tropospherical Purple"! The skin won't look quite right if you use any other scheme.
2. Install greasemonkey for firefox. If you haven't got it already, greasemonkey is a really handy extension for anybody to have! Just google to find out what other awesome stuff you can do with it. (Or ask me, I guess??)
3. Install the greasemonkey extension that allows firefox to recognise you're trying to skin DW.
4. Install Stylish, which is the extension used for skinning & customizing websites to look prettier!
5. Last but not least, you can finally install THE SITE SCHEME SKIN CODE!

... If at this point you have any installation errors (ie, difficulty in getting the skin to work, not design problems with the skin itself), please feel free to comment here and I will do my best to help within the limited scope of my ability o7!

As a final note, I am aware that Stylish says you can install it with greasemonkey thus avoiding the two extra steps needed for getting Stylish, but I've tested it and the greasemonkey script doesn't work 100%. The entry width reverts back to the site default and some colour overrides don't work either. If anyone is familiar with greasemonkey things and wants to see if they can have a go at it, please be my guest! Otherwise, don't click "install as greasemonkey script." Thanks!

How do I know if I've installed it correctly?
When you're done, it should look like the preview pictures I linked above.

What if I don't use Firefox?
Here's a greasemonkey equivalent for Chrome and here's Stylish for Chrome! The steps should be the same as the above! If you do decide to install via this route, please let me know how it goes and if everything looks how it should.

If you're using some other browser, I'm sorry but I can't help you. A large majority of people these days use Firefox or Chrome, so those are the platforms that these things are widely available for. If someone else is savvy enough with other browsers and would like to figure out a workaround, then please, by all means, tell me and I'll post them here.

I found a bug in your coding!
If you see something that looks like it doesn't belong (for example, a stray line of purple that hasn't been coded over or text looking funny), please do leave a comment to tell me! (Before you do, though, check through the comments to see if someone else hasn't already spotted the same thing :3.) Otherwise, please don't hesitate to say! Keep in mind that I only have one monitor, so I haven't been able to check how this skin looks on other resolutions. So your help is totes appreciated while I iron this out!

I found a bug in your coding AND I know how to fix it!
So go ahead and do it! You don't need my permission to change any of this. Heck, most of it isn't even mine. I added in extra pieces where need-be, but most of it was just a tweaking of the already written code for Tropo Purple. Credit goes all to the lovely people who wrote it originally!

Hell, if you implement a fix, please DO comment here saying what you fixed and how you did it so I can roll it out to everyone else! I'd be most appreciative.

I don't like the colours/design/logo you picked, but I don't know any coding / can't be bothered to change it myself.
Er ... well, you're shit outta luck there pal. If you request a different colour scheme that you might like VERY nicely, and it isn't a hideous idea, I'll probably consider it. I actually want to get around to doing several different color variations of this skin so people can have a variety to pick from, but it takes time! However, the big problem is that I'm not going to do any of that until I'm 100% sure that the original version is completely workable on most people's computers, because I don't want to be continually updating five scripts with the same code fixes when I could just update one. Makes sense, yeah? Once that's done, getting out new colours will be much easier!

I'm not going to touch the header/footer or logo design, purely because I'm just not a designer. I'm aware that the blue version of the logo I shooped in looks kinda shoddy in comparison to the real one. Again, if someone comes up with a good alternate (or even just cleaner) logo or header design, please send it my way and I'd be happy to implement it for you. ... Or if you know CSS you could always do it yourself. ... And then, again, tell me. Because I like seeing these things!

If you have a SMALL design change request (such as just changing the colour of links, taking the underline off of links or changing the width of journal entries, etc) and you really really don't have any experience with CSS at all, comment here with your request and I'll tell you exactly what line to change in the code to customize it to your exact liking.

I don't like the the colours you picked/design/logo, but I fixed it myself to something more to my taste! Is that all right?
Of course! Go wild! In fact, I'd prefer it! Everybody should browse sites in their preferred method, and if you can do it yourself instead of asking me then more power to you. (Mostly because I'm not actually that good at CSS 8D.) In fact, if you make a big change, please think about leaving your code changes & a screenshot here if you would like so that other people might have the option of being able to use your version too!

I tried to fix your coding for myself but I borked it/can't get (X) to change! Help! What do I do?
Honestly, the answer is highly likely that I don't actually know. Like I said, I'm not actually very good at CSS. Most of what I do is take what other people have done and edit it-- most likely exactly what you're doing now. Sorry :D;;. You CAN still ask, but I'm just warning you in advance what to expect.

I will say, however, that the most important thing to remember when you're editing the CSS in Stylish is to never forget or delete the !important tag at the end of each line. The !important tag is the part that tells the code to overwrite the existing original one on the site. So if you're making changes that aren't appearing, check that you've put in all your !important's first!

Dreamwidth did another code-push and now your site skin is borked!
This has already happened once before in the past, so do be aware that it may happen again :|a. If it does I'll deal with it as it happens, but it probably won't get fixed overnight, so just sit tight, yeah? I'll do my best!

Do I have to like, credit you anywhere for using this or some shit?
Uh ... no. That would be silly, given that your site scheme is something that only you can see. And I didn't write the original code. However, if you want to pass it on to other people along with a link to this entry and not claim that you yourself did it all, well, that'd also be pretty swell.

I have some other question/comment/suggestion I think should be implemented in the skin or put on your FAQ!
Okay? Tell me! (Am I getting repetitive with that phrase yet? Communication is good!)

Why do you like the word "borked" so much?
Oh come on. How could you not? Have you ever said it aloud? Go on! Say it!

Fun, right?

... I don't have anything else to say!
Well. Good. Neither do I! Go! Frolic! Have fun! Goodbye! So long! Farewell! THE END.


ETA 7/01/11: Fixed a line after a code change that was causing the entry buttons box to be borked. If you installed this skin before this ETA date, click "Find Updates" in Stylish and it should be fixed! If that doesn't work for some reason, please tell me.

ETA 14/01/11: Edited in a proper greasemonkey-like extension link for Google Chrome into the FAQ, thanks to [personal profile] howdivine!
richmodis: (Default)

[personal profile] richmodis 2011-01-06 01:23 am (UTC)(link)
I really like it! Thank You!
howdivine: (i squish your face!)

[personal profile] howdivine 2011-01-14 03:33 am (UTC)(link)
Hi there! I'm using this and I just wanted you to know that there's a greasemonkey-like extension for chrome called tampermonkey. You install it and you can use all your regular greasemonkey scripts on chrome!

PS thank you so much for this!
enigmaticminion: (on this journal)

[personal profile] enigmaticminion 2011-02-08 05:39 am (UTC)(link)
Randomly, I found when I use your Style, there's a tiny issue where the menu bar thing at the top isn't aligned right and tends to overlap with the rest of the header thing.

It's apparently something to do with the font size tweak, since when I changed it so only the font size on the #canvas was affected, there wasn't any need to realign the menu bar.

Basically it should change from
body.tropo #page {
font-size: 9pt!important;
}


to
body.tropo #canvas {
font-size: 9pt!important;}


I think? And then you'd have to look at your #menu code to see what you have to take out. You could also just move font-size: 9pt!important; to the /* General body edits */ section? There's one up there that has #content #canvas that you could combine that bit of script with :|a.
wrecking: (Default)

[personal profile] wrecking 2011-07-26 10:17 pm (UTC)(link)
I just installed and noticed the log wasn't working, so I did some investigating and was able to fix it by removing _beta int he URL for the logo. Here is the code I use now, thought I would share. :)

img[src*="http://s.dreamwidth.org/img/tropo-red/dw_logo_purple.png"] {
 width: 0px !important;
 height: 51px !important;
 padding-left: 241px !important;
 background-image: url("http://img.photobucket.com/albums/v511/cassaru/dreamwidth_blue_small.png") !important;
 background-repeat: no-repeat !important;
}

img[src*="http://s.dreamwidth.org/img/tropo-red/dw_logo_.png"] {
 width: 0px !important;
 height: 51px !important;
 padding-left: 241px !important;
 background-image: url("http://img.photobucket.com/albums/v511/cassaru/dreamwidth_blue_small.png") !important;
 background-repeat: no-repeat !important;
}
wafflehearts: (like a family)

[personal profile] wafflehearts 2011-12-21 08:34 pm (UTC)(link)
Thank you so much for this! ♥
wino: (Default)

[personal profile] wino 2011-12-21 09:51 pm (UTC)(link)
i was able to apply it to opera using this

http://www.ghacks.net/2008/08/10/greasemonkey-in-opera/

just save the files in steps 3 and 5 in the folder the link will ask you to make and voila
sparklycockles: (Default)

[personal profile] sparklycockles 2011-12-21 11:54 pm (UTC)(link)
omg awesome :3 ty

[personal profile] radiophile 2011-12-22 12:48 am (UTC)(link)
I am a brand new convert to DW and stumbled across a link to this post via LJ's news comm. This is brilliant! Thank you so much! ♥
snikt: (Default)

[personal profile] snikt 2011-12-22 01:21 am (UTC)(link)
YOU ARE THE BEST.

There are still a few bits that are purple for me, though, notably all of the links and the top and bottom bar things. :( Not being able to figure out which links are clicked on is kind of an issue, lol. If you have a chance to fix it that'd be awesome!
annejumps: (Default)

[personal profile] annejumps 2011-12-22 01:30 am (UTC)(link)
Cool, thanks!
screw: ([crow] walking on a rainbow)

[personal profile] screw 2011-12-22 01:35 am (UTC)(link)
I figured out how to fix two issues I was having with the code thanks to the help of posters above-- namely this kind soul's explanation of how to make the header change from purple to blue. I also implemented at this person's suggestion, but changed the font from 9pt to 10pt-- that made it fit perfectly.

Thus, the only issue I have left is a weird blue line that runs along the leftmost edge of the comments (screenshot). If you could help me figure out how to fix that, I think the code is more or less perfect!

Thank you so much for your help so far, and I know it must be overwhelming to wake up to all this. ♥
xcarex: Photo of me, at a wedding. (Default)

[personal profile] xcarex 2011-12-22 01:38 am (UTC)(link)
Begrudingly setting myself up over here in the outside chance that the entirety of fandom moves here due to LJ being incredibly stupid. I'm not great with change, so this is AMAZING. It's the next best thing to actually still being on LJ, haha.
lauand: (Default)

[personal profile] lauand 2011-12-22 01:50 am (UTC)(link)
You're totally right. I didn't understand until I said it aloud. "Borked" rules!!

Thank you for the post.
funkybrewsta: (Default)

[personal profile] funkybrewsta 2011-12-22 02:49 am (UTC)(link)
Hello! Thank you so much for this, however, I'm having an issue where the Dreamwidth logo isn't blue but purple. It's not a major issue but I just want to be sure I did everything right. I'm using Firefox.
telekine: (Default)

[personal profile] telekine 2011-12-22 07:37 am (UTC)(link)
I discovered something about this (VERY LOVELY AND SOOTHING...) skin just a moment ago—the adjustment of the "#footer" colour in your CSS will also change #footer's value in any layouts one happens to be viewing on Dreamwidth. Obviously if you're looking at a dark layout, this will be jarring (and ugly).

It was driving me absolutely insane for a couple hours, haha. A mystery!! But yes... that's a thing. For you to be aware of.

I'm not sure how users can get around it, though, other than making a new custom style layer and changing #footer's name to something else in the actual style code (which is what I ended up doing). Maybe DW's admin will just make a blue theme for us some day?

Anyway, thanks a lot for this, I love it regardless of its bugs.
softestbullet: Aeryn cupping Pilot's cheek. He has his big eyes closed. (Comm/ me I'd rather plant a tree)

[personal profile] softestbullet 2011-12-22 08:33 am (UTC)(link)
Thank you for this! <3
di: (squee)

[personal profile] di 2011-12-22 09:58 am (UTC)(link)
This is amazingly done, thank you! In Chrome, I'm still seeing some amount of trouble getting the blue lines to stretch across, and the background is strangely tan for some reason, as shown here.

If there's any way to fix this, I'd be terribly grateful, but I'm already insanely happy to have DW mirror old!LJ so well, so thank you for that and no pressure if you don't have the time/energy/whatnot for the fix. ♥

For reference, current code is as such:

vicodin: (Default)

[personal profile] vicodin 2011-12-22 10:42 am (UTC)(link)
this is amazing. thank you :3
widowmaker: (Default)

[personal profile] widowmaker 2011-12-22 10:53 am (UTC)(link)
THANK YOU FOR DOING THIS. You are the best person on DW rn.

My only observations of wonkery are that, first, this changes the color of active links everywhere on every layout to blue regardless of what it's set to in the coding, and I can't figure out why. Also, as [personal profile] telekine noted above, there's a mysterious white bar issue with flexible squares imports, which can be fixed, though it changes the color of the footer on the rest of the site. These are both totally miniscule purely aesthetic notes and do not detract from anything, but I figured if you ever want to go on a fussing spree, you might want to know. Thanks again!
ridiculous: (Default)

[personal profile] ridiculous 2011-12-22 04:34 pm (UTC)(link)
I just installed this successfully, thank you!
china_shop: Close-up of Zhao Yunlan grinning (Default)

[personal profile] china_shop 2011-12-23 02:25 am (UTC)(link)
Thank you!
xillia: (Default)

[personal profile] xillia 2011-12-23 04:24 am (UTC)(link)
thank you so much for this! since i kind of don't like dreamwidth's default red-ish scheme.
rainfall: A chaotic pile of generic crayons. All the colors of a child's rainbow. (crayons)

[personal profile] rainfall 2011-12-23 09:56 pm (UTC)(link)
I have some edits, if you'd care to use 'em!



The end result is a TINY BIT DIFFERENT:



Which has to do with changes made here:

body.tropo #canvas {
background-color: #ffffff !important;
color: #000000 !important;
margin: auto !important;
padding: 2px 0 0 0 !important;
width: 100% !important;
overflow-x: hidden;
}

body.tropo #canvas #content {
margin-top: 2.75em !important;
padding: 0 20px !important;
}


and

body.tropo #masthead {
left: 20px;
}


The padding: 2px 0 0 0 !important; fixes a problem I experienced with the "create bar" overlapping the line behind it.

The width / overflow settings obviously make it stretch across the entire screen.

Mostly what I did was add in a px on the padding and fix some !important declarations that had a ;!important; thing going on that was breaking them. So if you don't like the visual tweaks, just remove the things I added above?

THANK YOU SO MUCH FOR GETTING THIS THING OUT THERE, it's beautiful.
trobadora: (Default)

[personal profile] trobadora 2011-12-24 01:06 am (UTC)(link)
OMG. I have wanted something like this since FOREVER. Black text on white background, FINALLY! How did I not know this existed?

You are my new hero.
oaktree: a woman blows soap bubbles (Default)

[personal profile] oaktree 2011-12-24 01:37 am (UTC)(link)
This is really neat, thanks for making it available for Chrome! I'm seeing everything as it's supposed to be.

Page 1 of 2