Playing around with a bit of custom theming

AdeptusT · May 12, 2018, 2:31am

It would be nice if “pasting” your HTML would be more or less just what is needed. You should look at the source of the script (the templates, the ruby, the javascript…), that is the “real HTML” currently (or what generates it), and probably any change will not be radical departure from that. “current markup is more bloated than it needs to be” is a clue. “having simple code always makes sense” nah, that’s poor job security. /nudge/

IMO if the original coder is going to fix clickability, the resizing should go with it.

Gumboots · May 12, 2018, 7:01am

Well, funnily enough, the right click/MMB stuff has now been fixed and…

…it was fixed by changing the clickable divs to anchors.
I believe I may have mentioned that possibility.

So all we have to do now is convince them to use responsive CSS. I know a bloke who knows a bloke who has some of that too.

It would be easy to implement. The current featured bar has div.topics, which corresponds to div.parent in my demo. In both cases, there are six anchors directly inside the divs: a.tlp-featured-topic on this site, and a.child in my demo.

So, to get the same behaviour on this site as in my demo, all you have to do is use the same CSS and change the class names. That, my friend, is not a drama. No frigging around with gnarly javascript required.

The image has the .thumbnail class in both cases, so not a problem.

The div.featured-details and div.content on this site may be necessary for Discourse, or for whoever coded the featured bar and doesn’t want to re-think it all, but they aren’t necessary for what the users will see. Those two classes don’t need any CSS at all, and can be ignored.

The div.title and div.excerpt and span.user can be treated the same as the span.thumbspan in my demo, or alternatively can be given any damned eye candy you like.

Easy, yes?

bartv · May 12, 2018, 7:03am

It’s still early and I haven’t had enough coffee, so I didn’t read all the tech details Does making the featured bar responsive need a restructured HTML, or can it be done in CSS alone?

Gumboots · May 12, 2018, 7:09am

Can be done with just CSS. I wrote mine with minimal markup, just because I like doing things that way.

I assume the bloke who wrote the featured bar for you didn’t want to recode the whole thing, and just gave you the basic change to anchors as a quick fix. That’s fine. It just means you have a dozen extra divs up there (two inside each anchor) but they don’t need to have any CSS attached to them. If you just ignore them it should look and work the same anyway. The divs would just collapse to zero height and not be visible.

Edit: I’ll play around with it in Stylus and see if I can get it sorted. Shouldn’t be hard.

Gumboots · May 12, 2018, 8:07am

Ok, got the basics sorted. This does the trick if you paste it into any Stylish/Stylus/userContent.css/whatever.

/* Featured bar container. */
/* Holds links, thumbnails and "Featured" button. */
.tlp-featured-topics.has-topics {
	display: block !important;
	overflow: hidden !important;
}
/* Links container. */
.tlp-featured-topics.has-topics>.topics {
	position: relative;
	display: block !important;
	width: 100%;
	overflow: hidden !important;
	padding-top: 16% !important;
}
/* Links (thumbnails containers). */
.tlp-featured-topic {
	position: absolute !important;
	top: 0;
	bottom: 0;
	width: 16%;
	margin: 0 !important;
}
.tlp-featured-topic:nth-child(2) {
	left: 16.8%;
}
.tlp-featured-topic:nth-child(3) {
	left: 33.6%;
}
.tlp-featured-topic:nth-child(4) {
	left: 50.4%;
}
.tlp-featured-topic:nth-child(5) {
	left: 67.2%;
}
.tlp-featured-topic:last-child {
	right: 0;
}
/* Image thumbnails. */
.tlp-featured-topic>.thumbnail {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

Note that this has the !important crud all over the place because it has to override the CSS currently used by the site. That could all be removed if the code was going into the site theme’s CSS file.

Personally I’d also remove the inline style for image size (177px height and width) if that’s not too much trouble to get to in the markup. It’s common to include image sizes in HTML so layout doesn’t break while the image is loading (or if it’s disabled) but with this CSS the image widths and heights are locked to the overall forum width anyway, so layout cannot break even if all images are missing.

OTOH if it’s a drama to get to, leaving the inline style in place won’t really hurt anything. It’s just more redundant code to override. Anyway…

The only remaining catch is what do you want to do with your text inside the thumbnails as screen width decreases? The current sixth thumb, for YanSculpts’ topic, will start overlapping text at around 935px screen width due to the long title. The current second thumb, for Timur_Pavlov’s topic, will start breaking the username and avatar to two lines at around 845px width.

Obvious option is media queries. Maybe reducing text size on small screens, or truncating titles, or even just dropping the text entirely and just having the linked thumbs.

Felix_Kutt · May 12, 2018, 9:58am

Yeah, this is where IMO truncation would be ideal.

Gumboots · May 12, 2018, 9:06pm

Gave it some more thought. I think I’ll lock the avatar and username to one line, and use text-overflow: ellipsis; to truncate overly long usernames.

With the topic title - could do the same thing, but that’s probably excessive truncation. Best trick to use is probably the old gradient fade out at the bottom of the text, so it doesn’t overlap the username and av. I should be able to do that by setting the gradient on the username span, with a touch of z-index if it needs it.

Those two tricks should be good down to about 600ish, past which dropping down to avatar only is probably the sensible option. On small phones the text will be over the top anyway. I’lll mess around with it later today.

Gumboots · May 12, 2018, 11:22pm

Ok, gimme some feedback on this pile of crud, please.

The media queries might need some tweaking to deal with weird pixel ratios on phones and tablets, but it is ok on desktop at any screen width over 240px.

/* Featured bar container. */
/* Holds links, thumbnails and "Featured" button. */
.tlp-featured-topics.has-topics {
	display: block !important;
	overflow: hidden !important;
}
/* Links container. */
.tlp-featured-topics.has-topics>.topics {
	position: relative;
	display: block !important;
	width: 100%;
	overflow: hidden !important;
	padding-top: 16% !important;
}
/* Links (thumbnails containers). */
.tlp-featured-topic {
	position: absolute !important;
	top: 0;
	bottom: 0;
	width: 16%;
	margin: 0 !important;
}
.tlp-featured-topic:nth-child(2) {
	left: 16.8%;
}
.tlp-featured-topic:nth-child(3) {
	left: 33.6%;
}
.tlp-featured-topic:nth-child(4) {
	left: 50.4%;
}
.tlp-featured-topic:nth-child(5) {
	left: 67.2%;
}
.tlp-featured-topic:last-child {
	right: 0;
}
/* Image thumbnails. */
.tlp-featured-topic>.thumbnail {
	display: block;
	width: 100% !important;
	height: 100% !important;
}
.tlp-featured-topic>.featured-details {
	padding: 0 !important;
}
.tlp-featured-topic.show-details>.featured-details {
	background-color: #666 !important;
	opacity: .93;
}
.featured-details .title {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	overflow: hidden;
	padding: 5px;
	text-overflow: ellipsis;
}
.featured-details .user {
	left: 0;
	right: 0 !important;
	bottom: 0 !important;
	overflow: hidden;
	height: 22px;
	text-align: right;
	padding: 28px 35px 5px 5px !important;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.tlp-featured-topic.show-details .user {
	background-image: linear-gradient(to bottom, rgba(102,102,102,0), rgba(102,102,102,1) 25%, rgba(102,102,102,1));
}
.tlp-featured-topic.show-details>.featured-details .user::before {
	display: block;
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 35px;
	padding-top: 1px;
	background-color: #222;
	border-bottom: 1px solid #ccc;
}
.featured-details .avatar {
	position: absolute;
	right: 5px;
	bottom: 5px;
}
/* Quick testing of small screen widths. */
@media screen and (max-width: 640px) {
	.tlp-featured-topic .user,
	.tlp-featured-topic.show-details .user {
		color: rgba(0,0,0,0) !important;
	}
}
@media screen and (max-width: 480px) {
	.tlp-featured-topic .title,
	.tlp-featured-topic.show-details .title,
	.tlp-featured-topic.show-details>.featured-details .user::before {
		display: none !important;
	}
}

AdeptusT · May 13, 2018, 3:36am

IT WERKS!!!
Good. Even below 200px wide. Congrats.

Gumboots · May 14, 2018, 5:54am

Ok, good. Thought it would work.

Had a bit more of a play with ideas for the rest of the theme. I was thinking about people who like more of an old school forum look, with the unread posts in each board linked from an icon just to the left of the board name (like vB and other forum apps). This is a live shot, done using CSS tweaks only.

Taking the Modeling board as the example: the anchor for board name is set to display: block and position: absolute; with a z-index of 5. The z-index bumps it up in the stack relative to the .ember-view span that contains the new/unread links (it would normally be lower in the stack due to coming earlier in the markup).

The .ember-view span is also set to display: block; but with text-align: right; to make it full width, but allow the new/unread text links to sit over at the right. The linked icon, which is part of the same “1 new” link, is done using a ::before pseudo element that is absolute positioned to stick it over at the left. The icon itself just steals the default site icon from the theme header bar, with suitable CSS for sizing, etc.

This allows the new posts to be accessed either from the text link at the right, or from the old school icon at the left.

The faded-out icons, for boards with no new posts, are done with another pseudo on the subcategory itself, with opacity set to 0.4. Obviously these are not linked, and are just for old school visual consistency.

Something like this might feel more familiar to people who are freaked out by the current Discourse home page, which apparently is a bit disorienting for them. It was a bit of fun with coding anyway.

Gumboots · May 14, 2018, 9:30am

Frigged around with the topics listing too. Got it like this:

CSS is getting a bit horrendous, but given the default CSS file is 15,000+ lines (strewth!) it’s insignifcant by comparsion. At the moment I’m only up to 435 lines of code, including media queries and including the responsive “featured” top bar.

Gumboots · May 14, 2018, 10:35pm

Had another idea (it happens). The topics without thumbs are obviously more compact than the topics with thumbs. More compact is, within reason, generally a good thing, especially if you’re on a phone.

If I set the thumbs smaller I could have all topics the same overall height, which would simplify some of the gnarlier bits of CSS and give a more consistent feel. Only catch is smaller thumbs would not giive so good a preview of the topic. Obvious solution: expand thumbs on hover. Like this:

The shift to the right means you can scroll down the list of topics and check the thumbs one at the time, without the expanded one getting in the way of the cursor. Seems to work quite well. Current code is this:

/* @WIP - Expand topic thumbnails on hover. */
.topic-thumbnail {
	position: relative;
	width: 80px;
	height: 80px;
	margin-right: 15px;
	padding-right: 0 !important;
}
.topic-thumbnail>a {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 80px;
	height: 80px;
}
.topic-thumbnail>a:hover {
	z-index: 99;
}
.topic-thumbnail>a>.thumbnail {
	max-height: 80px;
	max-width: 80px;
}
.topic-thumbnail>a:hover>.thumbnail {
	max-width: 160px;
	max-height: 160px;
	margin-left: 40px;
	box-shadow: 2px 3px 4px #333;
	transition: max-height .2s .1s, max-width .2s .1s, margin-left .2s .1s, box-shadow .2s .1s;
}
/* ---------------------------------------- */

Gumboots · May 16, 2018, 12:15am

I’m geting into this a bit. Hadn’t done any theming for ages, and I did used to enjoy it when people weren’t on my arse about everything. So, here’s a start on a dark variant. It’s still WIP. The typography and colour balance need more tweaking, and some of the menus are still a bit crude, but overall I think it’s in a good ballpark. These shots are all taken live on the site:

This is going with the more “standard forum” layout mentioned earlier for people who prefer that. Me? I like clean, so I like this.

The user menu at top right has a fixed height to keep the logout button in a handy location, and the scrolling list uses opacity tricks to make the scrollbar less in your face on the dark theme.

The latest posts are now in a drop menu, like so:

A standard sub-category (no thumbs, no new posts):

A standard sub-category (no thumbs, with new posts):

Sub-category with topic thumbnails:

Complete code, in its current state, is:

html {
	background-color: #111;
	color: #aaa !important;
	font-family: 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.d-header.clearfix {
	height: 4em !important;
	padding-top: 6px !important;
	background-color: #181818 !important;
	box-shadow: 0 2px 4px #000;
}
.d-header.clearfix .nav-link {
	color: #aaa !important;
	font-weight: 400;
}
.wrap {
	max-width: 960px !important;
	background: #181818;
	border: 2px solid #090909;
	box-shadow: 0 0 6px #000;
}
#current-user.active>.icon {
	background-color: #181818;
	border-right: 1px solid #000;
	border-left: 1px solid #222 !important;
	border-top: 1px solid #333 !important;
	box-shadow: 3px 3px 3px #000 !important;
}
.d-header.clearfix>.wrap {
	border: none;
	box-shadow: none;
}
/* @WIP - Top right user menu droppy. */
.menu-panel {
	background-color: #181818;
	border: 1px solid #000;
	border-left: 1px solid #222 !important;
	border-top: 1px solid #333 !important;
	box-shadow: 3px 3px 3px #000 !important;
}
.menu-links-header li {
	vertical-align: middle;
}
.menu-links-header .user-activity-link {
	margin: 0 !important;
	border: 1px solid #000;
	border-left: 1px solid #222 !important;
	border-top: 1px solid #333 !important;
}
.glyphs>.widget-link {
	display: inline-block !important;
	padding: .5em 1em !important;
}
.panel-body {
	overflow: hidden !important;
	min-height: 226px !important;
}
.panel-body-contents {
	position: relative;
}
.panel-body-contents>.logout-link {
	display: block !important;
	margin-top: 12px;
	border: 1px solid #000;
	border-left: 1px solid #222 !important;
	border-top: 1px solid #333 !important;
	text-align: center;
}
.menu-links-header .user-activity-link:hover,
.glyphs>.widget-link:hover,
.panel-body-contents .widget-link.logout:hover {
	background-color: #202020;
	color: #ddd;
	transition: background-color .2s, color .2s;
}
.panel-body-contents hr{
	display: none;
}
.panel-body-contents>.notifications>ul{
	height: 134px !important;
	overflow: auto !important;
	border: 1px solid #000;
	border-right: 1px solid #222 !important;
	border-bottom: 1px solid #333 !important;
	opacity: 0.7;
}
.panel-body-contents>.notifications li{
	background-color: #181818 !important;
}
.panel-body-contents>.notifications>ul div {
	color: #129acc;
}
/* Featured bar container. */
/* Holds links, thumbnails and "Featured" button. */
.tlp-featured-topics.has-topics {
	display: block !important;	
	width: auto !important;
	overflow: hidden !important;
	margin: 0 5px 1em 5px;
}
/* Links container. */
.tlp-featured-topics.has-topics>.topics {
	position: relative;
	display: block !important;
	width: 100%;
	overflow: hidden !important;
	padding-top: 16% !important;
}
/* Links (thumbnails containers). */
.tlp-featured-topic {
	position: absolute !important;
	top: 0;
	bottom: 0;
	width: 16%;
	margin: 0 !important;
}
.tlp-featured-topic:nth-child(2) {
	left: 16.8%;
}
.tlp-featured-topic:nth-child(3) {
	left: 33.6%;
}
.tlp-featured-topic:nth-child(4) {
	left: 50.4%;
}
.tlp-featured-topic:nth-child(5) {
	left: 67.2%;
}
.tlp-featured-topic:last-child {
	right: 0;
}
/* Image thumbnails. */
.tlp-featured-topic>.thumbnail {
	display: block;
	width: 100% !important;
	height: 100% !important;
}
.tlp-featured-topic>.featured-details {
	padding: 0 !important;
}
.tlp-featured-topic.show-details>.featured-details {
	background-color: #333 !important;
	opacity: .93;
}
.featured-details .title {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	overflow: hidden;
	padding: 5px;
	text-overflow: ellipsis;
}
.tlp-featured-topic.show-details>.featured-details .title {
	color: #ddd !important;
}
.featured-details .user {
	left: 0;
	right: 0 !important;
	bottom: 0 !important;
	overflow: hidden;
	height: 22px;
	text-align: right;
	padding: 28px 35px 5px 5px !important;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.tlp-featured-topic.show-details .user {
	background-image: linear-gradient(to bottom, rgba(51,51,51,0), rgba(51,51,51,1) 25%, rgba(51,51,51,1));
	color: #fff !important;
}
.tlp-featured-topic.show-details>.featured-details .user::before {
	display: block;
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 35px;
	padding-top: 1px;
	background-color: #111;
	border-bottom: 1px solid #555;
}
.featured-details .avatar {
	position: absolute;
	right: 5px;
	bottom: 5px;
}
.featured-link {
	float: none !important;
	padding: 0 !important;
}
.featured-link>.discourse-tag {
	display: block !important;
	max-width: 100% !important;
	padding: 6px 8px !important;
	background-color: #181818;
	color: #999;
	text-transform: capitalize;
	border: 1px solid #000;
	border-left: 1px solid #222 !important;
	border-top: 1px solid #333 !important;
}
.featured-link>.discourse-tag:hover {
	background-color: #202020;
	color: #ddd;
	transition: background-color .3s .1s, color .3s .1s;
}
.featured-link>.discourse-tag::before {
	content: "view all ";
}
.featured-link>.discourse-tag::after {
	content: " topics";
}
/* @WIP - Testing latest posts as drop menu. */
.categories-and-latest {
	position: relative !important;
	display: block !important;
	flex: none !important;
	flex-flow: unset !important;
	margin-top: 3em !important;
}
.categories-and-latest>.column {
	flex: none !important;
	flex-direction: unset !important;
}
.categories-and-latest>.column.categories {
	margin-right: 0 !important;
}
.categories-and-latest>.column:last-child {
	position: absolute !important;
	z-index: 99;
	top: -33px;
	left: 5px;
	right: 5px;
	min-width: 230px !important;
	max-width: 640px !important;
	max-height: 40px;
	overflow: hidden;
	background-color: #181818;
	border: 1px solid #000;
	border-left: 1px solid #222 !important;
	border-top: 1px solid #333 !important;
	flex: none !important;
	flex-direction: unset !important;
	transition: max-height .2s .4s, box-shadow .2s .4s;
}
.categories-and-latest>.column:last-child .table-heading {
	padding-left: 12px;
	color: #999;
	cursor: pointer;
	border-bottom: 1px solid #333 !important;
	box-shadow: inset 0 -2px 0 #000;
}
.categories-and-latest>.column:last-child .table-heading::before {
	content: "Show ";
}
.categories-and-latest>.column:last-child .table-heading::after {
	content: " Posts \2193";
}
.categories-and-latest>.column:last-child:hover {
	max-height: 2000px;
	box-shadow: 3px 4px 4px #000;
	transition: max-height .8s .1s, box-shadow .2s .1s;
}
.categories-and-latest>.column:last-child>.latest-topic-list {
	height: auto !important;
}
.categories-and-latest>.column:last-child .latest-topic-list-item {
	padding: .5em 1em !important;
	opacity: 0;
	transition: opacity .2s .4s;
	font-size: 0.95em !important;
	border-bottom: 1px solid #333 !important;
	box-shadow: inset 0 -2px 0 #000;
}
.latest-topic-list-item .avatar {
	max-width: 36px;
	max-height: 36px;
	opacity: .8;
}
.latest-topic-list-item .avatar:hover {
	opacity: 1;
}
.latest-topic-list-item .main-link {
	max-width: 80%;
}
.categories-and-latest>.column:last-child .latest-topic-list-item .title {
	color: #aaa !important;
}.latest-topic-list-item .badge-category-parent-bg {
	display: none !important;
}
.categories-and-latest>.column:last-child .latest-topic-list-item .badge-category {
	color: #777 !important;
}
.categories-and-latest>.column:last-child .latest-topic-list-item .badge-category {
	padding-left: 4px;
}
.categories-and-latest>.column:last-child:hover .latest-topic-list-item {
	opacity: 1;
	transition: opacity .4s .1s;
}
.badge-notification.new-topic {
	display: inline-block;
	margin: -10px 0 -2px 0 !important;
	padding: 0 5px !important;
	color: #0f82af !important;
	font-size: 2em !important;
}
.categories-and-latest>.column:last-child .btn.pull-right {
	display: block !important;
	float: none !important;
	margin: 1em !important;
	background-color: #181818;
	color: #999;
	border: 1px solid #000;
	border-left: 1px solid #222 !important;
	border-top: 1px solid #333 !important;
}
.categories-and-latest>.column:last-child .btn.pull-right:hover {
	background-color: #202020;
	color: #ddd;
	transition: background-color .3s .1s, color .3s .1s;
}
.categories-and-latest>.column:last-child .btn.pull-right::before {
	content: "View ";
}
.categories-and-latest>.column:last-child .btn.pull-right::after {
	content: " Recent Posts";
}
/* ----------------------------------------- */
.google-adsense, .badge-category-bg,
.category-list>thead, td.topics,
#suggested-topics, .topic-list .category {
	display: none !important;
}
.category-list {
	width: 100%;
}
.category-list>tbody {
	border-top: none !important;
}
.category-list tr {
	border-bottom: none !important;
}
.category-list .category {
	padding: 12px 5px !important;
	border-top: none !important;
	border-left: none !important;
}
.category-list .category>div:first-child {
	padding-top: 0.5rem;
	border-bottom: 1px solid #333 !important;
	box-shadow: inset 0 -2px 0 #000;
}
.category-list .category>div:first-child>h3 {
	font-size: 1.4em !important;
	font-weight: 400 !important;
}
.category .category-name {
	color: #888;
	font-weight: 400 !important;
}
.category-description {
	margin: -0.25rem 6px 0.5rem 2px;
	font-size: 0.9rem !important;
}
.subcategory {
	position: relative;
	min-height: 38px !important;	
	border-bottom: 1px solid #333 !important;
	box-shadow: inset 0 -2px 0 #000;
}
.subcategory>.badge-wrapper {
	position: absolute !important;
	display: block;
	top: 0;
	right: 108px;
	bottom: 0;
	left: 45px;
	z-index: 5;
	overflow: hidden;
	padding: 10px 6px 0 0 !important;
	font-size: 1.1em !important;
}
.subcategory>.ember-view {
	display: block !important;
	padding-top: 8px;
	line-height: 22px !important;
	text-align: right;
}
.subcategory>.ember-view:before,
.subcategory>.ember-view>.new-posts::before{
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	height: 23px;
	width: 37px;
	margin-top: -12px;
	content:"";
	background-image: url(https://blenderartists.org/uploads/default/original/4X/b/2/7/b277e0d1fae7ba105b6d03e603c55efe2f52b59d.png);
	background-size: cover;
	opacity: 0.6;
}
.subcategory>.ember-view:before{
	opacity: 0.4;
}
.subcategory .badge-notification {
	color: #0f82af !important;
	font-size: .9em !important;
	font-weight: 400 !important;
}
/* Reposition thread posters avatars beneath title. */
.topic-list th.posters, .topic-list td.posters {
	max-width: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}
tr.topic-list-item {
	position: relative;
}
td.main-link {
	min-height: 58px !important;
	vertical-align: top;
}
/* @WIP - Expand topic thumbnails on hover. */
.topic-thumbnail {
	position: relative;
	width: 60px;
	height: 60px;
	margin-right: 10px;
	padding-right: 0 !important;
}
.topic-thumbnail>a {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 60px;
	height: 60px;
}
.topic-thumbnail>a:hover {
	z-index: 99;
}
.topic-thumbnail>a>.thumbnail {
	max-height: 60px;
	max-width: 60px;
	transition: max-height .2s, max-width .2s, margin-top .2s, margin-left .2s;
}
.topic-thumbnail>a:hover>.thumbnail {
	max-width: 160px;
	max-height: 160px;
	margin-top: 24px;
	margin-left: 48px;
	box-shadow: 2px 3px 4px #000;
	transition: max-height .2s .1s, max-width .2s .1s, margin-top .2s .1s, margin-left .2s .1s, box-shadow .2s .1s;
}
/* ---------------------------------------- */
.topic-list th, .topic-list-item>td {
	border-bottom: 1px solid #333 !important;
	box-shadow: inset 0 -2px 0 #000;
}
.topic-list>tbody {
	border-top: none !important;
}
.topic-list-item-separator>td {
	position: relative;
	height: .7em !important;
	line-height: 1em !important;
	border-bottom: none !important;
}
.topic-list-item-separator>td::before {
	position: absolute;
	top: .5em;
	left: 0;
	right: 0;
	display: block;
	padding-top: 1px;
	background-color: #952d14;
	content: "";
}
.topic-list-item-separator>td>span {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -4em;
	display: block;
	width: 5em;
	background-color: #181818 !important;
	text-transform: uppercase;
}
/* ---------------------------------------- */
.topic-title:after {
	content: "";
	float: right;
	display: block;
	height: 3.3em;
}
.topic-title .title {
	color: #aaa !important;
}
.unseen-topic .topic-title .title {
	color: #d29557 !important;
}
.main-link .topic-details .discourse-tags {
	float: right !important;
	margin: -1.5em 0 0 0;
}
/* ---------------------------------------- */
.show-thumbnail>tbody>tr.topic-list-item.pinned .posters>a,
.posters>a {
	position: absolute !important;
	left: 12px !important;
	bottom: 9px !important;
	display: block;
	height: 25px;
	width: 25px;
	opacity: 0.8;
}
.posters>a:hover {
	opacity: 1;
}
.show-thumbnail>tbody>.pinned .posters>a:nth-child(2),
.posters>a:nth-child(2) {
	left: 44px !important;
}
.show-thumbnail>tbody>.pinned .posters>a:nth-child(3),
.posters>a:nth-child(3) {
	left: 76px !important;
}
.show-thumbnail>tbody>.pinned .posters>a:nth-child(4),
.posters>a:nth-child(4) {
	left: 108px !important;
}
.show-thumbnail>tbody>.pinned .posters>a:nth-child(3),
.posters>a:nth-child(5) {
	left: 140px !important;
}
.show-thumbnail>tbody .posters>a {
	left: 80px !important;
	bottom: 14px !important;
}
.show-thumbnail>tbody .posters>a:nth-child(2) {
	left: 112px !important;
}
.show-thumbnail>tbody .posters>a:nth-child(3) {
	left: 144px !important;
}
.show-thumbnail>tbody .posters>a:nth-child(4) {
	left: 176px !important;
}
.show-thumbnail>tbody .posters>a:nth-child(5) {
	left: 208px !important;
}
/* Extra quick tests: nothing to do with featured topics bar. */
.timeline-container {
	margin-left: 820px !important;
}
.timeline-container>.topic-timeline {
	margin-left: 0 !important;
	width: 100px !important;
}
.timeline-footer-controls .fa-reply::after {
	content: " Reply";
}
/* Quick testing of small screen widths. */
@media screen and (max-width: 850px) {
	.topic-list td.posters a:not(.latest),
	.topic-list td.posters a.latest {
		display: inline !important;
	}
	.topic-list td.posters a.latest {
		width: 25px !important;
	}
}
@media screen and (max-width: 640px) {
	.tlp-featured-topic .user,
	.tlp-featured-topic.show-details .user {
		color: rgba(0,0,0,0) !important;
	}
	.discourse-tag {
		display: none !important;
	}
	.discourse-tag:nth-of-type(1) {
		display: inline-block !important;
	}
}
@media screen and (max-width: 480px) {
	.tlp-featured-topic .title,
	.tlp-featured-topic.show-details .title,
	.tlp-featured-topic.show-details>.featured-details .user::before {
		display: none !important;
	}
	th.num.posts, td.num.posts {
		display: none;	
	}
	th.activity.num, td.activity.num {
		max-width: 40px;
		vertical-align: top;
	}
	td.activity.num .post-activity {
		display: block;
		margin-top: 0;
	}
	.topic-thumbnail {
		left: -10px;
		margin-right: 0;
	}
}

This code has all been tested down to a 320px screen, but only on Firefox so far. Feel free to nick any of it and play around with it if you want to.

bartv · May 16, 2018, 4:51am

Why did you decide to drop the icons to the next line? It makes the topics list take up twice as much space.

Gumboots · May 16, 2018, 4:54am

I liked the look of it better, and it means they can stay visible on narrow screens. They’re fine down to 320px width. It does take up more vertical space on non-artwork boards, but makes little difference on the boards that have topic thumbs.

bartv · May 16, 2018, 4:56am

I see. Not sure it’s worth the ‘cost’ of screenspace though…

Other question: are you also testing this theme on mobile devices?

Gumboots · May 16, 2018, 5:02am

The only relevant mobile device I have is an old Samsung tablet that runs Android 5.0.2. I can test on that if I can get it to run Stylus, but I don’t have a range of phones at my disposal.

I still use a fairly dumb phone simply because it’s cheap and durable, and it does phone calls and texts, and that’s all I want from a phone. It does have a browser, but that’s not worth using.

Still browsers for phones and tablets are pretty good these days, and this stuff is all fairly basic CSS, so there’s a good chance it will all work.

Edit: It’s not a drama anyway if you want the avatars in the default location. The CSS required to shift them around isn’t much, so it’s easy for anyone who wants them like the shots to run their own custom CSS snippet.

bartv · May 16, 2018, 5:46am

Ah but you can easily test for mobile devices using the Inspector in your browser. Just select the device type you want to simulate and reload the page:

Gumboots · May 16, 2018, 6:49am

Oh sure, I can do that, but how good are the emulations? AFAIK all it does is change user agent. It wont change anything else. And on Firefox, using a Galaxy 7 emulation, I cant even type an apostrophe, so it has to be buggy. Im normally a stickler for correct use of apostrophes, but this thing wont let me use them at all.

Edit: Ok, back on a real browser now. Apostropes even work! Yay! ‘’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’

I’ll see what I can get to run on the tablet with custom CSS. I know FF will do it. Chrome probably will. Not sure about Opera (does anyone still use it?). Can’t do IE Edge, because I’m still running W7 on desktop. Someone else will have to test Edge if they think it’s important. I’m not even sure if Edge will allow custom CSS by domain.

Edit again: Ok, looked around. Looks like it’s Firefox only on the tablet. The default Samsung browser doesn’t do custom CSS, and every other bugger wants me to sign up to Google Play before I can install their precious browsers. Needless to say, signing up for Google Play is not top of my bucket list.

Gumboots · May 16, 2018, 7:45am

Oh FFS. They’re serving completely different stylesheets and content based on user agent. What a tedious bunch of bastards. The whole idea of responsive design was that you didn’t have to have separate mobile and desktop sites, which is effectively what they are doing.