Overclock.net banner

1 - 20 of 79 Posts

·
Not new to Overclock.net
Joined
·
77,827 Posts
Discussion Starter #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/17790-bugs-technical-issues/1653881-single-bump-when-scrolling-down-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

  • Rep+
Reactions: keikei

·
Not new to Overclock.net
Joined
·
77,827 Posts
Discussion Starter #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/17790-bugs-technical-issues/1653881-single-bump-when-scrolling-down-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.
 

·
Not new to Overclock.net
Joined
·
77,827 Posts
Discussion Starter #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
 

·
Joined
·
2,423 Posts
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

·
Not new to Overclock.net
Joined
·
77,827 Posts
Discussion Starter #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

·
Joined
·
2,423 Posts
For some odd reason the navbar does not shrink for me so I am unable to test it. It did when they first updated the site. It might be a web filtering issue. I do not think it will work right since I had to manually resize the boxes.
 

·
Not new to Overclock.net
Joined
·
77,827 Posts
Discussion Starter #7 (Edited)
For some odd reason the navbar does not shrink for me so I am unable to test it. It did when they first updated the site. It might be a web filtering issue. I do not think it will work right since I had to manually resize the boxes.
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 "//"-----*/
//$("<li/>").append($("<a/>", { text: "Subscriptions", href: "http://www.overclock.net/users/subscriptions" })).insertAfter($(".profile .menu .threads-started"));
//$("<li/>").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 = $('<li/>', {
    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 = $('<span/>', {
    text: privateMessagesCount,
    class: 'jcounter'
  });
  var subsContainer = $('<a/>', {
    href: 'http://www.overclock.net/users/subscriptions/',
    text: 'Subscriptions',
    class: 'jlink',
  });
  var subsCounter = $('<span/>', {
    text: subscriptionsCount,
    class: 'jcounter'
  });
  if (privateMessagesCount > 0) messagesContainer.append(messagesCounter);
   else messagesContainer.append($('<span/>', {
    class: 'jpadder',
    text: ''
  }));
  if (subscriptionsCount > 0) subsContainer.append(subsCounter);
   else subsContainer.append($('<span/>', {
    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;
}
 

·
Joined
·
2,423 Posts
I'll see if I can get it working with the scrolled navbar. I got the notifications to highlight when moused over and the PM message count is highlighted when there are unread messages. Code is sloppy, I need to clean it up.


 

Attachments

·
Not new to Overclock.net
Joined
·
77,827 Posts
Discussion Starter #9 (Edited by Moderator)
I'll see if I can get it working with the scrolled navbar. I got the notifications to highlight when moused over and the PM message count is highlighted when there are unread messages. Code is sloppy, I need to clean it up.


Wow. Thank you. You're the best for doing this.

If I wanted to put Subscriptions on the bottom, would that be easy for me to do if I know nothing about JavaScript?

OCN Classic 2.0 updated again!


  • Quote box color restored
  • Code box color restored
  • Spoiler box color restored
 

·
Joined
·
2,423 Posts
Wow. Thank you. You're the best for doing this.

If I wanted to put Subscriptions on the bottom, would that be easy for me to do if I know nothing about JavaScript?
Change the order that each element is applied in or use before/after selectors to place them in the right spot. Jquery has some pretty detailed documentation on this.

I really don't know javascript, I'm just going by the documentation on there. It's mostly guess and check .
 

·
Not new to Overclock.net
Joined
·
77,827 Posts
Discussion Starter #12
Change the order that each element is applied in or use before/after selectors to place them in the right spot. Jquery has some pretty detailed documentation on this.

I really don't know javascript, I'm just going by the documentation on there. It's mostly guess and check .
Oh. Thank you. I'll think about it. :)

Hey TC, can you make us a theme to make OCN look just like the old huddler?

Thanks, nvidia
I'm not sure it's possible. What, exactly, would you like to see? Can you give me a run-down of every element you'd like changed?
 

·
Registered
Joined
·
6,912 Posts
Oh. Thank you. I'll think about it. :)


I'm not sure it's possible. What, exactly, would you like to see? Can you give me a run-down of every element you'd like changed?
Oh wow, I didn't expect that response. I was just being facetious since I know you hated Huddler. If serious I'll look into it but I'm not sure I'll be a regular poster for too much longer.
 

·
Not new to Overclock.net
Joined
·
77,827 Posts
Discussion Starter #14
Oh wow, I didn't expect that response. I was just being facetious since I know you hated Huddler. If serious I'll look into it but I'm not sure I'll be a regular poster for too much longer.
I don't get it. What's the problem? Why would you quit? What don't you like?
 

·
Registered
Joined
·
6,912 Posts
I don't get it. What's the problem? Why would you quit? What don't you like?
Lots of reasons. One, I'm no longer very helpful here anymore. My hardware is ready to be put into a museum, and I just don't have a lot to do here anymore. Two, I'm not a fan of vB. It's a step backwards IMO and ripped out some of my favorite features like the fantastic WYSIWYG editor. Three I don't like the new owners and what they stand for. If it weren't for a techy forum putting it's foot down, they would have never started the process for https on any of their sites. Four, my few Off-Topic threads I post in are dwindling in post count. Five, I browse mostly from my phone and with the current mobile site it's just not worth it. Takes too long to find your last unread post and whatnot. I know a fix is coming. Lastly, OCN is just a huge time-waste and I have enough of that as a college student. So, yeah.
 

·
Not new to Overclock.net
Joined
·
77,827 Posts
Discussion Starter #16 (Edited)
Lots of reasons. One, I'm no longer very helpful here anymore. My hardware is ready to be put into a museum, and I just don't have a lot to do here anymore. Two, I'm not a fan of vB. It's a step backwards IMO and ripped out some of my favorite features like the fantastic WYSIWYG editor. Three I don't like the new owners and what they stand for. If it weren't for a techy forum putting it's foot down, they would have never started the process for https on any of their sites. Four, my few Off-Topic threads I post in are dwindling in post count. Five, I browse mostly from my phone and with the current mobile site it's just not worth it. Takes too long to find your last unread post and whatnot. I know a fix is coming. Lastly, OCN is just a huge time-waste and I have enough of that as a college student. So, yeah.
K, well, you'll be missed.

By the way, there's a WYSIWYG editor.

You'd be a fan of vBulletin if you knew exactly how amazing OCN was on it before it went to Huddler. You were here for only 1 month before OCN switched to Huddler. I was here for 3 years. Huddler was a 6-year long harsh winter nightmare for me. I hated every damn second of it!!!! heh I had reasons EVERY SINGLE DAY to say "[CENSORED!!!!!!] I HATE THIS [CENSORED] PLATFORM!!" (insert actual rage here) So for me, this migration is like, hey, summer is back and it's great! heh This is a HUGE relief for me. I haven't been this happy on OCN in over 6 years.
 

·
Registered
Joined
·
6,912 Posts
K, well, you'll be missed.

By the way, there's a WYSIWYG editor.

You'd be a fan of vBulletin if you knew exactly how amazing OCN was on it before it went to Huddler. You were here for only 1 month before OCN switched to Huddler. I was here for 3 years. Huddler was a 6-year long harsh winter nightmare for me. I hated every damn second of it!!!! heh I had reasons EVERY SINGLE DAY to say "[CENSORED!!!!!!] I HATE THIS [CENSORED] PLATFORM!!" (insert actual rage here) So for me, this migration is like, hey, summer is back and it's great! heh This is a HUGE relief for me. I haven't been this happy on OCN in over 6 years.
Well I'm glad you like it. I wouldn't be a member here if it weren't for the fact that [H] required a non webmail account 7 years ago. I would have been a just a lurker for longer but the OP of 'Unlock and Overclock your Twin Frozr II' chose to use spoilers. Preventing non-members from viewing spoilers was real lousy and I'm glad Huddler removed that.

I use the WYSISYG editor, but if it was a true WYSIWYG editor I wouldn't be seeing quote tags in it. Huddler was a true WYSIWYG. So far I've seen 0 advantages to vB, but that's for a different time and thread, I don't want to derail your OCN Classic thread anymore than I have.
 

·
Not new to Overclock.net
Joined
·
77,827 Posts
Well I'm glad you like it. I wouldn't be a member here if it weren't for the fact that [H] required a non webmail account 7 years ago. I would have been a just a lurker for longer but the OP of 'Unlock and Overclock your Twin Frozr II' chose to use spoilers. Preventing non-members from viewing spoilers was real lousy and I'm glad Huddler removed that.

I use the WYSISYG editor, but if it was a true WYSIWYG editor I wouldn't be seeing quote tags in it. Huddler was a true WYSIWYG. So far I've seen 0 advantages to vB, but that's for a different time and thread, I don't want to derail your OCN Classic thread anymore than I have.
It's all good. Like I said, you will definitely be missed, but you have some damn good reasons for leaving - particularly college.

Wow, I'm wrapping all the code I post in PHP tags from now on. Check this out:
Before, with the CODE tags:

Code:
    .hasScrolled #nav.login-nav > li {
        width: 60px;
        transition: all 0.3s ease !important;
    }
    div#header.hasScrolled {
        opacity: .0;
        transition: all .3s ease !important;
    }
    div#header.hasScrolled:hover {
        opacity: 1;
        transition: ease-in-out .3s !important;
        transition-delay: 65ms !important;
    }
    #header {
        transition: all 0.3s ease !important;
    }
After:

PHP:
    .hasScrolled #nav.login-nav > li {
        width: 60px;
        transition: all 0.3s ease !important;
    }
    div#header.hasScrolled {
        opacity: .0;
        transition: all .3s ease !important;
    }
    div#header.hasScrolled:hover {
        opacity: 1;
        transition: ease-in-out .3s !important;
        transition-delay: 65ms !important;
    }
    #header {
        transition: all 0.3s ease !important;
    }
 

·
Not new to Overclock.net
Joined
·
77,827 Posts
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

·
Joined
·
2,423 Posts
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('<li id="navbar_search"></li>'); // 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('<form></form>');
    $(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("<style>.blank:before{background:none !important;}</style>"); // 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('<li id="navbar_search"></li>'); // 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('<form></form>'); // 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 style="margin-top: 4px;"></table>'); // Second table. Margin used for spacing.
    $(navnotifi).children('li').children('.subnot').children('table:first-child').append('<a href="http://www.overclock.net/forum/private.php">New Messages</a>'); // 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('<a href="http://www.overclock.net/forum/subscription.php?do=viewsubscription">0</a>');
        $(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

1 - 20 of 79 Posts
Top