Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

DIY Desktop Site Customisation - Use at own risk

245678

Comments

  • Registered Users Posts: 40,060 ✭✭✭✭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



  • Registered Users Posts: 2,255 ✭✭✭Shlippery


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



  • Registered Users Posts: 15,795 ✭✭✭✭Discodog


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



  • Registered Users Posts: 17,181 ✭✭✭✭fritzelly




  • Registered Users Posts: 15,795 ✭✭✭✭Discodog




  • Advertisement
  • Registered Users Posts: 17,181 ✭✭✭✭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;
    }
    


  • Registered Users Posts: 1 hotisnottheword



    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!



  • Registered Users Posts: 17,181 ✭✭✭✭fritzelly




  • Moderators, Computer Games Moderators Posts: 10,035 Mod ✭✭✭✭Andrew76


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



  • Registered Users Posts: 17,181 ✭✭✭✭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;
    }
    




  • Advertisement
  • Registered Users Posts: 40,060 ✭✭✭✭ohnonotgmail



    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.



  • Registered Users Posts: 17,181 ✭✭✭✭fritzelly



    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
    }
    


  • Registered Users Posts: 40,060 ✭✭✭✭ohnonotgmail


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



  • Registered Users Posts: 17,181 ✭✭✭✭fritzelly



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



  • Registered Users Posts: 10,434 ✭✭✭✭28064212


    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)



  • Registered Users Posts: 17,181 ✭✭✭✭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()
    });
    




  • Registered Users Posts: 17,181 ✭✭✭✭fritzelly


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


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


  • Registered Users Posts: 4,055 ✭✭✭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

    Post edited by smuggler.ie on


  • Registered Users Posts: 7,423 ✭✭✭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:



  • Registered Users Posts: 7,423 ✭✭✭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}



  • Advertisement
  • Moderators, Computer Games Moderators Posts: 10,035 Mod ✭✭✭✭Andrew76


    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")
        }
    });
    




  • Registered Users Posts: 4,055 ✭✭✭smuggler.ie


    @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


  • Registered Users Posts: 4,472 ✭✭✭archfi


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

    The issue is never the issue; the issue is always the revolution.

    The Entryism process: 1) Demand access; 2) Demand accommodation; 3) Demand a seat at the table; 4) Demand to run the table; 5) Demand to run the institution; 6) Run the institution to produce more activists and policy until they run it into the ground.



  • Registered Users Posts: 7,423 ✭✭✭Inviere


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



  • Registered Users Posts: 4,472 ✭✭✭archfi


    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??

    The issue is never the issue; the issue is always the revolution.

    The Entryism process: 1) Demand access; 2) Demand accommodation; 3) Demand a seat at the table; 4) Demand to run the table; 5) Demand to run the institution; 6) Run the institution to produce more activists and policy until they run it into the ground.



  • Registered Users Posts: 4,472 ✭✭✭archfi


    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 issue is never the issue; the issue is always the revolution.

    The Entryism process: 1) Demand access; 2) Demand accommodation; 3) Demand a seat at the table; 4) Demand to run the table; 5) Demand to run the institution; 6) Run the institution to produce more activists and policy until they run it into the ground.



  • Registered Users Posts: 17,181 ✭✭✭✭fritzelly



    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



  • Registered Users Posts: 4,055 ✭✭✭smuggler.ie


    @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



  • Registered Users Posts: 17,181 ✭✭✭✭fritzelly


    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
  • Registered Users Posts: 4,472 ✭✭✭archfi


    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!

    The issue is never the issue; the issue is always the revolution.

    The Entryism process: 1) Demand access; 2) Demand accommodation; 3) Demand a seat at the table; 4) Demand to run the table; 5) Demand to run the institution; 6) Run the institution to produce more activists and policy until they run it into the ground.



Advertisement