I like the forum change in general, thanks to all that have worked on it.
The front page just bugged me though, so I decided to see what I could do with it. Here are my results, it generally only changes the main and category pages. There are not many color changes here it was more about the layout. (All changes done strictly with css.)
Here is a screenshot so you can see what it looks like.
![MR-Stylish-screenshot.png]( "MR-Stylish-screenshot.png")
I used the "Stylish" browser plugin/extension to make it easy to turn on and off (available for Safari, Firefox, and Chrome). You should also be able to use this in a browser custom style sheet if you want.
Instructions to implement (click each spoiler button to show the information)
It has only been moderately tested with browsers on Macs, but here is the code to copy into Stylish or otherwise:
EDIT: fixed code so that it should override all items when loaded from an external style sheet or any other extension/method.
EDIT 2: fixed code to work properly after a recent site tweak that changed where a few items were.
EDIT 3: fixed to display items correctly after forum reorganization (Aug. 2015).
Enjoy!
Thanks to all those who have replied and helped me in making this post and the code better, notably redheeler, grahamperrin, Gwendolini, and AngerDanger.
Other notable layout tweak threads/posts:
Pre-Xenforo smilies
Square Avatars
Hiding Avatars
Edited to fix bookmarklet, fix code, add instructions, another code fix, and more code fixes.
The front page just bugged me though, so I decided to see what I could do with it. Here are my results, it generally only changes the main and category pages. There are not many color changes here it was more about the layout. (All changes done strictly with css.)
Here is a screenshot so you can see what it looks like.
I used the "Stylish" browser plugin/extension to make it easy to turn on and off (available for Safari, Firefox, and Chrome). You should also be able to use this in a browser custom style sheet if you want.
Instructions to implement (click each spoiler button to show the information)
Desktop browsers using Stylish:
Screenshots for installing (below) may be slightly different depending on browser/os version.
![Stylish-Safari-1.png]( "Stylish-Safari-1.png")
![Stylish-Safari-2.png]( "Stylish-Safari-2.png")
![Stylish-Firefox-1.png]( "Stylish-Firefox-1.png")
![Stylish-Firefox-2.png]( "Stylish-Firefox-2.png")
![Stylish-Chrome-1.png]( "Stylish-Chrome-1.png")
![Stylish-Chrome-2.png]( "Stylish-Chrome-2.png")
Desktop browsers using some other extension: (for inserting CSS)
Insert the code from below into the appropriate place and select the correct domain to apply it to.
Using custom Style sheet within the browser: (no extensions)
(Not recommended for most users, because you cannot make changes or turn it on/off without restarting the browser usually.)
Mobile browsers partial workaround:
Screenshots for installing (below) may be slightly different depending on browser/os version.
- Install extension from Vladimir Sobolev's site.
- Click the Stylish extension icon in the toolbar
- Click on Manage
- Click on Edit [1]
- Change the "Title" to something descriptive that you understand [2]
- Copy the text from the below code box and Paste it into the "CSS" box [3]
- Set the "Applies to:" items to "Domain" [4] and "forums.macrumors.com" [5]
- Click on Save Style [6]
- Your done.
- Install the add-on by following the links on the userstyles.org site.
- Click the Stylish add-on icon in the toolbar
- Click on "Write new style"
- Click on "For forums.macrumors.com…"
- Add a "Name" that is something descriptive that you understand [1]
- Copy the text from the below code box, place the cursor on line 4, and Paste the code into the box [2]
- Click on Save [3]
- Your done.
- Install the extension by following the links on the userstyles.org site.
- Click the Stylish add-on icon in the toolbar
- Click on the word "forums" of "Write style for: ..." (a tooltip will pop up before you actually click)
- Change "Enter a name" to something descriptive that you understand [1]
- Copy the text from the below code box and Paste it into the "Code" box [2]
- Set the "Applies to:" items to "URLs on the domain" [3] and "forums.macrumors.com" [4]
- Click on Save [5]
- Your done.
Desktop browsers using some other extension: (for inserting CSS)
Insert the code from below into the appropriate place and select the correct domain to apply it to.
Using custom Style sheet within the browser: (no extensions)
(Not recommended for most users, because you cannot make changes or turn it on/off without restarting the browser usually.)
[Safari and Firefox are the same except where the files are located]
- Create a new text file with the following code
Code:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("forums.macrumors.com") {
/* put new code here */
}- Copy the text from the below code box, and Paste it into the file you just made (delete the 'new code here' line when you paste)
- Save the file to the following file location and name for what matches your 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 as anything_you_want.css, and place it anywhere_you_want
- In Safari go to Preferences > Advanced
- From the drop-down selector next to "Style sheet:" choose 'other…', then navigate to where you saved the file and click 'Choose'.
Mobile browsers partial workaround:
For mobile devices there is a partial workaround that will allow you to see what it looks like. You have to use a bookmarklet (to load the css file from a remote server) after the page is loaded. Used the custom styles method outlined on this page at simplyaccessible.com.
Save this bookmarklet to your browser: MR-Custom
It doesn't seem that you can make bookmarklet links within xenforo, so go to this page to get the bookmarklet.
It doesn't seem that you can make bookmarklet links within xenforo, so go to this page to get the bookmarklet.
It has only been moderately tested with browsers on Macs, but here is the code to copy into Stylish or otherwise:
EDIT: fixed code so that it should override all items when loaded from an external style sheet or any other extension/method.
EDIT 2: fixed code to work properly after a recent site tweak that changed where a few items were.
EDIT 3: fixed to display items correctly after forum reorganization (Aug. 2015).
Code:
.node.level_1:not(.node_12) .node.level_2 {
width: 100% !important; /* make all 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; /* to hide unneccesary big block icon/graphic/text */
}
body:not(.node12) .node .nodeText, body:not(.node12) .node .subForumList {
margin-left: 0 !important; /* shift text over where the nodeIconWrapper was */
}
.level_1 .level_2 .categoryForumNodeInfo > .subForumList > .nodeTitle {
display: none !important; /* hide nonessential category item listing after nodeIconWrapper is hidden */
}
.subForumList::before, .subForumList::after {
border: 0 !important; /* to hide the up-arrow/triangle from forum groups */
}
body:not(.node12) .node .subForumList {
border-top: 0 !important; /* remove extra top border */
padding: 5px 9px !important; /* remove extra space above and below subForumList's */
}
body:not(.node12) .node .nodeText {
min-height: 40px !important; /* allow it to be smaller than 72px */
padding: 8px 10px !important; /* padding for single rows to make things look nicer */
}
body:not(.node12) .node .nodeText .nodeTitle {
height: auto !important; /* allow it to be smaller than 72px */
}
body:not(.node12) .nodeList .categoryForumNodeInfo, body:not(.node12) .nodeList .forumNodeInfo, body:not(.node12) .nodeList .linkNodeInfo {
border-bottom-width: 1px !important; /* reduce extra bottom border width */
margin-top: -1px !important; /* hide the doubled border between items */
border-width: 1px 0 !important; /* hide side borders so it 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 get changed below, so we leave this as regular to 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;
}
/* ----- the following rules match the icon colors to the category ----- */
.node_27 .node.level_2 .nodeTitle a::before, .node27 .node.level_2 .nodeTitle a::before { color: rgb(77, 108, 153) !important; } /* News and 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 and 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 a {
font-size: 12px !important; /* make all items same size text */
color: rgb(21, 44, 78) !important; /* make all text the 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 that have a real forum above them in same category */
}
/* --------------- start LastPost section --------------- */
/* --------- show last post info where available --------- */
/* for next rule: before the comma is main page, after is for category pages, then 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 is 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; /* do not display avatar of user of latest post */
}
span.lastThreadTitle>span {
display: none !important; /* do not display "Latest:" text by post title*/
}
span.lastThreadUser:before {
content: "by: " !important;
color: inherit !important;
}
span.lastThreadMeta abbr {
color: inherit !important;
}
.nodeLastPost.secondaryContent .lastThreadTitle a {
color: rgb(46, 57, 72) !important; /* last post title link color */
font-weight: 600 !important;
}
.nodeLastPost.secondaryContent .lastThreadUser a {
color: rgb(66, 82, 103) !important; /* last post user link color */
}
/* ----- for 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;
}
/* ----- for 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;
}
/* ----- for 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 up pesky items (that only affect some items) from css files */
}
.node.audentio_grid_md .nodeLastPost .lastThreadTitle, .node.audentio_grid_md .nodeLastPost .lastThreadUser {
display: inline !important; /* clean up pesky items (that only affect some items) from 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; /* so it has the same background color as the main page if it is changed */
border-bottom-width: 4px !important;
}
.nodeList .categoryStrip .categoryText {
line-height: 36px !important; /* shift text and reduce spacing around category text */
}
.nodeList .categoryStrip .nodeTitle {
font-size: 16px !important; /* reduce category font a little */
}
.category_view .titleBar {
margin: 0 !important;
padding: 10px 5px 0 !important; /* bump the sides in */
}
.category_view .titleBar .titleBarWrapper {
height: 24px !important; /* shift text and reduce spacing around category text */
vertical-align: bottom !important;
}
.category_view .titleBar .titleBarWrapper h1 {
font-size: 18px !important; /* reduce category font a little */
}
.category_view .nodeList.section {
margin: 0 !important; /* get rid of extra space above items */
}
.node.level_1>.nodeList {
margin-top: 1px !important;
}
.node_12 .node.forum.audentio_grid .nodeStats {
min-width: 70px !important; /* since we are not hiding the drop-down sub-forum list within this node we want to force it a little wider to work with the double digit number*/
}Enjoy!
Thanks to all those who have replied and helped me in making this post and the code better, notably redheeler, grahamperrin, Gwendolini, and AngerDanger.
Other notable layout tweak threads/posts:
Pre-Xenforo smilies
Square Avatars
Hiding Avatars
Edited to fix bookmarklet, fix code, add instructions, another code fix, and more code fixes.
Last edited:
