Wiki Forum stylesheets

[brianman]

Sample dark theme here:
Dark Theme

 

[Model 3]

I do not want to clutter the first post, I just have a few suggestions that seems to work fine here (but not tested everywhere):

/* Make the title of read threads un-bold, while keeps the unread bold */
.discussionListItem .title a:only-child, .nodeTitle a:only-child {
  font-weight: normal !important;
}

/* Removes the red extra link as it is not necessary any more */
.discussionListItem .title a.unreadLink, .nodeTitle a.unreadLink {
  display: none !important;
}

/*  Use a smaller font on the second row, with name of thread starter and timestamps, to emphasiz on the title */
.discussionListItem .secondRow  {
  font-size: 11px;  
}

/* To see the "location" of the poster. Sometimes it is relevant. */
.extraUserInfo {
  height: 6em !important;
}

Edit: forgot to mention that I use this as an edit to FlasherZ's CSS in the first post.

 

[FlasherZ]

Edit: forgot to mention that I use this as an edit to FlasherZ's CSS in the first post.

I like it! I've added them to mine in the first post so that others can use them. Thanks!

 

[FlasherZ]

I just made a couple more updates to tighten up the search results (and fix an error I had made - avatar sizing I did on the discussionList wasn't scoped and rolled into searchResults). I think I might have it reasonably usable now.

 

[FlasherZ]

Added an update to compress the whitespace in the ratings icons and information.

 

[Model 3]

I like it! I've added them to mine in the first post so that others can use them. Thanks!

I see now that they have changed the code for the sub-forum titles, so you may remove any references to ".nodeTitle a" in the code I posted here earlier, this does not work anymore.

/* Make the title of read threads un-bold, while keeps the unread bold */
.discussionListItem .title a:only-child /* , .nodeTitle a:only-child */ {
  font-weight: normal !important;
}

/* Removes the red extra link as it is not necessary any more */
.discussionListItem .title a.unreadLink /* , .nodeTitle a.unreadLink */ {
  display: none !important;
}

 

[FlasherZ]

I shrunk the groups view to a single row (seems to be fine for most users), and shrunk the extraUserInfo material so that it minimizes wasted space for small posts:

 

[FlasherZ]

I tightened things up just a bit more and turned the "Views:" display back on (the site's style sheet suppresses the # of views for some reason).

 

[FlasherZ]

Ok, at this point in time here are some comparisons between the existing stock layout and the work that we've done in this thread -- this is the style as of 2:30 pm CT 3/22:

First, front page - my style left, site style right - since then I've also fixed the missing bold on forum titles:

Next, Model S category:

Next, thread top:

Next, thread bottom:

As you can see, there is significantly greater information density and eliminated white space using these methods!

 

[Model 3]

As you can see, there is significantly greater information density and eliminated white space using these methods!

Yes, but if you look at the bottom of the two last images in your post, you may see a difference: The menuline and "fullscreen"/"narrowscreen" button is missing. Or more precise it has fallen down below the black footer area, and is invisible with white/grey color on white/grey background.

This works for me - but you may try to adjust the line-height even lower (it is now 80px)

.footer .pageContent {
  line-height: 30px;
}

 

[FlasherZ]

Yes, but if you look at the bottom of the two last images in your post, you may see a difference: The menuline and "fullscreen"/"narrowscreen" button is missing. Or more precise it has fallen down below the black footer area, and is invisible with white/grey color on white/grey background.

This works for me - but you may try to adjust the line-height even lower (it is now 80px)

.footer .pageContent {
  line-height: 30px;
}

Erm, is it bad to say that I don't really care if that button goes away?

Day 1, I activated wide mode and I'm not looking back.

I just fixed it but in a different way. I shrunk the spacing in the footer and drew it up, and adjusted noBorderRadiusTop so that it only affected the top of the page, not the bottom.

 

[brianman]

Nice work, FlasherZ. Some suggestions based on your post #29 screenshots....

Front page
- The magnifying glass is a few pixels too high.
- The resizer in the top right. My 2nd post stylesheet makes that a circle rather than an ovalish thing. FYI if you want to steal that.
- The 2nd and 3rd row in the 2nd column ("by ..." and "... at 10:20 AM") can fit on the same row easily, IMO.
- In the 3rd column / 1st row, put the user name and post to the right of the icon/avator and make the box shorter.

Model S category
- Move "Post New Thread" above the list (to the right of the "Model S" section heading"). Reclaim the (now) wasted vertical space.
- The column headers are not aligned as well as they are in the original. Look at the "L" of "Last Message".

Thread top
- Observe the 3rd post (EMDoc12). In my stylesheet I preferred to not have the dead space in the post, and thus I nuked the Messages and Location row. I think the ideal would be to keep those rows but make that a vertically scrollable area.
- Move the rating icons (Helpful, etc.) to either the Signature row or the REPORT row. I think the latter makes more sense.
- (Consider) I think we can reclaim some more space if we overlay the handle with the avater. Put a white text-shadow around the handle to make it stand out.

Thread bottom
- The row with "Home" and "Contact Us" at the bottom is missing.
- Above and below the "Copyright... countries." block is unnecessary dark padding.


General:
I don't know if you noticed but the default background image "doesn't work right" for quotes that are large enough to have a scrollbar. In theory you could use background-attachment:local and background-repeat:repeat to fix that but the art is busted. In my stylesheet I changed that to a linear gradient (which avoids a download) and adjusted the sizing to align with color switching with each text row.

 

[FlasherZ]

Thanks Brian. With some of this, you've hit my limit of CSS knowledge. If you'd like to take what I've done so far and hack on it, I'm willing to adopt it if we want to unify... for example, I'm unfamiliar with how to apply overrides to move the ratings icons to the report row - but I would love to see that done.

I fixed the bottom row (Contact Us, width button, etc.), but didn't shrink the unnecessary padding, mostly because I really don't go further south than the reply box. I'll put the fixes for that on my second priority list.

On the "pre" sections I used your code but changed the colors so they were far more muted against the background. I didn't do it with quotes. It seems to work ok for me - non-scrollable, but click on the bottom part and it expands.

As far as compressing the extra-user-info, I found that with a single line of group icons, I can still maintain location and # of posts without padding even the smallest of posts. That's partially because I insist upon using Verdana @ 1.1em for the posts, otherwise my brain goes insane. PT Sans *sucks*. I need to adjust it for the reply box, though - that still uses default. As for reclaiming space by overlaying the avatar with the poster name, I'd love to do that but it's beyond my means.

The ovalish rather than round "quick navigation" button I considered to be a feature, I like square rather than circles.

 

[brianman]

No worries. If you're tapped out on time or interest, that's fine. I may take a crack at it when/if I get some "idle" time while at a supercharger or somesuch.

 

[FlasherZ]

- The magnifying glass is a few pixels too high.
- The column headers are not aligned as well as they are in the original. Look at the "L" of "Last Message".
- The row with "Home" and "Contact Us" at the bottom is missing.
- Above and below the "Copyright... countries." block is unnecessary dark padding.
- In the 3rd column / 1st row, put the user name and post to the right of the icon/avator and make the box shorter.

All fixed.

- The resizer in the top right. My 2nd post stylesheet makes that a circle rather than an ovalish thing. FYI if you want to steal that.
- Observe the 3rd post (EMDoc12). In my stylesheet I preferred to not have the dead space in the post, and thus I nuked the Messages and Location row. I think the ideal would be to keep those rows but make that a vertically scrollable area.

I viewed these items as "ok as is" or "will-not-fix". That said, I'm willing to accept and look at any suggestions.

- The 2nd and 3rd row in the 2nd column ("by ..." and "... at 10:20 AM") can fit on the same row easily, IMO.

I ran into problems when you have long avatar names and long dates - I'm already having wrap problems for "yesterday, at 4:24 pm" without combining the lines.

- Move "Post New Thread" above the list (to the right of the "Model S" section heading"). Reclaim the (now) wasted vertical space.
- Move the rating icons (Helpful, etc.) to either the Signature row or the REPORT row. I think the latter makes more sense.
- (Consider) I think we can reclaim some more space if we overlay the handle with the avater. Put a white text-shadow around the handle to make it stand out.

This is beyond my technical capability with CSS. Help appreciated.

 

[FlasherZ]

This is what the bottom of a post now looks like:

and the avatar block on the front page:

...and the index page got tightened a bit more too, with alignment fixes:

 

[paulkva]

Looks good, thanks for pushing on this! One more small suggestion: after I copied your CSS, I deleted the following:

.discussionListItem .title a.unreadLink {
  display: none !important;
}

If you look at your 2nd set of side-by-side screenshots, you'll see the original switched from the annoyingly small blue dot to red text that says "GO TO FIRST UNREAD" -- and the three lines above hide that text. Removing those lines will restore the "go to first unread" functionality and everything else still looks good to me.

 

[Model 3]

Erm, is it bad to say that I don't really care if that button goes away?

Day 1, I activated wide mode and I'm not looking back.

Hehe - no, it is fully understandable Did the same here, that why it took me some time to notice this.

But for the sake of not braking any functionality it should be displayed in one way or another. Your solution is probably the right way to do it, I just found the first fastest way to make it work kind of correct.

Removing those lines will restore the "go to first unread" functionality and everything else still looks good to me.

The functionality is still there, as this link is a duplicate of the link in the thread-title, and is then just "noise" IMHO.

 

[FlasherZ]

Looks good, thanks for pushing on this! One more small suggestion: after I copied your CSS, I deleted the following:

.discussionListItem .title a.unreadLink {
  display: none !important;
}

If you look at your 2nd set of side-by-side screenshots, you'll see the original switched from the annoyingly small blue dot to red text that says "GO TO FIRST UNREAD" -- and the three lines above hide that text. Removing those lines will restore the "go to first unread" functionality and everything else still looks good to me.

Intended behavior for me at least. If there are any unread posts, the link attached to the post's title itself already goes there, so I didn't think it was necessary.

You'll also notice that the avatar box keeps the name and # of posts at the top; there is a hidden display element in there that shows the number of "likes" (although I think it's part of a different module, since mine is 0) and I'm guessing that at some point you'll have the response information there from posts.

 

[FlasherZ]

I noticed that I had inadvertently screwed up the "conversations" thread view by moving some elements around, not properly classifying them. I also took the opportunity to tighten up the threadList box on the right side as well. Same four screenshots:

Front page comparsion (my style, left; default TMC style, right):

Model S forum comparison:

Thread top:

Thread bottom: