DIY Desktop Site Customisation - Use at own risk

System

This discussion was created from comments split from: Welcome to the new Boards.ie platform - Version 1.0 .

28064212

Attached the full Stylus CSS I'm currently using. Features:

• Full-width
• Complete timestamps on all posts (albeit with a 12 hour clock)
• Reduced vertical whitespace
• Displays follow buttons on forum headers, allowing you to follow forums on desktop
• No sticky header (personal pet peeve - I paid for 1080px of vertical space, I'm going to use 1080px, and I know how to use the Home key to go back to the top. If you want the header back, just remove the first two CSS rules)
• Notifications of new posts and draft saves go in the bottom-right instead of bottom-left
• Some other small appearance tweaks

Use this at your own risk, I wrote it for personal use only, it may not work on all configurations, and it will occasionally break as the site gets more updates. And if you're complaining about Boards bugs, make sure you can reproduce the bug with this off.

boards-stylus.txt

_Kaiser_

https://boards.ie/discussion/comment/117644398#Comment_117644398

Thanks a mil for this. Working perfectly on Chrome for me.

Leg End Reject

https://boards.ie/discussion/comment/117644543#Comment_117644543

Especially for users like me who wouldn't have a clue what to do with it.

ohnonotgmail

https://boards.ie/discussion/comment/117644570#Comment_117644570

it is really straightforward to use the CSS posted. I copied these instruction from a thread on after hours

install Stylebot in Chrome (https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en)

Visit Boards.ie, and then open the plugin and click "Open Stylebot"

Make sure you've got the "Code" tab selected, and paste in the CSS from my attachment (or write your own).

It auto saves, so just hit the X to close the code window. The CSS will only apply to boards.ie, not any other sites.

fritzelly

https://boards.ie/discussion/comment/117644662#Comment_117644662

Try this

.pre-header{position: fixed;}
.BreadcrumbsBox{position: fixed; width: 100%; top: 68px;height: 20px;}
#titleBar{position: fixed; top: 20px; width: 100%;}
.Container{margin-top:70px}

Andrew76

https://boards.ie/discussion/comment/117644657#Comment_117644657

I was just about to ask if it was possible to remove those icons - thanks a mil!

ohnonotgmail

https://boards.ie/discussion/comment/117644711#Comment_117644711

cheers. I changed it slightly because there was a gap between the header and the top of the page

.pre-header{position: fixed;}

.BreadcrumbsBox{position: fixed; width: 100%; top: 48px;height: 20px;}

#titleBar{position: fixed; top: 0px; width: 100%;}

.Container{margin-top:70px}

GBX

@28064212 thanks for your work for Stylus edits. Is there a way to add the forum structure when scrolled at the top. - Say I want to go from this thread out to the Feedback forum. There is no current option. It's currently blank. (Thanks in advance 😁)

IE: Home› Talk to...› Boards.ie› Help & Feedback› Feedback

ohnonotgmail

https://boards.ie/discussion/comment/117645718#Comment_117645718

add this to the top of the CSS. This is he version i am using and it keeps those breadcrumbs fixed when the page scrolls. i have changed it slightly from what @28064212 originally posted. His had 68px instead of 48px and 20px instead of 0px. try both versions and see which works best for you.

.pre-header{position: fixed;}

.BreadcrumbsBox{position: fixed; width: 100%; top: 48px;height: 20px;}

#titleBar{position: fixed; top: 0px; width: 100%;}

.Container{margin-top:70px}

Hodors Appletart

https://boards.ie/discussion/comment/117645765#Comment_117645765

how does one edit a CSS in stylus?

ohnonotgmail

https://boards.ie/discussion/comment/117646275#Comment_117646275

I did try to create a new thread but the new discussion button doesn't work. we should really have a separate thread for the CSS stuff

it is really straightforward to use the CSS posted. I copied these instruction from a thread on after hours

install Stylebot in Chrome (https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en)

Visit Boards.ie, and then open the plugin and click "Open Stylebot"

Make sure you've got the "Code" tab selected, and paste in the CSS from my attachment (or write your own).

It auto saves, so just hit the X to close the code window. The CSS will only apply to boards.ie, not any other sites.

Hodors Appletart

grand I'm using Stylus seems to be a similar thing

I just found the edit CSS icon, so all good now

the "floating" breadcrumbs is nice

joujoujou

@28064212 you're genius! I owe you a beer! Or even more! ;-D

I've 2 questions regarding twitter, facebook flag and quote buttons though:

– where exactly in the CSS should I add aforementioned code to rid of FB and Twitter icons?

– is there any workaround to have all buttons close to the bottom line of post's window? It currently looks like all them buttons are located right below each post's content rather than just above bottom line. Example below (partially blurred to protect posters identity).

ohnonotgmail

https://boards.ie/discussion/comment/117646713#Comment_117646713

I put the CSS to hide those buttons after the CSS to make the breadcrumbs fixed. I don't think it matters really where you put it.

fritzelly

The only way to get extensions on android is use something like Kiwi browser, it's same base code as Chrome, dunno about firefox

joujoujou

Thanks, much appreciated, fair play to you!

You're right it doesn't matter (I hope), I put it after postbit thing and it works! :-D

fritzelly

If you use this extension instead of Stylus you can add some javascript

https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld?hl=en

Show full date and time for all posts

$(".postbit-header time").each(function(index) {
 $(this).text($(this).attr("title"));
});

Show thanks on a post - Vanilla only returns 10 thanks but its better than nothing

$(".ReactButton-Like .Count").each(function(index) {
	postid=$(this).closest("li").attr("id")
	post_id=postid.split("_")
	post_id=post_id[1]
	$("<div id='thanks_"+post_id+"' style='margin-left: 246px !important;background:#fff;padding:10px;color:#c12525'>Thanks by: </div>" ).insertAfter($(this).closest(".postbit-wrapper"));
$.ajax({ url: "https://boards.ie/reactions/users/Comment/"+post_id+"/like?DeliveryType=VIEW",
   method: "GET",
   custom: post_id })
.done( function(data, textStatus, jqXHR) {
	var postID = this.custom; 
	$(data).find('li a').each(function(index) {
		if($(this).attr("title")!=undefined){
			$('#thanks_'+ postID).append($(this).attr("title")+", ");
	}})
});});

Auto bookmark threads when you first post a comment - thanks to Ads By Google

$('#Form_Comment').submit(function(){
  if (!$('.Bookmark').eq(0).hasClass('Bookmarked')) {
    $('.Bookmark').eq(0).click();
  }
});

fritzelly

https://boards.ie/discussion/comment/117646713#Comment_117646713

You have some css messing up the position of the buttons - they should always be at the bottom, maybe @280.. style is messing that up

edit - at a quick glance, remove this

.Reactions {
	padding: 0 !important;
	margin: 0 !important;
	margin-right: 10px !important;
	position: unset !important;
	float: right !important;
}

GBX

https://boards.ie/discussion/comment/117647347#Comment_117647347

Noob question: Can this code be added with the previous code posted using the ext you linked to?

fritzelly

https://boards.ie/discussion/comment/117647414#Comment_117647414

Yeah, the extension i posted has two panels - left for JS and right for CSS

ohnonotgmail

so i changed to the extension that does both the CSS and JS and it messes up some of the CSS that was working with the other extension. Specifically it messes up the CSS that fixes the header and breadcrumbs. the breadcrumbs are still fixed but the header now scrolls with the page. I moved the CSS back to Stylebot and it works properly. I'm still using it for the JS and it works well so thanks very much to @fritzelly

GBX

Ive switched and added the JS code Fritzelly posted. Working perfect. Thanks !

fritzelly

https://boards.ie/discussion/comment/117647445#Comment_117647445

Curious its the extension I use with that css (but my original css)

ohnonotgmail

https://boards.ie/discussion/comment/117647470#Comment_117647470

the only difference between mine and yours is with the items in bold below. I removed 20px from the values you used because it pushed the breadcrumbs too far down the page and left a gap between the header and breadcrumbs

.pre-header{position: fixed;}

.BreadcrumbsBox{position: fixed; width: 100%; top: 48px;height: 20px;}

#titleBar{position: fixed; top: 0px; width: 100%;}

.Container{margin-top:70px}

28064212

https://boards.ie/discussion/comment/117647386#Comment_117647386

Sort of. If you remove that section, the Reactions will stick to the bottom. However, it also means that the buttons are overlaid on the post (instead of after it). Generally not an issue, until the last line of a post is a long one and the buttons are sitting on top of it. The default style gets around it by adding extra vertical space after the message content, which (IMO) is worse, so the the placement immediately after post content is my compromise.

GBX

Now im finding the "flag" "quote" "like" FB/TW buttons are hovering over longer posts

Andrew76

@GBX - I get the same so I prefer to leave that .Reactions block of code in and have the buttons float a little in some posts.

P.S. I'm using this piece of JS to hide the 'Flag' and 'Like' text - I prefer not having them. It's a modified version of someone else's code on here but I can no longer find his post. Haven't got the Quote removal working yet.

$(document).ready(function() {
	$(".ReactLabel").text(function(index, text) {
	  if (text === 'Flag' || text === 'Quote' || text === 'Like') return '';
	});
});

fritzelly

This is my CSS - which works fine for me

.Section-Discussion .Content .pageBox .pageBox .pageBox::after{height:0 !important}
.Section-Discussion .Content .pageBox .pageBox .pageBox::before{height:0 !important}
#PagerAfter a,#PagerAfter span ,.MessageList .ItemComment .Item-BodyWrap, .MessageList .ItemDiscussion .Item-BodyWrap{border:0}

#Item_0 h1 {
  font-size: 20px !important;
  padding-bottom: 10px;
}
.ReactButton.PopupWindow,.Panel.Panel-main {
  display: none !important;
}
.postbit-message {
  padding-top: 5px !important;
}
.Content.MainContent {
  width: 100% !important;
}
.Section-Discussion .Content .pageBox .pageBox::before{height:0em}
.js-embed.embedResponsive > div
{margin:0 !important;}

.postbit-postbody{background:#fafafa !important}
.pageHeadingBox h2 {font-size:20px !important;}
.richEditor-textWrap.ql-container{
	flex-direction: inherit !important;
}

.Message.userContent {font-size:14px !important}
.postbit-postdetails {
	border-right:1px solid #a6a6a6;
	border-left:1px solid #a6a6a6;
}
.js-embed.embedResponsive [class*="userLabel-compact"] {
  border-bottom: 1px solid !important;
}
.userContent.userContent > p:not(:first-child), .UserContent.UserContent > p:not(:first-child){margin:0 !important}

.userContent.userContent.userContent.userContent > :not(:last-child):not(.embedResponsive), .UserContent.UserContent.UserContent.UserContent > :not(:last-child):not(.embedResponsive){margin:0 !important}

.pre-header{position: fixed;}
.BreadcrumbsBox{position: fixed !important; width: 100%; top: 68px;height: 20px;}
#titleBar{position: fixed; top: 20px; width: 100%;}
.Container{margin-top:70px}

.userShadow{
border:1px solid #c4c4c4;
box-shadow: 5px 5px #c4c4c4;
margin-bottom: 20px !important;
}
.MessageForm.CommentForm.FormTitleWrapper.Role_RegisteredUsersCommentFormWrap.pageBox {padding-left:30px;}

GBX

Sorted now. Re added the above. Cheers

fritzelly

This is for "popping" out quoted posts

JS

$(window).load(function() {
$(".embedExternal-content:has(article)").addClass("userShadow")
});

CSS

.userShadow{
border:1px solid #c4c4c4;
box-shadow: 5px 5px #c4c4c4;
margin-bottom: 20px !important;
}

ohnonotgmail

I tried your CSS @fritzelly with the extension you recommended and it seems to work fine. I think what may have caused the issue I had is that I now have the very top header with "Talk to... Topics Regional" back. The CSS I was using was hiding this as it is pretty useless. I think that was the cause of the problem

Shlippery

https://boards.ie/discussion/comment/117644398#Comment_117644398

^ This is an excellent starting point. The full width made things 10000x times better on 1440p monitor.

Discodog

https://boards.ie/discussion/comment/117644624#Comment_117644624

I can copy but when I right click on Stylebot there's no paste option

fritzelly

https://boards.ie/discussion/comment/117648146#Comment_117648146

Did you try CTRL + V

Discodog

https://boards.ie/discussion/comment/117648230#Comment_117648230

I did now & it's brilliant. Many thanks

fritzelly

Add a link to every comment for easier direct linking to without quoting

JS

$(".ItemComment").each(function(index) {
post_id=$(this).attr("id").split("_")
$("<div class='post_link_ref'><a href='https://boards.ie/discussion/comment/"+ post_id[1]+"#"+$(this).attr("id")+"'>"+post_id[1] +"</a></div>").appendTo($(this).find(".postbit-header"))
});

CSS

.post_link_ref, .post_link_ref a {
	float:right;
	color:#fff;
	font-size: 12px;
}

hotisnottheword

https://boards.ie/discussion/comment/117647608#Comment_117647608

Thanks for this!

For anyone on Firefox, this CSS plus an add-on called Stylus works great from what I can tell. I'm not endorsing Stylus BTW, just installed it as I don't use Chrome and the wasted white space was wrecking my head a bit. Here's a link https://addons.mozilla.org/en-US/firefox/addon/styl-us/

If anyone has a better recommendation regarding Firefox add-ons let me know!

fritzelly

https://boards.ie/discussion/comment/117648689#Comment_117648689

There is this one as well that has CSS and JS

https://addons.mozilla.org/en-US/firefox/addon/custom-style-script/

Andrew76

https://boards.ie/discussion/comment/117648439#Comment_117648439

That's incredibly useful thank you! This thread really should be stickied. Fantastic contributions. 😊

fritzelly

Had 20 minutes free so this is an attempt at a Dark Mode theme - I don't use dark mode as most are horrible and burn my eyes - what do ya think

.Frame,.postbit-postdetails,.postbit-userinfo,.postbit-postbody {
background: #2f4050 !important;
color:#dadcde 
}
.Frame a {text-decoration:underline}

#PagerAfter a:not(.LastPage),#PagerBefore a:not(.LastPage),h1,h2,.userinfo-username-title,.paragraphMenu1-formattingMenus-button {
color:#dadcde !important
} 

.atMention {color:#dadcde !important;}
button#paragraphMenu1-formattingMenus-button {
  color: #fff;
}

ohnonotgmail

https://boards.ie/discussion/comment/117649004#Comment_117649004

a definite improvement. Much easier on the eye. a couple of observations if you don't mind.

quoted posts still appear as they did before. Perhaps change the background to a lighter shade of the colour you used for the page background.

the box you write comments in has the same issue.

fritzelly

https://boards.ie/discussion/comment/117649025#Comment_117649025

Something like this? Just add to previous code

.js-embed.embedResponsive * {
  background: rgb(62 81 117);
  color: #dadcde;
}
article a {
  color: #dadcde !important;
}
.ql-editor{  background: rgb(62 81 117);
  color: #dadcde !important;}
[id*="thanks_"]{
background: #2f4050 !important;
color:#dadcde !important
}

ohnonotgmail

https://boards.ie/discussion/comment/117649089#Comment_117649089

thats a definite improvement. Out of interest what tool are you using to create the CSS?

fritzelly

https://boards.ie/discussion/comment/117649133#Comment_117649133

Just by hand - use Chrome's inspector to find the correct targets

28064212

https://boards.ie/discussion/comment/117648689#Comment_117648689

I am endorsing Stylus 🙂 It's open-source, actively developed, and pretty much the gold standard for custom CSS.

https://boards.ie/discussion/comment/117648779#Comment_117648779

I'm not (at all) recommending that you don't use this. I've never used it or investigated it.

However, if I had to pick a method to add custom JS, I'd go with Violentmonkey. Again, open-source, strong development community, and very widely used

fritzelly

Unbold read threads in My Bookmarks - I like the visual cues and if it wasn't for the post in the general thread I would have stuck with the old My Threads tab

JS

$(".forum-threadlist-table tr").each(function(index) {
unread = $(this).find("strong.HasNew")
if(unread.length<1){
	$(this).find(".threadbit-threadlink").removeClass("unread")
}});

If you want to remove the New indicator then

$(".forum-threadlist-table tr").each(function(index) {
unread = $(this).find("strong.HasNew")
if(unread.length<1){
	$(this).find(".threadbit-threadlink").removeClass("unread")
}
$(this).find("strong").remove()
});

fritzelly

A simple css one - just to highlight links as they are basically indistinguishable from normal text

.Item-Body a {text-decoration:underline !important}

smuggler.ie

Now this one is worth big money! Thanks all contributing here. For me(0 knowledge in CSS coding) it might be saver from abandoning boards.

Stylus on FF work great so far. @fritzelly your blue much better than un-moded, but i allowed myself to tweak it. Would love to get original boards colours if anyone know them codes. Also, is there way to to make quoted boxes in the posts coloured as oppose white, different shade perhaps ignore that, found it in the later post.

Thanks

Inviere

An absolute night and day difference. It's incredible what a few lines of CSS code from a user here has done for me in the space of five minutes. Hats off to fritzelly for this, they've more than likely helped retain users on the site here. My ONLY issue is I'm getting unresponsive pages the odd time while thanking posts, and indeed writing them as drafts get saved. Here's my CSS text, with all the improvements to date added in:

Inviere

.pre-header{position: fixed;}

.BreadcrumbsBox{position: fixed; width: 100%; top: 48px;height: 20px;}

#titleBar{position: fixed; top: 0px; width: 100%;}

.Container{margin-top:70px}

header {

  position: static !important

}

#themeHeader {

  display: none !important;

}

.Frame-content, .Breadcrumbs {

  margin-top: 0 !important;

  margin-bottom: 0 !important;

}

[class^="vanilla-"][class$="-container-fullGutter-container-fullGutter-container-fullGutter"], .Breadcrumbs {

  max-width: unset !important;

  padding-left: 15px !important;

  padding-right: 15px !important;

}

.Container {

  max-width: none !important;

  padding-left: 15px !important;

  padding-right: 15px !important;

}

.Content.MainContent {

  width: 100% !important;

  flex-shrink: 0 !important;

}

.Panel-main {

  display: none !important;

}

.forum-threadlist-wrapper {

  margin-top: 0 !important;

}

.PageControls {

  float: unset !important;

  display: unset !important;

  margin: 0 !important;

}

.PageControls-filters, .PagerBefore, .NewDiscussion, .BoxNewDiscussion, .NumberedPager {

  margin: 0 !important;

  padding-top: 0 !important;

  padding-bottom: 0 !important;

  padding-left: 0 !important;

}

.PageControls-filters {

  width: 100% !important;

}

.InformMessages {

  left: auto !important;

  right: 0 !important;

}

/* threads */

.postbit-message, .Message.userContent {

  padding: 0px !important;

  margin: 0px !important;

}

.postbit-message {

  padding-left: 10px !important;

  padding-right: 10px !important;

}

.postbit-message ~ br {

  display: none !important;

}

.postbit-userinfo br {

  display: none !important;

}

.postbit-userinfo {

  padding-top: 8px !important;

  height: 100% !important;

}

.ItemComment::after, .ItemComment::before, .MessageList::before, .MessageList::after {

  display: none !important;

}

.MessageList {

  margin-bottom: 0 !important;

}

.embedExternal {

  margin: 0 !important;

  width: 100% !important;

  clear: none !important;

}

.vanilla-d7cut4-collapsableContent-heightContainer {

  height: auto !important;

}

.vanilla-toe1gy-collapsableContent-gradient {

  opacity: 0 !important;

}

.vanilla-1vww8zj-collapsableContent-footer {

  display: none !important;

}

.Reactions {

  padding: 0 !important;

  margin: 0 !important;

  margin-right: 10px !important;

  position: unset !important;

  float: right !important;

}

.postbit-postbody .clearleft {

  clear: both !important;

}

.postbit-header time {

  visibility: hidden !important;

}

.postbit-header time::after {

  content: attr(title) !important;

  visibility: visible !important;

  position: absolute !important;

  left: 25px !important;

}

.bodybox-wrap {

  padding-left: 100px !important;

}

#latest + .Comment .postbit-header {

  font-weight: bold !important;

}

/* forums */

.forum-threadlist-thread-lastpost {

  float: left !important;

}

.forum-threadlist-thread-lastposter {

  float:right !important;

  width: unset !important;

}

.Category {

  float: right !important;

}

.Frame-content .HomepageTitle {

  display: block !important;

}

.ReactButton.PopupWindow { display: none !important;}

.userShadow{

border:1px solid #c4c4c4;

box-shadow: 5px 5px #c4c4c4;

margin-bottom: 20px !important;

}

.post_link_ref, .post_link_ref a {

  float:right;

  color:#fff;

  font-size: 12px;

}

.Frame,.postbit-postdetails,.postbit-userinfo,.postbit-postbody {

background: #2f4050 !important;

color:#dadcde 

}

.Frame a {text-decoration:underline}

#PagerAfter a:not(.LastPage),#PagerBefore a:not(.LastPage),h1,h2,.userinfo-username-title,.paragraphMenu1-formattingMenus-button {

color:#dadcde !important

} 

.atMention {color:#dadcde !important;}

button#paragraphMenu1-formattingMenus-button {

  color: #fff;

}

.js-embed.embedResponsive * {

  background: rgb(62 81 117);

  color: #dadcde;

}

article a {

  color: #dadcde !important;

}

.ql-editor{  background: rgb(62 81 117);

  color: #dadcde !important;}

[id*="thanks_"]{

background: #2f4050 !important;

color:#dadcde !important

}

.Item-Body a {text-decoration:underline !important}