Improve vBulletin 4 Style with Userscript/Userstyle

Discussion in 'Site Suggestions, Announcements and Guidelines' started by iaTa, Jan 30, 2015.

Thread Status:
Not open for further replies.
  1. iaTa

    iaTa Do Not Feed

    Reputations:
    1,328
    Messages:
    2,675
    Likes Received:
    197
    Trophy Points:
    81
    I've made a userscript and userstyle for the new vBulletin 4 style which improves the layout, colours, fonts and fixes various issues.

    Select the vBulletin 4 style on NBR and install GreaseMonkey/Tampermonkey add-on/extension to use the userscript, or Stylish add-on/extension to use the userstyle.

    Current version: 2.4 / 2.5 (sidebar removed)

    [​IMG]

    Userscript:

    Download v2.4: nbr.vb4.v2.4.user.js
    Download v2.5 (sidebar removed): nbr.vb4.v2.5.user.js

    Code:
    // ==UserScript==
    // @name            NotebookReview XenForo vBulletin 4 Style Tweak
    // @description     Tweak NotebookReview XenForo vBulletin 4 style
    // @version         2.4
    // @author          iaTa
    // @include         http://forum.notebookreview.com/*
    // @include         https://forum.notebookreview.com/*
    // @grant           GM_addStyle
    // ==/UserScript==
    
    GM_addStyle ( "  \
      .messageList .message {  \
      background-color: #FAFAFA !important;  \
      box-shadow: 0px 0px 0px 1px #E9E9E9 !important;  \
      border-color: #7192A8 -moz-use-text-color -moz-use-text-color !important;  \
      border-width: 24px medium medium !important;  \
      border-bottom: 26px solid #E9E9E9 !important;  \
      margin-bottom: 10px !important;  \
      padding-bottom: 0px !important;  \
      position: relative;  \
      }  \
      html {  \
      background-color: #2F4456;  \
      }  \
      .messageText {  \
      font: 13px Verdana,Arial,Tahoma,Calibri,Geneva,sans-serif;  \
      background-color: #FAFAFA !important;  \
      color: #333 !important;  \
         }  \
      .primaryContent {  \
      background-color: #FAFAFA !important;  \
         }  \
      .message .publicControls .item {  \
      margin-right: 10px;  \
      }  \
      .messageList .messageUserInfo {  \
      margin: -10px 15px -1px 0px !important;  \
      padding-bottom: 2px !important;  \
      border-right: 1px solid #E9E9E9 !important; \
      border-bottom: 1px solid #E9E9E9 !important;\
      background-color: #F2F6F8 !important;  \
         }  \
      .messageUserBlock {  \
      border: none !important;  \
      background-color: #F2F6F8 !important;  \
         }  \
      .messageUserBlock .arrow {  \
      display: none !important;  \
      }  \
      .messageUserBlock .arrow span {  \
      display: none !important;  \
      }  \
      .message .signature {  \
      border-top: 1px solid #DDDDDD;  \
      margin-bottom: 10px;  \
      padding: 10px 10px 5px 6px !important;  \
      }  \
      .bbCodeQuote .attribution {  \
      background-color: #F2F6F8 !important;  \
         }  \
      .bbCodeQuote .quoteContainer {  \
      background-color: #F2F6F8 !important;  \
      border-radius: 5px !important;  \
         }  \
      .bbCodeQuote .quoteContainer .quote {      \
      font: italic 13px Tahoma,Calibri,Verdana,Geneva,sans-serif !important;      \
         }  \
      .bbCodeBlock .type {  \
      background: none repeat scroll 0% 0% #F2F6F8 !important;  \
      border-radius: 5px !important;  \
      font-family:  Tahoma,Calibri,Verdana,Geneva,sans-serif !important;  \
      font-size: 12px !important;  \
         }  \
      .bbCodeBlock pre {  \
      background: none repeat scroll 0% 0% #F2F6F8 !important;  \
      border-radius: 5px !important;  \
         }  \
      .bbCodeBlock {  \
      border: 1px solid #417394 !important;  \
      margin: 0.5em 2em 1.5em 2em !important;  \
      border-radius: 5px !important;  \
         }  \
      .message .editDate {  \
      margin-right: 15px !important;  \
      margin-bottom: 10px !important;  \
         }  \
      .message .likesSummary {  \
      margin-right: 14px !important;  \
      margin-bottom: 10px !important;  \
         }  \
      .messageText img, .messageText iframe, .messageText object, .messageText embed {  \
      max-width: 99.75%  !important;  \
         }  \
      .message .newIndicator {  \
      margin: -5px -6px 5px 5px !important;  \
      background-color: rgb(239, 115, 115) !important;  \
      border: 1px solid rgb(191, 95, 95) !important;  \
      font-weight: 800 !important;  \
         }  \
      .message .newIndicator span {  \
      background-color: rgb(191, 95, 95) !important;  \
         }  \
      .message .publicControls .item {  \
      font-weight: bold !important;  \
         }  \
      .message .privateControls .item {  \
      font-weight: bold !important;  \
         }  \
      .LikeText {  \
      font-weight: bold !important;  \
         }  \
      .message .messageMeta a {  \
      color: #3E3E3E !important;  \
      }  \
      .message .messageMeta a:hover {  \
      color: #417394 !important;  \
      text-decoration: none !important;  \
      }  \
      .message .messageMeta {  \
      position: absolute !important;  \
      bottom: 0px !important;  \
      margin: -5px 0px -21px -230px !important;  \
      padding: 0 !important;  \
      width: 100% !important;  \
      }  \
      .authorEnd {  \
      display:none !important;  \
      }  \
      .message .messageContent {  \
      margin-right: 10px !important;  \
      margin-bottom: 20px !important;  \
      }  \
      #copyright {  \
      color: #417394 !important;  \
      }  \
      .emCtrl:hover, .emCtrl:focus, .ugc a:hover, .ugc a:focus {  \
      text-decoration: underline !important;  \
      box-shadow: none !important;  \
      }  \
      .hasJs .bbCodeSpoilerText {  \
      margin-right: 0 !important;  \
      }  \
      .PageNav a {  \
      text-decoration: none;  \
      background-color: #F2F6F8 !important;  \
      border: 1px solid #C4C4C4 !important;  \
      text-align: center !important;  \
      width: 23px !important;  \
      color: rgb(65, 115, 148) !important;  \
      border-radius: 0px !important;  \
      }  \
      .PageNav {  \
      line-height: 22px !important;  \
      }  \
      .PageNav .scrollable {  \
      width: 137px !important;  \
      height: 24px !important;  \
      }  \
      .PageNav a.currentPage {  \
      background-color: #8AAEC5 !important;  \
      border: 1px solid rgb(65, 115, 148) !important;  \
      color: rgb(255, 255, 255) !important;  \
      font-weight: bold !important;  \
      }  \
      a.PageNavPrev, a.PageNavNext {  \
      color: #417394 !important;  \
      border: 1px solid rgba(0, 0, 0, 0) !important;  \
      width: 18px !important;  \
      height: 20px !important;  \
      background-color: rgba(0, 0, 0, 0) !important;  \
      }  \
      .PageNav a.currentPage:hover {  \
      color: rgb(255, 255, 255) !important;  \
      background-color: #7192A8 !important;  \
      }  \
      a.PageNavPrev:hover, a.PageNavNext:hover {  \
      width: 18px !important;  \
      }  \
      .PageNav a:hover, .PageNav a:focus {  \
      color: #417394 !important;  \
      background-color: #F2F6F8 !important;  \
      border: 1px solid #417394 !important;  \
      }  \
      .messageUserBlock div.avatarHolder .avatar img {  \
      width: 96px !important;  \
      height: 96px !important;  \
      }  \
      .messageUserBlock div.avatarHolder {  \
      padding: 10px 0 0 60px !important;  \
      margin-right: 60px !important;  \
      }  \
      .quickReply .messageUserBlock div.avatarHolder {  \
      padding: 19px 0 19px 60px !important;  \
      }  \
      .messageUserBlock .userBanner:last-child {  \
      margin-top: 10px !important;  \
      }  \
      .privateControls .datePermalink {  \
      margin-left: 235px !important;  \
      }  \
      .privateControls .username {  \
      display: none !important;  \
      }  \
      body, .previewTooltip blockquote, .attachedFiles .attachedFilesHeader {  \
      font-family: Tahoma,Calibri,Verdana,Geneva,sans-serif !important;  \
      }  \
      select, input, button, textarea, .button, a.callToAction span {  \
      font-family: arial,helvetica,clean,sans-serif !important;  \
      }  \
      pre, code, kbd, samp, tt {  \
      font-family: monospace !important;  \
      }  \
      .pairsInline dd span {  \
      margin: -1px -2px !important;  \
      padding: 0 2px 1px 2px !important;  \
      }  \
    " );
    
    var theImages = document.getElementsByTagName('img');
    for(i=0; i<theImages.length; i++) {
      if(theImages[i].src.indexOf('avatar_s.png') != -1) theImages[i].src = 'http://i.imgur.com/mfNRZUL.png';
    }
    
    var theImages = document.getElementsByTagName('img');
    for(i=0; i<theImages.length; i++) {
      if(theImages[i].src.indexOf('avatar_m.png') != -1) theImages[i].src = 'http://i.imgur.com/tXjvgTX.png';
    }
    
    var theImages = document.getElementsByTagName('img');
    for(i=0; i<theImages.length; i++) {
      if(theImages[i].src.indexOf('avatar_l.png') != -1) theImages[i].src = 'http://i.imgur.com/KspvN77.png';
    }
    
    Add after "GM_addStyle" on line 11 to remove sidebar:

    Code:
      .sidebar {  \
      display: none !important;  \
      }  \
      .mainContent {  \
      margin-right: 0 !important;  \
      }  \
    Userstyle:

    Code:
    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document domain("forum.notebookreview.com") {
        .messageList .message {
            background-color: #FAFAFA !important;
            box-shadow: 0px 0px 0px 1px #E9E9E9 !important;
            border-color: #7192A8 -moz-use-text-color -moz-use-text-color !important;
            border-width: 24px medium medium !important;
            border-bottom: 26px solid #E9E9E9 !important;
            margin-bottom: 10px !important;
            padding-bottom: 0px !important;
            position: relative !important;
        }
        html {
            background-color: #2F4456;
        }
        .messageText {
            font: 13px Verdana,Arial,Tahoma,Calibri,Geneva,sans-serif;
            background-color: #FAFAFA !important;
            color: #333 !important;
            }
        .primaryContent {
            background-color: #FAFAFA !important;
            }
        .message .publicControls .item {
            margin-right: 10px;
        }
        .messageList .messageUserInfo {
            margin: -10px 15px -1px 0px !important;
            padding-bottom: 2px !important;
            border-right: 1px solid #E9E9E9 !important;
            border-bottom: 1px solid #E9E9E9 !important;
            background-color: #F2F6F8 !important;
            }
        .messageUserBlock {
            border: none !important;
            background-color: #F2F6F8 !important;
            }
        .messageUserBlock .arrow {
            display: none !important;
        }
        .messageUserBlock .arrow span {
            display: none !important;
        }
        .message .signature {
            border-top: 1px solid #DDDDDD;
            margin-bottom: 10px !important;
            padding: 10px 10px 5px 7px !important;
        }
        .bbCodeQuote .attribution {
            background-color: #F2F6F8 !important;
            }
        .bbCodeQuote .quoteContainer {
            background-color: #F2F6F8 !important;
            border-radius: 5px !important;
            }
        .bbCodeQuote .quoteContainer .quote {
            font: italic 13px Tahoma,Calibri,Verdana,Geneva,sans-serif !important;
            }
        .bbCodeBlock .type {
            background: none repeat scroll 0% 0% #F2F6F8 !important;
            border-radius: 5px !important;
            font-family:  Tahoma,Calibri,Verdana,Geneva,sans-serif !important;
            font-size: 12px !important;
            }
        .bbCodeBlock pre {
            background: none repeat scroll 0% 0% #F2F6F8 !important;
            border-radius: 5px !important;
            }
        .bbCodeBlock {
            border: 1px solid #417394 !important;
            margin: 0.5em 2em 1.5em 2em !important;
            border-radius: 5px !important;
            }
        .message .editDate {
            margin-right: 15px !important;
            margin-bottom: 10px !important;
            }
        .message .likesSummary {
            margin-right: 14px !important;
            margin-bottom: 10px !important;
            }
        .messageText img, .messageText iframe, .messageText object, .messageText embed {
            max-width: 99.75%  !important;
            }
        .message .newIndicator {
            margin: -5px -6px 5px 5px !important;
            background-color: rgb(239, 115, 115) !important;
            border: 1px solid rgb(191, 95, 95) !important;
            font-weight: 800 !important;
            }
        .message .newIndicator span {
            background-color: rgb(191, 95, 95) !important;
            }
        .message .publicControls .item {
            font-weight: bold !important;
            }
        .message .privateControls .item {
            font-weight: bold !important;
            }
        .LikeText {
            font-weight: bold !important;
            }
        .message .messageMeta a {
            color: #3E3E3E !important;
        }
        .message .messageMeta a:hover {
            color: #417394 !important;
            text-decoration: none !important;
        }
        .message .messageMeta {
            position: absolute !important;
            bottom: 0px !important;
            margin: -5px 0px -21px -230px !important;
            padding: 0 !important;
            width: 100% !important;
        }
        .authorEnd {
            display:none !important;
        }
        .message .messageContent {
            margin-right: 10px !important;
            margin-bottom: 20px !important;
        }
        #copyright {
            color: #417394  !important;
        }
        .emCtrl:hover, .emCtrl:focus, .ugc a:hover, .ugc a:focus {
            text-decoration: underline !important;
            box-shadow: none !important;
        }
        .hasJs .bbCodeSpoilerText {
            margin-right: 0 !important;
        }
        .PageNav a {
            text-decoration: none;
            background-color: #F2F6F8 !important;
            border: 1px solid #C4C4C4 !important;
            text-align: center !important;
            width: 23px !important;
            color: rgb(65, 115, 148) !important;
            border-radius: 0px !important;
        }
        .PageNav {
            line-height: 22px !important;
        }
        .PageNav .scrollable {
            width: 137px !important;
            height: 24px !important;
        }
        .PageNav a.currentPage {
            background-color: #8AAEC5 !important;
            border: 1px solid rgb(65, 115, 148) !important;
            color: rgb(255, 255, 255) !important;
            font-weight: bold !important;
        }
        a.PageNavPrev, a.PageNavNext {
            color: #417394 !important;
            border: 1px solid rgba(0, 0, 0, 0) !important;
            width: 18px !important;
            height: 20px !important;
            background-color: rgba(0, 0, 0, 0) !important;
        }
        .PageNav a.currentPage:hover {
            color: rgb(255, 255, 255) !important;
            background-color: #7192A8 !important;
        }
        a.PageNavPrev:hover, a.PageNavNext:hover {
            width: 18px !important;
        }
        .PageNav a:hover, .PageNav a:focus {
            color: #417394 !important;
            background-color: #F2F6F8 !important;
            border: 1px solid #417394 !important;
        }
        .messageUserBlock div.avatarHolder .avatar img {
            width: 96px !important;
            height: 96px !important;
        }
        .messageUserBlock div.avatarHolder {
            padding: 10px 0 0 60px !important;
            margin-right: 60px !important;
        }
        .quickReply .messageUserBlock div.avatarHolder {
            padding: 19px 0 19px 60px !important;
        }
        .messageUserBlock .userBanner:last-child {
            margin-top: 10px !important;
        }
        .privateControls .datePermalink {
            margin-left: 235px !important;
        }
        .privateControls .username {
            display: none !important;
        }
        body, .previewTooltip blockquote, .attachedFiles .attachedFilesHeader {
            font-family: Tahoma,Calibri,Verdana,Geneva,sans-serif  !important;
        }
        select, input, button, textarea, .button, a.callToAction span {
           font-family: arial,helvetica,clean,sans-serif !important;
        }
        pre, code, kbd, samp, tt {
           font-family: monospace !important;
        }
        .pairsInline dd span {
           margin: -1px -2px !important;
           padding: 0 2px 1px 2px !important;
        }
    }
    Add before last line to remove sidebar:

    Code:
        .sidebar {
           display: none !important;
        }
        .mainContent {
           margin-right: 0 !important;
        }
    
     
    Last edited: Feb 22, 2015
    Dr. AMK, Shawn, Zymphad and 4 others like this.
  2. radji

    radji Farewell, Solenya...

    Reputations:
    3,856
    Messages:
    3,074
    Likes Received:
    2,593
    Trophy Points:
    231
    Looking good...:vbthumbsup:

    There's no way to move the reply's posted date/time to the top header of the post with stylish? Or is that a platform deal?
     
  3. iaTa

    iaTa Do Not Feed

    Reputations:
    1,328
    Messages:
    2,675
    Likes Received:
    197
    Trophy Points:
    81
    Glad you like it!

    I'm already working on moving that time/date up to the top :)

    Might need to use Grease/Tapermonkey for that though as I don't think I can move purely the time/date with CSS.
     
    Last edited: Jan 31, 2015
  4. iaTa

    iaTa Do Not Feed

    Reputations:
    1,328
    Messages:
    2,675
    Likes Received:
    197
    Trophy Points:
    81
    I could move the whole messageMeta div with CSS:

    [​IMG]

    Would you prefer that to the controls being at the bottom of each post?

    Or maybe...

    [​IMG]
     
    Last edited: Jan 31, 2015
  5. radji

    radji Farewell, Solenya...

    Reputations:
    3,856
    Messages:
    3,074
    Likes Received:
    2,593
    Trophy Points:
    231
    Controls should be at the bottom, date/time at the top. That's the way vBulletin had it.
     
    killkenny1 likes this.
  6. iaTa

    iaTa Do Not Feed

    Reputations:
    1,328
    Messages:
    2,675
    Likes Received:
    197
    Trophy Points:
    81
    Yeah, unfortunately I can't do that with CSS.

    Will require some JS.
     
    Last edited: Jan 31, 2015
  7. triturbo

    triturbo Long live 16:10 and MXM-B

    Reputations:
    1,577
    Messages:
    3,835
    Likes Received:
    1,231
    Trophy Points:
    231
    Great work!

    Would love this as well, but I do realize it's a lot of work.
     
    iaTa likes this.
  8. ghegde

    ghegde Notebook Evangelist

    Reputations:
    40
    Messages:
    323
    Likes Received:
    109
    Trophy Points:
    56
    Thanks iata. makes it bearable for now.
     
    iaTa likes this.
  9. iaTa

    iaTa Do Not Feed

    Reputations:
    1,328
    Messages:
    2,675
    Likes Received:
    197
    Trophy Points:
    81
    Quite a few new updates to the scripts.
     
    triturbo and ghegde like this.
  10. triturbo

    triturbo Long live 16:10 and MXM-B

    Reputations:
    1,577
    Messages:
    3,835
    Likes Received:
    1,231
    Trophy Points:
    231
    Now we're talkin' :D
     
    iaTa likes this.
Thread Status:
Not open for further replies.

Share This Page