A simple Stylish adjustment for the new Unity Forums (as of July 2016).

UnityForumsFix.css

/*
    electroflame's Unity Forums CSS Fix
    Version 1.05 | July 7th, 2016
  
    Notes:
    Pop this CSS into a Stylish file (inside of any brackets, if you're doing a namespaced or domain-only file).
    Requires the Stylish browser extension.
    
    Additions/Insight:
    dipsylala/MarcusWatson
    vOidSenses/kebrus
  */
  
  /*Try to correct the font, if body-content font changes won't be applied.*/
  body {
    font-family: Helvetica,Arial,sans-serif !important;
    font: Helvetica,Arial,sans-serif !important;
  }
  
  /*Make the user avatars for posts larger*/
  .lia-quilt-forum-message .UserAvatar > img {
    border-radius: 15%;
    height: 100px;
    width: 100px;
  }
  
  /*Add a slight box-shadow to the outer edges of the message scroll list.*/
  .linear-message-list.message-list {
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
  }
  
  .lia-panel-message, .lia-panel-message-content {
    border: none !important;
  }
  
  /*Give even posts a slightly darker background color*/
  .lia-linear-display-message-view:nth-child(even) .lia-quilt-forum-message {
    background-color: #FAFAFA !important;
  }
  
   /*Give accepted solutions a green background, to make it more obvious that they're the accepted answer*/
  .lia-linear-display-message-view .accepted-solution .lia-quilt-forum-message {
    background-color: #e1fee1 !important;
  }
  
  /*Add a separator above signatures*/
  .UserSignature {
    margin-top: 5px;
    border-top: 1px #E1E1E1 solid !important;
  }
  
  /*Fix up the post fonts and coloring.  We'll also remove the pretty stupid hyphenated word-wrap.*/
  .lia-message-body-content {
    color: #333 !important;
    font-family: Helvetica,Arial,sans-serif !important;
    font: Helvetica,Arial,sans-serif !important;
    
    hyphens: none !important;
    -moz-hyphens: none !important;
  }
  
  /*Add a separator to the bottom of posts.*/
  .lia-message-body {
    margin-bottom: 5px;
    
    /*Set a min-height for posts, so the border is pushed to the bottom.
      Posts seem to have some kind of min-height enforced somewhere already, 
      but the content is not affected by this (without this rule).*/
    min-height: 200px;
  }
  
  /*Fix the pre code text being giant*/
  .lia-message-body-content pre {
    font-size: 14px !important;
  }
  
  /*Let's remove a bunch of the whitespace on posts*/
  .lia-quilt-layout-two-column-message > .lia-quilt-row-header {
    padding: 15px !important;
  }
  
  .lia-quilt-layout-two-column-message > .lia-quilt-row-main .lia-quilt-column-main-right {
    margin-bottom: 10px !important;
    width: 83.3333% !important;
  }
  
  .lia-quilt-layout-two-column-message > .lia-quilt-row-main .lia-quilt-column-main-left {
    margin-right: -30px !important;    
    border-right: none !important;
  }
  
  .lia-component-author-rank-name {
    white-space: normal !important;
  }
  
  /*Let's move the reply/quickreply/likes footer up into the main post area*/
  .lia-quilt-row.lia-quilt-row-footer .lia-quilt-column-alley.lia-quilt-column-alley-right {
    margin-top: -50px !important;
    padding: 5px;
    
    /*Let's go ahead and style these controls to look like they actually belong here*/
    background-color: #EEE;
    border-radius: 10px 0 0 0;
    border-left: 1px #DDD solid;
    border-top: 1px #DDD solid;
  }
  /*The Like button gets kind of lost in the new post controls design, so let's recolor it.*/
  .lia-button-image-kudos.lia-button-image-kudos-enabled .kudos-link {
    background-color: #FFF;
  }
  
  /*Add a bit of padding to the bottom of the post content, so our reply/etc. controls don't overlap*/
  .lia-quilt-layout-two-column-message > .lia-quilt-row-main {
    padding-bottom: 45px !important;
  }
  
  .lia-quilt-layout-two-column-message > .lia-quilt-row-footer {
    padding: 0px !important;
  }
  
  /*Make the post controls take up the full width of the post, to try and prevent stacking*/
  .lia-quilt-layout-two-column-message > .lia-quilt-row-footer > .lia-quilt-column-right { 
    width: 100% !important;
  }
  
  /*Bold the post control button text, to make them somewhat readable (includes the icons)*/
  .lia-quilt-row.lia-quilt-row-footer .lia-button-wrapper .lia-button,
  .lia-quilt-row.lia-quilt-row-footer .lia-button-wrapper .lia-button:before {
    font-weight: bold !important;
  }
  
  /*Make the post control buttons a bit smaller.
   (Note: lia-button-wrapper lets us get at just the control buttons, and skip adding padding to the likes area)*/
  .lia-quilt-row.lia-quilt-row-footer .lia-button-wrapper .lia-button {
    padding: 10px 20px !important;
  }
  
  /*Try to consolidate the bottom of the page pagination controls, and the All Topics/Next Topic controls*/
  .lia-menu-bar.lia-menu-bar-bottom.bottom-block {
    margin-top: -45px !important;;
  }
  
  .lia-paging-full-wrapper.lia-paging-pager.lia-paging-full-left-position {
    padding-top: 5px !important;
  }
  
  /*Add a small border to the header, to separate posts*/
  .lia-quilt-layout-two-column-message > .lia-quilt-row-header {    
   border-top: 1px #BBB solid !important;
  }

  /*Restyle the blockquotes so they're easily separated from a user's post, making them easier to read*/
  .lia-message-body-content blockquote,
  .lia-note-body blockquote,
  .lia-message-editor blockquote {
    background-color: #f1f1f1 !important;
    border-left: 5px #BBB solid !important;
    border-bottom: 1px #BBB solid !important;
  }
  
  /*Hide the useless subject line above user posts*/
  .lia-panel-message-content .lia-message-subject {
    display: none !important;
  }
  
  /*Keep the subject line on the first post only*/
  .first-message .lia-panel-message-content .lia-message-subject {
    display: inline-block !important;
  }
  
  /*Underline the current page in the pagination controls.*/
  .lia-paging-full-pages li > .lia-link-disabled  {
    text-decoration: underline;   
  }
  /*Don't underline the ellipses, but go ahead and bold them instead.*/
  .lia-paging-full-pages .lia-paging-page-ellipsis .lia-link-disabled  {
    text-decoration: none; 
    font-weight: bold;
  }
  
  /*Add a subtle box-shadow to embedded images, so they pop out a bit more*/
  .lia-message-image-wrapper > img {
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
  }
  
  /* Fixes upload to show 'Done' */
  .lia-media-uploader-dialog-body {
      height: 80%;
  }

/* slight border round screenshots - currently lacks definition and white screenshots merge into the body */
.lia-message-image-wrapper > img {
-webkit-box-shadow: 3px 3px 10px 3px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 10px 3px rgba(0,0,0,0.75);
box-shadow: 3px 3px 10px 3px rgba(0,0,0,0.75);
}

Give me a bit and I'll bring in these changes. I'm doing a bit of work on my own, so I'll add these in when I'm done. (I've got even/odd post highlighting working now!)

careful with .lia-panel-message-content .lia-message-subject it hides the first post title as well

also, the columns use the bootstrap way of doing boxes, the total value of width is 24, the left column is 4 and the right one is 18 so there is 2 left at the right of the right column of each post that is empty, the current percentage amount is 75% you guys probably want to use 83.33333333% and not 85%

EDIT: I also noticed that the default size of the images in the avatar that dont use the built in system have a size of 96px and not 100px

Updated again. This new revision helps clean up a lot of the smaller things, and is starting to looks pretty decent.

Thanks for the additions, @dipsylala. I also fixed the first-post title being hidden by the .lia-message-subject rule as well (I wasn't aware of that). Thanks for bringing up some of those points, @vOidSenses.

I wasn't too fond of having a second separator to try and separate the post/reply controls from posts, so I went and restyled that area. Looks much better now.

Maybe a personal preference, but I wasn't liking the bright blue borders on the reply/quick reply as it's there on every post. This removes the blue border, and has an underline appear on hover. I need to revisit bootstrap to see if there's a more efficient way.

Edit: I'm wary we want to fix stuff, not restyle the site completely, so feel free to treat this as me making a note for myself ;-)

/* Getting rid of bright blue buttons */
.reply-action-link {
    background-color: white !important;
    color: black !important;
}

.reply-action-link::before {
    color: black !important;
    background-color: white !important;
}

.reply-action-link:hover {
    text-decoration:underline !important;
}

.reply-action-link::before:hover {
    background-color: white !important;
}

Yeah, I'm hesitant to change the colors of those buttons, as they might push out a change that makes them more readable. I'm definitely going to look into changing the text on them a bit (bolding them or something) as they aren't very attractive right now.

I'll see if I they need to be changed -- if they do, I'll probably have to roll something like what you've done here. That's a great starting point, though, thanks!

You're welcome - half the battle is finding the appropriate CSS selectors :)

Heh, yeah. And this forum software is such a disaster naming-scheme wise that it's extra difficult. 😉

I added this to my script
.lia-quilt-layout-two-column-message > .lia-quilt-row-footer > .lia-quilt-column-right { width: 100% !important;}

this is for the footer in the posts, they use two columns with 50% each so if the buttons dont fit in the right side they get stacked, by making the right one fill the space it actually solve one of the problems people have when using the forum with a smartphone, the stacking also happens in your own threads because a huge button is added to the right panel that doesn't fit the footer

I also notice that the subject line also displays the "selected answer" with a check icon so thats another reason to not hide, maybe the best solution would be to move it somewhere else, suggestion are welcome

I've added the 100% width rule -- great addition, @vOidSenses. I also made the buttons slightly smaller by default, to try and keep the controls from stacking. If stacking is still an issue, you might try selecting the button's text in your script and removing that for very small screens (so it's just the icons). Readability would take a hit, but they wouldn't stack at that point.

I'm still keeping the subject line hidden, but I wasn't aware of them also using that to display selected answers. This new version highlights accepted answer posts with a light green background, which is a fair trade-off, I think.

To be honest, this style wasn't designed with mobile in mind (to be brutally honest, the forum software wasn't, so there's only so much that can be done). This really needs some media selectors to change the size of some things on smaller screens -- if there's enough demand (or someone else want to take it on) we can get that done as well.