Client Side CSS Changes: Reblog on the bottom and others.

EDIT:

As I mentioned several times, these changes are subject to break any time a site update occurs. The 3 Oct 2020 ("submit/draft/queue" selector on the dash) was one such change. The examples have been updated.

There have been several Feature Requests for client-side changes that only affect the appearance (not functionality) of BDSMLR. While you wait for official updates, many of the requested changes can be implemented already through user settings in your browser.

Disclaimer: Before I begin, let me say that you can really mess up your browser if (when) you make a mistake. But all of the changes are easily reversible back to a "stock" state by renaming you userSettings.css and restarting the browser.  And if you had it working, but everything suddenly breaks, there was probably a site update. You will need to disable the userContent, and work through the issue.

Disclaimer 2: This tutorial uses stock Firefox. You can apply the same kind of changes to Chrome with the Stylish addon, but I'm not going to go into details. You'll have to figure out how to do it in Chrome (or make the switch to Firefox, which you should probably do anyway.) Edge is also a Chromium-based browser, so these change may be possible with Edge, too. I make no guarantees (Can you tell I have a degree related to law with all these disclaimers?).

Now, we are going to modify the userContent.css file in Firefox. By default, userContent is disabled, so you'll need to enable it. A tutorial is here. You also know where to find the userContent.css file. You can find that tutorial here.

Yes, this is a lot of work, but once you get yourself there, it'll be worth it. Now, onto the good stuff.

First, Cjwuertz writes "Move Blog selection dropdown when re-blogging". This has been mentioned before (I may have even mentioned at some point). Good news. It's only a dozen or so lines of css.

	.reblogimage {
		grid-row:1;

	}
	.reblog-info {
		grid-row:2;
		padding-top:5px;
	}
	.reblogcontent {
		display:grid;
	}
	.addcaption {
		grid-row:4;
	}
	.reblogcontent .fa-times-circle {
		grid-row:3;
	}

What we're doing here is turning the reblog window into a grid, then changing where the grid elements go. First is the image, then the blog to reblog to, then the 'x' to get rid of previous captions, and finally the box for your caption. Simple and straightforward.

Our next change was requested by Maitre Rosier here.  They write "Option to split Queue/Reblog/Draft in 3 separate buttons for repost." I was a little skeptical about just how useful this would be and how  practical it was, but I tried making it happen, mostly because I was bored. I find it very useful.

I was surprised when it actually works! I thought I was just messing with the visual elements, but it really works. I could pretty that up a bit, but since it's just in my own browser, I didn't care that much.

We use more-or-less the same trick: convert it to a grid:

.reblogcontainer .reblogoptions {
		display: grid !important;
		left: 130px !important;
		bottom: 10px !important;
		padding: 5px !important;
	}
	.reblogcontainer .rbopts {
		padding: 5px;
		border:1px solid grey !important;
	}
	.reblogcontainer  .reblognorm {
		grid-column: 1 !important;
	}
	.reblogcontainer .rbtoqueue {
		grid-column: 2 !important;
	}
	.reblogcontainer  .rbtodraft {
		grid-column: 3 !important;
	}
	.reblogcontainer  .submit {
		grid-column: 1 !important;
	}
	.reblogcontainer  .queue {
		grid-column: 2 !important;
	}
	.reblogcontainer  .drafts {
		grid-column: 3 !important;
	}

the biggest difference is that here we need to pay attention to the size, and it's column-oriented instead of row-oriented. (Edit: The original also had 2 bugs in it; the second bug actually fixed the first. Both have been removed in the updated edit)

Finally, the last trick was mentioned as a comment in a previous CSS thread by Mastrsteven in this thread here: "If I wanted to make the reblog symbol bold to make it easier to see, how would I do that?"

This is the easiest of them all:

        .fa-retweet {
		font-size: 2em !important;
	}

You can play with the size as you wish.

Around 10% of the visitors to my blog use Firefox, but Firefox users are more likely to block totally unnecessary trackers like google-analytics, so I'm guessing its probably close to 20% of the sites' visitors may benefit from this. A full 50% are on Chrome, and they can take advantage of this too with a bit of work in the Stylish extension. (And I take my blog's activity to be representative of the full site).

Here is my full userContent.css for bdsmlr. This is a recap of what's above, but it is the fully working section of the file:

@-moz-document domain(bdsmlr.com) {
	root: {
		--poop: rgb( 25, 20, 17);
	}
/* Various minor community-requested dash enhancements */

/* Increase the size of the reblog button only */
	.fa-retweet {
		font-size: 2em !important;
	}
/* End reblog size increase */

/* Make the reblog options always on screen */
/* This is sloppy-looking. Play around with the 
   positioning to get a sharper effect, but it
   will put all three options on screen. */
	.reblogcontainer .reblogoptions {
		display: grid !important;
		left: 130px !important;
		bottom: 10px !important;
		padding: 5px !important;
	}
	.reblogcontainer .rbopts {
		padding: 5px;
		border:1px solid grey !important;
	}
	.reblogcontainer  .reblognorm {
		grid-column: 1 !important;
	}
	.reblogcontainer .rbtoqueue {
		grid-column: 2 !important;
	}
	.reblogcontainer  .rbtodraft {
		grid-column: 3 !important;
	}
	.reblogcontainer  .submit {
		grid-column: 1 !important;
	}
	.reblogcontainer  .queue {
		grid-column: 2 !important;
	}
	.reblogcontainer  .drafts {
		grid-column: 3 !important;
	}
/* end reblog options on screen */

/* Put reblog to on the bottom */
	.reblogimage {
		grid-row:1;

	}
	.reblog-info {
		grid-row:2;
		padding-top:5px;
	}
	.reblogcontent {
		display:grid;
	}
	.addcaption {
		grid-row:4;
	}
	.reblogcontent .fa-times-circle {
		grid-row:3;
	}
/* end reblog-to  on the bottom */

}