Overclock.net banner

OCN Classic 2.0

90K views 78 replies 9 participants last post by  TwoCables 
#1 · (Edited)
OCN Classic 2.0


Last Updated: 3-6-2018 at 11:27 a.m. Central Time


Screenshots:

Main: https://userstyles.org/style_screenshots/154662_after.png
Demonstrating column colors: https://userstyles.org/style_screenshots/154662_additional_29672.png
Demonstrating the new User CP enhancement (see "Edit Options" on the left side): https://userstyles.org/style_screenshots/154662_additional_29683.png
Showing the corrected background color on the main page for Latest Discussions and News: https://userstyles.org/style_screenshots/154662_additional_29715.png

Download and installation:


Main theme: https://userstyles.org/styles/154662/ocn-classic-2-0

Classic blue flame logo favicon: https://greasyfork.org/en/scripts/37764-ocn-classic-blue-flame-favicon


This is the new version of OCN Classic. I created it from the ground up for OCN's new platform; vBulletin. You won't find the same massive amount of changes and customizations that the original OCN Classic had because there aren't nearly as many things that I hated about the look and feel this time. I may still find a few things here and there that I will change as time goes by, but I think this is mostly finished right now. Mostly! I'm never done, of course!

I welcome all feedback, ideas, and suggestions. I also welcome all help with CSS and JavaScript code. So if you are good with CSS and/or JavaScript and you have an idea or suggestion, then please show me the code you'd write for that idea or suggestion.


Features:



  • Bug fix: After a recent update to OCN, the "Tags" box at the bottom of threads had the wrong appearance. So, I fixed it with this update to OCN Classic 2.0.
  • Bug fix: The feature of the left-side panel in the User CP highlighting was broken. This update fixes it.
  • I finally fixed the color on the main page for Latest Discussions and News.
  • Just a small bug fix as discussed beginning with this post.
  • User CP left-side panel item highlighting and text bolding (the highlighting and text bolding matches where you are in the User CP). Here's the screenshot that shows an example: https://userstyles.org/style_screenshots/154662_additional_29683.png See "Edit Options" on the left side.
  • On the "Edit Folders" page for your private message folders, there was a problem with text being white and in the wrong locations. This has been fixed reasonably well.
  • Corrected the color of the columns on every page that lists threads and forums, including your threads page and your thread subscriptions
  • Added crisp borders to all tables, such as thread views and forum views
  • Added crisp borders elsewhere, such as the User CP and profile pages
  • Increased font size of usernames in the postbits
  • Corrected the bolding of all usernames. Now only Overclocked Account names and Staff names are bold.
  • Increased width of postbits to accommodate the larger font size of usernames
  • Modified the size of avatars and badges in the postbits to a more correct size
  • Added a background color to the top of the profile menu (when you click your avatar up on the navbar)
  • The text "Welcome, %username%" is now bold
  • Your username on this part of the profile menu is now in the correct color
  • Removed unnecessary hover effect over "Your Notifications" in the profile menu
  • In the Quick Links menu, I corrected the header color for each section of the menu
  • In the Quick Links menu, I fixed the hover color for the link "User Control Panel", and it's also underlined permanently since it's a link
  • Fixed hover color and text color on the tabs on any member's profile page, including your own
  • Fixed the header color of the 'Tags' header at the bottom of any thread page. It's now the proper light gray color.
  • Removed the unnecessary horizontal line in the Tags box when you're adding tags
  • Fixed the location (again) of the popup menus for the left-side User CP items "Private Messages" and "Thread Subscriptions". Somehow, they were moved slightly today.
  • Added a very light border around your avatar on the 'Edit Avatar' page in your User CP. This is helpful for transparent avatars so that you can see the actual borders.
  • Fixed the color of the postbits (the left side panel of every post where your avatar is)
  • Removed unsightly horizontal line near the bottom of every post
  • Added a crisp border around all posts and postbits using OCN color #46566B
  • Removed unsightly borders on all profile pages.
  • Fixed the location of the popup menus for Private Messages and Subscriptions in the User CP, but only on the left side. This is the best I could do.
  • Proper OCN color on the navbar and the bottom of the page
  • Navbar shadow
  • Proper OCN hover color on all navbar buttons
  • Classic OCN logo on the navbar
  • Classic OCN blue flame logo favicon (the small icon you see on OCN bookmarks, in the location/address bar, etc.) - you only have this if you install the Classic Favicon script from GreasyFork.org.
  • Perfectly aligned 'Tools' menu on the navbar (see the screenshot) - it drops down to the right instead of the left!
  • Red notification bubble on avatar profile menu button with bold white numbers
  • Hover effect (gray color) on page number buttons, except for those that have visible vertical dividers (such as those on your page labeled "Thread Subscriptions"). I had some trouble with those. I need help with this one!
  • "Thread Starter" changed to bold red text in all caps so that it reads "THREAD STARTER". This is a little buggy for me. Sometimes it doesn't work, but it works most of the time.
  • Fixed vertical height of avatar profile button's hover effect so that it no longer hangs down below the navbar. This is a fix of a new bug that was created when they increased the size of the avatar for our profile button.
  • The WYSIWYG editor displays the correct default font and font size. Now it's truly WYSIWYG!
  • Updated all button colors on the entire site, including a new color for the Multi-Quote button when it's turned on and the footer buttons "Mobile" and "Desktop" have the correct look
  • "permalink" is underlined to make it very easy to differentiate it from the post# link (and it has a new hover color)
  • Fixed this bug: http://www.overclock.net/forum/1779...wn-screenshots-inside-since-hard-explain.html
  • Added dotted white focus/selection border on all buttons. This means that tabbing around on buttons is visually much easier.
  • Updated the appearance of the code
  • Bug fix for the color of the Multi-Quote button when it's turned on (it was caused by an oversight when I changed the color of all of the buttons on the site)
  • Removed Google+/Twitter button at the top of every thread page (I am only doing this because I'm assuming they will be removing this in the future since there's talk of removing all social media elements. I can show you how to get it back if you want)
  • Changed Italicized text in Post Quote boxes to Normal text
  • Corrected the font size of post previews and the Topic Review underneath the full-page editor. It was too small before.
  • Increased thread title size on every thread page
  • Quote box color restored
  • Code box color restored
  • Spoiler box color restored
  • Fixed the font size inconsistency problem on OCN Live
  • Fixed the appearance of the postbit. The postbit is the panel on the left side of every post.
  • Increased width of Title text boxes. There's a character limit of 85 characters, and this new width shows all 85 characters. It's much wider than you need in order to allow for the variable-width font to create very wide titles. I will not be increasing the character limit, so please don't ask (after all, I don't own and run this site)
  • Fixed the location of the "subscribed threads only" checkbox on OCN Live. It was too far to the left before. Now it's exactly where it's supposed to be.
  • Fixed the width of the username and password fields on the auto-generated login page if you try to visit something like your User CP when you're not logged in. Both text fields were way too long after the last update.
  • Updated the color of the Multi-Quote button when it's 'enabled' to a darker/duller red. I was trying plain red #FF0000 before, but now I'm trying #B84300, which used to be OCN's default color for notification bubbles, and has been the red I use for "NEW!".
  • Colors updated/improved throughout the entire site, including all headers (even the post headers)! There are too many changes to list them all though. :) Have a look around after installing this new version of OCN Classic 2.0!
  • New hover color for "permalink"
  • Unbolded the text on all post headers, except for "THREAD STARTER". I couldn't unbold "post #" though. I spent over an hour trying! lol I actually kind of like it now.
  • Updated the hover color effect for the Multi-Quote button when it's 'enabled'
  • The classic blue flame favicon has been updated so that now it no longer breaks OCN Live! https://greasyfork.org/en/scripts/37764-ocn-classic-blue-flame-favicon
  • Fixed the height of the profile menu's hover effect. It's still very messed up on RigBuilder though, and all of my efforts to fix it have failed.
  • Fixed the hover effect on RigBuilder buttons
  • Underlined "Control Panel" and "Your Profile" in User CP, because they're links
  • Added hover color to "Control Panel" and "Your Profile" links in User CP
  • Added hover color to "Private Messages" and "Subscribed Threads" on the left side panel in User CP
  • Added hover color to the text of the following navbar items: 'FORUMS', 'NEWS', 'GAMING', 'REVIEWS', 'RIGBUILDER', 'ARTICLES', and 'NEW POSTS'. These are all links and they only work when you're hovering over the text. So, I feel it's better if they give instant feedback to indicate that you are actually touching the link.


I also created these simple style sheets for myself. Try them all!
:)



Autohide Navbar (invisible navbar) This one makes the navbar completely invisible when you scroll down, but it's actually still there. To access it, just hover your mouse at the top. After all, the navbar is still there; it's just 100% invisible when you scroll down.

Hide "Quick Links" menu This does exactly as it says. It hides the Quick Links menu from the Tools menu. I kept accidentally opening the menu and clicking on some of its menu items, so I created this style sheet to finally get rid of it. I never used it anyway.

Bold important menu items This is a style sheet I made for the things I click frequently every day: "User CP" and "Unanswered Threads". This helps improve my mouse aim on these items.

Hide Active Topics on Overclock.net This is something that may not be needed when this migration to vBulletin is 100% complete. As of right now, this style sheet is necessary if you want to have the Active Topics sidebar hidden (disabled) but continue to have the automatic resizing behavior of the navbar work properly when you scroll down.

Lock OCN Navbar
This prevents the navbar from following you down the page when you scroll down. I made this style sheet because page anchors to individual posts are set as though there is no navbar (set too high), and it bothered me enough that I made this style sheet. Without this style sheet, the scroll position will always end up too low on each and every post when linked directly to a post whether that's the first unread post, the last post, or some specific post.


Anyway, so there you have it! OCN Classic 2.0.




Credits are in the Spoiler box below (copy/pasted from the original thread because they haven't changed):

TheBadBull
agawthrop
Jiiks
TFL Replica

If I left you out of the credits, then please tell me to add you to the list.

TheBadBull unintentionally started this for me by colorizing the navbar and the buttons throughout the site and posted it in OCN's "A New Face for Overclock.net" thread. If it weren't for him, then I never would have done any of this!

agawthrop did so much that I would need a huge post just to explain it all.



Jiiks did even more than agawthrop!


These guys just blew me away. Without Jiiks and agawthrop, I would not have been able to improve upon what TheBadBull started. Basically, they did everything that I would have done if I had their programming skills. All I did was tell them what I wanted, and the next thing I knew they were giving me the code for what I wanted. Sure, I made some minor adjustments to most of the code that they gave me, but they still get 100% of the programming credit. Still, almost everything you see and experience in this theme came out of my head.

Forgive me if you had a smaller contribution in this and I failed to give you credit. Speak up and I will be very happy to add you to the credits!
 

Attachments

See less See more
7
#2 · (Edited by Moderator)
OCN Classic 2.0 has just been updated. I fixed the incorrect font display in the WYSIWYG editor. Now it's matched perfectly; it shows the correct default font and default font size. I mean, it's much more of a true WYSIWYG editor now.

I became a little ambitious and updated OCN Classic 2.0 again. This time I updated the color of all the buttons on the entire site, I fixed the footer buttons ("Mobile" and "Desktop"), and I changed "permalink" on the post headers to be underlined in order to easily differentiate it as a separate link from the post # link - and it has a new hover color.

I also updated the color of the Multi-Quote button when it's turned on.

I added a dotted white focus/selection border on all of the buttons. This means that tabbing around on buttons is visually much easier.

I fixed this bug as well: http://www.overclock.net/forum/1779...wn-screenshots-inside-since-hard-explain.html

Finally, I updated the appearance of the code. I believe it's easier to look at now.

https://userstyles.org/styles/155173/autohide-navbar-invisible-navbar

If you install this, you will get a navbar behavior that's a lot like the Autohide feature of the Windows Taskbar. The way this works is, the navbar becomes invisible when you scroll down and it reappears when you hover your mouse over it. Note: this will not work if you have the Latest Discussions sidebar disabled using the setting in your User CP. If you want to keep it disabled and still have autohiding navbar at the same time, then install this and be sure to re-enable the sidebar in your User CP: https://userstyles.org/styles/154664/hide-latest-discussions-sidebar-on-overclock-net

One of the reasons why this is nice is, when you click any kind of link that brings you directly to a post in a thread, the navbar won't be covering the post header. The post header contains the timestamp, whether the post is the Thread Starter's, and it contains the post # link and permalink.
 
#3 · (Edited by Moderator)
If you are finding that the Multi-Quote button doesn't look like it's working, then install the latest version of OCN Classic 2.0. When I changed the color of all the buttons on the site, one of the CSS selectors I used was overriding the color for the CSS selectors called .multiquote_on and .multiquote_on:hover. I fixed the bug and now everything is fine.

I updated OCN Classic 2.0 yet again. I apologize for updating too frequently. It couldn't be helped.


  • Removed Google+/Twitter button at the top of every thread page (I am only doing this because I'm assuming they will be removing this in the future since there's talk of removing all social media elements. I can show you how to get it back if you want)
  • Changed Italicized text in Post Quote boxes to Normal text
  • Corrected the font size of post previews and the Topic Review underneath the full-page editor. It was too small before.
  • Increased thread title size on every thread page
 
#4 ·
I'm working on a few scripts to restore functionality. Still needs work but here's what I have so far:



Current code. Tested in greasemonkey:

Code:
// ==UserScript==
// [USER=388255]@name[/USER] OCN Classic Navbar
// [USER=388255]@name[/USER]space none
// [USER=262556]@versi[/USER]on 0.1
// [USER=134119]@Des[/USER]cription Adds search and subscriptions to the navbar.
// @author xxpenguinxx
// [USER=505627]@Include[/USER] [url]http://www.overclock.net/*[/url]
// [USER=129608]@Grant[/USER] none
// [USER=117484]@req[/USER]uire [url]https://code.jquery.com/jquery-3.3.1.slim.min.js[/url]
// ==/UserScript==

(function() {

    /* Add search to navigation bar */

    // OCN Search.
    var searchform = $('div[id="header"]').children('div').children('table').children('tbody').children('tr').children('td[title="nohilite"]').children('form[method="post"]').clone();
    // OCN Navigation Bar Search Element
    var navsearch = $('nav').children('ul.vbmenu_control').children('li[id="navbar_search"]');
    // OCN Navigation Bar New Search Element.
    var newsearch = $('<li class="vbmenu_control" style="padding: 28px;height: 36px;"></li>');

    // Create new search element.
    $(newsearch).insertAfter(navsearch);

    // Remove old navigation bar search element.
    navsearch.remove();

    // Add OCN Search to the navigation bar search element.
    $('nav').children('ul.vbmenu_control').children('li.vbmenu_control').append(searchform);

    // Change Font Color Of Radio Buttons.
    $('nav').children('ul.vbmenu_control').children('li.vbmenu_control').children('form').children('div[style="margin-top:5px;"]').css({"margin-top" : "5px", "color" : "white"});

    /* Add subscriptions to the navbar */

    var subs = $('div.avatar-submenu').children('ul.subnav').children('li').children('span.navbar-subscription').clone();
    var subli = $('<li id="subli" class="vbmenu_control" style="padding-top: 29px; padding-bottom: 24px; vertical-align: top;"></li>');

    // Add subscriptions to navbar search element.
    $('div#header').children('nav').children('ul.vbmenu_control').append(subli);
    $('div#header').children('nav').children('ul.vbmenu_control').children('li#subli').append(subs.children());

    /* Add private messages to navbar */

    var pmcount = $('table.notifications_menubits').children('tbody').children('tr:nth-child(2)').children('td:nth-child(2)').children('a').clone();
    var pm = $('<a href="http://www.overclock.net/forum/private.php">Messages</a>');
    var pmul = ('<ul id="pmul" class="vbmenu_control" style="padding-top: 2px;"</ul>');

    $('div#header').children('nav').children('ul.vbmenu_control').children('li#subli').append(pmul);
    $('div#header').children('nav').children('ul.vbmenu_control').children('li#subli').children('ul#pmul').append(pm);
    $('div#header').children('nav').children('ul.vbmenu_control').children('li#subli').children('ul#pmul').append(pmcount);
})();
 

Attachments

#5 · (Edited by Moderator)
I'm working on a few scripts to restore functionality. Still needs work but here's what I have so far:



Current code. Tested in greasemonkey:

Code:
// ==UserScript==
//  @[B][URL="http://www.overclock.net/forum/member.php?u=388255"]name[/URL][/B]  OCN Classic Navbar
//  @[B][URL="http://www.overclock.net/forum/member.php?u=388255"]name[/URL][/B] space none
//  @[B][URL="http://www.overclock.net/forum/member.php?u=262556"]versi[/URL][/B] on 0.1
//  @[B][URL="http://www.overclock.net/forum/member.php?u=134119"]Des[/URL][/B] cription Adds search and subscriptions to the navbar.
// @author xxpenguinxx
//  @[B][URL="http://www.overclock.net/forum/member.php?u=505627"]Include[/URL][/B]  [URL]http://www.overclock.net/*[/URL]
//  @[B][URL="http://www.overclock.net/forum/member.php?u=129608"]Grant[/URL][/B]  none
//  @[B][URL="http://www.overclock.net/forum/member.php?u=117484"]req[/URL][/B] uire [URL]https://code.jquery.com/jquery-3.3.1.slim.min.js[/URL]
// ==/UserScript==

(function() {

    /* Add search to navigation bar */

    // OCN Search.
    var searchform = $('div[id="header"]').children('div').children('table').children('tbody').children('tr').children('td[title="nohilite"]').children('form[method="post"]').clone();
    // OCN Navigation Bar Search Element
    var navsearch = $('nav').children('ul.vbmenu_control').children('li[id="navbar_search"]');
    // OCN Navigation Bar New Search Element.
    var newsearch = $('<li class="vbmenu_control" style="padding: 28px;height: 36px;"></li>');

    // Create new search element.
    $(newsearch).insertAfter(navsearch);

    // Remove old navigation bar search element.
    navsearch.remove();

    // Add OCN Search to the navigation bar search element.
    $('nav').children('ul.vbmenu_control').children('li.vbmenu_control').append(searchform);

    // Change Font Color Of Radio Buttons.
    $('nav').children('ul.vbmenu_control').children('li.vbmenu_control').children('form').children('div[style="margin-top:5px;"]').css({"margin-top" : "5px", "color" : "white"});

    /* Add subscriptions to the navbar */

    var subs = $('div.avatar-submenu').children('ul.subnav').children('li').children('span.navbar-subscription').clone();
    var subli = $('<li id="subli" class="vbmenu_control" style="padding-top: 29px; padding-bottom: 24px; vertical-align: top;"></li>');

    // Add subscriptions to navbar search element.
    $('div#header').children('nav').children('ul.vbmenu_control').append(subli);
    $('div#header').children('nav').children('ul.vbmenu_control').children('li#subli').append(subs.children());

    /* Add private messages to navbar */

    var pmcount = $('table.notifications_menubits').children('tbody').children('tr:nth-child(2)').children('td:nth-child(2)').children('a').clone();
    var pm = $('<a href="http://www.overclock.net/forum/private.php">Messages</a>');
    var pmul = ('<ul id="pmul" class="vbmenu_control" style="padding-top: 2px;"</ul>');

    $('div#header').children('nav').children('ul.vbmenu_control').children('li#subli').append(pmul);
    $('div#header').children('nav').children('ul.vbmenu_control').children('li#subli').children('ul#pmul').append(pm);
    $('div#header').children('nav').children('ul.vbmenu_control').children('li#subli').children('ul#pmul').append(pmcount);
})();
Wow! Thank you! This is an extremely good start. I love that the font is correct! As you can see from the little image below, we never did that. lol I don't know why I never tried to make it match.

I'm curious: when the navbar automatically resizes upon scrolling down, can we get everything to move up with it just the same way everything else does so that it still fits on the smaller 'hasScrolled' navbar?

Also, do you know if the Subscription/PM counters can be aligned together like the image below?



And can we get the links to subscriptions and messages to underline on hover?

Finally, I can't get the color of the radio button text to be white in Firefox. I wonder if maybe we need to supplement this JavaScript with CSS like we did with the original OCN Classic.

Update: I forgot to put in Autohide Navbar (invisible navbar). Added to the original post.
 

Attachments

#7 · (Edited)
The reason why it's not shrinking for you is, you have the Latest Discussions sidebar disabled in your User CP settings under "Edit Your Details". If you set it back to enabled, you can use this instead:

https://userstyles.org/styles/154664/hide-latest-discussions-sidebar

And you can use this too to go along with it: https://userstyles.org/styles/155173/autohide-navbar-invisible-navbar

Can you review this old code to see if maybe it can be applied again?

PHP:
// ==UserScript==
//  [USER=388255]@name[/USER]  OCN Classic Theme Completer v1.5.4
//  [USER=134119]@Des[/USER] cription This completes OCN Classic.
//  [USER=388255]@name[/USER] space none
//  [USER=505627]@Include[/USER]  [url]http://www.overclock.net/*[/url]
//  [USER=262556]@versi[/USER] on Version 1.5.4
//  [USER=129608]@Grant[/USER]  none
//  [USER=117484]@req[/USER] uire [url]http://code.jquery.com/jquery-1.6.4.js[/url]
// ==/UserScript==

(function () {

   /*-----PUT "Private Messages" AND "Subscriptions" ON THE NAVBAR   ---   ALL OF THE FORMATTING AND STYLING IS IN THE "Theme Option" SCRIPTS-----*/

    /*-----CODE TO INCLUDE "Private Messages" and "Subscriptions" IN THE PROFILE MENU. CURRENTLY NO NOTIFICATION BUBBLES. SORRY. UN-COMMENT THE CODE TO USE IT BY DELETING "//"-----*/
//$("[*]").append($("<a/>", { text: "Subscriptions", href: "http://www.overclock.net/users/subscriptions" })).insertAfter($(".profile .menu .threads-started"));
//$("[*]").append($("<a/>", { text: "Private Messages", href: "http://www.overclock.net/messages" })).insertAfter($(".profile .menu .threads-started"));

  var privateMessagesCount = $('.messages .notification-counter') .first() .text() .replace(/s+/, '');
  var subscriptionsCount = $('.subscriptions .notification-counter') .first() .text() .replace(/s+/, '');
  var notificationModule = $('[*]', {
    class: 'jncontainer',
  });
  var msgText = privateMessagesCount == 1 ? 'New Message ' : privateMessagesCount < 1 ? 'Private Messages ' : 'New Messages ';
  var messagesContainer = $('<a/>', {
    href: 'http://www.overclock.net/messages',
    text: msgText,
    class: 'jlink',
  });
  var messagesCounter = $('', {
    text: privateMessagesCount,
    class: 'jcounter'
  });
  var subsContainer = $('<a/>', {
    href: 'http://www.overclock.net/users/subscriptions/',
    text: 'Subscriptions',
    class: 'jlink',
  });
  var subsCounter = $('', {
    text: subscriptionsCount,
    class: 'jcounter'
  });
  if (privateMessagesCount > 0) messagesContainer.append(messagesCounter);
   else messagesContainer.append($('', {
    class: 'jpadder',
    text: ''
  }));
  if (subscriptionsCount > 0) subsContainer.append(subsCounter);
   else subsContainer.append($('', {
    class: 'jpadder',
    text: ''
  }));
  notificationModule.append(messagesContainer);
  notificationModule.append(subsContainer);
  notificationModule.insertBefore($('#main-nav .profile'));  
}) ();
Accompanying CSS (I was told that this code is necessary, and it was true: without it the above userscript didn't work):

PHP:
    /*-----CODE TO FORMAT AND STYLE THE NAVBAR LINKS TO "Private Messages" AND "Subscriptions".-----*/
    /*-----OCN Classic Theme Completer IS REQUIRED TO GET THE LINKS ONTO THE NAVBAR-----*/
.jlink {
    font-size: 12px;
    display: block !important;
    height: 18px !important;
    color: #FFFFFF !important;
    text-align: left;
}
.jncontainer {
    position: absolute;
    right: 48px;
    display: inline-block;
    top: 27px;
    width: 124px;    
}
.jcounter {
    background-color: #B84300;
    color: #FFFFFF;
    font-weight: bold;
    display: inline-block;
    height: 15px;
    min-width: 18px;
    text-align: center;
    font-size: 10px;
    line-height: 14px;
    border-radius: 3px;
    margin-right: 5px;
    font-family: Verdana;
}
.jpadder {
    display: inline-block;
    height: 15px;
    min-width: 18px;
    text-align: center;
    font-size: 10px;
    line-height: 14px;
    border-radius: 3px;
    margin-right: 5px;
    background-color: transparent;
    font-family: Verdana;
}
.jpadder,
.jcounter {
    float: right !important;
    margin-top: 0px;
    margin-left: 3px;
    text-indent: -1px;
}
.fixed-scroll-breakpoint .jncontainer {
    top: 8px;
} 
.ui-header-fixed li.profile .user-avatar .notification-counter,
.ui-header-fixed ul#main-nav li.messages,
.ui-header-fixed ul#main-nav li.subscriptions {
    display:none;
}
.search-bar-outer, .ui-header-fixed ul#main-nav .search > a {
    right:165px !important;
}
 
#19 · (Edited by Moderator)
The bug that made the style become necessary called "Hide "Latest Discussions" sidebar" has been fixed, and thus this style is now completely obsolete. Please uninstall it and set the sidebar setting to "Disabled" at the bottom of your User CP page called "Edit Your Details": http://www.overclock.net/forum/profile.php?do=editprofile and click "Save Changes".

The Classic Favicon userscript prevents OCN Live from working.

Can you tell why? I don't know what I'm looking at here:

PHP:
// ==UserScript==
//     [USER=388255]@name[/USER] Classic Favicon
//     [USER=134119]@Des[/USER]cription Blue flame favicon for Overclock.net
//     [USER=388255]@name[/USER]space none
//     [USER=505627]@Include[/USER] [url]http://www.overclock.net/*[/url]
//     [USER=262556]@versi[/USER]on Version 1.0
//     [USER=129608]@Grant[/USER] none
//     [USER=117484]@req[/USER]uire [url]http://code.jquery.com/jquery-1.6.4.js[/url]
// ==/UserScript==


(function () {

/*-----CLASSIC FAVICON-----*/
  var link = document.createElement('link');
  link.type = 'image/png';
  link.rel = 'shortcut icon';
  link.href = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAP90lEQVRoga2ZWXNc13HHf+ecu8ydFau4CyKtxbYsjcTEZcd2ikz0kjykyn7Ng5j4C6isD2B9Azr5AraZ11TFeUjsShw5ohO5HMtcIFIkRUoiAQLEOph97naWPMwAHMIDLlXuqVvoe6Yvbi//7tOnRzjnADDGME5Kqb31cX78+937cd46VxcIhGBxd/0g2T8GL3YNmET7ld/lH0edXv/9LDfMTVffeqLwH4HkuFf387tW7ucPkt+l1UbrTW3s24+T+WPxcv/iuJKTHhqPwiReSMXyVrd2v9E+a6ytPYsycZLWgfqzGOLtV2Dc2wfh73EkpSJ1PnfXWufmy0XKxfD7B0FxP7+8vnV+qlxibrr61tPIK6WQ417cr/S4YZOMmBwhCZ7HZifjxv3GucdBcT/fTzU3lrff7Cbm7aeRN8ZMhtCkiEySOYj3pUBLn9sbXT5e3ryc5HrhiaEDHAHrqal9vtn8ibHuzNM8I/crub/S7I/AE3MAgXUWJRzSU3y21qx/+mDnx9q6JxshwDnHg80GO+3uuac2YBJsnlSd+v34/KSwamsweY4voFoMyXK4vdI8e2+99bPHGb5HDuLM8Pnq5jkp5fnHySulHkJoXMHHJU6m7TvXPls2v7l6452J36cpGQLPExybqjJTrdLLNL+7s1ZfWm9ezrVeOMg5QeCTJxm9Qcqnyxt0BvETK9IzQcg43r55b+P8p0sblEvFiZ5pd/o452GNQZBzZKZEtVQmFyG/v9usL220fuwcE+FUDDx63RbtdpveIEXKJ2+cTw0hbe3bd1Z3/uHzjR4DoxBC/kFlkFK+vdNL3oScwAOcQ0nB3HQRz/PppvDxFztnN9uDiXA6Nl9hWhmKNuZb9Rcphv67+2X2896kkrm/2gghamvb7bP3HjRr2guxImG91UdK***GLCqlsNbWVrdaZ9dbac2XUIoCnDBoYyh6imrRp6EtzSTlw2tf1P/6G19+vxypt8aj70vx1t/+zV/uvVtJ+ZA/ANJyf2XZNWQcUqk2b6w2OucGOme2UiAMQrbbMY1W9/xuBNqD5Ed3HjTOdbUjCkP8sEiuIc8czkJUKOB7DqEEnURz+dN7JwdxcuZJVa0/iM8YYxcOkhFa6yc2bJvtweXf3lyu4wccP36Eu8trNLebzPi6fero7BU8n5XNnbPdXGGDMjPliEIhwjcJwhkQklQEbDc7pHlOlucUXMqfvnx06cUTz30P5xYnetja+qd3V37m+UHrS8fmT0+S2Uvi/aEZv1rdfj13gvlqGT93PFcpMTtdIRaF2qXPt85e/mLzbCsVBIUCkcjAgrWWXqLZ2mmDcwQ2phz5hIFESEsiFNfvtxaa3fjsgZumYyrVbmHxznLdIeqTZJ4KQo1OD+kFWBRx3MeTUIiKFMpVijOHCEpz+FEN7Xy09UjTDOcca2ubNLsdjLNkRqM8QAUI4YMM6CY5283O+YPgYawlR9JKNM1Ob+KesNdOT2rWlFI4587HucUZR6Khk+d0kwznNJ7nQBmkyjBkaAxaKhIHzdaAG3e+oFybZWAtqXbEZpiUvu/jNGjteNDqH1jnB6lhqw/KL7K8tj1RxhtfmHTy0tbV436KEx6DfgdwGOMwVpDYFCGGcs4phHj4/O8uXcLmlrBQJs6SoZBNEQ6UlEgPnBH0usnEHHTO1ZcfbP9qEMeIQNHodKettQvOuaVnghDWkAM4yHJDlhusyRBke8oDQ1jgUEqxvrbJIEl54806cdojyzQmc5hcIK0gEAIHCOXhpHzkvSPlz+z04p/db3QxTgGKNDP1JM3PPTOEADSKHEXmBLmTpARkzgcCHAEQDF+MwOSWS5ev8qWTLxCVI7QTGCQ5kDtHNroAnNETN81mLz1zbWlrIbYCKyXgyHODNvbpIPTZ/fX3AyU5dmh271xr3dBTFocYedC5Ib9H2vH++/9NtTbH8RMnMDZHCIVzgBgp7UAIB84hnOXoTOkRCO10B+9cv7fx3mofrPPBOQaJplaQCCmeXIXSXJ9Z2umdbA/S4YKUSLmrBCOF3Qg2D3mcx+079/jk1l1ef+0VlBR7CuMM0g1rthDgjAGdE3mCw7O1C0Nl7JmtdvLDy/e2z2/2DVJIlBAIwOQ5YRDged7kVmLXCGMMrUFyppN7C6qX3lVKIaQk9EIGuR4qPYLKrt8dFoGhnzguXblOsVxkbmYKY/I9ibjXZafR5oWXv4zNY3KTgrIcOTTDTKVwoZ+k799b3T55vxUvNBKBEMHes0maYdOUKCwvhp68sOv5XUP2zsTGGBycaXSS9/Lc0knjs3GS/DDw/bei0Jh2ZsDJkQvdMAmFAGeRvsf1T25wb2md029+GelL8jTfi1KhXGXx1x+x3erxtddewVqFLwRKhFy9s/qr9Z0eudEYr4SQahhU4bDWYgZdImU5dXi6KaVcMtbWlVKLj0BoNxyZtrR6CcJp4syx0xmglGK6HO6m4R7uhRCIUemUQrK6/AArLNVadRijkQxAEATMHz7K/3z4O5aWN/C8EBmUWGvlfLGj6ROQqSKMyvAwvII4jsmThEokOTw7dbETpz/85N76I53sIweaVFt2Eg1ItBU0O9nfOefq1WJhiHRhEUKjhKLV7NHtxyghMVaT6+Fe4Kzb1WCMHFOVCt0448qVj9G5RiqBxoBSCOUjlIcVD4GZJTlZP8XzQ7760km2esl3L1794r1fX1/eOxAZYx6WUWMMaW7oDCyZU1g/ZLXVW+gn2VS5ECwWfG+Ur0MvpfGAn//8F7R7AySSV197iUIhoNlqj5LX8XDqZ1GBB8Lj9t0HXP3kBkEgwcVAMrxcCiQ4l5BmMe1BHy2hWPK5s97mX/93sX7n/jpuX9F5BEJDDfWwzAlBoxfT7g/ORZ76QTHwAIlzFocjLIWs3N9k8dJNdKZ45a***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';
  var head = document.getElementsByTagName('head') [0];
  head.insertBefore(link, head.firstChild);
}) ();
If you can figure out how to help me keep the classic favicon without breaking OCN Live (or anything else lol), then I'll love you forever. lol :)









OCN Classic 2.0 updated yet again. This time, I fixed the appearance of the postbit. The postbit is the panel on the left side of every post.

Today, the migration team reduced the font size considerably in order to fix an issue where larger names would wrap 1 character at a time, depending on the size of the name. What I did here is, I restored the font size and increased the width of the postbit to the original size from the old vBulletin: 187 pixels. I also centered everything.

Below is the original postbit from the old vBulletin. Compare it to what you get with this update toOCN Classic 2.0! Just you wait until they restore the Reputation system. haha :) It's going to be fantastic.

OCN Classic 2.0 has just been updated... again! :rolleyes: :)

I increased the width of Title text boxes. There's a character limit of 85 characters, and this new width shows all 85 characters. It's much wider than you need in order to allow for the variable-width font to create very wide titles. I will not be increasing the character limit though, so please don't ask (after all, I don't own and run this site).

I also fixed the location of the "subscribed threads only" checkbox on OCN Live. It was too far to the left before. Now it's exactly where it's supposed to be.

Have at it! https://userstyles.org/styles/154662/ocn-classic-2-0


Edit: Oh, and xxpenguinxx, I have some bad news - so it seems. It seems so far that any JavaScript I apply with Greasemonkey breaks OCN Live completely (at least in Firefox 52.3.0 ESR with Greasemonkey 3.17). I think we should continue looking at trying to perfect what you created though.
 

Attachments

#20 · (Edited)
I rewrote the previous code for adding subscriptions and search to the navigation bar. I can replace the default search with Google's if need be. I had a weird issue doing that though. One of OCN's scripts deletes extra Google search elements and I cannot figure out why, and how to prevent it. The added elements scale properly with the navigation bar and are compatible with OCN Classic 2.0.

I could probably reduce some of the selectors I use but I want to be sure I'm not accidentally selecting the wrong elements and breaking the website. I'm using the latest jquery since it's most likely more optimized, and I chose the slim version to reduce bandwidth usage, although I don't think that's an issue for most users. You will need to replace the ! in the beginning with @. Using @ in the code windows breaks the formatting.

Features:

  • Places subscriptions and private message alerts on the navigation bar.
  • Places Overclock.net's current search feature on the navigation bar.
PHP:
// ==UserScript==
// !name OCN Search & Subs On Navbar
// !namespace none
// !version 1.0.0
// !Description Adds search to the navbar.
// !author xxpenguinxx
// !Include [url]http://www.overclock.net/*[/url]
// !Grant none
// !require [url]https://code.jquery.com/jquery-3.3.1.slim.min.js[/url]
// ==/UserScript==

$(document).ready(function() {
    'use strict';
    //variables
    var navbar = $('div#page').children('div').children('div#header').children('nav'); // Navigation bar.
    var searchdupe = $('#navbar_search_menus').children('table').children('tbody').children('tr:nth-child(2)').children('td').children('form').clone(); // Search element clone.
    var navsearch = $(navbar).children('ul:nth-child(3)'); // Search panel on nav bar.
    var ocnsearch = $(navbar).children('ul:nth-child(3)').clone(); // Clone of search panel for new google search panel.
    var navnotifi = $(navbar).children('ul:nth-child(3)').clone(); // Clone of search panel.
    var subs = $('ul.subnav').children('li.vbmenu_control:nth-child(4)').children('span').clone(); // Subscriptions element clone.
    var pmcount = $('table.notifications_menubits').children('tbody').children('tr:nth-child(2)').children('td:nth-child(2)').children('a').clone();

    /* === Add Search To Navigation Bar === */

    $(ocnsearch).empty(); // Clear contents of duplicated search panel.
    $(ocnsearch).append('[*]'); // Add highlighted panel. All "li" elements are highlighted when placed in the nav bar.
    $(ocnsearch).children('li').addClass('blank'); // Add custom class to identify the new panels.
    $(ocnsearch).children('li').append('');
    $(ocnsearch).children('li').children('form').addClass('ocnsearch'); // Add class to identify new search element.
    $(searchdupe).appendTo((ocnsearch).children('li').children('form')); // Add dupe search to the ocn search panel.
    $(ocnsearch).children('li').children('form').children('form').children('div').css({'display':'flex'}); // Required to display on navbar.
    $(ocnsearch).children('li').children('form').children('form').children('div:nth-of-type(2)').css({'display':'contents', 'color':'white'}); //Set radio button text to white.
    $(navsearch).after($(ocnsearch)); // Add the dupe search panel to the nav bar.
    $('.ocnsearch').children('form').children('div').children('.go_button').css({'border-color': 'black', 'border-width':'2px', 'border-style':'outset'}); // Add border to highlight button.

    $('.ocnsearch').prepend(""); // Modify the default style applied to new search panels.

    /* === Add Subscriptions and PMs to Navigation Bar === */

    $(navnotifi).empty(); // Clear contents of duplicated search panel.
    $(navnotifi).addClass('nav_notifi'); // Add class for identification.
    $(navnotifi).append('[*]'); // Add highlighted panel. All "li" elements are highlighted when placed in the nav bar.
    $(navnotifi).children('li').addClass('blank'); // Add class to identify new element.
    $(navnotifi).children('li').append(''); // Required to make children visible.
    $(navnotifi).children('li').children('form').addClass('subnot'); // Custom class identifying new elements. Makes it easier to apply custom styles.
    $(navnotifi).children('li').children('.subnot').append('[TABLE][/TABLE]'); // First table.
    $(navnotifi).children('li').children('.subnot').append('[TABLE][/TABLE]'); // Second table. Margin used for spacing.
    $(navnotifi).children('li').children('.subnot').children('table:first-child').append('[URL=http://www.overclock.net/forum/private.php]New Messages[/URL]'); // New messages link
    $(navnotifi).children('li').children('.subnot').children('table:first-child').append(pmcount); // New messeges notification.
    $(navnotifi).children('li').children('.subnot').children('table:nth-child(2)').append(subs.children()); // Subscriptions.
    $(navnotifi).children('li').children('.subnot').children('table:nth-child(2)').children('a:nth-child(2)').children('span').css({'border-radius':'25%', 'height':'14px', 'line-height':'14px', 'width':'14px'}); // Modify border on notifications to better fit the nav bar.

    // Check if new subscriptions. Display 0 if none.

    var subcount = $(navnotifi).children('li').children('.subnot').children('table:nth-child(2)').children('a');

    if (subcount.length < 2) {
        $(navnotifi).children('li').children('.subnot').children('table:nth-child(2)').append('[URL=http://www.overclock.net/forum/subscription.php?do=viewsubscription]0[/URL]');
        $(navnotifi).children('li').children('.subnot').children('table:nth-child(2)').children('a:nth-child(2)').css({'padding-left':'18px', 'font-size':'larger'}); // adjust position.
    }

    $(navsearch).before(navnotifi); // Add notifications to nav bar.

    // Highlight private messages if greater than 1.

    if (pmcount.html() > 0){
        pmcount.addClass('notifications');
        pmcount.css({'margin-left': '6px', 'border-radius':'25%', 'height':'14px', 'line-height':'14px', 'width':'14px'});
    }
    else{
        $('form.subnot').children('table:first-child').children('a:nth-child(2)').css({'padding-left':'10px', 'font-size':'larger'}); // adjust position
    }

    // Functions to center the new elements on the nav bar.
    $(function() {
    $('.ocnsearch').css({'position' : 'inherit', 'top' : '53%', 'margin-top' : function() {return -$(this).outerHeight()/2}});
    $('.subnot').css({'position' : 'inherit', 'top' : '53%', 'margin-top' : function() {return -$(this).outerHeight()/2}});
    });

    /* Highligh notification links on hover */

    $('.subnot').children('table').addClass('underline-on-hover');
    $('.subnot').children('table').before("<style>.underline-on-hover:hover {text-decoration: underline;}");
    $('.subnot').children('table').children('a').css({'text-decoration':'inherit'});
    $('.subnot').children('table').children('a').children('span').css({'text-decoration':'inherit'});
}
);
Also I forgot to say. If you want to change the color of the notifications add this to your custom style sheet. Edit the color number to your liking.

PHP:
.notifications {
background: none repeat scroll 0 0 #ea4f4b !important;
}
 

Attachments

#21 ·
^Looks tight.
 
#22 ·
A big shout out TwoCables.....this is fantastic for me. I'm using the narrow version with the Latest Discussions listed and love it. Between some of the changes OCN has made, and your's, it's making this site bearable again.

When Reps come back, you'll get one from me!!

Keep up the great work!

:cheers: To you and all the others who are working on this!! :thumb:
 
#25 · (Edited)
Edit: It looks good, but it breaks OCN Live.

Oh, and I have to remove [url][/url] in order to get this script to work. After getting it to work though, I tested OCN Live and it just sits there doing nothing. lol BUT HEY....... this is a very good start.

And now on to the original post below:


Oh man, the agony of the timing of this. lol I'm on my way to bed soon. LOL I don't have to go to bed, but I don't want to stay up so long that I get hungry again. hahaha Hmm. I'll consider playing a little soon here. I just gotta test it and see if it breaks OCN Live. I wonder if I can succeed in only testing it without playing with the code. :)

Regarding breaking OCN Live: it's my favorite feature on here, so yeah. You'll know if OCN Live is broken because it just never updates and it doesn't spend any time on a fresh launch populating the last ~30 minutes of posts.

But wow.... dude. :) xxpenguinxx. Omg. You're awesome. Lots of love and props to you man. Just, wow. Thank you. I thought the other userscript you made was a good start, but this looks a million times better based on your screenshots. You're the best! I'm curious: what happened to that matching font? hehe That was kinda cool.

A big shout out TwoCables.....this is fantastic for me. I'm using the narrow version with the Latest Discussions listed and love it. Between some of the changes OCN has made, and your's, it's making this site bearable again.

When Reps come back, you'll get one from me!!

Keep up the great work!

:cheers: To you and all the others who are working on this!! :thumb:
Aw hey thank you for the feedback here Hequaqua!. :)


Installed this just now. I love it!! Been waiting for this since the change to vB ;)

Thank you TwoCables

Subbed for updates

Edit:


I hope this can be added to the theme :eek:
You're welcome! Thanks for the feedback, bigblock990!

If I find that it breaks OCN Live, then this won't be considered as a part of the "theme" but of course it'll most definitely be available for installation via Greasyfork.org.



I guess I should have tested this first before replying, but I kinda got excited. lol


Edit:
Looks great, subtle changes over the default theme but definitely noticeable and restore some of the previous feel back for me.

Appreciate the work :thumbsups thanks everyone.
Oh, hey nowon. :) Thank you for the feedback!
 
#24 ·
Looks great, subtle changes over the default theme but definitely noticeable and restore some of the previous feel back for me.

Appreciate the work :thumbsups thanks everyone.
 
#40 ·
OMG OCN Live was being broken by Greasemonkey! I'm using Tampermonkey and OCN Live is working again!

The Classic Favicon still breaks it, but at least now there's hope. lol

This just keeps getting better, and better, and better...
I can confirm OCN Live to be working with Violentmonkey (v2.8.28) as well. I'm using Fifrefox 58.0.1.
 
#28 ·
Regarding the main page. The font is super large. Is there a way to shrink it a bit? Also, no need for the bold either.

It looks like the OCN admins have too much on their plate. They've disabled new posts in the feedback thread. Appreciate the hard work Bois!
 
#30 ·
Correct, zooming out seems to be the workaround, but the text layout is still atrocious. Auto desktop full mode still isnt the default and new comers seeing the main page in its current state will quickly leave. 'Amateur hour' comes to mind.
 
#31 · (Edited)
Yeah, well, as they've said, they aren't done. This isn't the way it will be from now on. They are just trying to give us a site that functions well enough so that we can do what we do while they finish this migration. Don't worry about it if you can help it. Trust them. They got this. ;)

When zooming out, a bunch of new elements show up. New icons, new text, time stamps, post previews, usernames, etc. I want to get that with CSS somehow!


@xxpenguinxx can you make "Subscriptions" point to User CP? I know how silly that sounds, but on my personal installation of this, I would prefer that it bring me to User CP instead.
 
#32 ·
Considering you seem to have the time, and the current platform and staff seem to be up to implementing additional skins, why offer your hand in making this an official skin instead of a third party injection?

I never used your previous OCN Classic on huddler, as by the time it was fleshed out, the official UI had finally evolved to the point where I honestly preferred it over both your OCN classic and the old vB OCN. This time around however, the default looks *awful* and the staff don't seem to have any idea what they're supposed to be changing to fix it. Your OCN Classic 2.0 goes a long way towards making the site look like, well, OCN.

Oh, one suggestion. The red on multiquotes is a bit much. Perhaps a duller red would fit better.
 
#33 · (Edited)
OCN Classic 2.0 updated

Considering you seem to have the time, and the current platform and staff seem to be up to implementing additional skins, why offer your hand in making this an official skin instead of a third party injection?
Hmm. I like this idea! I'll give it some serious thought. This thing isn't finished yet, but perhaps they can install it and try to copy it. That would be pretty cool

I never used your previous OCN Classic on huddler, as by the time it was fleshed out, the official UI had finally evolved to the point where I honestly preferred it over both your OCN classic and the old vB OCN.
hehe funny. :) I couldn't live on OCN without OCN Classic.

This time around however, the default looks *awful* and the staff don't seem to have any idea what they're supposed to be changing to fix it. Your OCN Classic 2.0 goes a long way towards making the site look like, well, OCN.
Oh wow. Thank you. That made my day, Zero4549! :) Perhaps the neatest thing is, I'm not done with it yet. hahaha I still want to get these post headers changed to #46566B, but the problem is the thread header is already #46566B and I'm not sure what color would be best. Black might be ok, but it looked ugly when I tried it. White with no border to pretend like there's no thread header might be cool, but I imagine it to be a bit of a project. I don't know yet.

Oh, one suggestion. The red on multiquotes is a bit much. Perhaps a duller red would fit better.
Yeah, I admit I have been thinking about this for a while now! It was straight red #FF0000, but thanks to you (sincerely), I changed it to #B84300 and uploaded the new version and updated my OP. #B84300 is or was OCN's color for notification bubbles. I always liked it. I'm even using it for "THREAD STARTER" - at least until I figure out what to do with the thread header color so that I can finally make the post headers become #46566B. That #CCD3DD is ugly and it's the same color of the quote boxes. It's ok, but not great. I want it to be great. :)

Thanks again, Zero4549!





So, OCN Classic has been updated. I fixed the width of the login and password fields on that page that gets generated if you try to visit something like your User CP when you're not logged in. After my last update, those text fields became way too long. I also updated the color of the Multi-Quote button when it's on.

Go for it! https://userstyles.org/styles/154662/ocn-classic-2-0
 
#35 ·
I might have to provide it as more of an add-on (or rather, just another available style you can install) because it breaks OCN Live, so there's a trade-off right now. I'm not sure I'm up to the task of making that happen today, but I might be able to get a start in ~15 hours.
 
#37 · (Edited)
@TwoCables

To have the subscriptions go to the user CP instead of the subscriptions page, add this line above "/* Highligh notification links on hover */"

PHP:
$('.subnot').children('table:nth-child(2)').children('a').attr({"href":"http://www.overclock.net/forum/usercp.php"});

    /* Highligh notification links on hover */
Oh nice, thank you.

I'm curious about 2 things:

  1. Can the notification numbers be made to not underline along with the links for New Messages and Subscriptions?
  2. Do you think we could make "New Messages" just say "Private Messages" or even "Messages", but then say "New Message" and "New Messages" depending on whether there's 1 or more than 1? It would be awesome.
#2 above was done before for me. Here's the code if you want to see it (I have a feeling I could figure it out from this code, but my brain is mush right now from being awake for more than 24 hours hehe):

PHP:
   /*-----PUT "Private Messages" AND "Subscriptions" ON THE NAVBAR   ---   ALL OF THE FORMATTING AND STYLING IS IN THE "Theme Option" SCRIPTS-----*/

    /*-----CODE TO INCLUDE "Private Messages" and "Subscriptions" IN THE PROFILE MENU. CURRENTLY NO NOTIFICATION BUBBLES. SORRY. UN-COMMENT THE CODE TO USE IT BY DELETING "//"-----*/
//$("[*]").append($("<a/>", { text: "Subscriptions", href: "http://www.overclock.net/users/subscriptions" })).insertAfter($(".profile .menu .threads-started"));
//$("[*]").append($("<a/>", { text: "Private Messages", href: "http://www.overclock.net/messages" })).insertAfter($(".profile .menu .threads-started"));

  var privateMessagesCount = $('.messages .notification-counter') .first() .text() .replace(/s+/, '');
  var subscriptionsCount = $('.subscriptions .notification-counter') .first() .text() .replace(/s+/, '');
  var notificationModule = $('[*]', {
    class: 'jncontainer',
  });
  var msgText = privateMessagesCount == 1 ? 'New Message ' : privateMessagesCount < 1 ? 'Private Messages ' : 'New Messages ';
  var messagesContainer = $('<a/>', {
    href: 'http://www.overclock.net/messages',
    text: msgText,
    class: 'jlink',
  });
  var messagesCounter = $('', {
    text: privateMessagesCount,
    class: 'jcounter'
  });
  var subsContainer = $('<a/>', {
    href: 'http://www.overclock.net/users/subscriptions/',
    text: 'Subscriptions',
    class: 'jlink',
  });
  var subsCounter = $('', {
    text: subscriptionsCount,
    class: 'jcounter'
  });
  if (privateMessagesCount > 0) messagesContainer.append(messagesCounter);
   else messagesContainer.append($('', {
    class: 'jpadder',
    text: ''
  }));
  if (subscriptionsCount > 0) subsContainer.append(subsCounter);
   else subsContainer.append($('', {
    class: 'jpadder',
    text: ''
  }));
  notificationModule.append(messagesContainer);
  notificationModule.append(subsContainer);
  notificationModule.insertBefore($('#main-nav .profile'));  
}) ();
Of course, I can see in your code where to change "New Messages" to "Private Messages", but then the numbers get misaligned and I'm not figuring out how to align them. I thought I figured it out, but they didn't move to where I wanted them to. :)

If any of you already grabbed this code to begin using it but you would like to get rid of the background color change hover effect, then use this CSS code:

PHP:
    #navbar_search:hover {
        background: none;
    }
Or, you can make this code be a style all by itself:

PHP:
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("overclock.net") {
    #navbar_search:hover {
        background: none;
    }
}
 
#38 · (Edited)
I used "padding-left", but there's probably a better way to align the text. For the underlining, it can be changed it only highlights the text under your mouse rather than the whole section.

Here's the subscriptions section for aligning the text. There's no element when there are no new subscription notifications so I had to create one. You could just remove the if statement if you don't want a zero displayed.

PHP:
// Check if new subscriptions. Display 0 if none.

    var subcount = $(navnotifi).children('li').children('.subnot').children('table:nth-child(2)').children('a');

    if (subcount.length < 2) { 
         $(navnotifi).children('li').children('.subnot').children('table:nth-child(2)').append('[URL=http://www.overclock.net/forum/subscription.php?do=viewsubscription]0[/URL]');  
         $(navnotifi).children('li').children('.subnot').children('table:nth-child(2)').children('a:nth-child(2)').css({'padding-left':'18px',  'font-size':'larger'}); // adjust position. 
    }
Here's the new messages part:

line 48
PHP:
$(navnotifi).children('li').children('.subnot').children('table:first-child').append('[URL=http://www.overclock.net/forum/private.php]New  Messages[/URL]'); // New messages link
line 66
PHP:
// Highlight private messages if greater than 1.

    if (pmcount.html() > 0){
        pmcount.addClass('notifications');
        pmcount.css({'margin-left': '6px', 'border-radius':'25%', 'height':'14px', 'line-height':'14px', 'width':'14px'});
    }
    else{
         $('form.subnot').children('table:first-child').children('a:nth-child(2)').css({'padding-left':'10px',  'font-size':'larger'}); // adjust position
    }
EDIT:

Here's how to set each item to underline instead of the whole thing. Replace the section,"
/* Highligh notification links on hover */", to what is below:
PHP:
/* Highligh notification links on hover */

    $('.subnot').children('table').children('a').addClass('underline-on-hover');
    $('.subnot').children('table').children('a:first-child').before("<style>.underline-on-hover:hover {text-decoration: underline;}");
    $('.subnot').children('table').children('a').children('span').css({'text-decoration':'inherit'});
 
#41 ·
I used "padding-left", but there's probably a better way to align the text. For the underlining, it can be changed it only highlights the text under your mouse rather than the whole section.

Here's the subscriptions section for aligning the text. There's no element when there are no new subscription notifications so I had to create one. You could just remove the if statement if you don't want a zero displayed.

PHP:
// Check if new subscriptions. Display 0 if none.

    var subcount = $(navnotifi).children('li').children('.subnot').children('table:nth-child(2)').children('a');

    if (subcount.length < 2) { 
         $(navnotifi).children('li').children('.subnot').children('table:nth-child(2)').append('[URL=http://www.overclock.net/forum/subscription.php?do=viewsubscription]0[/URL]');  
         $(navnotifi).children('li').children('.subnot').children('table:nth-child(2)').children('a:nth-child(2)').css({'padding-left':'18px',  'font-size':'larger'}); // adjust position. 
    }
Here's the new messages part:

line 48
PHP:
$(navnotifi).children('li').children('.subnot').children('table:first-child').append('[URL=http://www.overclock.net/forum/private.php]New  Messages[/URL]'); // New messages link
line 66
PHP:
// Highlight private messages if greater than 1.

    if (pmcount.html() > 0){
        pmcount.addClass('notifications');
        pmcount.css({'margin-left': '6px', 'border-radius':'25%', 'height':'14px', 'line-height':'14px', 'width':'14px'});
    }
    else{
         $('form.subnot').children('table:first-child').children('a:nth-child(2)').css({'padding-left':'10px',  'font-size':'larger'}); // adjust position
    }
EDIT:

Here's how to set each item to underline instead of the whole thing. Replace the section,"
/* Highligh notification links on hover */", to what is below:
PHP:
/* Highligh notification links on hover */

    $('.subnot').children('table').children('a').addClass('underline-on-hover');
    $('.subnot').children('table').children('a:first-child').before("<style>.underline-on-hover:hover {text-decoration: underline;}");
    $('.subnot').children('table').children('a').children('span').css({'text-decoration':'inherit'});
Whoa you're fantastic. I'll check this out after I've had some sleep. :) I'm almost there now...

More suggestions:

The post count icons on the main page and Sidebar. It gives no relevant info whatsoever right now imo. Possibly a 'unread post' count instead of total post count. The icon is also too basic and I would like to see possibly a blue flame :clock: or something more sophisticated. You wanted feedback/suggestions, well, you got it! :p
The 'thought bubble' notification icon is in 2 parts: a rectangle text box container of some kind and that spike part. The rectangle is resizable, I can change the background color, the font, and other basic things like that. The spike is an actual image though from a sprite sheet. So, the best I could do is hide the spike and change the color and other basic things of the rectangle part.

I'd like to see an OCN flame with a number on it too, but I don't know how to do that - if it can even be done.

Oh, and as for making it an unread post count, I have no clue. If it can be done, then I'd love to see it. That does indeed make far more sense.

But yeah man, thank you! It's posts like yours that will help to make OCN Classic 2.0 get better and better and better.

I can confirm OCN Live to be working with Violentmonkey (v2.8.28) as well. I'm using Fifrefox 58.0.1.
Well down with Greasemonkey then! Booo Greasemonkey! hehe
 
#39 ·
More suggestions:

The post count icons on the main page and Sidebar. It gives no relevant info whatsoever right now imo. Possibly a 'unread post' count instead of total post count. The icon is also too basic and I would like to see possibly a blue flame :clock: or something more sophisticated. You wanted feedback/suggestions, well, you got it! :p
 

Attachments

#45 · (Edited)
I have a request, hoping you can help me out :eek:

I like having the navbar locked to the top of the screen so it follows as you scroll. However, I don't like the large size when at the top of a page. Wondering if its possible to lock it to the narrow size that it is when scrolling. Please see attached pics for what I mean. Thanks!


Large size at top of page


Narrow size, much better
 
#46 ·
I have a request, hoping you can help me out :eek:

I like having the navbar locked to the top of the screen so it follows as you scroll. However, I don't like the "bloated" size when at the top of a page. Wondering if its possible to lock it to the narrow size that it is when scrolling. Please see attached pics for what I mean. Thanks!


Bloated size at top of page, dislike


Narrow size, much better

I can probably figure that out, but it's not going to pull the rest of the page up with it. It'll just be ugly. It'll just show more of the #46566B background underneath the navbar, above the white area. So, I don't think it will make the kind of difference or improvement you might be envisioning.
 
#52 ·
I'm just saying that it doesn't seem to be worth our time to try to provide this since our options are too limited to make this be even remotely decent and it doesn't really seem to provide any benefit. It just looks like the site is broken or something.
 
#54 · (Edited by Moderator)
I just updated OCN Classic 2.0 to fix the hover color effect of the Multi-Quote button when it's 'enabled'. It was too light. Now it should be just about identical to the hover effect on the rest of the buttons, at least as far as how the effect looks and feels.

I just updated OCN Classic 2.0 to fix the hover color effect of the Multi-Quote button when it's 'enabled'. It was too light. Now it should be just about identical to the hover effect on the rest of the buttons, at least as far as how the effect looks and feels.

Edit: I just fixed the userscript for getting the classic blue flame favicon to work so that it doesn't break OCN Live!

https://greasyfork.org/en/scripts/37764-ocn-classic-blue-flame-favicon
 
This is an older thread, you may not receive a response, and could be reviving an old thread. Please consider creating a new thread.
Top