Custom CSS for Runner's World Forums

rwol.css

/*
---------------------
Author:   Paul Hoffer
Github:   phoffer
Twitter: @phoffer8
Version:  1.0
---------------------

# Purpose

This modifies the new Runner's World forums to make full use of screen real eastate.
This is designed as a custom user style. How to use it varies slightly across browsers.
For browsers that force universal styles, hopefully this doesn't break any other sites.

# Summary

## Thread listing page (main topic page)

* Remove the page listing/jump ability (I usually use thread title, last post, or first unread)
* Shrink main title and remove awful Abril font
* Move title next to reply count rectangle
* Reduce spacing around the topic headers (little colored boxes - 'featured topics' / 'topics')
* Collapse the top ad (interstitial) box

## Thread pages

* Hide the share bar at the top
* Shrink main title and remove awful Abril font
* Move title next to reply count rectangle
* Moves sidebar to right and locks it in place. For me, it cuts off at Europe, but I never venture south of Boston.
* Rest of horizontal space is used by post area.
* Usernames/avatars are moved to the left
* Animal titles are removed
* Usernames are now natural case instead of all caps.
* Spacing around text/signatures/take action bar/quotes is all reduced.
* Font size is reduced for posts.
* Signature sizing issues are from RW, not me.
* Post bodies alternate between white and the default light blue/gray color.
* Massive top banner (the one that auto hides) is permanently hidden.
* Popup ad banner at bottom should be gone as well (shh!)
* Collapse the top ad (interstitial) box

# Directions

## Safari

1. Save this file to your computer.
2. Open Safari preferences, go to the 'Advanced' tab
3. Select the file for the 'Style sheet' option

## Chrome (Mac, but should work the same on Windows)

Chrome removed native support for user CSS, but you can get this functionality through extensions.

1. Open Chrome webstore for extensions at https://chrome.google.com/webstore/category/extensions?hl=en-US
2. Search for the extensions 'Stylish'. 
3. Find result under 'Extensions' and click 'Add to Chrome'
4. A warning box pops up, click 'Add Extension'
5. Most likely, an icon was added to the toolbar. Click icon and then click 'Managed installed styles'
6. On the left side, there is a button "Write new style" -- click that
7. Paste the content of this file in the big text box that shows up
8. Under the text entry, you'll see where it says "Applies to Everything [Specify]"
  a. Click the 'Specify' button
  b. Change the selection to "URLs starting with"
  c. Enter 'http://community.runnersworld.com/topic' in the next text box
9. Towards the top left, enter a title and click 'Save'

## Firefox

Two options, either use same extension as Chrome, or manually set as custom CSS.
See directions here.
http://superuser.com/questions/318912/how-to-override-the-css-of-a-site-in-firefox-with-usercontent-css

## Other browsers

Reach out to me if you need instructions for others. I can dig out my Windows machine and figure it out. 


# License: MIT

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

*/

/* ~~~~~~~~~~~~~~ Runner's world new commnunity (12/1/15) ~~~~~~~~~~~~~~ */

/* this removes the tall tall black banner at the top-- the one that auto hides after scrolling */
#forumTopicPage header#siteHeader, #forumTopicsPage header#siteHeader {
  height: 0px;
}

/* hide the share bar on the thread page */
#forumTopicPage .hide-for-print.share-bar {
  display: none;
}

/* the following rules adjust the width of all the content */
div#pageContentRow.row { /* this makes the site use the full browser width */
  max-width: 100% !important;
}
div.medium-4.columns.hide-for-small-only.h-right-sidebar.hide-for-print { /* this makes the right sidebar only 15% of width */
  width: 15% !important;
}
div#bodyContentColumn { /* this makes the main content area much wider */ 
  width: 85% !important;
}

/* these rules hide a couple elements normally on the right side that will prevent the above width rules from working */
a#createContentButton.button.success.full-width.widget-manage-opacity.h-post-button {
  display: none !important;
}
div#pageRightSidebar.margin-bottom-10.widget-manage-opacity {
  display: none !important;
}
div#rightSidebarAdTop.widget-manage-opacity.h-right-sidebar-ad {
  display: none !important;
}

/* this is the right sidebar. it's a bit tricky to get correct, but this pins it to the top right, and it doesn't scroll.
most of the popular forums are shown, and I never venture south of Boston */
.widget.h-forum-list-widget {
  display: block  !important;
  position: fixed !important;
  top: 0px        !important;
  right: 0px      !important;
}

/* if there's a signature, there are two horizontal lines, both with padding. this shrinks them together for more vertical height */
.signature.h-comment-signature hr {
  margin: 0 !important;
}


/* the next few rules shift the username/avatar info to the left, and set it to 15% of the width of the content area */

/* these two set the size and flow of elements */
.line-item.clearfix.h-byline {
  float: left;
  width: 15%;
}
.post-box-body {
  width: 85%;
  float: left;
}

/* these next 5 re-arrange the individual elements, so they vertically instead expanding horizontally */
.line-item.clearfix.h-byline .left.hide-for-small-only.margin-right-10 {
  float: left !important;
  clear: both;
}
.line-item.clearfix.h-byline .left.uppercase.small-font.h-byline-info {
  float: left !important;
  clear: both;
}
.line-item.clearfix.h-byline .left.uppercase.small-font.h-byline-info .line-item.h-author-details a, .line-item.clearfix.h-byline .left.uppercase.small-font.h-byline-info .line-item.h-author-details i {
  float: left !important;
}
.line-item.clearfix.h-byline .left.uppercase.small-font.h-byline-info .line-item.h-author-details span {
  float: left !important;
  clear: both;
}
.line-item.clearfix.h-byline .left.uppercase.small-font.h-byline-info .line-item.h-post-datetime {
  float: left !important;
  clear: both;
}


/* the next two rules are for the member title -- racehorse, greyhound, etc*/
.margin-left-5.h-member-title { /* this hides it */
  display: none;
}
.margin-left-5.h-member-title::before { /* this bumps it to a newline if it's enabled */
  clear: both;
}
/* this makes the usernames normal case, instead of all uppercase */
div.left.uppercase.small-font.h-byline-info.uppercase {
  text-transform: none !important;
}

/* the next two rules set the alternating background colors for posts. quoted posts are controlled independently */
#compositionConsumerAndRepliesContainer article:nth-child(odd)  .post-box-body {background: #f8f9fd !important; }
#compositionConsumerAndRepliesContainer article:nth-child(even) .post-box-body {background: #E2E7E9 !important; }

/* this prevents a weird flow issue with super short posts (i.e. 1 line w/o a signature) */
article.post-box {
  clear: both;
}

/* this cuts down font size and some spacing for the main post body */
article.post-box > .post-box-body > div.post-body p {
  font-size: 14px !important;
  line-height: 1;
  margin-bottom: 1rem !important;
}

/* this fixes (reduces) spacing for quoted posts */
article.post-box > .post-box-body > div.post-body > blockquote.quote {
  margin-bottom: 5px !important;
  padding: 5px 5px 5px 44px;
}
/* more quote spacing reduction */
article.post-box > .post-box-body > div.post-body > blockquote.quote p {
  margin-bottom: 5px !important;
}

/* cuts out most of the extra padding around signatures
also, this does not bork signature sizing. it's broken on safari but not chrome
and not tested on windows */
article.post-box > .post-box-body > footer.signature.h-comment-signature {
  padding-top: 0px !important;
  margin-top:  0px !important;
  /*font-size: 100% !important;*/
  line-height: 1;
}

/* this shrinks the bottom row for like/reply/take action */
article.post-box > .post-box-body > .post-box-action-row.hide-for-print {
  margin-top: 5px;
  font-size: 12px !important;
  line-height: 1;
}

.bouncex_header_bottom.center.bcx_bottom.floating_bar.bcx_container.bcx_no_effect {
  display: none !important;
}

/* tweaks for main forum page (thread list) */


/* better spacing and alternating colors for topics */
#forumTopicsPage .margin-bottom-25.h-ubb-topic-list-box {
  border-width: 1px !important;
  border-color: #DFDFDF !important;
  border-style: solid !important;
  padding: 5px !important;
  padding-bottom: 0 !important;
  margin-bottom: 10px !important;
  background-color: #f8f9fd;
}

#featuredTopicsSection_body .h-ubb-topic-list-box:nth-child(odd)  {background: #f8f9fd !important; }
#featuredTopicsSection_body .h-ubb-topic-list-box:nth-child(even) {background: #E2E7E9 !important; }
.top-label.h-topic-reply-count-label {
  background-color: #fff !important;
}
/* hides the follow this forum button because unnecessary */
#forumTopicsPage .interest-row.h-forums-interest.hide-for-print {
  display: none;
}
/* main title - remove awful abril font and make it smaller */
#forumTopicsPage h1#pageTitle.text-left, #forumTopicPage h1#pageTitle.text-left  {
  font-family: Helvetica, Arial !important;
  font-size: 1.5rem !important;
}

/* featured post area - remove bottom-margin since it's on top of another box anyways */
.section-box.h-topic-list {
  margin-bottom: 0px !important;
}

/* subheadings - cut out some of the padding */
#forumTopicsPage .section-box-header {
  padding: 0 !important;
  padding-left: 10px !important;
  margin-bottom: 0 !important;

}
/* subheadings - remove awful abril font and make it smaller */
#forumTopicsPage .section-box-header h3 {
  font-family: Helvetica, Arial !important;
  font-size: 1rem !important;
}


/* this shifts the thread title to be next to the new post indicator and the post count rectangle */
#forumTopicsPage div.line-item.small-font.content-label-section.h-topic-labels,
#forumTopicPage  div.line-item.small-font.content-label-section {
  float: left !important;
}

/* cut out bottom margin for line items */
#forumTopicsPage div.line-item {
  /*margin-bottom: 5px !important;*/
}

/* hide the page jump tool, I usually use the title or the 'first unread' or 'last post' buttons anyways */
#forumTopicsPage div.line-item.tiny-font.h-topic-pages {
  display: none !important;
}

#forumTopicsPage #supermain, #forumTopicPage #supermain  {
  display: none;
}

/* fix the top banner wonkiness on scroll */
nav#top_nav_bar.top-bar.show-for-large-up.hide-for-print {
  z-index: 3 !important;
}