DIY Desktop Site Customisation - Use at own risk

System · 22-07-2021 1:42pm #1

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

.

21-07-2021 10:45pm

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_ · 21-07-2021 11:14pm

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

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

Leg End Reject · 21-07-2021 11:32pm

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 · 21-07-2021 11:51pm

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 · 22-07-2021 12:29am

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 · 22-07-2021 12:34am

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 · 22-07-2021 8:41am

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 · 22-07-2021 10:58am

@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 · 22-07-2021 11:08am

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 · 22-07-2021 1:02pm

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

how does one edit a CSS in stylus?

ohnonotgmail · 22-07-2021 1:13pm

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 · 22-07-2021 1:16pm

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 · 22-07-2021 2:09pm

@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 · 22-07-2021 3:02pm

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 · 22-07-2021 3:15pm

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 · 22-07-2021 3:16pm

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 · 22-07-2021 3:40pm

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 · 22-07-2021 3:48pm

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 · 22-07-2021 3:54pm

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 · 22-07-2021 3:55pm

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

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

ohnonotgmail · 22-07-2021 4:01pm

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 · 22-07-2021 4:05pm

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

fritzelly · 22-07-2021 4:06pm

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

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

ohnonotgmail · 22-07-2021 4:13pm

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}

22-07-2021 4:15pm

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 · 22-07-2021 4:19pm

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

Andrew76 · 22-07-2021 4:25pm

@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 · 22-07-2021 4:31pm

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 · 22-07-2021 4:36pm

Sorted now. Re added the above. Cheers

fritzelly · 22-07-2021 4:49pm

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 · 22-07-2021 4:58pm

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 · 22-07-2021 5:40pm

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 · 22-07-2021 6:19pm

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

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

fritzelly · 22-07-2021 6:39pm

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

Did you try CTRL + V

Discodog · 22-07-2021 6:43pm

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

I did now & it's brilliant. Many thanks

fritzelly · 22-07-2021 7:33pm

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 · 22-07-2021 8:30pm

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 · 22-07-2021 8:56pm

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 · 22-07-2021 9:37pm

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

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

fritzelly · 22-07-2021 9:46pm

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 · 22-07-2021 9:52pm

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 · 22-07-2021 10:08pm

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 · 22-07-2021 10:21pm

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 · 22-07-2021 10:30pm

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

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

22-07-2021 11:16pm

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 · 22-07-2021 11:35pm

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 · 22-07-2021 11:50pm

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 · 23-07-2021 11:36am

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 · 23-07-2021 12:24pm

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 · 23-07-2021 12:30pm

.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}

DIY Desktop Site Customisation - Use at own risk

Comments