Adjust the format and layout of ASC Web Pages
This user tip provides multiples ways for improving the look and feel of ASC web pages. In a way, you will step back in time to the Spring 2014 page layout.
The layout of the ASC community list, postings of a discussion, and reply web pages have been adjusted. This effort was started by Hiroto, an ASC contributor, who 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.
Hiroto has done another great job. BDAqua, ChitlinsCC, WZZZ, and I have done the testing. Besides Hiroto, turingtest2 and I have contributed code.
The changes involve using CSS and Javascript
To install a CSS adjustment, you need to follow this procedure.
1) The first time, you need to download and install stylish.
You need to download stylish in Firefox or Waterfox. Firefox or Waterfox will notice the download and ask you if it is "ok to install."
https://addons.mozilla.org/en-US/firefox/addon/stylish/
2) Using Stylish to install the css code
- firefox > tools > add-ons
- 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. - click on "Write New Style" button
- fill in a name of your user style sheet. I used ASC User styles.
- Get the css code via going to one of the links for css source code. You will get to a pastebin.com page. You will see a bunce of strange stuff. You need to copy all the code on the page. Hint: command+a [ select all ] then command+c [ copy ]
- Paste in the style sheet into the Stylish input area
command + v - click on save when done. This will permanently add the style rules to Firefox.
CSS adjustments -- There are three CSS style sheets
"Combined" User Style sheet
Incorporates the work of Hiroto and Turingtest2. My efforts are focused on making ASC web pages work on a small window in the Firefox browser.
July 5, 2017 https://pastebin.com/raw/fBHEYb1S
URL multiple slashes
Use this "header" user stye sheet to reduce the space taken up by the ASC header. Suggested it be used with the above Combined user style sheet.
July 5, 2107 https://pastebin.com/raw/taLuL0Rw
alignment and url multiple slashes
Adjustments for My Subscriptions
March 10, 2017 http://pastebin.com/raw/DbTbf6tr
CSS cannot do it all, for that we need Javascript. You first need to install the tools for Javascript
For installation see: How to install Javascript enhancements
I'm using the Waterfox web browser, a Firefox clone. Waterfox is the classic Firefox browser without all the new coke stuff. [ In the late 80's coke changed their formula to taste like Pepsi. People didn't like it and coke went back to the classic taste. ] I'd be happy to make the adjustments for the New Firefox, but the new GreaseMonkey documentation in incomprehensible to me.
Auto login and signin to ASC
http://pastebin.com/raw/VCLsZw9H
Autoload profile
http://pastebin.com/raw/G7SCRLmR
Display Original Post only on First page. Based on Hiroto efforts
http://pastebin.com/raw/y9c2aqWT
Fast scrolling. Separated from Hiroto's code.
http://pastebin.com/raw/ukQbZ5Fd
Move ASC community name. Dependent on the header user stye sheet. 😎
http://pastebin.com/raw/zrjJecRR
Places a third set of pagination information and icons near the top right of the display ASC post web page.😎
Jan 29, 2017 http://pastebin.com/raw/6QLuznHz
Provide a link to last page in /content listings. Clicking on the title with a pulldown present goes to the link specified
in the pulldown. Requires two scripts.😟
Part # 1https://pastebin.com/raw/ui3R1ypm Part # 2 https://pastebin.com/raw/t3cYLBMR
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
Adds pagination information in header, fast scrolling, and styling
Re: Re: Hiroto (followup question)
turingtest2's minimalist version. A popular choice for folks who feel lots of changes are risky.
Turingtest2 minimalist as a bookmarklet. Intended to use with iCab or Chrome on an ios device
Nov 30, 2016 Create inbox bookmarklet
etresoft has started work on ASCPowerTools2. Adjusts My Subscriptions.
The changes are amazing for a small screen user like me. They make the ASC forums usable again. Screen image from my version.
Web Browers
These changes are directed at the Waterfox web browser. This changes were developed for the Firefox web browser. Mozilla changed what enhancements are allowed in the fall of 2017. The CSS changes should still work in Firefox. I'm using Waterfox now for these changes. Safari ASC web denizens have reported that these user style adjustments work when you utilize the stylish extension to "Install Directly from the URL" Thanks to CCC for creating these files on the Stylish web site. This user tip should be useful when install other tweaks. Using Stylish for Safari to install Turingtest2's "Minimal CSS tweaks for ASC"
FYI: Calm down Firefox and Waterfox ( optional )
Mozilla has continually introduced new items that pop out when you click on the Bookmark icon. I have successfully ditched the text that I don't care for. To ditch more junk use the following CSS. See comments in CSS on how to use Firefox's about:config to ditch recent items.
Nov 30, 2016 http://pastebin.com/raw/tkTfnPfD
Examples
Example of a small screen size:
Example of a screen size 21.5" [ but reduces here 😉 ]
Disclaimer
These files are 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.
Tested in these environments:
macOS
Firefox 47.0.1 in macOS 10.10.5
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
Safari -- reported to me as mostly working
SeaMonkey in Mac OS X 10.5.8
TenFourFox 23 in Mac OS X 10.4.11
Waterfox 56.2.5 in macOS 10.10.5
Other OS's
Chrome 34 in Windows XP sp3
Firefox 31 in Windows XP sp3
Firefox 26 in Fedora 19
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:
- editor no spell checking in title [ not css ]
- advanced editor >> plan copying of code may get extra modifiers. Should be <p>...</p> [ not css ]
- text overlay at the bottom of web pages. Standard boiler plate. Apple took a little less space in July.
- left alignment of buttons and button size. HORRIBLE new User Interface of Apple Communities
- Community hosts info gets clipped when moved to the left of post
- Used tip pull down change words to blue.
- User tip support dropped 😠.
- advanced > >> Syntax highlighting > plain doesn't display in tinymce.
- Should the page be refreshed. >> > syntax highlighting becomes invisible
- pagination: Invalid character incorrect direction on second page when coming from first.
Prior Combination files with my additions.
March 10, 2017 http://pastebin.com/raw/42McMzuv
Touch up
Widen width of laptop window from 1099 to 1199
March 7, 2017 http://pastebin.com/raw/n9KxK1bw
Adjust for late February ASC changes
add French and German language support
adjust magnification, center points again, tweaks
November 10, 2016 http://pastebin.com/raw/PJPDaBNi
Better alignment of avatar. Center navigation bar text.
November 3 http://pastebin.com/raw/UYGP2YvE
Adjustments for November 1 ASC changes. Correct alignment for poster info.
October 3 http://pastebin.com/raw/DXSh8i0q
Bug fix with Syntax highllighting
alignment of titles in lists,
light brown background color for replies,
better centering of the alert box, and
light grey background every where.
August 7 http://pastebin.com/raw/azMwQn2G
Adjusted poster info to the left of the post.
July 7 http://pastebin.com/raw/4kwrHZyr
Support for 7-7-2016 ASC changes. Correct user information on the left of post. Dropped changes for user tips. Change flag 0.21.
July 6 ttp://pastebin.com/raw/4LH8bMYd
Move original poster info to the left of the post
Adjust positioning of poster info
June 24 http://pastebin.com/raw/UDWUNyjN
Moved who made the reply post information back to the left of the post.
Adjusted missed button text to light blue.
June 22 http://pastebin.com/BtmmHDpb
Turingtest2 change to eliminate answers and helpful from the top of each discussion
web page
June 19 http://pastebin.com/d41N9tDL
parchment background color for question.
finished resizing buttons
June 17 http://pastebin.com/u61XpkkY
grey background
March 10, 2017 http://pastebin.com/raw/2NzWiBac
Touch up
March 7, 2017 http://pastebin.com/raw/c7wsKL1f
Adjust for late February ASC changes
add French and German language support
Better alignment. Button, input field, and pulldown adjusted to one line. Thanks to Hiroto.
Nov 4, 2016 http://pastebin.com/raw/ywUyR82r
Adjustments for November 1 ASC changes and minor stuff.
Eliminated avatar of signed in user because avatar caused a visual conflict with original posters avatar.
September 28, 2016 http://pastebin.com/raw/YGxSHWH5
Original release
Javascript
Provide a link to last page in /content listings. Requires two scripts.
Part # 1 http://pastebin.com/raw/zSEDB1Y5 Part # 2 http://pastebin.com/raw/ND24ktRB
Robert
