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

I made a couple of nice themes for boards.ie. Check them out!

  • 03-02-2020 6:55am
    #1
    Posts: 17,381 Charleigh Most Quadrangle


    I've been off work for the last couple of weeks and have been playing around with theming the site.. I don't like the default skin and I really dislike the dark skin. Like all web-devs, I like when people use something I've made so I'm sharing them. There are quite a lot of changes to the site overall.. Not just colours.
    For now, it's just two dark modes. Dark purple and dark blue. I'll add two clear themes later this week, or you can find them in the Feedback "Skins" thread and install them yourself.


    Screenshot:

    AvoNwuf.png


    The extension is Stylus. I use this extensively all over the internet as other users submit styles for all the big sites. I have dark modes for FB, the Guardian, Google etc. so even if you don't want these themes, I still highly recommend the extension.

    Firefox: https://addons.mozilla.org/en-US/firefox/addon/styl-us/
    Chrome: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en

    How to install: Click the icon and click Find Styles. Look for Dark Blue / Dark Charade

    NdoL5mX.png



    They're not 100% finished yet so feedback is welcome. Bump if you like them so others will see them.

    :)
    Post edited by Raichu on


«13

Comments

  • Posts: 7,712 ✭✭✭[Deleted User]


    What information do you get if someone uses them?


  • Posts: 17,381 Charleigh Most Quadrangle


    What information do you get if someone uses them?

    Me? It's just CSS, not JS, so it's impossible for me to get anything. The extension has hundreds of thousands of installs and is recommended by Firefox. It has 350k installs on Chrome and is 4.7 / 5.


  • Registered Users Posts: 4,122 ✭✭✭BeerWolf


    I don't trust Charleigh Most Quadrangle!


  • Closed Accounts Posts: 1,245 ✭✭✭Gretas Gonna Get Ya!


    What if you collect our personal details from this script... and then before we know it, we're kidnapped and we wake up drugged and lying in a warm bathtub, having our organs harvested for sale on the south american medical black market?

    It does happen! :D


  • Posts: 17,381 Charleigh Most Quadrangle


    What if you collect our personal details from this script... and then before we know it, we're kidnapped and we wake up drugged and lying in a warm bathtub, having our organs harvested for sale on the south american medical black market?

    It does happen! :D

    I live in South East Asia so I'll be using the Bangkok medical black market.


  • Advertisement
  • Registered Users Posts: 1,990 ✭✭✭Hodors Appletart


    excellent thank you thar black and orange halloween theme is shocking


  • Registered Users Posts: 17,469 ✭✭✭✭Mr. CooL ICE


    Mod: Stickied. Because this is pretty damn awesome.


  • Closed Accounts Posts: 2,910 ✭✭✭begbysback


    I hate ads, but the skins are cool


  • Posts: 17,381 Charleigh Most Quadrangle


    Mod: Stickied. Because this is pretty damn awesome.

    Thanks. I thought it might be one or two hundred lines but vBulletin is so hard to work with, it ended up being over 700 with all the comments stripped out. There aren't enough css classes added to the html compared to what I'm used to working with.

    I made a few changes since I posted so anyone who started using it early, and the new post button while viewing a forum is half hidden, should do the upgrade in the options menu of the extension.


  • Registered Users Posts: 29,294 ✭✭✭✭Mint Sauce


    begbysback wrote: »
    I hate ads, but the skins are cool

    Is that a new Poster?

    :D


  • Advertisement
  • Posts: 0 [Deleted User]


    Can they be used on touch site, Mr Google?


  • Posts: 17,381 Charleigh Most Quadrangle


    Can they be used on touch site, Mr Google?

    Only Firefox on mobile can have extensions like Stylus. No idea why Chrome doesn't allow them. Not really worth the effort personally as I think the Touch theme is fine, and very few people would use them.


  • Registered Users Posts: 49 MissDisaster


    What if you collect our personal details from this script... and then before we know it, we're kidnapped and we wake up drugged and lying in a warm bathtub, having our organs harvested for sale on the south american medical black market?

    It does happen! :D

    At this stage Id welcome the warm bubble bath alone.:pac:


  • Registered Users Posts: 9,167 ✭✭✭Fr_Dougal


    Me? It's just CSS, not JS, so it's impossible for me to get anything. The extension has hundreds of thousands of installs and is recommended by Firefox. It has 350k installs on Chrome and is 4.7 / 5.

    Any chance you could have the site and give us back the old version?

    Won’t. Say. A . Word. To anyone.


  • Closed Accounts Posts: 24,878 ✭✭✭✭ Ariella Ashy Letter


    Fr_Dougal wrote: »
    Any chance you could have the site and give us back the old version?

    Won’t. Say. A . Word. To anyone.

    I hate that I can't navigate between the different forums like I used to. I'm barely using boards.ie now for that reason.


  • Registered Users Posts: 9,893 ✭✭✭Canis Lupus


    I hate that I can't navigate between the different forums like I used to. I'm barely using boards.ie now for that reason.

    What version are you using? I've always just used the default skin and navigation is the same as it has always been with the old school drop down menus etc. I even force it on the mobile which is more faffy but bearable.


  • Posts: 17,381 Charleigh Most Quadrangle


    What version are you using? I've always just used the default skin and navigation is the same as it has always been with the old school drop down menus etc. I even force it on the mobile which is more faffy but bearable.

    Old school as in you have around 15 menus along the top, or four starting with talk to.?


  • Registered Users Posts: 9,893 ✭✭✭Canis Lupus


    Old school as in you have around 15 menus along the top, or four starting with talk to.?

    4 starting with Talk To although I appreciate it changed a while back it's not intrinsically different. I've never bothered with mobile, touch or enhanced or whatever the names for all those different versions were/are.


  • Registered Users Posts: 33,650 ✭✭✭✭Hotblack Desiato
    Restaurant at the End of the Universe


    Based on Charleigh Most Quadrangle's work (much appreciated) I've changed the colours to get as close as possible to the really old white/beta skin (colours picked off an old screenshot.)
    /* FONTS */
    
    /* Primary Dark blue font */
    .page a,
    .nav-drop-menu a ,
    #breadcrumb a,
    #footer a,
    .time,
    legend {
    /*  color: #3c508c aliceblue !important;*/
        /*Poster Name*/
      /*color: #3c508c !important;*/
      color: #22229c !important;
        
    }
    
    /* White Font */
    .thead strong,
    .thead a,
    .thead,
    .thead span,
    .tfoot strong,
    .tfoot a,
    .tfoot,
    .tfoot span,
    .tcat a{
    	color: #fff !important;
    }
    
    /* Black Font and Main Post Background */
    .alt1 {
        color: #182339;
        /*background: #f8f8ff;*/
        background: #f5f5ff;
    }
    .alt2 {
        color: #182339;
     /*       background: #efefef;*/
        /*Left Panel & Quoted Post Background*/
        /*background: #e8e8f8;*/
        background: #e1e4f2;
    }
    /* BACKGROUNDS */
    
    /* Lightest blue back */
    body,
    .body-override,
    #nav .nav-drop-menu,
    #nav .columncontainer
    #nav .title,
    .page,
    #footer {
      background: #ffffff;
    }
    
    
    /* Dark blue back */
    .nav-area,
    #nav > li.hover > a,
    .generic-wrapper-header .active {
      background: #7f98c4  !important;
      color: #fff !important;
    }
    #nav > li.hover {
        background: #81938e !important;
    }
    
    /* Darkest blue back */
    #header,
    .threads-wrapper-header,
    .generic-wrapper-header,
    .thead,
    .tfoot {
      /*background: #5572a5 !important;*/
      background: #3e5687 !important;
    }
    
    /* BUTTONS */
    
    .gradient_button:not(.grey),
    .jumpbutton ,
    #adv-search-form button span {
    	background: #5572a5 !important;
    	border: 1px solid #4a5c58 !important;  
    }
    .gradient_button:not(.grey):hover,
    .jumpbutton:hover ,
    #adv-search-form button span:hover {
    	background: #3c508c !important;
    	border: 1px solid #4a5c58 !important;
    }
    .gradient_button.grey {
      background: #f9f9f9;
    }
    #adv-search-form button {
      border: 0 !important;
    }
    
    /* BORDERS */
    
    /* Dark blue border */
    .nav-area {
      border-bottom: 1px solid #3c508c !important;
    }
    #nav li {
      border-left: 1px solid #3c508c !important;
    }
    
    
    /* MISC */
    
    /* User / My forums dropdown */
    #userlist div,
    #forumlist div,
    #userlist a,
    #forumlist a {
      background: #7f98c4 !important;
      color: #fff !important;
    }
    #userlist a:hover,
    #forumlist a:hover {
      background: #5572a5 !important;
    }
    #userlist,
    #forumlist {
      margin-top: 4px !important;
      background: none !important;
    }
    #userlist .title,
    #forumlist .title {
      border-bottom-color: #5572a5
    }
    /* Tabs on User Page */
    .tcat {
      background: #3c508c;
    }
    #profile_tabs .tab_list li:hover {
      background: #3c508c !important;
    }
    .tborder, 
    .tcat {
      border: 1px solid #3c508c !important;
      border-bottom: 1px solid #3c508c !important;
    }
    
    /* Outline of Reply Box */
    .panelsurround {
        background-color: #f5f5ff;
    }
    
    /* Message Box */
    #vB_Editor_QR,
    #vB_Editor_QR_iframe,
    #vB_Editor_001,
    #vB_Editor_001_iframe {
      border: 1px solid #3c508c !important;
    }
    
    /* Search Results */
    .results-wrapper,
    .facet_wrapper {
    	background: #fff;
    	border: 1px solid #81938e;
    }
    .results-wrapper a,
    .facet_wrapper a {
    	color: #3f4d4a !important;
    }
    
    /* Recolour Items */
    /* #ddd */
    .arrow-disable {
      filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(2381%) 
    hue-rotate(291deg) brightness(91%) contrast(90%);
    }
    
    /* QOL Fix Min Width of page */
    body, .holder, #header {
      min-width: 500px !important;
    }
    /* Hide share buttons to save pagination when screen gets small */
    @media only screen and (max-width:1000px) {
      .social_share_bar {
        display: none !important;
      }
    }
    /* Fix submit button */
    @media only screen and (max-width:900px) {
      #vB_Editor_QR_formbuttons {
        display: inline
      }
    }
    
    /* Fewer ads */
    .top_adslot_wrapper,
    .sponsored-content,
    #top_adslot_main,
    iframe[title="3rd party ad content"] {
      display: none;
    }
    
    

    Install Stylus, click on it, click on 'write style for boards.ie', paste in the above and save.

    Enjoy!

    It took a while but I don't mind. How does my body look in this light?



  • Registered Users Posts: 9,286 ✭✭✭seligehgit


    Based on Charleigh Most Quadrangle's work (much appreciated) I've changed the colours to get as close as possible to the really old white/beta skin (colours picked off an old screenshot.)
    /* FONTS */
    
    /* Primary Dark blue font */
    .page a,
    .nav-drop-menu a ,
    #breadcrumb a,
    #footer a,
    .time,
    legend {
    /*  color: #3c508c aliceblue !important;*/
        /*Poster Name*/
      /*color: #3c508c !important;*/
      color: #22229c !important;
        
    }
    
    /* White Font */
    .thead strong,
    .thead a,
    .thead,
    .thead span,
    .tfoot strong,
    .tfoot a,
    .tfoot,
    .tfoot span,
    .tcat a{
    	color: #fff !important;
    }
    
    /* Black Font and Main Post Background */
    .alt1 {
        color: #182339;
        /*background: #f8f8ff;*/
        background: #f5f5ff;
    }
    .alt2 {
        color: #182339;
     /*       background: #efefef;*/
        /*Left Panel & Quoted Post Background*/
        /*background: #e8e8f8;*/
        background: #e1e4f2;
    }
    /* BACKGROUNDS */
    
    /* Lightest blue back */
    body,
    .body-override,
    #nav .nav-drop-menu,
    #nav .columncontainer
    #nav .title,
    .page,
    #footer {
      background: #ffffff;
    }
    
    
    /* Dark blue back */
    .nav-area,
    #nav > li.hover > a,
    .generic-wrapper-header .active {
      background: #7f98c4  !important;
      color: #fff !important;
    }
    #nav > li.hover {
        background: #81938e !important;
    }
    
    /* Darkest blue back */
    #header,
    .threads-wrapper-header,
    .generic-wrapper-header,
    .thead,
    .tfoot {
      /*background: #5572a5 !important;*/
      background: #3e5687 !important;
    }
    
    /* BUTTONS */
    
    .gradient_button:not(.grey),
    .jumpbutton ,
    #adv-search-form button span {
    	background: #5572a5 !important;
    	border: 1px solid #4a5c58 !important;  
    }
    .gradient_button:not(.grey):hover,
    .jumpbutton:hover ,
    #adv-search-form button span:hover {
    	background: #3c508c !important;
    	border: 1px solid #4a5c58 !important;
    }
    .gradient_button.grey {
      background: #f9f9f9;
    }
    #adv-search-form button {
      border: 0 !important;
    }
    
    /* BORDERS */
    
    /* Dark blue border */
    .nav-area {
      border-bottom: 1px solid #3c508c !important;
    }
    #nav li {
      border-left: 1px solid #3c508c !important;
    }
    
    
    /* MISC */
    
    /* User / My forums dropdown */
    #userlist div,
    #forumlist div,
    #userlist a,
    #forumlist a {
      background: #7f98c4 !important;
      color: #fff !important;
    }
    #userlist a:hover,
    #forumlist a:hover {
      background: #5572a5 !important;
    }
    #userlist,
    #forumlist {
      margin-top: 4px !important;
      background: none !important;
    }
    #userlist .title,
    #forumlist .title {
      border-bottom-color: #5572a5
    }
    /* Tabs on User Page */
    .tcat {
      background: #3c508c;
    }
    #profile_tabs .tab_list li:hover {
      background: #3c508c !important;
    }
    .tborder, 
    .tcat {
      border: 1px solid #3c508c !important;
      border-bottom: 1px solid #3c508c !important;
    }
    
    /* Outline of Reply Box */
    .panelsurround {
        background-color: #f5f5ff;
    }
    
    /* Message Box */
    #vB_Editor_QR,
    #vB_Editor_QR_iframe,
    #vB_Editor_001,
    #vB_Editor_001_iframe {
      border: 1px solid #3c508c !important;
    }
    
    /* Search Results */
    .results-wrapper,
    .facet_wrapper {
    	background: #fff;
    	border: 1px solid #81938e;
    }
    .results-wrapper a,
    .facet_wrapper a {
    	color: #3f4d4a !important;
    }
    
    /* Recolour Items */
    /* #ddd */
    .arrow-disable {
      filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(2381%) 
    hue-rotate(291deg) brightness(91%) contrast(90%);
    }
    
    /* QOL Fix Min Width of page */
    body, .holder, #header {
      min-width: 500px !important;
    }
    /* Hide share buttons to save pagination when screen gets small */
    @media only screen and (max-width:1000px) {
      .social_share_bar {
        display: none !important;
      }
    }
    /* Fix submit button */
    @media only screen and (max-width:900px) {
      #vB_Editor_QR_formbuttons {
        display: inline
      }
    }
    
    /* Fewer ads */
    .top_adslot_wrapper,
    .sponsored-content,
    #top_adslot_main,
    iframe[title="3rd party ad content"] {
      display: none;
    }
    
    

    Install Stylus, click on it, click on 'write style for boards.ie', paste in the above and save.

    Enjoy!

    Thanks so much to both you guys.

    Love Hotblack Desiato's old style theme!!Now installed.


  • Advertisement
  • Posts: 17,381 Charleigh Most Quadrangle


    And old green which was the theme I previously used all the time.

    [HTML]/* FONTS */

    /* Primary Dark green font */
    .page a,
    .nav-drop-menu a ,
    #breadcrumb a,
    #footer a,
    .time,
    legend {
    color: #1c2321 !important;
    }

    /* White Font */
    .thead strong,
    .thead a,
    .thead,
    .thead span,
    .tfoot strong,
    .tfoot a,
    .tfoot,
    .tfoot span,
    .tcat a{
    color: #fff !important;
    }

    /* Black Font */
    .alt1, .alt2 {
    color: #000;
    }

    /* BACKGROUNDS */

    /* Lightest green back */
    body,
    .body-override,
    #nav .nav-drop-menu,
    #nav .columncontainer,
    #nav .title,
    .page,
    #footer {
    background: #e7eeee !important;
    }


    /* Dark green back */
    .nav-area,
    #nav > li.hover > a,
    .generic-wrapper-header .active {
    background: #81938e !important;
    color: #fff !important;
    }
    #nav > li.hover {
    background: #81938e !important;
    }

    /* Darkest green back */
    #header,
    .threads-wrapper-header,
    .generic-wrapper-header,
    .thead,
    .tfoot {
    background: #667b76 !important;
    }

    /* BUTTONS */

    .gradient_button:not(.grey),
    .jumpbutton ,
    #adv-search-form button span {
    background: #667b76 !important;
    border: 1px solid #4a5c58 !important;
    }
    .gradient_button:not(.grey):hover,
    .jumpbutton:hover ,
    #adv-search-form button span:hover {
    background: #4e645f !important;
    border: 1px solid #4a5c58 !important;
    }
    .gradient_button.grey {
    background: #f9f9f9;
    }
    #adv-search-form button {
    border: 0 !important;
    }

    /* BORDERS */

    /* Dark green border */
    .nav-area {
    border-bottom: 1px solid #4e645f !important;
    }
    #nav li {
    border-left: 1px solid #4e645f !important;
    }


    /* MISC */

    /* User / My forums dropdown */
    #userlist div,
    #forumlist div,
    #userlist a,
    #forumlist a {
    background: #81938e !important;
    color: #fff !important;
    }
    #userlist a:hover,
    #forumlist a:hover {
    background: #667b76 !important;
    }
    #userlist,
    #forumlist {
    margin-top: 4px !important;
    background: none !important;
    }
    #userlist .title,
    #forumlist .title {
    border-bottom-color: #667b76
    }
    /* Tabs on User Page */
    .tcat {
    background: #485854;
    }
    #profile_tabs .tab_list li:hover {
    background: #4e645f !important;
    }
    .tborder,
    .tcat {
    border: 1px solid #4e645f !important;
    border-bottom: 1px solid #485854 !important;
    }

    /* Message Box */
    #vB_Editor_QR,
    #vB_Editor_QR_iframe,
    #vB_Editor_001,
    #vB_Editor_001_iframe {
    border: 1px solid #4e645f !important;
    }

    /* Search Results */

    .results-wrapper,
    .facet_wrapper {
    background: #fff;
    border: 1px solid #81938e;
    }
    .results-wrapper a,
    .facet_wrapper a {
    color: #3f4d4a !important;
    }

    /* Recolour Items */
    /* #ddd */
    .arrow-disable {
    filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(2381%) hue-rotate(291deg) brightness(91%) contrast(90%);
    }

    /* QOL Fix Min Width of page */
    body, .holder, #header {
    min-width: 500px !important;
    }
    /* Hide share buttons to save pagination when screen gets small */
    @media only screen and (max-width:1000px) {
    .social_share_bar {
    display: none !important;
    }
    }
    /* Fix submit button */
    @media only screen and (max-width:900px) {
    #vB_Editor_QR_formbuttons {
    display: inline
    }
    }

    /* Fewer ads */
    .top_adslot_wrapper,
    .sponsored-content,
    #top_adslot_main,
    iframe[title="3rd party ad content"] {
    display: none;
    }[/HTML]

    I'm not adding these directly to the extension as they're not really fully done and I'm working on something new at the moment.

    (Other web devs - Please don't judge. I start well and as it drags on, I get sloppy with my CSS.)


  • Registered Users Posts: 33,650 ✭✭✭✭Hotblack Desiato
    Restaurant at the End of the Universe


    seligehgit wrote: »
    Love Hotblack Desiato's old style theme!!Now installed.

    All I did was tweak some of the colour values. I wouldn't have a clue about the rest of it.

    It took a while but I don't mind. How does my body look in this light?



  • Registered Users Posts: 1,990 ✭✭✭Hodors Appletart


    I see the lines of code but I have no idea what to do with them to get my boards to looks like what they are making it look like

    I have stylus and I'm using Dark Blue theme but i'm interested in the green


  • Posts: 17,381 Charleigh Most Quadrangle


    I see the lines of code but I have no idea what to do with them to get my boards to looks like what they are making it look like

    I have stylus and I'm using Dark Blue theme but i'm interested in the green

    When you click the icon, the dropdown has

    Write style for:
    www.boards.iethis URL

    Click the boards.ie part and paste in the code above. Then disable the dark blue one.


  • Registered Users Posts: 1,990 ✭✭✭Hodors Appletart


    thanks for that

    do I need to be on the lighter native theme for that to work correctly


  • Registered Users Posts: 1,990 ✭✭✭Hodors Appletart


    just answered that myself, and the answer is yes


  • Registered Users Posts: 1,990 ✭✭✭Hodors Appletart


    the green theme is pretty close to the old school green thats amazing thanks you should win a prize or something


  • Closed Accounts Posts: 24,878 ✭✭✭✭ Ariella Ashy Letter


    What version are you using? I've always just used the default skin and navigation is the same as it has always been with the old school drop down menus etc. I even force it on the mobile which is more faffy but bearable.

    Dunno which it was but it was easier to navigate that whatever I was put onto last week. I used to have handy drop down menu's, but they're all gone now.

    The one I'm on now is dreadful and very difficult to get to the forum I'd normally use so now I'm putting a keyword into the search and taking the long way to a forum.

    I'd normally use AH (like most), motorbikes and some of the sports forum ie cycling, running & athletics & swimming.

    I'm hardly using any of them now.


  • Registered Users Posts: 33,650 ✭✭✭✭Hotblack Desiato
    Restaurant at the End of the Universe


    I hate that I can't navigate between the different forums like I used to. I'm barely using boards.ie now for that reason.

    Follow the forums you use the most, then go to your Control Panel, links to your followed forums will be below your unread followed threads. I haven't used the top menu for years.

    It took a while but I don't mind. How does my body look in this light?



  • Advertisement
  • Registered Users Posts: 927 ✭✭✭d51984


    Been using the Black one the last week, really liking it. Thanks and Well done OP.

    Its a disgrace Joe!



This discussion has been closed.
Advertisement