Minimal CSS tweaks for ASC
The June 2016 overhaul of Apple Support Communities hid some useful cues to updated content and, for some, made fonts too large, and added too much white space. There is an ongoing project running in the user tip Adjust the format and layout of ASC Web Pages which attempts to completely rewrite the layout. Here I'm going to post a smaller set of tweaks that address some of the issues that bug me the most. Expect it to get updated from time to time. In particular a site overhaul on July 7th has made the font size and weight tweaks no longer necessary so these are commented out in the final code below, but they can be enabled and adjusted to suit if required.
First you need a way to get your CSS to override that of the site. To do this I use the add on Stylus for Chrome. See also Stylus for Firefox, Stylish for Safari, Stylus for Opera, and the website https://userstyles.org/ for more information. Sadly I'm not currently aware of any way to implement this on mobile devices such as iPads and iPhones. N.b. previously this tip pointed to a tool called Stylish which is no longer supported. The replacement Stylus should work in the same way but without tracking your browsing habits. The Safari version, if it works at all, should predate this issue.
Keeping track of which threads you have and have not read has been possible up until now using the discussions based views that can be found by adding /content to a community URL and then clicking Discussions, This style of link can be found in this Site map of Communities and Categories for easy reference and bookmarking. The new site CSS no longer includes the bold highlighting, but the information is still there in the data and can be restored with this line of CSS:
.j-td-title strong {font-weight: bold;} /* Updated discussion content in bold */
(This issue has now been fixed)
Personally I like to make the updated content in the discussions layout stand out a little more so I change the color as well. You could use one of these alternatives or set your own color. I used to use the pink, but I'm now using a slightly more toned down purple:
.j-td-title strong {font-weight: bold; color: #9966FF;} /* Updated discussion content in bold & purple */
.j-td-title strong {font-weight: bold; color: #FF00FF;} /* Updated discussion content in bold & pink! */
The new layout uses a default font size of 22 pixels which is perhaps a little too large for comfort. The font has been made thinner than normal and is a medium grey rather than black. Adding these lines may improve legibility. Color and size can be edited to taste. In each case two lines are required to affect information in lists and spans as well as paragraphs, and the original question as well as the replies:
.jive-rendered-content {font-size: 18px !important;} /* Custom font size in posts */
.jive-rendered-content {font-weight: normal !important; color: #000000;} /* Custom font weight and color */
.jive-rendered-content p {font-weight: normal !important; color: #000000;} /* Custom font weight and color */
(The site is now using 16px as standard)
The new layout sets 1.5 line height over the normal default of 1.25, I think using the standard line spacing makes thread content more readable so I've reset it. User tips also show an extra line after each paragraph which adversely affects a list written as paragraphs:
.jive-content {line-height: 1.25;} /* Normal line spacing in posts */
p {margin-bottom: 0.1em;} /* Reduce white space in user tips */
(The first issue above seems to have been fixed)
These tweaks add in the details of the last poster in discussions style views and prevent capitalization of user names there. (Mine becomes Turingtest2 on that page and nowhere else, which is daft!):
td.j-td-date > span {display: inherit !important;} /* Display last posted by information */
.jive-username-link {text-transform: none !important;} /* Remove username capitalization */
I've tracked down a copy/paste error that happens in the editor if you decide to rearrange things. Typically the cut and pasted text inherits an unwanted fixed size which isn't displayed in the editor and can be missed after submission. This issue can be suppressed by not explicitly setting the font size of the editor area.
.tiny_mce_content {font-size: inherit !important} /* Prevent cut & paste scale errors in TinyMCE */
The new features that hide answers and keep the original question floating at the top of the page might possibly suit users where there is a simple question and answer pair, but they are frustrating when you're tying to keep up with the latest addition to an ongoing conversation. These four lines in turn suppress the floating question banner, the control that switches between all and helpful replies, the duplicate copies of helpful replies, and then forces the display of all replies when they might otherwise be hidden.
.persist-question {display: none !important;} /* Suppress floating question banner */
.helpful-allreply {display: none !important;} /* Hide helpful/all reply switch */
#helpful-container {display: none !important;} /* Hide helpful block */
.all-replies-container {display: inherit !important;} /* Display all replies block */
(The first line above is now implemented as an option on the user preferences page and gives improved results for iOS users who cannot implement custom CSS - if you still use the stylesheet below it won't cause any harm to leave this line enabled)
Putting it into practice
Once you've got Stylish installed in your browser you can create a new style, give it a name such as ASC, then copy in the block of text below and make it active for URLs on the domain discussions.apple.com. You can make further adjustments as you see fit, e.g. choosing your own font size, line spacing and highlight color. If you're visiting ASC's sister sites for other languages you can also enable the CSS on communities.apple.com (French, German, Spanish, & Portuguese), discussionschinese.apple.com (Chinese), discussionsjapan.apple.com (Japanese), and discussionskorea.apple.com (Korean).
To make it really easy visit https://userstyles.org/styles/140056/adjust-the-format-of-apple-communities-mini mal where, thanks to ChitlinsCC, you can download Stylish and install the stylesheet all from the one place.
/* Minimal CSS tweaks for ASC - Chrome/Opera/Safari - Version 1.16 - 2017/09/01 - turingtest2 */
.j-td-title strong {color: #9966FF !important;} /* Updated discussion content in purple */
/*.jive-rendered-content {font-size: 18px !important;} /* Custom font size in posts */
/*.jive-rendered-content p {font-size: 18px !important;} /* Custom font size in posts */
/*.jive-rendered-content {font-weight: normal !important; color: #000000;} /* Custom font weight and color */
/*.jive-rendered-content p {font-weight: normal !important; color: #000000;} /* Custom font weight and color */
/*.jive-content {line-height: 1.25 !important;} /* Normal line spacing in posts */
p {margin-bottom: 0.1em !important;} /* Reduce white space in user tips */
td.j-td-date > span {display: inherit !important;} /* Display last posted by information */
.jive-username-link {text-transform: none !important;} /* Remove username capitalization */
.tiny_mce_content {font-size: inherit !important} /* Prevent cut & paste scale errors in TinyMCE */
.persist-question {display: none !important;} /* Suppress floating question banner */
.helpful-allreply {display: none !important;} /* Hide helpful/all reply switch */
#helpful-container {display: none !important;} /* Hide helpful block */
.all-replies-container {display: inherit !important;} /* Display all replies block */
.cat-filters li.active {background-color: #E0E0E0 !important;} /* Increase contrast for active filter */
/* Show read flags in subscriptions */
#dashboard-grid-data th.readFlag,#dashboard-grid-data td.readFlag
{display: table-cell !important;position: relative !important;right: auto !important;visibility: visible !important;background-position: 14px 13px !important;}
#dashboard-grid-data th.readFlag .icon,#dashboard-grid-data td.readFlag .icon {margin-top: 8px !important;}In Stylish for Chrome, Safari, & Opera there are options to control which domains the CSS will be active on. For Firefox this information goes in the same place as the CSS that we're adding so the complete code to paste in for Firefox becomes:
/* Minimal CSS tweaks for ASC - Firefox - Version 1.16 - 2017/09/01 - turingtest2 */
@-moz-document
domain(discussions.apple.com), /* English */
domain(communities.apple.com), /* French, German, Spanish, & Portuguese */
domain(discussionschinese.apple.com), /* Chinese */
domain(discussionsjapan.apple.com), /* Japanese */
domain(discussionskorea.apple.com) /* Korean */
{
.j-td-title strong {color: #9966FF !important;} /* Updated discussion content in purple */
/*.jive-rendered-content {font-size: 18px !important;} /* Custom font size in posts */
/*.jive-rendered-content p {font-size: 18px !important;} /* Custom font size in posts */
/*.jive-rendered-content {font-weight: normal !important; color: #000000;} /* Custom font weight and color */
/*.jive-rendered-content p {font-weight: normal !important; color: #000000;} /* Custom font weight and color */
/*.jive-content {line-height: 1.25 !important;} /* Normal line spacing in posts */
p {margin-bottom: 0.1em !important;} /* Reduce white space in user tips */
td.j-td-date > span {display: inherit !important;} /* Display last posted by information */
.jive-username-link {text-transform: none !important;} /* Remove username capitalization */
.tiny_mce_content {font-size: inherit !important} /* Prevent cut & paste scale errors in TinyMCE */
.persist-question {display: none !important;} /* Suppress floating question banner */
.helpful-allreply {display: none !important;} /* Hide helpful/all reply switch */
#helpful-container {display: none !important;} /* Hide helpful block */
.all-replies-container {display: inherit !important;} /* Display all replies block */
.cat-filters li.active {background-color: #E0E0E0 !important;} /* Increase contrast for active filter */
/* Show read flags in subscriptions */
#dashboard-grid-data th.readFlag,#dashboard-grid-data td.readFlag
{display: table-cell !important;position: relative !important;right: auto !important;visibility: visible !important;background-position: 14px 13px !important;}
#dashboard-grid-data th.readFlag .icon,#dashboard-grid-data td.readFlag .icon {margin-top: 8px !important;}
}A preview of the results
Discussions view with extra CSS:
... and without:
Thread view with additional CSS:
... and without:
