Customization recipes

Support Blender Artists Website Support
1

A place where to share some CSS/JS snippets I create to change BA look & behavior. You need Greasemonkey, Tampermonkey, etc for JS scripts and Stylish, Stylus, userContent.css, etc for CSS changes.

Some simple look changes as start:

CSS for square avatars:

img.avatar {
  border-radius: 0;
}

CSS for showing full date without hover (not 100% happy with this, WIP for @Gumboots :

a.post-date span.relative-date::after {
  content: " ago || "attr(title);
}
td.num.age.activity::after {
  content: "ago || "attr(title);
}
.topic-list .age {
  width: 200px;
}

This way doesn’t seem to let you get rid of AM/PM, just move the tooltip into the page.

CSS for changing font globally (for whatever reason, here apostrophes appear low, near invisible between two letters, unlike quotes, eg r’r"r):

html {
    font-family: Arial;
}

You need to wrap all the CSS rules with

@-moz-document domain("blenderartists.org") {
}

but I will show the recipes without, otherwise it will waste lots of space.

2

Cheers for that. I’ll play around with it. One thing worth noting (because otherwise it can drive people nuts) is that any CSS in Stylish or useContent.css will need !important as part of the declaration if it is trying to override the site’s CSS.

BTW, userChrome.css is for tweaking the browser’s interface. :wink:

As for Arial, don’t get me started on font stacks. :smiley: I’ve gone with this:

font-family: 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif;

Good on Windoze, and Neue is a better online font for Apples than the original Helvetica. Arial is basically a cheap and nasty version of the old Helvetica. Come to think of it, if the Linux people have any consistency in their fonts these days I might declare a good one for them too. Some of the DejaVu and Droid fonts are good. BTW, Roboto is much better on small screens than Helvetica.

3

The above rules are working without problems and without “!important”. Fixed the Chrome thing.

4

Might be browser-dependent. I’ve noticed that Pale Moon seems to require !important in some declarations where Firefox doesn’t. PM is running off userContent.css, while FF is running Stylus. But FF still seems to require !important on some things if I want to avoid daft levels of specificity in my code (I hate excessive specificity).

5

Ah yes, I see what you mean about not being 100% happy with the titles thing. It’s a tad gruesome on the topic listing.

I’ve played around with it a bit. Hiding the span is easy. Setting the anchor to block display and absolute positioning is easy. That cleans things up and makes for a nice big linked area. But, the problems are:

1/ Can’t control the flow of the title text, so not formatted on two lines all the time. This looks messy.
2/ To fit a long first post date (ie: September) on one line requires about 260px width.

You could use a before and an after with hidden overflow, to try and split it into two lines, but the inconsistent width will screw that.

The only real solution here is to hack the js and/or markup.

Not so bad on the in-post dates. Those are ok.

.topic-meta-data .post-date {
	float: none;
}
.topic-meta-data .relative-date {
	position: relative;
	display: inline-block;
	color: rgba(0,0,0,0);
}
.topic-meta-data .relative-date::after {
	position: absolute;
	display: inline-block;
	left: 0;
	content: attr(title);
	color: #aaa;
}
.topic-meta-data .relative-date:hover::after {
	color: #ddd;
}