TMC is an independent, primarily volunteer organization that relies on ad revenue to cover its operating costs. Please consider whitelisting TMC on your ad blocker and becoming a Supporting Member. For more info: Support TMC
  1. TMC is currently READ ONLY.
    Click here for more info.

Forum stylesheets

Discussion in 'Site Feedback' started by Wiki, Mar 15, 2016.

Thread Status:
The first post in this thread is a WikiPost, and can be edited by anyone with the appropriate permissions.
  1. brianman

    brianman Burrito Founder

    Joined:
    Nov 10, 2011
    Messages:
    17,515
  2. Model 3

    Model 3 Active Member

    Joined:
    Jul 13, 2014
    Messages:
    2,133
    Location:
    Norway
    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):
    Code:
    /* 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.
     
  3. FlasherZ

    FlasherZ Sig Model S + Sig Model X + Model 3 Resv

    Joined:
    Jun 21, 2012
    Messages:
    7,024
    I like it! I've added them to mine in the first post so that others can use them. Thanks!
     
    • Like x 1
  4. FlasherZ

    FlasherZ Sig Model S + Sig Model X + Model 3 Resv

    Joined:
    Jun 21, 2012
    Messages:
    7,024
    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.
     
  5. FlasherZ

    FlasherZ Sig Model S + Sig Model X + Model 3 Resv

    Joined:
    Jun 21, 2012
    Messages:
    7,024
    Added an update to compress the whitespace in the ratings icons and information.

    Capture.PNG
     
  6. Model 3

    Model 3 Active Member

    Joined:
    Jul 13, 2014
    Messages:
    2,133
    Location:
    Norway
    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.
    Code:
    /* 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;
    }
    
     
  7. FlasherZ

    FlasherZ Sig Model S + Sig Model X + Model 3 Resv

    Joined:
    Jun 21, 2012
    Messages:
    7,024
    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:
    Capture.PNG
     
  8. FlasherZ

    FlasherZ Sig Model S + Sig Model X + Model 3 Resv

    Joined:
    Jun 21, 2012
    Messages:
    7,024
    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).
     
  9. FlasherZ

    FlasherZ Sig Model S + Sig Model X + Model 3 Resv

    Joined:
    Jun 21, 2012
    Messages:
    7,024
    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:
    Capture.PNG

    Next, Model S category:
    capture2.PNG
    Next, thread top:
    capture3.PNG
    Next, thread bottom:
    capture4.PNG

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

    Model 3 Active Member

    Joined:
    Jul 13, 2014
    Messages:
    2,133
    Location:
    Norway
    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)
    Code:
    .footer .pageContent {
      line-height: 30px;
    }
    
     
  11. FlasherZ

    FlasherZ Sig Model S + Sig Model X + Model 3 Resv

    Joined:
    Jun 21, 2012
    Messages:
    7,024
    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.
     
  12. brianman

    brianman Burrito Founder

    Joined:
    Nov 10, 2011
    Messages:
    17,515
    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.
     
  13. FlasherZ

    FlasherZ Sig Model S + Sig Model X + Model 3 Resv

    Joined:
    Jun 21, 2012
    Messages:
    7,024
    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. :)
     
  14. brianman

    brianman Burrito Founder

    Joined:
    Nov 10, 2011
    Messages:
    17,515
    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. ;)
     
  15. FlasherZ

    FlasherZ Sig Model S + Sig Model X + Model 3 Resv

    Joined:
    Jun 21, 2012
    Messages:
    7,024
    All fixed.

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

    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.

    This is beyond my technical capability with CSS. :) Help appreciated.
     
  16. FlasherZ

    FlasherZ Sig Model S + Sig Model X + Model 3 Resv

    Joined:
    Jun 21, 2012
    Messages:
    7,024
    This is what the bottom of a post now looks like:
    Capture.PNG

    and the avatar block on the front page:
    Capture.PNG

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

    paulkva Member

    Joined:
    Jul 22, 2013
    Messages:
    700
    Location:
    Falls Church, VA
    Looks good, thanks for pushing on this! One more small suggestion: after I copied your CSS, I deleted the following:
    Code:
    .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.
     
  18. Model 3

    Model 3 Active Member

    Joined:
    Jul 13, 2014
    Messages:
    2,133
    Location:
    Norway
    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. :)


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

    FlasherZ Sig Model S + Sig Model X + Model 3 Resv

    Joined:
    Jun 21, 2012
    Messages:
    7,024
    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.
     
  20. FlasherZ

    FlasherZ Sig Model S + Sig Model X + Model 3 Resv

    Joined:
    Jun 21, 2012
    Messages:
    7,024
    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):
    cap1.PNG

    Model S forum comparison:
    cap2.PNG

    Thread top:
    cap3.PNG

    Thread bottom:
    cap4.PNG
     
    • Helpful x 1
    • Like x 1
Thread Status:
The first post in this thread is a WikiPost, and can be edited by anyone with the appropriate permissions.

Share This Page

  • About Us

    Formed in 2006, Tesla Motors Club (TMC) was the first independent online Tesla community. Today it remains the largest and most dynamic community of Tesla enthusiasts. Learn more.
  • Do you value your experience at TMC? Consider becoming a Supporting Member of Tesla Motors Club. As a thank you for your contribution, you'll get nearly no ads in the Community and Groups sections. Additional perks are available depending on the level of contribution. Please visit the Account Upgrades page for more details.


    SUPPORT TMC