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.

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!
ashkitty: a redhead and a couple black kitties (a girl and her cats)

[personal profile] ashkitty 2011-12-24 02:33 am (UTC)(link)
I heart this and also you. thank you! ♥♥♥
disprove: (once and future)

[personal profile] disprove 2011-12-24 04:47 am (UTC)(link)
Thanks for making this! Found a glitch though. The URL for the dreamwidth logo now isn't http://s.dreamwidth.org/img/tropo-red/dw_logo_beta_purple.png any longer, it's http://s.dreamwidth.org/img/tropo-red/dw_logo_purple.png. That's all I caught so far!
rahirah: (regeneration)

[personal profile] rahirah 2011-12-24 09:12 pm (UTC)(link)
This is awesome. Telling everyone I know immediately. *g*
zellieh: kitten looking shocked, openmouthed, text: WTF? (What the fuck?) (Default)

[personal profile] zellieh 2011-12-24 10:01 pm (UTC)(link)
Thank you for this! I've never liked DW's colour schemes. This blue option is more restful to my eyes, so thanks!

I also used a couple of Stylish fixes for LJ's new pages as well, and it seems to have helped when I'm on LJ.
zellieh: Cat perched on top of wobbling Christmas tree (cats: christmas tree animated)

[personal profile] zellieh 2011-12-25 02:35 pm (UTC)(link)
I love this! And the instructions are great -- so helpful.

I did spot one problem, it's not urgent and can totally wait for later. I just thought it'd be something you might want to fix when you do eventually get around to redesigning or adding other colours.

When you hover over a userpic, you get a hover menu. It's currently using a very pale blue for the links that's just a bit too pale to be easily read. I think it's picking up the same pale blue that's in the palest blue bars on the profile page? It might not even be your code, if DW does the hover menu's code, but anyway, it's something to consider for the future.

Happy Holidays-of-your-choice, and I hope you have a great New Year!
delight: (Default)

[personal profile] delight 2011-12-27 04:04 am (UTC)(link)
As the person behind Tropo Purple, I appreciate your appreciation of me, and also wholly appreciate this scheme! It's very nice and clean.
keepcalmhyrule: Keep Calm Hyrule Icon (Default)

I don't know if you'd be interested

[personal profile] keepcalmhyrule 2012-01-05 02:56 pm (UTC)(link)
But I did a tweaked green version of this code? You can look at it here if you want. Since it's basically your code in the end. ^^
galvantula: (n_n)

[personal profile] galvantula 2011-12-27 06:02 am (UTC)(link)
I love your theme, thank you! And thanks to the person who made Tropo Purple. :)

However, using Chrome, I had some issues: the line over comments, and when I'd fixed it as suggested on another page, then there was an odd purple line in odd comments... also, there was a bar with my page's height in Chrome. I added minor edits to move the icon and whatnot as I FINALLY figured out how to make it work (this is thanks to the kind users on page 1 whom I edited off of, thank you!), so I figured I'd share my edit for Chrome:

TL;DR: Here have my code that's been edited and SHOULD resolve any issues in Chrome:

And I hope this helps any Chrome users, because it's now perfect for me. <333 Thanks again.
rainfall: A windowpane from the inside; covered in raindrops, a blur of cityscape beyond the glass (rain on a window)

[personal profile] rainfall 2011-12-27 04:48 pm (UTC)(link)
You should change those overflows from hidden to auto. It's still not quite perfect, but the problem caused by overflow: hidden is that it also disables scrollbars when you really need them.

(no subject)

[personal profile] galvantula - 2011-12-28 04:26 (UTC) - Expand

(no subject)

[personal profile] rainfall - 2011-12-28 08:19 (UTC) - Expand

(no subject)

[personal profile] galvantula - 2011-12-28 08:37 (UTC) - Expand

(no subject)

[personal profile] rainfall - 2012-01-01 18:39 (UTC) - Expand

(no subject)

[personal profile] galvantula - 2012-01-02 03:33 (UTC) - Expand

(no subject)

[personal profile] rainfall - 2012-01-02 03:39 (UTC) - Expand

(no subject)

[personal profile] galvantula - 2012-01-02 04:10 (UTC) - Expand

(no subject)

[personal profile] rainfall - 2012-01-02 04:16 (UTC) - Expand

(no subject)

[personal profile] maerhys - 2012-02-14 22:45 (UTC) - Expand

(no subject)

[personal profile] rainfall - 2012-02-14 23:08 (UTC) - Expand

(no subject)

[personal profile] maerhys - 2012-02-14 23:11 (UTC) - Expand

(no subject)

[personal profile] rainfall - 2012-02-14 23:13 (UTC) - Expand

(no subject)

[personal profile] maerhys - 2012-02-14 23:14 (UTC) - Expand
imeltwthyou: (Casual)

[personal profile] imeltwthyou 2011-12-28 03:02 pm (UTC)(link)
Is there a way to change the color scheme so it's not so light? Otherwise it's almost like being on the new LJ.
imeltwthyou: (Silly)

[personal profile] imeltwthyou 2011-12-28 04:08 pm (UTC)(link)
Actually, nevermind. I modified your code a bit to suit my own eyes. Thank you very much! ♥
himitsuru: (Fangasming like mad~ || CCS)

[personal profile] himitsuru 2011-12-29 10:25 am (UTC)(link)
Hello, I just want to say that your instructions are pretty easy to follow! I just want to point out that number 4 (the Stylish step) links to the Firefox add-on and not to the Chrome version. I just found my way to it by going to #5 and looking for the Chrome version of Stylish.

Other than that, thank you for this, and great job! :)

[personal profile] clocktowers 2011-12-30 09:42 am (UTC)(link)
Thank you so much for the easy to follow instructions! I've run across a mild glitch, though, and was wondering if you or any other html-savvy onlooker could help. When you apply this script in firefox, it overrides part of the html in flexiblesquares layouts (and possibly others, I've only tested out fs ones) like this, with the broken html being the one on top. Is there a fix for this?
momijizukamori: Green icon with white text - 'I do believe in phosphorylation! I do!' with a string of DNA basepairs on the bottom (Default)

[personal profile] momijizukamori 2011-12-31 12:18 am (UTC)(link)
So I made a few hacks to this to make the font size and scaling closer to LJ's (Tropo defaults to a bit smaller than LJ, which I think is giving some people problems after a lot of reading). Changed sections:

body.tropo #canvas {
background-color: #ffffff !important;
color: #000000 !important;
padding: 20 !important;
font-size: .82em !important;

body.tropo #canvas #content {
margin-top: 2.75em !important;
padding: 0 !important;
width: 100% !important;
line-height: 1.3em !important;
letter-spacing: -0.003em !important;

(and if anyone substitutes these in, I'd love to hear if they work for you, readability-wise! I only have one person I know personally having problems, and Firefox hates her so she's been having problems just getting it to work)
devoting: (Default)

[personal profile] devoting 2011-12-31 10:06 am (UTC)(link)
Hello! I know this entry is a bit old, but I'm having some problems with this skin. When I use it, the logo remains purple. I was linked to a fixed code for it where it fixed the logo... but then on other sites, the click colour for links was the dark blue of the layout, and on tumblr this happened. I'm not sure what to do from here, and if you (or anyone passing by) knows a fix for that, it'd be great!
rainfall: A girl stands in the midst of fallen leaves. You can't see her face. (Default)

[personal profile] rainfall 2012-01-01 06:46 pm (UTC)(link)
Looks like you installed the theme as an internet-wide theme instead of a Dreamwidth-specific theme. Are you using Firefox or Chrome?
keepcalmhyrule: Keep Calm Hyrule Icon (Default)

LJ Green, aka Troposcope Green Widescreen for Dreamwidth

[personal profile] keepcalmhyrule 2012-01-05 02:46 pm (UTC)(link)
rainfall: A girl stands in the midst of fallen leaves. You can't see her face. (Default)

Grease/Tampermonkey edit!

[personal profile] rainfall 2012-01-06 10:37 pm (UTC)(link)
The script only affects:


which causes problems when users go to secure pages, such as to create accounts. The script needs to be edited at the source to also affect:


For now, users can edit the script and add it via "Options"-->"Included pages"-->"Add", but. Yeah.

Thanks again!
tippingtheodds: (Default)

[personal profile] tippingtheodds 2012-01-07 12:40 am (UTC)(link)
Please ignore the RP account, haha.

Thank you so much for this, it's brilliant!
eyesofstrength: (Default)

[personal profile] eyesofstrength 2012-01-12 08:20 am (UTC)(link)
I love this so much, but there's two tiny little things I'd love to just know where to go to tweak it myself because I sure can't find it, but I admit I'm a total moron on editing scripts. if you or some savvy onlooker can help, I'd greatly appreciate it!

Someone else mentioned this, it's with the menu that pops up when you hover the mouse over a userpic or journal name. The links in there show up as an extremely pale blue that is unreadable. I just want to know where I can go to fix that so it could be a dark blue like the rest of the links, or the black that is DW's default. Either of those would work great.

The other thing I noticed is that if you have a really long thread that requires scrolling over to the right, after a certain distance, it goes back to tropo-purple's background color. This is pretty minor and just annoying, though I'd love to be able to tweak that as well since long threads are pretty common for me.
holeheart: (walk fashion baby)

[personal profile] holeheart 2012-01-16 12:49 am (UTC)(link)
Hello! I just wanted to say I love this theme. thank you so much for making it. I am having an issue though.

The very very top and very very bottom bars are still purple. I'm not THAT great at coding and I can't find it in the code. I can also take a screencap if needed!

For the record I'm using Chrome (16.0.912.75), and Mac OSX
aymiah: (Default)

[personal profile] aymiah 2012-01-19 01:57 am (UTC)(link)
if you copy-paste the code here into the CSS (just replace the whole thing), it should take the purple off. it worked for me :)

(no subject)

[personal profile] holeheart - 2012-01-19 01:59 (UTC) - Expand

(no subject)

[personal profile] aymiah - 2012-01-19 03:18 (UTC) - Expand
shibuya: (Default)

[personal profile] shibuya 2012-01-27 02:30 am (UTC)(link)
Thanks for this! =)
kougamyazawa: (Default)

[personal profile] kougamyazawa 2012-08-29 04:45 am (UTC)(link)
I think there's some kind of error. when I first tried this out a while ago, it worked perfectly!

But lately the format got messed up. Only some boxes are blue and it's back to that narrow page width. Is there something I can do to make it look once more like in your previews?

(no subject)

[personal profile] kougamyazawa - 2012-08-29 04:53 (UTC) - Expand
zephyrnovotny: (Frustrated)

Abstractia Layouts...

[personal profile] zephyrnovotny 2012-09-07 12:10 am (UTC)(link)
For some reason, I've installed this theme on Chrome, and everything looks great except for any journal layouts that are in the Abstractia base... Instead of a full background, it only shows the background image as a header... Any ideas on what I may have done wrong?
justbeingaqueen: (Default)

[personal profile] justbeingaqueen 2012-09-23 11:40 am (UTC)(link)
This latest push code has left me back with a purple background on the navigation menus at the top and bottom of the pages, with an obnoxiously dark purple background on the drop-down menus. Does anyone know how we can make this blue or put it back yet? I miss the blue already!
eyesofstrength: (023)

[personal profile] eyesofstrength 2012-09-23 09:19 pm (UTC)(link)
Check this thread for what changed. Basically replace all instances of #menu and #sidebar with nav and remove the # before #footer and it's fixed.

(no subject)

[personal profile] justbeingaqueen - 2012-09-24 02:10 (UTC) - Expand

(no subject)

[personal profile] witch - 2013-01-07 06:57 (UTC) - Expand
unicorn: a unicorn skull. (Default)

[personal profile] unicorn 2012-09-26 11:13 pm (UTC)(link)
The new beta comment pages break this style - is there any way to fix this?
basilmemories: (Default)

[personal profile] basilmemories 2013-04-30 04:22 am (UTC)(link)
It shows that the style's been deleted, do you happen to know if there's a replacement or something of the like? So far this has been the only one that works for me.

(no subject)

[personal profile] basilmemories - 2013-04-30 05:03 (UTC) - Expand

(Anonymous) 2013-06-08 04:52 am (UTC)(link)
The new Dreamwidth Code Push seems to have broken the extension :(
raavashing: (Default)

[personal profile] raavashing 2015-04-25 01:35 pm (UTC)(link)
EDIT: Ignore this. I didn't see the previous comment response. My apologies for bugging you.
Edited 2015-04-25 13:36 (UTC)

Page 2 of 2

<< [1] [2] >>