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!

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

  • #2
    Registered Users Posts: 17,001 ✭✭✭✭ Ads by Google


    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.

    :)


«1

Comments

  • #2


    What information do you get if someone uses them?


  • #2


    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.


  • #2


    I don't trust Ads by Google!


  • #2


    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


  • #2


    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.


  • #2


    excellent thank you thar black and orange halloween theme is shocking


  • #2


    Mod: Stickied. Because this is pretty damn awesome.


  • #2


    I hate ads, but the skins are cool


  • #2


    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.


  • #2


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

    Is that a new Poster?

    :D


  • #2


    Can they be used on touch site, Mr Google?


  • #2


    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.


  • #2


    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:


  • #2


    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.


  • #2


    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.


  • #2


    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.


  • #2


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


  • #2


    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.


  • #2


    Based on Ads by Google'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!

    Are we there yet?



  • #2


    Based on Ads by Google'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.


  • #2


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


  • #2


    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.

    Are we there yet?



  • #2


    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


  • #2


    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.


  • #2


    thanks for that

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


  • #2


    just answered that myself, and the answer is yes


  • #2


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


  • #2


    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.


  • #2


    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.

    Are we there yet?



  • #2


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

    Its a disgrace Joe!



Sign In or Register to comment.