Forum main page change (using Stylish / stylesheets)

i forum change in general, have worked on it.

front page bugged me though, decided see it. here results, changes main , category pages. there not many color changes here more layout. (all changes done strictly css.)

here screenshot can see looks like.



used "stylish" browser plugin/extension make easy turn on , off (available safari, firefox, , chrome). should able use in browser custom style sheet if want.

instructions implement (click each spoiler button show information)

desktop browsers using stylish:
screenshots installing (below) may different depending on browser/os version.

• install extension vladimir sobolev's site.
• click stylish extension icon in toolbar

• click on manage

• click on edit [1]
• change "title" descriptive understand [2]
• copy text below code box , paste "css" box [3]
• set "applies to:" items "domain" [4] , "forums.macrumors.com" [5]
• click on save style [6]

• your done.

• install add-on following links on userstyles.org site.
• click stylish add-on icon in toolbar

• click on "write new style"
• click on "for forums.macrumors.com…"

• add "name" descriptive understand [1]
• copy text below code box, place cursor on line 4, , paste code box [2]
• click on save [3]

• your done.

• install extension following links on userstyles.org site.
• click stylish add-on icon in toolbar

• click on word "forums" of "write style for: ..." (a tooltip pop before click)

• change "enter name" descriptive understand [1]
• copy text below code box , paste "code" box [2]
• set "applies to:" items "urls on domain" [3] , "forums.macrumors.com" [4]
• click on save [5]

• your done.

desktop browsers using other extension: (for inserting css)
insert code below appropriate place , select correct domain apply to.


using custom style sheet within browser: (no extensions)
(not recommended users, because cannot make changes or turn on/off without restarting browser usually.)

[safari , firefox same except files located]

• create new text file following code

code:

 @namespace url(http://www.w3.org/1999/xhtml);  @-moz-document domain("forums.macrumors.com") {  /* put new code here */  } 

• copy text below code box, , paste file made (delete 'new code here' line when paste)
• save file following file location , name matches browser/os (different versions may have different file paths)
• firefox:

code:

firefox-windows: c:\users\[login_name]\appdata\roaming\mozilla\firefox\profiles\[random_text].default\chrome\usercontent.css  firefox-mac: ~/library/application support/firefox/profiles/[random_text].default/chrome/usercontent.css  firefox-linux: ~/.mozilla/firefox/[random_text].default/chrome/usercontent.css 

• safari:
  • save anything_you_want.css, , place anywhere_you_want
  • in safari go preferences > advanced
  • from drop-down selector next "style sheet:" choose 'other…', navigate saved file , click 'choose'.

mobile browsers partial workaround:

for mobile devices there partial workaround allow see looks like. have use bookmarklet (to load css file remote server) after page loaded. used custom styles method outlined on this page @ simplyaccessible.com.

save bookmarklet browser: mr-custom
doesn't seem can make bookmarklet links within xenforo, go this page bookmarklet.

has been moderately tested browsers on macs, here code copy stylish or otherwise:
edit: fixed code should override items when loaded external style sheet or other extension/method.
edit 2: fixed code work after recent site tweak changed few items were.
edit 3: fixed display items correctly after forum reorganization (aug. 2015).

code:

 .node.level_1:not(.node_12) .node.level_2 {     width: 100% !important; /* make sections full width, except archives */ } body:not(.node12) .nodelist.sectionmain>.node.level_2 {     width: 100% !important; /* make category page sections full width */ }  body:not(.node12) .mr_nodeiconwrapper, .node .linknodeinfo .nodeicon {     display: none !important; /* hide unneccesary big block icon/graphic/text */ }  body:not(.node12) .node .nodetext, body:not(.node12) .node .subforumlist {     margin-left: 0 !important; /* shift text on nodeiconwrapper */ }  .level_1 .level_2 .categoryforumnodeinfo > .subforumlist > .nodetitle {     display: none !important; /* hide nonessential category item listing after nodeiconwrapper hidden */ }  .subforumlist::before, .subforumlist::after {     border: 0 !important; /* hide up-arrow/triangle forum groups */ }  body:not(.node12) .node .subforumlist {     border-top: 0 !important; /* remove top border */     padding: 5px 9px !important; /* remove space above , below subforumlist's */ }  body:not(.node12) .node .nodetext {     min-height: 40px !important; /* allow smaller 72px */     padding: 8px 10px !important; /* padding single rows make things nicer */ }  body:not(.node12) .node .nodetext .nodetitle {     height: auto !important; /* allow smaller 72px */ }  body:not(.node12) .nodelist .categoryforumnodeinfo, body:not(.node12) .nodelist .forumnodeinfo, body:not(.node12) .nodelist .linknodeinfo {     border-bottom-width: 1px !important; /* reduce bottom border width */     margin-top: -1px !important; /* hide doubled border between items */     border-width: 1px 0 !important; /* hide side borders blends nicer */ }  .node .subforumlist li.category ol {     display: inherit !important; /* show new sub-forums of sub-forums on front page*/ }  body:not(.node12) .node.level_2 .nodetitle>a::before {     display: inline-block !important;     font-family: fontawesome, icomoon !important;     speak: none;     font-style: normal !important;     font-weight: normal !important;     font-variant: normal !important;     font-size: 1.25em !important;     text-transform: none !important;     content: "\f07b" !important;     color: #949dab; /* important sections changed below, leave regular avoid conflict */     margin-right: 10px !important;     padding: 2px 5px 2px 2px !important;     /* ----- better font rendering ----- */     -webkit-font-smoothing: antialiased !important;     -moz-osx-font-smoothing: grayscale !important; }  /* ----- following rules match icon colors category ----- */ .node_27 .node.level_2 .nodetitle a::before, .node27 .node.level_2 .nodetitle a::before { color: rgb(77, 108, 153) !important; } /* news , article */ .node_103 .node.level_2 .nodetitle a::before, .node103 .node.level_2 .nodetitle a::before { color: rgb(117, 88, 122) !important; } /* iphone, ios, etc */ .node_187 .node.level_2 .nodetitle a::before, .node187 .node.level_2 .nodetitle a::before { color: rgb(77, 108, 153) !important; } /* apple watch */ .node_7 .node.level_2 .nodetitle a::before, .node7 .node.level_2 .nodetitle a::before { color: rgb(173, 56, 38) !important; } /* macs */ .node_141 .node.level_2 .nodetitle a::before, .node141 .node.level_2 .nodetitle a::before { color: rgb(189, 112, 158) !important; } /* apple , apple services */ .node_57 .node.level_2 .nodetitle a::before, .node57 .node.level_2 .nodetitle a::before { color: rgb(189, 140, 26) !important; } /* special interests */ .node_21 .node.level_2 .nodetitle a::before, .node21 .node.level_2 .nodetitle a::before { color: rgb(108, 174, 32) !important; } /* mac community */   .node.level_2 .nodetitle, .node.level_2 .nodetitle {     font-size: 12px !important; /* make items same size text */     color: rgb(21, 44, 78) !important; /* make text same color */ }  body:not(.node12) .node .subforumlist li {     margin: 4px 0 !important; }  body:not(.node12) .node .forumnodeinfo .level-n, body:not(.node12) .node .categoryforumnodeinfo li.category .level-n, body:not(.node12) .maincontainer_nosidebar .node .categoryforumnodeinfo .level-n {     margin-left: 15px !important; /* indent sub-forums have real forum above them in same category */ }  /* --------------- start lastpost section --------------- */ /* --------- show last post info available --------- */  /* next rule: before comma main page, after category pages, hybrid pages */ .node.level_1:not(.node_12) .node .nodelastpost, body:not(.node12) .category_view .nodelist.sectionmain .node .nodelastpost, body:not(.node12) .forum_view .nodelist.sectionmain .node .nodelastpost {     display: block !important;      width: 45% !important;     position: absolute !important;      padding: 5px !important;     margin: 0 !important;     height: auto !important;     font-size: 11px !important;     line-height: normal !important;     top: calc(50% - 19px) !important; /* 19px approximately half of current (based on font size) last post text block */     text-overflow: ellipsis !important; } .node .nodelastpost .lastthreadtitle {     height: auto !important; } .node .nodelastpost a.avatar {     display: none !important; /* not display avatar of user of latest post */ } span.lastthreadtitle>span {     display: none !important; /* not display "latest:" text post title*/ } span.lastthreaduser:before {     content: "by: " !important;     color: inherit !important; } span.lastthreadmeta abbr {     color: inherit !important; } .nodelastpost.secondarycontent .lastthreadtitle {     color: rgb(46, 57, 72) !important; /* last post title link color */     font-weight: 600 !important; } .nodelastpost.secondarycontent .lastthreaduser {     color: rgb(66, 82, 103) !important; /* last post user link color */ }  /* ----- main page ----- */ .nodelist .node.level_1:not(.node_12) .categorystrip .nodetitle::after {     content: "last post" !important;     display: block !important;     position: absolute !important;     bottom: -10px !important;     left: 55% !important;     font-size: 13px !important;     padding: 0 3px !important;     color: inherit !important; } /* ----- category pages ----- */ .category_view .titlebar .titlebarwrapper::after {     content: "last post" !important;     display: inline !important;     position: relative !important;     float: right !important;     bottom: 18px !important;     width: 44% !important;     font-size: 13px !important;     padding: 0 5px !important;     color: inherit !important; } /* ----- hybrid pages ----- */ body:not(.node12) .forum_view ol.nodelist.sectionmain::before {     content: "last post" !important;     display: block !important;     position: relative !important;     bottom: 1px !important;     left: 55% !important;     font-size: 13px !important;     padding: 0 3px !important;     margin-top: -20px !important;     color: inherit !important; }  .node.audentio_grid_md .nodelastpost .lastthreaddate:before {     content: "" !important; /* clean pesky items (that affect items) css files */ } .node.audentio_grid_md .nodelastpost .lastthreadtitle, .node.audentio_grid_md .nodelastpost .lastthreaduser {     display: inline !important; /* clean pesky items (that affect items) css files */ } /* --------------- end lastpost section --------------- */  body:not(.node12) .node.level_2 {     padding: 0 5px !important; /* reduce vertical spacing between group items */ }  body:not(.node12) ol.nodelist div.nodeinfo:not(.categorystrip) {     background: linear-gradient(to right, rgba(226,234,243,0) 0%, rgba(226,234,243,0.8) 5%, rgba(226,234,243,1) 50%, rgba(226,234,243,0.8) 95%, rgba(226,234,243,0) 100%) !important; }  .nodelist .categorystrip {     margin: 0 !important;     height: 30px !important; /* reduce spacing around category text */     background-color: inherit !important; /* has same background color main page if changed */     border-bottom-width: 4px !important; } .nodelist .categorystrip .categorytext {     line-height: 36px !important; /* shift text , reduce spacing around category text */ } .nodelist .categorystrip .nodetitle {     font-size: 16px !important; /* reduce category font little */ }  .category_view .titlebar {     margin: 0 !important;     padding: 10px 5px 0 !important; /* bump sides in */ } .category_view .titlebar .titlebarwrapper {     height: 24px !important; /* shift text , reduce spacing around category text */     vertical-align: bottom !important; } .category_view .titlebar .titlebarwrapper h1 {     font-size: 18px !important; /* reduce category font little */ }  .category_view .nodelist.section {     margin: 0 !important; /* rid of space above items */ }  .node.level_1>.nodelist {     margin-top: 1px !important; }  .node_12 .node.forum.audentio_grid .nodestats {     min-width: 70px !important; /* since not hiding drop-down sub-forum list within node want force little wider work double digit number*/ } 

enjoy!

have replied , helped me in making post , code better, notably redheeler, grahamperrin, gwendolini, , angerdanger.

other notable layout tweak threads/posts:
pre-xenforo smilies
square avatars
hiding avatars

edited fix bookmarklet, fix code, add instructions, code fix, , more code fixes.

 

this seems nice compromise between new , old layout, , i'm digging having latest post column back. great work!

did know before beggining secondarycontent class existed latest post information, or pleasantly surprised find when began making changes?

 

Forums Mac Community Site and Forum Feedback

• iPhone
• Mac OS & System Software
• iPad
• Apple Watch
• Notebooks
• iTunes
• Apple ID
• iCloud
• Desktop Computers
• Apple Music
• Professional Applications
• iPod
• iWork
• Apple TV
• iLife
• Wireless