Adjust the format and layout of ASC Web Pages

This user tip shows you how to load a user style sheet into a web browser to make the Apple Support Community web pages more readable.  The layout of the ASC list discussions in a community, postings in a discussion, and reply to a discussion web pages have been adjusted. Hiroto, an ASC contributor, has implemented a Cascading Style Sheet to tidy up these web pages for small and large screens. Hiroto has been contributing to the ASC since 2001.  BDAqua,  ChitlinsCC, WZZZ, and I  have done the testing. turingtest2 and I have contributed code.

Improving your experience with the June ASC web pages.  The modifications go a long way in giving you a positive experience. Hiroto has done another great job. 

• "Combined" User Style sheet
  I am combining a user style sheet that was derived from my modifications to Hiroto first style sheet and from Turingtest2's css with Hiroto's current style sheet below. My efforts are focused on making ASC web pages work on a small window in the Firefox browser.
  
  

  August 7 -- http://pastebin.com/raw/azMwQn2G

      Adjusted poster info to the left of the post.

   

• Hiroto's English version.  Minimizes white space.  Better font choice. Avoids downloaded fonts. Best for both Firefox and other web browsers.
  http://pastebin.com/raw/35fPP2CS

   

• turingtest2's minimalist version.  A popular choice for folks who feel lots of changes are risky.
  Minimal CSS tweaks for ASC

The changes are amazing for a small screen user like me. They make the ASC forums usable again.  Screen image from my version.

These changes are directed at the Firefox web browser.  With the movement of the @-moz-document tag data to a  User Content Manager, the css file should work with Chrome and Safari.  Documentation of the changes for Chrome and Safari are in the first reply.

Example of a small screen size:

Example of a screen size 21.5"  [ but reduces here ]

Disclaimer

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more details. 

Tested in these enviroments:

OS X

Firefox 40.0.1 in OS X 10.10.5
Firefox 31 in OS X 10.8.5 with screen size 21.5"
Firefox in OS X 10.6
Firefox 24 in Mac OS X 10.5.8
SeaMonkey in Mac OS X 10.5.8
TenFourFox 23 in Mac OS X 10.4.11

Other OS's
Chrome 34 in Windows XP sp3
Firefox 31 in Windows XP sp3
Firefox 26 in Fedora 19

Installing the CSS code from pastebin.com

1) You need to download and install stylish.
  You need to download stylish in Firefox. Firefox will notice the download and ask you if it is
  ok to install.
  https://addons.mozilla.org/en-US/firefox/addon/stylish/

2) Get the css code.

     a. click on the above link

     b. select all

         command + a

     c. copy

         command + c

3) Using Stylish to install the css code -----------------------------------------------

1.   firefox > tools > add-ons
2.   click on 'User Styles' in the left column < Yes, they changed the name >. 
     This will bring up the stylish stuff in the middle of the page.
3.   click on "Write New Style" button
   
4.   fill in a name of your user style sheet. I used ASC User styles.
5.   Paste in the style sheet into the Stylish input area
     command + v
6.   click on save when done. This will permanently add the style rules to Firefox.

Enjoy the new ASC web pages.

Should you want to turn off the rules.

1) Find stylish

2) Click on Stylish icon

3) Click on User Styles if needed

4) Click on Disable or remove the rules you do not want

( Optional. )
To change a style sheet, click on Edit.

Links

turingtest2 created a list of all the ASC links with complete information as seen in the screen images. "Where applicable the results display in the 'Discussions' style which highlights new activity in bold."

Site map of Communities and Categories

Background

CSS effects the presentation of data. It moves data around, hides data, changes colors, changes margins, etc. There is the possibility of inserting data, but this sheet doesn't insert data.

Figuring what to write in a css file is difficult but reading isn't so bad.
example:

/* thread info */
    .jive-thread-info {
        padding: 10px 40px !important;
        margin: 0px !important;
    }


With comments.

.jive-thread-info {  — This is the boxed area be changed.
    padding: 10px 40px !important;   — changes inner space around text
                                     — !important;  This change has the
                                       highest priority.
    margin: 0px !important;          — changes outer space around object.
                                       "Driving outside the lines"
                                     — set to 0 so to nullify.
   }

Issues:

1. editor no spell checking in title [ not css ]
2. advanced editor >> plan copying of code may get extra modifiers.  Should be <p>...</p> [ not css ]
3. text overlay at the bottom of web pages. Standard boiler plate. Apple took a little less space in July.
4. left alignment of buttons and button size. HORRIBLE new User Interface of Apple Communities
5. Community hosts info gets clipped when moved to the left of post
6. Used tip pull down change words to blue.
7. User tip support dropped .