Skip to content

Instantly share code, notes, and snippets.

@electroflame
Last active July 8, 2016 19:33
Show Gist options
  • Save electroflame/3bcac51b86619c9068d2109cbfea0be9 to your computer and use it in GitHub Desktop.
Save electroflame/3bcac51b86619c9068d2109cbfea0be9 to your computer and use it in GitHub Desktop.
A simple Stylish adjustment for the new Unity Forums (as of July 2016).
/*
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%;
}
@electroflame
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment