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]](https://www.dreamwidth.org/img/silk/identity/user.png)
howdivine!
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
howdivine!
no subject
no subject
no subject
no subject
I am thinking I may have done something wrong, for after applying the Chrome code down here, I still am getting some rather displeasing purple bars along the top and bottom of the screen.
Like so. And the back of the page is not clean and white either. I was wondering if perhaps I have done something wrong, or if not, if these are moderately fixable things to take care of here.
no subject
Step 1: Install Tampermonkey for Chrome.
Step 2: Install this Tampermonkey script. This script will allow you to more efficiently skin Dreamwidth through Chrome.
Step 3: Install Stylish for Chrome.
Step 4: Left-click on the new Stylish icon and choose "Manage installed styles".
Step 5: Click "Write new style".
Step 6: Give the style a name, like "DW skin" or "LJ Classic". Anything that will tell you what this style is if you need to know later.
Step 7: Where it says "Code", paste the source code I gave in the comment above.
Step 8: Where it says "Applies to", choose "URLs on the domain" and type in "dreamwidth.org". (You don't need to click "Add".)
Step 9: Where it says "Enable", check the tickybox.
Step 10: Click "Save".
Step 11: Refresh DW.
I just did these steps and now I have the blue layout from my screencaps, but in Chrome. I'm thinking you may have installed Stylish as a Tampermonkey script, which the OP says can cause the skin not to work 100%, instead of installing it directly from the link I gave you in my steps, but that's just a guess. Are you still having the problem?
no subject
no subject
no subject
no subject
no subject
Here!
no subject
Step 0: Uninstall Stylish and Greasemonkey, starting over completely!
Step 1: Make sure your theme is set to "Tropospherical Purple" here.
Step 1: Install Greasemonkey. Restart your browser.
Step 3: Install the Dreamwidth Site Skinner script for Greasemonkey.
Step 4: Now, install Stylish. Restart your browser again!
Step 5: Left-click the Stylish icon (it'll be in the bottom right corner of your browser) and choose to "write new style"-->"Blank style".
Step 6: Give the style a name you'll remember, like "LJ Classic" or "DW LJ Skin". (You can leave "Tags" blank.)
Step 7: Into the big empty text area, paste the code I linked in this comment.
Step 8: Click "Save".
Everything SHOULD now be working fine. (It is for me, anyway!) If you were having the same problems as the user above, you may have accidentally installed Stylish as a Greasemonkey script instead of installing it directly, which can cause problems. Follow these instructions and let me know if the problem persists!
no subject
Thank you so much!
no subject
no subject
no subject
But if you wanna make it white, I could do that!
no subject
no subject
Okay, I'll get a fix up soon! Doing applications for a game I mod. :3
Color alterations
Color alterations #2
Re: Color alterations #2
Re: Color alterations #2
Delete and trying again for HTML fail:
Again, I am really, really sorry to be bothering you like this. And sorry for the delete-repost. /o\