Wiki Forum stylesheets

Wiki · Mar 15, 2016

With the redesign, there's a bit of angst about screenspace usage and formatting. I figured it might be interesting to start a thread for people to share stylesheets.

Instructions for application:

For those using Internet Explorer...

Internet Options
General
Accessibility
User stylesheet
Format documents using my stylesheet

For those using Chrome...

You'll need to use an extension like Stylish, found here:
Stylish

* Install the extension
* Open a TMC tab/window
* Click the Stylish icon, select "Write style for teslamotorsclub.com" (you want the domain link, not the "this URL" link)
* Copy the appropriate style sheet found in this thread, and paste it into the style editor in Stylish.
* Give it a name "Fix TMC" in the upper left hand box, and click "Save". "Enabled" should already be selected
* Refresh the page and you'll see a better experience immediately.

I understand Stylish works on Safari and Firefox, too...

brianman style

Here's a first crack at tightening up the thread content. I started tightening up the header but screwed it up so I left it mostly alone for now.

Code:

.attribution {
    padding: 0px !important;
}
.avatar > img {
    height: 32px !important;
    width: 32px !important;
}
.avatarHolder {
    float: left !important;
}
.bbCodeQuote {
    margin: 0px 0px 1em 1em !important;
}
.breadBoxTop {
    margin: 0px 0px 0px 0px !important;
}
.breadcrumb {
    height: 24px !important;
}
.crust {
    line-height: 24px !important;
}
.extraUserInfo {
    height: 2em !important;
        overflow: hidden !important;
    padding: 0px !important;
    margin: 0px !important;
}
.funbox {
    margin: 0px !important;
}
.message {
    margin: 0px !important;
}
.messageContent {
    min-height: 0px !important;
    padding: 0px 1em 0px 1em !important;
}
.messageDetails {
    padding: 0px !important;
}
.messageInfo {
    padding: 0px !important;
}
.messageUserInfo {
    overflow: visible !important;
}
.muted {
    margin: 0px !important;
}
.navTabs {
    padding: 0px !important;
}
.pageNavLinkGroup {
    margin: 0px !important;
}
.quoteContainer {
    padding: 0px 0px 0px 0px !important;
}
.signature {
    margin: 0px !important;
    padding: 0px !important;
}
.tabLinks {
    height: 20px !important;
    margin: 0px !important;
    padding: 0px !important;
    top: 30px !important;
}
.tagContainer {
    margin: 0px !important;
}
.thread_view {
    margin: 0px !important;
}
.titleBar {
    margin: 0px !important;
}
.uix_icon {
    height: 24px !important;
}
.usertext {
    margin: 0px !important;
}

FlasherZ style

Here is my current style sheet that combines elements of brianman's, except maintained 1px spacing instead of 0px; recolored the quote boxes; changed the messages to Verdana font and full black text for better readability; made avatars in message view 64x64; made userInfoBlock width to 192 (so usernames didn't get spaced weird) and changed font size (quotes are 90% of normal, messages are 110% of normal); fixed the quote box; fixed the menu bar up top; tightened the thread listing as well. See post below, also removed extra red link highlighting from front page, debolded read items in the discussion lists, exposed poster location, and emphasized post titles (h/t Model3!); fixed and tightened the search results (avatars were out of whack); tightened up the post ratings material as well; shrunk the groups display for each user to a single row; tightened up the extra user info; changed to display # views; fixed bottom;changed visitor panel on title page; fixed a bunch of my own stupidity (don't worry, plenty remains); made Verdana cover more board text. (Updated 3/25/16 @ 11:30 am CT)

Code:

.attribution {
    padding: 1px !important;
}
.bbCodeBlock pre, .bbCodeBlock .code {
    font-size: 0.9em;
    color: black;
}
.bbCodeCode .type {
    padding: 3px !important;
}
.bbCodeQuote {
    margin: 1px 1px 1em 1em !important;
}
body {
    font-family: "Verdana", "PT Sans Caption", sans-serif !important;
}
.breadBoxTop {
    margin: 1px !important;
    height: 30px !important;
}
.breadcrumb {
    height: 24px !important;
}
.categoryText > .nodeTitle {
    font-size: 1.1em !important;
    padding: 5px 0px 5px 0px !important;
}
.categoryText .nodeDescription {
    margin: 0px 0px 0px 0px !important;
}
.chooser_widthToggle {
    height: 40px !important;
    line-height: 30px !important;
}
.crust {
    line-height: 24px !important;
}
.discussionList .listBlock {
    height: 42px !important;
}
.discussionList .listBlock > .posterAvatar {
    height: 42px !important;
}
.discussionList .listBlock .avatar {
    padding: 0px 0px 0px 3px !important;
}
.discussionList .listBlock .titleText {
    padding: 0px 0px 0px 5px !important;
}
.discussionList .listBlock .major {
    padding: 3px 5px 0px 5px !important;
    margin: 0px !important;
    line-height: 18px !important;
}
.discussionList .listBlock .minor {
    padding: 0px 5px 3px 5px !important;
    margin: 0px !important;
    line-height: 18px !important;
}
.discussionList .listBlock .lastPostInfo {
    padding: 0px 0px 0px 5px !important;
}
.discussionList.section.sectionMain {
    margin: 5px 0px 5px 0px !important;
}
.discussionListItem .posterAvatar .miniMe {
    right: 5px !important;
}
.discussionListItem .secondRow  {
  font-size: .8em !important;
}
.discussionListItem .title a:only-child {
  font-weight: normal !important;
}
.discussionListItem .title a.unreadLink {
  display: none !important;
}
.extraUserInfo {
    height: 6em !important;
    overflow: hidden !important;
    padding: 1px !important;
    margin: 1px !important;
}
.fc_group_badges {
    height: 2em !important;
}
footer {
    margin-top: 5px !important;
}
.footerLinks {
    line-height: 24px !important;
}
.forum_view {
    margin: 5px 0px 0px 0px !important;
}
.funbox {
    margin: 1px !important;
}
.jumpMenuTrigger {
    line-height: 24px !important;
    height: 24px !important;
}
.left-narrow-img {
    height: 96px !important;
}
.left-wide-img {
    height: 96px !important;
}
.level-n {
    margin: 0px 4px 0px 4px !important;
}
.linkGroup span {
    line-height: 24px !important;
}
.listBlock.stats.pairsJustified {
    height: 36px !important;
}
.listBlock.stats.pairsJustified .minor {
    display: block !important;
}
.message {
    margin: 1px !important;
}
.messageContent .messageText {
    font-family: "Verdana", "PT Sans Caption", sans-serif !important;
    font-size: 15px !important;
}
.messageDetails {
    padding: 0px 1em 0px 1em !important;
}
.messageDetails .authorEnd {
    display: none !important;
}
.messageDetails .muted {
    margin: 5px 0px 3px 0px !important;
}
.messageInfo {
    padding: 0px 3px 0px 3px !important;
}
.messageInfo .dark_postrating {
    margin: 0px !important;
    padding: 0px 1em 0px 1em !important;
}
.messageInfo .secondaryContent {
    margin: 0px !important;
    padding: 5px 12px 0px 12px !important;
}
.messageList .avatarHolder {
    float: left !important;
}
.messageList .messageContent {
    min-height: 1px !important;
    padding-left: 5px !important;
    padding-top: 3px !important;
    padding-bottom: 5px !important;
}
.messageList .messageUserInfo {
    overflow: visible !important;
    width: 210px;
}
.messageMeta {
    height: 24px !important;
    margin: 0px 12px 0px 12px !important;
}
.messageUserBlock .avatar > img {
    height: 64px !important;
    width: 64px !important;
}
.messageUserInfo {
    background-color: #cccccc !important;
}
.uix_rightMost {
    width: 40px !important;
}
.navTabs {
    padding: 1px !important;
}
.noBorderRadiusBottom {
    padding: 5px 0px 5px 0px !important;
}
.nodeIcon {
    margin: 5px 15px 0px 0px !important;
    align-items: baseline !important;
}
.nodeInfo {
    padding: 0px 10px 0px 10px !important;
}
.nodeList.section.uix_nodeStyle_0 {
    margin: 3px 0px 0px 0px !important;
}
.nodeListNewDiscussionButton {
    margin: 0px !important;
}
.nodeListNewDiscussionButton .callToAction {
    height: 24px !important;
    font-size: 0.5em !important;
    line-height: 24px !important;
}
.nodeStats {
    margin: 3px 0px 0px 0px !important;
    height: 20px !important;
}
.nodeText > h3 {
    padding: 2px 0px 0px 0px !important;
    font-size: 1.2em !important;
}
.nodeText .subForumList .nodeTitle {
    padding: 1px 0px 0px 0px !important;
    font-size: 0.8em !important;
}
.pageNavLinkGroup {
    margin: 1px !important;
}
pre {
    background-attachment: local !important;
    background-image: linear-gradient(to bottom, #fff7f7 0%, #fff7f7 50%, #fffbfb 50%) !important;
    background-repeat: repeat !important;
    background-size: 1px 39pt !important;
}
.quoteContainer {
    padding: 1px !important;
}
.right-img {
    height: 96px !important;
}
.searchResult {
    padding: 1px 1em 1px 1em !important;
}
.sectionHeaders span {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 5px !important;
    vertical-align: middle !important;
}
.SelectionCountContainer {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
.signature {
    margin: 0px !important;
    padding: 1px 1em 1px 1em !important;
}
.subForumList {
    margin: 0px 0px 0px -4px !important;
}
.tabLinks {
    height: 20px !important;
    margin: 1px !important;
    padding: 1px !important;
    top: 30px !important;
}
.TagContainer {
    margin: 1px !important;
}
.threadList .secondaryContent {
    padding-left: 3px !important;
    padding-right: 3px !important;
}
.threadList .secondaryContent h3 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    margin-bottom: 10px !important;
}
.threadListItem {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
.threadListItem .avatar {
    margin-top: 10px !important;
    margin-left: 5px !important;
}
.treadListItem .messageInfo .messageContent {
    padding-bottom: 3px !important;
}
.threadListItem .title a {
    font-weight: bold !important;
}
.threadListSeparator {
    padding: 3px 20px 3px 20px !important;
}
.thread_view {
    margin: 1px !important;
}
.titleBar {
    margin: 1px !important;
}
.topCtrl {
    height: 24px !important;
    font-size: 0.5em !important;
    line-height: 24px !important;
}
.uix_navigationWrapper .noBorderRadiusTop {
    height: 24px !important;
}
.uix_signature {
    font-size: 0.75em !important;
}
.userText {
    margin: 1px !important;
}
.visitorPanel .secondaryContent {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
.visitorPanel .secondaryContent .avatar {
    margin-bottom: 0px !important;
    float: left;
}
.visitorPanel .secondaryContent .stats {
    margin-top: 0px !important;
}
.visitorPanel .secondaryContent .stats .pairsInline {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
.xenith_bg_wrap {
    height: 160px !important;
}

paulkva style
Taken from brianman's latest (3/15/16 2pm PT), toned down the lime green code blocks, and tweaked the unread dot further. Works OK for me in Chrome on Windows, for what it's worth.

Code:

/* paulkva 2016/03/15 23:30 ET */

/* Thread list */
.discussionList .avatar {
    padding: 0px !important;
}
.discussionList .lastPostInfo {
    padding: 0px !important;
}
.discussionList .secondRow > .posterDate {
    padding-left: 40px !important;
}
.discussionList .titleText {
    padding: 0px !important;
}
.discussionList .title > .PreviewTooltip {
    padding-left: 40px !important;
}
.discussionList .unreadLink {
    background: blue -10% -60% !important;
    margin: 10px;
    border-radius: 100% !important;
    height: 17px !important;
    left: 0px !important;
    top: 0px !important;
    width: 17px !important;
}
.discussionList .unreadLink:hover {
    background-color: lime !important;
}

/* Thread view */
.messageList .attribution {
    padding: 0px !important;
}
.messageList .avatar > img {
    height: 32px !important;
    width: 32px !important;
}
.messageList .avatarHolder {
    float: left !important;
}
.messageList .bbCodeQuote {
    margin: 0px 0px 1em 1em !important;
}
.messageList .breadBoxTop {
    margin: 0px 0px 0px 0px !important;
}
.messageList .breadcrumb {
    height: 24px !important;
}
.messageList .crust {
    line-height: 24px !important;
}
.messageList .extraUserInfo {
    height: 2em !important;
    overflow: hidden !important;
    padding: 0px !important;
    margin: 0px !important;
}
.messageList .funbox {
    margin: 0px !important;
}
.messageList .message {
    margin: 0px !important;
}
.messageList .messageContent {
    min-height: 0px !important;
    padding: 0px 1em 0px 1em !important;
}
.messageList .messageDetails {
    padding: 0px !important;
}
.messageList .messageInfo {
    padding: 0px !important;
}
.messageList .messageUserInfo {
    overflow: visible !important;
}
.messageList .muted {
    margin: 0px !important;
}
.messageList .navTabs {
    padding: 0px !important;
}
.messageList .pageNavLinkGroup {
    margin: 0px !important;
}
.messageList .OverlayTrigger {
    line-height: 24px !important;
    min-width: 24px !important;
}
.messageList pre {
    background-attachment: local !important;
    background-image: linear-gradient(to bottom, #eee 0%, #ddd 50%, #ccc 50%) !important;
    background-repeat: repeat !important;
    background-size: 1px 39pt !important;
}
.messageList .quoteContainer {
    padding: 0px 0px 0px 0px !important;
}
.messageList .signature {
    margin: 0px !important;
    padding: 0px !important;
}
.messageList .tabLinks {
    height: 20px !important;
    margin: 0px !important;
    padding: 0px !important;
    top: 30px !important;
}
.messageList .tagContainer {
    margin: 0px !important;
}
.messageList .thread_view {
    margin: 0px !important;
}
.messageList .titleBar {
    margin: 0px !important;
}
.messageList .uix_icon {
    height: 24px !important;
}
.messageList .usertext {
    margin: 0px !important;
}

brianman · Mar 15, 2016

It seems I can't edit the OP, so....

Updated version:

Code:

.attribution {
    padding: 0px !important;
}
.avatar > img {
    height: 32px !important;
    width: 32px !important;
}
.avatarHolder {
    float: left !important;
}
.bbCodeQuote {
    margin: 0px 0px 1em 1em !important;
}
.breadBoxTop {
    margin: 0px 0px 0px 0px !important;
}
.breadcrumb {
    height: 24px !important;
}
.crust {
    line-height: 24px !important;
}
.extraUserInfo {
    height: 2em !important;
    overflow: hidden !important;
    padding: 0px !important;
    margin: 0px !important;
}
.funbox {
    margin: 0px !important;
}
.message {
    margin: 0px !important;
}
.messageContent {
    min-height: 0px !important;
    padding: 0px 1em 0px 1em !important;
}
.messageDetails {
    padding: 0px !important;
}
.messageInfo {
    padding: 0px !important;
}
.messageUserInfo {
    overflow: visible !important;
}
.muted {
    margin: 0px !important;
}
.navTabs {
    padding: 0px !important;
}
.pageNavLinkGroup {
    margin: 0px !important;
}
.OverlayTrigger {
    line-height: 24px !important;
    min-width: 24px !important;
}
pre {
    background-attachment: local !important;
    background-image: linear-gradient(to bottom, beige 0%, beige 50%, lightgreen 50%) !important;
    background-repeat: repeat !important;
    background-size: 1px 39pt !important;
}
.quoteContainer {
    padding: 0px 0px 0px 0px !important;
}
.signature {
    margin: 0px !important;
    padding: 0px !important;
}
.tabLinks {
    height: 20px !important;
    margin: 0px !important;
    padding: 0px !important;
    top: 30px !important;
}
.tagContainer {
    margin: 0px !important;
}
.thread_view {
    margin: 0px !important;
}
.titleBar {
    margin: 0px !important;
}
.uix_icon {
    height: 24px !important;
}
.usertext {
    margin: 0px !important;
}

WarpedOne · Mar 15, 2016

The sure sign of a broken redesign: the users go fix the broken design.
So, I'm on PaleMoon and iOs Safari: how can I fix this mess here and there?

FlasherZ · Mar 15, 2016

For those of you using Chrome, you'll need to use an extension like Stylish: Stylish

* Install the extension
* Open a TMC tab/window
* Click the Stylish icon, select "Write style for teslamotorsclub.com" (you want the domain link, not the "this URL" link)
* Paste Brian's style sheet addendum into the box
* Give it a name "Fix TMC" in the upper left hand box, and click "Save". "Enabled" should already be selected
* Refresh the page and you'll see a better experience immediately.

FlasherZ · Mar 15, 2016

First post was made a wiki post, so I added my content up there too.

MorrisonHiker · Mar 15, 2016

Can you see if your stylesheets work with the reply modal? I noticed an issue when using Stylish. When I disabled it, things looked better.

FlasherZ · Mar 15, 2016

MorrisonHiker said:
Can you see if your stylesheets work with the reply modal? I noticed an issue when using Stylish. When I disabled it, things looked better.

EDIT: I mean no, Stylish is broken with the overrides.

This is the major problem with having to work around the original site's style sheets.

I am far from a CSS expert, I can barely do what I posted above.

EDIT: Fixed the avatars in mine.

MorrisonHiker · Mar 15, 2016

FlasherZ said:
Yes, it does.

This is the major problem with having to work around the original site's style sheets.

I am far from a CSS expert, I can barely do what I posted above.

(Also, avatar images are used on the front page too and if you override them to, say 64x64, you'll end up with munged indexes.)

I did add a few "filters" to my browser this morning to get things looking better. I think I'm good for now except for the foreground/background colors. I might trying modifying the CSS some and use Stylish to fix that. Thanks to @FlasherZ and @brianman .

ohmman · Mar 15, 2016

FWIW, Stylish is also available for Safari.

FlasherZ · Mar 15, 2016

Over the course of the next few days, I'll continue hacking at my overrides to see if I can get it to view better.

I just fixed the quoting box in my style sheet, above. "avatarHolder" needed to be a child of "messageList", since it's also used in the quote selector.

FlasherZ · Mar 15, 2016

Here's what mine looks like on the quote selector now:

FlasherZ · Mar 15, 2016

And here's what my current stylesheet (as of 3/15 12 pm CT) looks like... I'm trying to find that line above so I can get rid of it, it occurs when the top line compresses.

FlasherZ · Mar 15, 2016

Okay, did some more polishing and have things better yet, from my perspective...

First, the snapshot of the items listing. I tightened the list by quite a bit (from 79px down to 48px):

Next, I redid some more of the thread view:

brianman · Mar 15, 2016

@doug - It won't let me edit the wikified first post. Sigh.

brianman · Mar 15, 2016

Code:

/* brianman 2016/03/15 12:20 PT */

/* Thread list */
.discussionList .avatar {
    padding: 0px !important;
}
.discussionList .lastPostInfo {
    padding: 0px !important;
}
.discussionList .secondRow > .posterDate {
    padding-left: 40px !important;
}
.discussionList .titleText {
    padding: 0px !important;
}
.discussionList .title > .PreviewTooltip {
    padding-left: 40px !important;
}
.discussionList .unreadLink {
    background: radial-gradient(blue 30%, transparent 50%) !important;
    border-radius: 50% !important;
    height: 37px !important;
    left: 0px !important;
    top: 0px !important;
    width: 37px !important;   
}
.discussionList .unreadLink:hover {
    background-color: lime !important;
}

/* Thread view */
.messageList .attribution {
    padding: 0px !important;
}
.messageList .avatar > img {
    height: 32px !important;
    width: 32px !important;
}
.messageList .avatarHolder {
    float: left !important;
}
.messageList .bbCodeQuote {
    margin: 0px 0px 1em 1em !important;
}
.messageList .breadBoxTop {
    margin: 0px 0px 0px 0px !important;
}
.messageList .breadcrumb {
    height: 24px !important;
}
.messageList .crust {
    line-height: 24px !important;
}
.messageList .extraUserInfo {
    height: 2em !important;
    overflow: hidden !important;
    padding: 0px !important;
    margin: 0px !important;
}
.messageList .funbox {
    margin: 0px !important;
}
.messageList .message {
    margin: 0px !important;
}
.messageList .messageContent {
    min-height: 0px !important;
    padding: 0px 1em 0px 1em !important;
}
.messageList .messageDetails {
    padding: 0px !important;
}
.messageList .messageInfo {
    padding: 0px !important;
}
.messageList .messageUserInfo {
    overflow: visible !important;
}
.messageList .muted {
    margin: 0px !important;
}
.messageList .navTabs {
    padding: 0px !important;
}
.messageList .pageNavLinkGroup {
    margin: 0px !important;
}
.messageList .OverlayTrigger {
    line-height: 24px !important;
    min-width: 24px !important;
}
.messageList pre {
    background-attachment: local !important;
    background-image: linear-gradient(to bottom, beige 0%, beige 50%, lightgreen 50%) !important;
    background-repeat: repeat !important;
    background-size: 1px 39pt !important;
}
.messageList .quoteContainer {
    padding: 0px 0px 0px 0px !important;
}
.messageList .signature {
    margin: 0px !important;
    padding: 0px !important;
}
.messageList .tabLinks {
    height: 20px !important;
    margin: 0px !important;
    padding: 0px !important;
    top: 30px !important;
}
.messageList .tagContainer {
    margin: 0px !important;
}
.messageList .thread_view {
    margin: 0px !important;
}
.messageList .titleBar {
    margin: 0px !important;
}
.messageList .uix_icon {
    height: 24px !important;
}
.messageList .usertext {
    margin: 0px !important;
}

The unread post link is much easier to hit, and I tightened up the thread list page a bit as well. Perhaps redundant with some of FlasherZ's work.

FlasherZ · Mar 15, 2016

brianman said:
@doug - It won't let me edit the wikified first post. Sigh.

I was likely modifying it at the time. Try again.

paulkva · Mar 15, 2016

Thanks for doing this. I've made a couple tweaks and added my version to the first post.

brianman · Mar 15, 2016

@FlasherZ - I'm not even seeing an EDIT button for the first post.

paulkva · Mar 15, 2016

@brianman I found the edit link at the bottom of the post. I just looked again on mobile and it's hidden under a "more" link. I'm using Chrome on Windows and iPhone, for what it's worth.

brianman · Mar 15, 2016

@paulkva - I don't see More link ether. Hm.

Wiki Forum stylesheets

Member

Burrito Founder

Supreme Premier

Sig Model S + Sig Model X + Model 3 Resv

Sig Model S + Sig Model X + Model 3 Resv

Well-Known Member

Attachments

Sig Model S + Sig Model X + Model 3 Resv

Well-Known Member

Upright Member

Sig Model S + Sig Model X + Model 3 Resv

Sig Model S + Sig Model X + Model 3 Resv

Sig Model S + Sig Model X + Model 3 Resv

Sig Model S + Sig Model X + Model 3 Resv

Burrito Founder

Burrito Founder

Sig Model S + Sig Model X + Model 3 Resv

part of the supercharge.info dev team

Burrito Founder

part of the supercharge.info dev team

Burrito Founder

Similar threads