dw_maintenance | Code pushed

Ugh, I hadn't even thought about Greasemonkey custom site skins, or I would've made it clearer ahead of time that things would probably break. Sorry :/

We switched our site skins over to using some new features of HTML5 for better accessibility for people with disabilities and to take advantage of some new features in the HTML spec. The biggest change is that classes that used to be styled by using "div.foo" are now mostly addressable by "nav.foo". It's the sort of thing the person who made the custom site skin will have to fix, yeah.

I suspected something like that might be the case. :/ Thanks anyway, I'll forward the note and cross my fingers.

On that note, though, is there any hope for having a proper site skin with wider width and more contrasting colors? The skins you guys have are great, but it's not a catch-all for everyone with vision impairments; the grey and the soft purples and pinks actually make it harder for me to see (I have vision and neurological issues) and I know I'm not the only one, though definitely in a minority.

The problem with adding additional site skins is that there's really an endless combination of accessibility needs. We've tried our best to hit the major needs (high contrast vs low contrast, dark-on-light vs light-on-dark, horizontal vs vertical, etc) but there's always going to be at least one person who they don't work for :/

(Limiting the text width in the Tropo site skins is one of those things, for example -- for the vast majority of people, a long unbroken line of text is much harder to read, and it's only a small minority of people (you among them, apparently!) who find that to be more of a problem.)

We have talked about ways to make site skins more customizable on the user end without having to resort to Greasemonkey scripts and the like, but it's the kind of thing that's really hard to do well. It's not something we've ruled out entirely, but making it possible would be a whole lot of work and would have to be really carefully designed to not overwhelm people with options. So until we can work out a good solution, the best option is to use Greasemonkey to make whatever tweaks will help with your accessibility needs -- we really don't change the site skins very often, and only when there's clear benefit, so it's not like those tweaks will break often.

Haha, yeah, I know I'm way in the minority. Unfortunately that doesn't make it any easier for me to see stuff when my brain decides not to process it. Thanks anyway though, I'll just keep hoping it happens eventually.

I'm sorry I don't have better news!

If someone needs it or you want to mention it in news, only three things were changed:

#menu => nav
#sidebar => nav
#footer => footer

Thank you for this; I'll try and fix mine. :)

Always happy to help! Hope you managed to.

Yep, worked like a charm once I knew what to change. :)

Yay! *high fives*

Thanks so much for this, was able to fix mine easily! :)

Wonderful! (and you're welcome!)

Thank you!! Those fixed it.

Did it fix the scheme code? If so, can you share? I was using tropospherical blue as well.

This is what I'm using now (after editing thanks to ninetydegrees' tip): http://pastebin.com/h0Y7PXud

In Firefox via greasemonkey/stylish. I don't know about any other browsers, I'm sorry. Also, if you have the new comment pages beta turned on, some of the colors will be off still.

IT WORKED! \o/

Thank you! I have my lovely blue scheme back! Thanks so much!

I've worked out a (temporary?) fix for the beta colours. Just add this to your existing blue stylesheet:


/**
* EDIT FOR S2 COMMENTS BETA
*/

.comment-wrapper-odd .comment .header {
background-color: #bbddff!important;
border-bottom: 2px solid #bbddff!important;
border-top: 2px solid #bbddff!important;
border-right: 1px solid #bbddff!important;
}

.comment-wrapper-even .comment .header {
background-color: #aaccee!important;
border-bottom: 2px solid #aaccee!important;
border-top: 2px solid #aaccee!important;
border-right: 1px solid #aaccee!important;
}

.entry .inner .header { background-color: #ffffff!important; }

Crap I thought I had linked stuff here but apparently I forgot, augh.

rainfall actually did update the skin and worked around the beta page thing, but there's a comment box thinger now.

(no subject)

telekine - 2012-09-25 19:10 (UTC) - Expand

(no subject)

telekine - 2012-09-25 19:24 (UTC) - Expand

Happy to hear it did. You're welcome!

I tried fixing a style I'm using, and none of those elements even appear in it. If it's not too much trouble, does anyone reading this know what I need to do to make these overrides work?:

#page a:link,
.link {
color: #575271 !important;
}
#page a:hover,
#page a:active,
.link:hover {
color: #746ea4 !important;
}

body.tropo #canvas #content {
margin-top: 2.75em !important;
padding: 0 !important;
width: 100% !important;
font-size: 9pt!important; }

body.tropo #page { max-width: 100% !important; }

#page_talkread #Comments .talk-comment,
#page_inbox .InboxItem_Content {
max-width: 100% !important; }

#page_talkread #entry {
max-width: 95% !important; }

These work for me actually and there's no reason why they shouldn't because none of this has been modified. Maybe there's something wrong with the style. Is it using the correct prefix: @-moz-document domain("dreamwidth.org")? Are they overridden by some other code below?

It is using the correct prefix, and up until the code push it worked just fine.

Here's the full code, I don't think anything overrides them:

@-moz-document domain("dreamwidth.org") {

#page a:link,
.link {
    color: #575271 !important;
}
#page a:hover,
#page a:active,
.link:hover {
    color: #746ea4 !important;
}

.action-box .inner {
background-color: #d8cee9 !important;
border: 1px solid #b5adc2 !important;
}

#canvas {
    border-color: #575271 !important;
}

.highlight, .highlight-box {
border-color: #b5adc2 !important;
background-color: #d8cee9 !important;
}

nav {
    background: #eae6ee !important;
}

nav ul li a {
    background: transparent url(http://spoonybard.org/dwidth/felltypes.png) 0.833333em 0.916667em no-repeat !important;
}

#page nav ul li.hover a {
    background-color: #746ea4 !important;
	color: #fff !important;
}

#page nav ul li.subnav a {
    background-color: #746ea4 !important;
	color: #fff !important;
}

#page nav ul li.subnav a:hover {
    background-color: #575271 !important;
}

#page nav ul li.subnav ul {
    background-color: #746ea4 !important;
    color: #fff !important;
}

footer {
    background: #eae6ee !important;
}

#page #content h1 {
    color: #575271 !important;
}
#page #content h2 {
    color: #575271 !important;
}

#content #primary .panel h2 {
    color: #575271 !important;
}
#content #secondary .panel h2 {
    color: #575271 !important;
}

#shim-alpha {
    border-top: 0.5em solid #eae6ee !important;
    border-bottom: 0.5em solid #746ea4 !important;
}

.tablist .tab a {
    background: #746ea4 !important;
    border-color: #908cc5 !important;
}
.tablist .tab a:hover, .tablist .tab a.active {
    background: #e5daee !important;
}
.tab-header {
    background: #e5daee !important;
    border-color: #e5daee !important;
}

.tab-container {
  border: 1px solid #575271 !important;
}

.action-bar {
    background-color: #e5daee !important;
}

.select-list input {
    background: #8356e6!important;
    border: 2px solid #eae6ee!important;
    border-bottom: 2px solid #908cc5!important;
    border-right: 2px solid #908cc5!important;
}
.select-list input:active {
    background: #9376f6!important;
    border: 2px solid #908cc5!important;
    border-bottom: 2px solid #eae6ee!important;
    border-right: 2px solid #eae6ee!important;
}
	
.searchhighlight {
    background: #e5daee!important;
}

.inset-box {
    border-right: 1px solid #e5daee!important;
    border-bottom: 1px solid #e5daee!important;
}
.warning-box {
    border: 1px solid #746ea4!important;
    background-color: #eae6ee!important;
}
.error-box {
    background-color: #fcf6db!important;
    border: 1px solid #ffdfc0!important;
}

thead th, tfoot td {
    background-color: #eae6ee!important;
}

table caption {
    color:#575271!important;
}

.select-list li img {
    border-color: #908cc5!important;
}
.selected, .select-list li.selected, tr.selected td {
    background-color: #e5daee!important;
    border-color: #908cc5!important;
}

form, fieldset, legend, legend span {
    border-color: #908cc5!important;
}

.section-nav {
    background-color: #e5daee!important;
}
.section-nav li a, .section-nav ul, .section-nav li, .section-nav-separator {
    border-color: #908cc5 !important;
}
.section-nav-content {
    border-color: #908cc5 !important;
}
.section-nav li a:visited {
    color: #908cc5 !important;
}

.subheader {
    background-color: #e5daee !important;
    border-bottom: 1px solid #eae6ee !important;
}

.token:hover, .token.hover, .token:focus, .token.focus {
    color: #908cc5 !important;
    border-color: #746ea4 !important;
}

.token .token_remove:hover, .token .token_remove:focus {
    color: #908cc5 !important;
    background-color: #e5daee !important;
}

#iconselector_icons_list li:hover, .kwmenu .selected, #iconselector_icons_list .iconselector_selected {
    border-color: #746ea4 !important;
}

.slidecontrols a:hover {
    color: #908cc5 !important;
}

nav.ContextualPopup nav.Inner {
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #908cc5;
}
nav.ContextualPopup nav.Inner a, nav.ContextualPopup nav.Inner a:visited {
    color: #908cc5 !important;
}

.ippu .track_title {
    color: #e5daee !important;
}

.talkform .disabled {
    background: transparent !important;
}

.cmtbar.odd {
    border-bottom: 1px solid #908cc5 !important;
    border-right: 1px solid #908cc5 !important;
}
.cmtbar.even {
    border-bottom: 1px solid #e5daee !important;
    border-right: 1px solid #e5daee !important;
}

.folders a.selected {
    background: #e5daee !important;
}

.username {
    border-bottom: 1px solid #c7e0f6 !important;
    background-color: #ecf6ff !important;
}

.section, .actions li {
    background-color: #eae6ee !important;
    color: #575271;
}

.section_head, nav.username {
    background-color: #eae6ee !important;
    border-bottom: 1px solid #908cc5 !important;
}

.community-settings legend {
    color: #575271 !important;
    }

.shop-item-highlight {
    border: 1px solid #575271 !important;
}

a#lj_userpicselect {color: #908cc5!important;}
#lj_userpicselect_img:hover {border: 1px solid #908cc5 !important;}
#lj_userpicselect_img_txt {color: #908cc5 !important;}
#userpic_preview_image.userpic_loggedout {border: 1px solid #908cc5 !important;}
#compose-entry ul li a {border: 1px solid #e5daee !important; }
#spellcheck-results {border: 1px solid #e5daee !important;}

.appwidget-createaccountprogressmeter .step-block-active {  background-color: #575271 !important; }
.appwidget-createaccountprogressmeter .step-block-inactive {  background-color: #746ea4 !important; }
.appwidget-createaccountprogressmeter .step-selected, .appwidget-createaccountprofile .header { color: #575271 !important; }
.appwidget-createaccountprogressmeter .step-previous { color: #746ea4 !important; }
.appwidget-createaccountprofile .field-name { background-color: #eae6ee !important; }

hr.hr {
    color: #908cc5 !important;
    background-color: #908cc5 !important;
}

body.tropo { background-color: #fff !important; }

body.tropo #canvas { background-color: #fff !important; }

body.tropo #canvas #content {
    margin-top: 2.75em !important;
    padding: 0 !important;
    width: 100% !important;
    font-size: 9pt!important; }

body.tropo #page { max-width: 100% !important; }

#page_talkread #Comments .talk-comment,
#page_inbox .InboxItem_Content {
    max-width: 100% !important; }

#page_talkread #entry {
    max-width: 95% !important; }

.cmtbar.odd {
border: none!important; }

.cmtbar.even {
border: none!important; }

td.odd { background-color: #DFDFDF!important; }
td.even { background-color: #EFEFEF!important; }

img[src*="dw_logo_purple.png"] {
	width: 0 !important; 
	vertical-align: middle; 
	margin: 0 auto;
	height: 0 !important;
	background: transparent url(http://spoonybard.org/dwidth/myheader.gif) no-repeat; 
	padding: 51px 0 0 241px !important;

}

(I saw the note that most div.foo were changed to nav.foo and I tried replacing all the .divs in the code with .navs but that didn't change anything.)

Edited 2012-09-23 21:45 (UTC)

I created a new Stylish style for dreamwidth.org and pasted everything in it and it works fine (it's a sweet style BTW) so I don't think it comes from the code.

Edited 2012-09-23 22:22 (UTC)

So are you! You're most welcome.