vigils

This is a userstyle for Dreamwidth that tweaks the reply form on the new DW codepush. It's a pretty simple CSS grid. As a userstyle it requires an extension like Stylus, but any extension that lets you add custom CSS to websites should work.

/* Grid Time */
#qrform {
display: grid;
grid-column-gap: 5px;
grid-template-columns: 100px 1fr;
grid-template-rows: auto auto auto;
grid-template-areas: "meta subject" "meta body" "meta footer";
}

/* Grid elements */
#qrformdiv .qr-meta {
grid-area: meta;
display: flex;
flex-flow: column;
}

#qrformdiv .qr-meta .qr-icon {
margin: 0 0 5px 0;
order: 1;
}

#qrformdiv .qr-icon {
width: 100px;
height: 100px;
}

#qrformdiv .qr-subject {
grid-area: subject;
}

#qrformdiv .qr-body {
grid-area: body;
}

#qrformdiv .qr-footer {
grid-area: footer;
}

#qrformdiv .qr-meta #submitmoreopts {
width: 100%;
order: 3;
}

#qrformdiv .qr-meta .iconselect_trigger_wrapper {
width: 100%;
}

#qrformdiv .qr-meta #lj_userpicselect {
width: 100%;
}

#qrformdiv .qr-meta .qr-icon-controls {
display: flex;
flex-wrap: wrap;
order: 2;
}

/* Hidden */
#qrformdiv .qr-meta .ljuser {
display: none;
grid-area: name;
margin-bottom: 2px;
font-size: smaller;
}

.custom-button {     margin-left: .25em !important;
    padding: .65em .75em!important;
    height: auto !important; }

#qrformdiv .qr-markup input[type="button"] {
vertical-align: top;
padding: .5625rem 1.125rem .625rem 1.125rem;
font-size: .8125rem;
height: auto;
}
#qrformdiv .qr-markup select {
width: auto;
height: auto;
padding: .5em 24px .5em.5rem;
vertical-align: top;
margin-right: .25em;
}

#qrformdiv .qr-markup {
display: flex;
grid-area: footer;
flex-wrap: wrap;
align-items: flex-start;
justify-content: normal;
}

#qrformdiv .qr-markup a { display: none;}

#qrformdiv .qr-icon-controls select#prop_picture_keyword {
margin-left: 0;
max-width: 100%;
min-width: 0;
font-size: .8125rem;
}

F.A.Q.

Does this work with the DW Tools extension?
I think so. This code uses a grid format to position elements, not hard margins, so it should be pretty flexible. This time around I did have to tweak the custom buttons to fix an alignment but I don't think that will break anything.

Here's what a free account looks like with DW Tools installed:

Does this work with other userstyles for the Dreamwidth comment form?
Maybe! I don't know! In general, it probably won't work mix well if something relies on margins or relative positioning to work, but color hacks should be fine.

Will this work with future Dreamwidth code push changes?
????

How do I install a custom CSS sheet using stylus?
There's a mini tutorial in this plurk provided by eskiwen!

A Variation

You can use the CSS order property to change around the position of the elements in the left column. One thing you could do, for example, is move the icon to the top.

The code for that is here (use this instead of the above CSS):

/* Grid Time */
#qrform {
display: grid;
grid-column-gap: 5px;
grid-template-columns: 100px 1fr;
grid-template-rows: auto auto auto;
grid-template-areas: "meta subject" "meta body" "meta footer";
}

/* Grid elements */
#qrformdiv .qr-meta {
grid-area: meta;
display: flex;
flex-flow: column;
}

#qrformdiv .qr-meta .qr-icon {
margin: 0 0 5px 0;
order: 2;
}

#qrformdiv .qr-icon {
width: 100px;
height: 100px;
}

#qrformdiv .qr-subject {
grid-area: subject;
}

#qrformdiv .qr-body {
grid-area: body;
}

#qrformdiv .qr-footer {
grid-area: footer;
}

#qrformdiv .qr-meta #submitmoreopts {
    width: 100%;
    order: 1;
    padding: .65em .5em;
    height: auto;
}

#qrformdiv .qr-meta #lj_userpicselect {
width: 100%;
}

#qrformdiv .qr-meta .iconselect_trigger_wrapper {
width: 100px;
}

#qrformdiv .qr-meta .qr-icon-controls {
display: flex;
flex-wrap: wrap;
order: 2;
}

/* Hidden */
#qrformdiv .qr-meta .ljuser {
display: none;
grid-area: name;
margin-bottom: 2px;
font-size: smaller;
}

.custom-button { margin-left: .25em !important;
    padding: .65em .75em!important;
    height: auto !important; }

#qrformdiv .qr-markup {
display: flex;
grid-area: footer;
flex-wrap: wrap;
align-items: flex-start;
justify-content: normal;
}

#qrformdiv .qr-markup a { display: none;}

#qrformdiv .qr-icon-controls select#prop_picture_keyword {
margin-left: 0;
max-width: 100%;
min-width: 0;
font-size: .8125rem;
}

But you're free to experiment and tweak to your heart's content.

Updates

7/26/20 Updated code so that it works with the new codepush. Screenshots changed to reflect our new reality.

tibi caeli et universae Potestates;

Userstyle, “align” (Reply)

Userstyle, “align”

F.A.Q.

A Variation

Updates

Vigils

Tags