Advertisement
How to add spoiler tags, edit posts, add images etc. How to - a user's guide to the new version of Boards
Mods please check the Moderators Group for an important update on Mod tools. If you do not have access to the group, please PM Niamh. Thanks!

DIY Desktop Site Customisation - Use at own risk

245678

Comments



  • 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





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





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







  • Advertisement



  • 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!





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





  • 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;
    }
    




  • Advertisement



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






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




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






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





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

    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

    Boardsie Enhancement Suite - a browser extension to make using post-migration Boards on desktop a better experience (includes full-width display, keyboard shortcuts, and a dark mode setting)





  • 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()
    });
    






  • 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

    Post edited by smuggler.ie on




  • 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:





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



  • Advertisement


  • Think I'm using a combination of CSS from different users here and it's made a huge difference, some JS too. I commented out the dark mode CSS as it doesn't seem to work outside of a thread and some sections are still white, so am just using Dark Reader for the time being. Overall the site on desktop is much better to use now.

    CSS:

    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;
    }
    /* post number and url */
    .post_link_ref,
    .post_link_ref a {
        float: right;
        color: #fff;
        font-size: 12px;
    }
    /* highlight urls */
    .Item-Body a {
        text-decoration: underline !important
    }
    /* dark mode */
    /*
    .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
    }
    */
    


    JS:

    $(document).ready(function () {
        $(".ReactLabel").text(function (index, text) {
            if (text === 'Flag' || text === 'Quote' || text === 'Like') return '';
        });
    });
    $(".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") + ", ");
                    }
                })
            });
    });
    $(".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"))
    });
    $(".forum-threadlist-table tr").each(function (index) {
        unread = $(this).find("strong.HasNew")
        if (unread.length < 1) {
            $(this).find(".threadbit-threadlink").removeClass("unread")
        }
    });
    






  • @Inviere after testing your code on Stylus/FF. Unless its intended that way, your header scrolls up leaving crumbs floating. Apologies if wrong terminology

    to restore i have made comment of this code part... learning😉

    /*header {

      position: static !important

    }

    #themeHeader {

      display: none !important;

    }*/

    Post edited by smuggler.ie on




  • Two little bits that were annoying me personally:

    Shifting the 'New Post' indicator to the left

    .HasNew {
       float: left !important;
       width: unset !important;
    }
    .threadbit-threadlink {
       margin-left: 10px !important;
    }
    

     Getting rid of the unclickable, useless oversized menu when you hover over a username - you can still click on username to go direct to profile or avatar to get the popup with links to profile/send message

    .user-tools {
        visibility: hidden !important;
    }
    






  • Not sure, on my end the whole header floats - menu bar AND breadcrumb section. Not my code also, just a combination of what's been posted so far :)





  • Something i've just read on one of the other Feedback threads just now has got me thinking.

    Someone asked could the full date/time on posts be reinstated and Mark from Boards replied saying it's on their list but they haven't got around to it.

    Now, I am not a web develeoper at all, I knew about CSS tangentially and knew briefly what it could do but never bothered with iot to improve sites to my liking - the past three weeks has changed that and the basics I've learned here are brilliant.

    BUT, can anyone who knows explain to me if changing CSS individually, which we all have don can reinstate the full date/time on posts, does changing the css within boards have some massive timeline or backend delays that last three weeks and counting? Does it need to be approved by vanilla or what?

    Has boards lost the ability to refine their own users interface/look without referring to the platform hoster all the time - is that the way it works?

    If not, I can't understand the massive delays to what appears to be snippets of css code??






  • PS I think this thread full of codeblocks is slowing down my browser!

    No other thread does that except if there is a codeblock on it.







  • The date time is not a CSS issue, it's a backend code issue - when they output the html they are only outputting the day and month, the workaround I posted earlier in a JS snippet


    And there is a definite issue with the code block





  • @archfi as it was mentioned by @fritzelly , on my learning curve, i am navigating in "Inspect (Q)" on FF. Under style editor tab there is "custom.css" - without having any knowledge in CSS coding can see some rules that could be linked to recent minor changes





  • Boards have to request a change

    Vanilla approves and adds the change and also adds it to their core code for boards


    So yeah boards has given up control of the code even for something as insignificant as one line of css 



  • Advertisement


  • Thanks for the explainer @fritzelly, my browser completely locked up when replying to your first reply

    That's quite astounding and explains somewhat the huge delay in rectifying many annoyances for users though not completely - by now, every single annoyance should have been sent to the place 5 hours behind to get fixed :)

    I think maybe posters here should 'un-code block' the stuff we've posted on thread - it's unbearable to navigate the thread now!




Leave a Comment

Rich Text Editor. To edit a paragraph's style, hit tab to get to the paragraph menu. From there you will be able to pick one style. Nothing defaults to paragraph. An inline formatting menu will show up when you select text. Hit tab to get into that menu. Some elements, such as rich link embeds, images, loading indicators, and error messages may get inserted into the editor. You may navigate to these using the arrow keys inside of the editor and delete them with the delete or backspace key.

Advertisement