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.

Flat | Top-Level Comments Only

From:

mycenae

Perfect fix to a very frustrating problem! It also works seamlessly with DWTools functions, it's just really nice. ♥ TY for doing this!

samame

Thank you so much for this!

darjeeling

Brilliant, THANK YOU SO MUCH! You're a lifesaver!

heliscooter

Question! Is there any way to have the "Browse" button show up even on paid accounts?

terra

The browse button is a DW tools extension thing, not something I can control with CSS.

Ah, gotcha! No problem, thank you!

vaerdig

thanks so much for this! i also have weird question: is there a way to always display the random icon button? it'll show up if you click random from the drop down selection but i'm wondering if there's a way to add it back to where it used to be 🤔

You know, I was going to say no, because CSS is a tool for styling things and maybe moving them around/hiding them if you're clever, but I went and looked and the code for the random icon button is still there, just hidden with CSS. So, adding:

#qrformdiv .qr-meta #randomicon {
    display: block !important;
    width: 100%;
    margin-left: 0;
}

Should work for this!

Edited (formatting/accidentally a word) Date: May 10th, 2020 10:21 pm (UTC)

oh, perfect, that did the trick! what a blessing thank you 👏

regale

Hello! First of all, thank you so much for your hard work. This has helped so much, even before last night's code push.

This might be a problem that can't be fixed, but I thought I'd try here in case you had any ideas.

So, I'm using Firefox (I use both, but I prefer tagging on FF), and I have DW Tools—the addon has been super broken for me for a long time now, so I can only use the Action/Text tag buttons—for some reason, it still shows the Imgur Icons button even though I've never used it. And it looks like this...

I'm wondering if you know of a way to hide it completely using your userstyle? It's... also only on my paid accounts. On my basic account, the Imgur Icons button is lower, not in front of anything. Thanks for your time!

ETA This is what it looks like on my nonpaid account:

Edited Date: July 26th, 2020 08:54 pm (UTC)

The only thing I can suggest is:

#imgur_userpicselect { display: none; }

Oh, this didn't work by itself but it gave me the idea to just change one of your fixes into:

#qrformdiv .qr-meta #imgur_userpicselect {
display: none !important;
width: 100%;
margin-left: 0;
}

Which did work? SO! Thank you!

tibi caeli et universae Potestates;

Userstyle, “align”

Userstyle, “align”

F.A.Q.

A Variation

Updates

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Vigils

Tags

Page Summary