Overclock.net banner

1 - 20 of 90 Posts

·
Premium Member
Joined
·
12,992 Posts
Discussion Starter #1
Continued from here: http://www.overclock.net/t/1164450/more-contrast

Ok, so a lot of people seem to be having trouble with the new layout. The common issue is that its too "bright". Well, technically no. Brightness isn't the issue here(unless you have an eye condition). There are plenty of bright sites that work. The issue here is contrast. Contrast is essential to any webpage as it lets the user distinguish between different elements and read the text. OCN has no contrast, and that's why its a pain to use right now. (Note: contrast has been mostly fixed now)

But never fear! Our browsers have the ability to fix this. Pretty much every modern browser has the ability to impose custom style sheet rules to a website.

Firefox does this through it's userChrome.css file, Chrome does it through its Custom.css file and I'm pretty sure Opera has something similar.

But the point is, OCN uses a CSS file to define it's theme, and that CSS file can be customized.

The easiest way to do it is through the plugin Stylish. Stylish takes care of modifying the browsers CSS file for you:

Chrome: https://chrome.google.com/webstore/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe
Firefox: https://addons.mozilla.org/en-US/firefox/addon/stylish/?src=external-userstyleshome

The plugin differs slightly between Firefox and Chrome.

For Firefox you're going to have to wrap the CSS in a block telling the plugin that the rules will only affect overclock.net:

Code:

Code:
@-moz-document domain('overclock.net'){
[INDENT]//your CSS code goes here[/INDENT]
}
The Chrome plugin lets you handle this through the GUI:
76


So all you need to do is create a new style in Stylish and add some custom CSS rules and you have control over a large portion of the layout. Here are a couple to get you started:
I've created a custom CSS file that will relieve much of the problems with the layout, but keeping to the new color scheme:
343

Code:

Code:
td.last-post-col, table.forum-list-tbl th, .bg2,.last-post-thread-col, .smminus, .smplus {
    background: #ccd3dd !important;
}
td.icon-col, th.icon-col
{
    background: #4d5c71 !important;
}

.forum-col
{
    border-bottom-color: #888 !important;
}

table.forum-list-tbl th{
    background: #4d5c71 !important;
    color: #ffffff !important;
}
table.forum-list-tbl th a{
    color: #e3f0fe!important;
}

.tag-results .thread-list li,.selected, .selected .post-content-area, .selected .post-info-stat-cont, .selected .post-sig, .selected .H-toggle-title {
    background-color: #9dc2f2!important!;
}

#bc,.signature .widget .description,.post-sig,div.left-post-container ul.post-user-stats li span.unique-points, .related-row,.single-post .edited-by,div.postsby-container div.thread-hier-top li, div.postsby-container ul.thread-hier li,.forum-num-viewing, table.forum-list-tbl tbody tr td .forum-list-main-txt, table.forum-list-tbl tbody tr td .forum-list-sub-txt {
    color: #4d4b49!important;
}

.op-label {
    color: #89a2cc!important;
}
coffeejunky has gone ahead and tweaked it further to look more like the old layout, although it only works fully in Firefox, due to differences in how Chrome and Firefox render borders.
74db9895_betterocn2.png

Code:

Code:
td.last-post-col, table.forum-list-tbl th, .bg2,.last-post-thread-col, .smminus, .smplus {
    background: #ccd3dd !important;
}

td.btn-grp-right {
    background: #748BA5 !important;
border-top: 1px solid #748BA5 !important;
border-left: 1px solid #748BA5 !important;
border-right: 1px solid #748BA5 !important;
border-bottom: 1px solid #748BA5 !important;
padding-bottom: 0px !important;
padding-top: 0px !important;
}

td.btn-grp-right a{
    color: #f5f5f5 !important;
font-size: 13px !important;
font-weight: bold !important;
}

div.fj-control-bar.shazam{
display: none !important;
}

.tooltip.smminus.H-toggleHideCollapse.io.ibtn.btn, .tooltip.H-toggleHideCollapse.io.ibtn.btn.smplus {
margin-top: 1px !important;
}

.addsubscribe.ilink, .rss.itext.ilink {
margin-top: 4px !important;
}

a.header-logo {
margin-top: 44px !important;
}
#header-area {
margin-top: -33px !important;
}

td.icon-col, th.icon-col
{
    background: #ccd3dd !important;
  min-width: 25px !important;
  max-width: 25px !important;
}

.forum-col, .last-post-col, .narrow-col, .narrow-col-posts, td.icon-col, th.icon-col, .thread-col, .last-post-thread-col, .thread-col.compact, .last-post-thread-col.compact
{
    border-color: #999 !important;
}

th
{
    border-color: #999 !important;
border-right-width: 1px !important;
}

table.forum-list-tbl th{
    background: #4d5c71 !important;
    color: #f5f5f5 !important;
}

table.forum-list-tbl th a{
    background: #4d5c71 !important;
    color: #f5f5f5 !important;
}

.tag-results .thread-list li,.selected, .selected .post-content-area, .selected .post-info-stat-cont, .selected .post-sig, .selected .H-toggle-title {
    background-color: #9dc2f2!important!;
}

#bc,.signature .widget .description,.post-sig,div.left-post-container ul.post-user-stats li span.unique-points, .related-row,.single-post .edited-by,div.postsby-container div.thread-hier-top li, div.postsby-container ul.thread-hier li,.forum-num-viewing, table.forum-list-tbl tbody tr td .forum-list-main-txt, table.forum-list-tbl tbody tr td .forum-list-sub-txt {
    color: #4d4b49!important;
}
Now that I am done with butting the finishing touches on how I wanted my OCN to look, I decided to submit mine here into this thread for everyone to take a gander at and let me know what they think and if they like it. this was made specifically with chrome so anything not working in Firefox or Opera I will not know how to fix, please research CSS integration for the other browsers you use. I am by all means NOT taking requests or making any special designs. This will purely be updated by me for my own interest but anyone is welcomes to use it. The OP can move this to the main post so that everyone else can see it.
thumb.gif


Quote:
This blocks the Sidebar where your PM's/Folding Stats and other useless stuff normally shows up.
If using adblock, "Add your own filter" for OCN with the following:

Chrome
!www.overclock.net##DIV[id="sidebar[/URL]"]

Firefox
overclock.net###sidebar


Next I have the following options checked in my profile:
✓ Remove Homepage Carousel
✓ Remove Nested Quotes in Replies
✓ Constrain Threads to Constant Width
✓ Compact Thread List Page
✓ Hide right column in forum threads

For the few who have an overclocked account
✓ Turn off Advertising

Screenshot 1
[URL=http://www.overclock.net/content/type/61/id/971702/width/600/height/329/flags/]329
Screenshot 2
329
Code:

Code:
html, body {
  background-image: url('http: //dl.dropbox.com/u/445558/overclock.net/Forum%20Ideas/ocn_modified_background.png');
  background-repeat: repeat-x !important;
  background-attachment: fixed !important;
  background-position: left center !important;
  padding: 0 0 !important;
}
td.last-post-col, table.forum-list-tbl th, .bg2,.last-post-thread-col{
  background: #ccd3dd !important;
}
td.btn-grp-right {
  background: #748BA5 !important;
  border-top: 1px solid #748BA5 !important;
  border-left: 1px solid #748BA5 !important;
  border-right: 1px solid #748BA5 !important;
  border-bottom: 1px solid #748BA5 !important;
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}
td.btn-grp-right a{
  color: #f5f5f5 !important;
  font-size: 16px !important;
  font-family: Verdana, Kartika !important;
  font-weight: bold !important;
  font-smooth: always !important;
}
div.fj-control-bar.shazam{
  display: none !important;
}
.tooltip.smminus.H-toggleHideCollapse.io.ibtn.btn, .tooltip.H-toggleHideCollapse.io.ibtn.btn.smplus {
  margin-top: 1px !important;
}
.addsubscribe.ilink, .rss.itext.ilink {
  margin-top: 4px !important;
}
header a.logo {
  height: 60px !important;
  margin-bottom: 0 !important;
  margin-left: 20px !important;
  margin-right: 0 !important;
  margin-top: 20px !important;
}
header .ad {
  min-height: 0px !important;
}
td.icon-col, th.icon-col
{
  background: #ccd3dd !important;
  min-width: 25px !important;
  max-width: 25px !important;
}
.forum-col, .last-post-col, .narrow-col, .narrow-col-posts, td.icon-col, th.icon-col, .thread-col, .last-post-thread-col, .thread-col.compact, .last-post-thread-col.compact
{
  border-color: #999 !important;
}
th
{
  border-color: #999 !important;
  border-right-width: 1px !important;
}
table.forum-list-tbl th{
  background: #4d5c71 !important;
  color: #f5f5f5 !important;
}
table.forum-list-tbl th a{
  background: #4d5c71 !important;
  color: #f5f5f5 !important;
}
.tag-results .thread-list li,.selected, .selected .post-content-area, .selected .post-info-stat-cont, .selected .post-sig, .selected .H-toggle-title {
  background-color: #9dc2f2 !important;
}
.staticstream .three-column {
  padding-bottom: 0px !important;
  width: 33.2% !important;
}
.staticstream .column_1, .staticstream .column_2, .staticstream .column_3 {
  padding: 0px 0 5px !important;
}
.staticstream .two-column div.row, .staticstream .three-column div.row {
  border-bottom: 0px solid #000000 !important;
  height: 12px !important;
  margin: 0 5px 0 0 !important;
  overflow: hidden !important;
  padding: 4px 0 4px 5px !important;
  text-overflow: ellipsis !important;
  vertical-align: top !important;
  white-space: nowrap !important;
  z-index: 100 !important;
}
.staticstream .three-column div.row {
  max-width: 375px !important;
  min-width: 250px !important;
}
table.forum-list-tbl th, table.forum-list-tbl td {
  border-bottom: 1px solid #EDEDF2 !important;
  border-left: 1px solid #EBEBEB !important;
  padding: 0px 3px 0px 6px !important;
}
.forum-nav-control {
  font-size: 11px !important;
  margin-bottom: 0px !important;
  margin-left: 15px !important;
}
.forum-h1 {
  margin-bottom: 0px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
  margin-top: 0px !important;
}
.home .forum-h1, #main #whosonline h3 {
  background: none repeat scroll 0 0 #4D5C71 !important;
  border-top: 5px solid #D5D5D5 !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: bold !important;
  line-height: 18px !important;
  margin-bottom: 0px !important;
  padding: 5px 0 5px 10px !important;
  text-transform: uppercase !important;
}
#header-area {
  margin-top: -20px !important;
  margin-bottom: 0px !important;
  min-height: 80px !important;
}
#search-area {
  padding-bottom: 1px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  padding-top: 1px !important;
}
#content-wrapper {
  padding-bottom: 1px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  padding-top: 1px !important;
}
#bc,.signature .widget .description,.post-sig,div.left-post-container ul.post-user-stats li span.unique-points, .related-row,.single-post .edited-by,div.postsby-container div.thread-hier-top li, div.postsby-container ul.thread-hier li,.forum-num-viewing, table.forum-list-tbl tbody tr td .forum-list-main-txt, table.forum-list-tbl tbody tr td .forum-list-sub-txt {
  color: #4d4b49!important;
}
#whosonline .user-nums {
  color: #5E5E5E !important;
  font-size: 10px !important;
}#main #whosonline .user-nums {
  padding: 0 0 0px 0px !important;
}
#main #whosonline #online-cloud {
  padding: 0 0 0px 10px !important;
}
#whosonline #online-cloud {
  line-height: 16px !important;
  margin-left: -6px !important;
  padding: px 0 0px !important;
}
#whosonline #online-cloud a {
  margin-left: 6px !important;
}
#whosonline .btm-info {
  border-top: 0px solid #B9B9B9 !important;
  color: #6A6A6A !important;
  font-size: 11px !important;
  padding-top: 0px !important;
  text-align: right !important;
}
#main #whosonline .btm-info {
  margin-bottom: 0px !important;
  padding: 0 0 0px 10px !important;
}
#bc {
  margin-bottom: 0px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
  margin-top: 0px !important;
  padding-bottom: 5px !important;
}

Direct .css download(Right Click 'Save link as...')
http://dl.dropbox.com/u/445558/overclock.net/Forum%20Ideas/Blade_OCN_Theme.css

All you need to do is copy and paste one of these into a new Stylish file and follow the instructions up the top of this post.

But why stop there? OCN is looking into the possibility of additional themes, but that's only going to happen after all of the bugs have been fixed (so... a while). If you want to create your own custom theme for OCN there's nothing stopping you. Feel free to post any custom designs or ideas you've come up with, and if you don't know enough CSS or HTML, post a screenshot of what you think needs to be changed, and I'll see if I can figure it out.
 

·
Premium Member
Joined
·
12,992 Posts
Discussion Starter #4
Quote:
Originally Posted by Allen86 View Post

You should put screen shots of the different "fixes" if you're going to compile them into one thread.
I... did?
 

·
Premium Member
Joined
·
16,927 Posts
would this work in opera?
 

·
Premium Member
Joined
·
4,217 Posts
Thanks for posting this.. Gonna start on a dark theme.
smile.gif

+cookie for you
 

·
Premium Member
Joined
·
4,217 Posts
Quote:
Originally Posted by 5prout View Post

Could you post the script when you are done KarmaKiller?
Sure will.. no promises on time though. I've got about 4 other sites I need to syle/code before I get to "free time work"...
I'll post it up when I have something started and take suggestions.
smile.gif
 

·
Premium Member
Joined
·
1,152 Posts
Quote:
Originally Posted by nathris View Post

But why stop there? OCN is looking into the possibility of additional themes, but that's only going to happen after all of the bugs have been fixed (so... a while).
No. They won't. I have well over half a century of people telling me to "just wait and we'll make it all better."
What is actually being said is, "Get used to it. We ain't changing a damn thing for you or anyone else!"
And the oldie but still suckie, "Change is Money, mister! We've spent enough as is and ain't gonna waste a damned penny on any more Change!"
The same-o, same-o. Me? The brightness, contrast, whatever has given me another migraine. I'm going to take some more codeine and try to watch the tube.
Almost forgot. I don't use Chrome, Opera or Firefox so I can't change the looks of this, used to be, excellent site. If I even decided to change browsers, (I won't, you know?), that will not make this Forum easy to use as it was just a few days ago. It's been totally ruined. For what? Hell if I know. It reminds me of something I've seen before but can't quite place. A news site I tried reading through once, I think. I guess I don't remember because I never went back there. I didn't have years of my life and interests invested in that site as I do this one. That's a big difference. I didn't care for that news site. I care plenty about OCN. Too much it seems. I honestly feel personally betrayed.
 

·
Premium Member
Joined
·
12,992 Posts
Discussion Starter #12
Quote:
Originally Posted by -iceblade^ View Post

would this work in opera?
It should: http://www.opera.com/docs/usercss/
Quote:
Originally Posted by kzinti1 View Post

No. They won't. I have well over half a century of people telling me to "just wait and we'll make it all better."
What is actually being said is, "Get used to it. We ain't changing a damn thing for you or anyone else!"
And the oldie but still suckie, "Change is Money, mister! We've spent enough as is and ain't gonna waste a damned penny on any more Change!"
The same-o, same-o. Me? The brightness, contrast, whatever has given me another migraine. I'm going to take some more codeine and try to watch the tube.
Almost forgot. I don't use Chrome, Opera or Firefox so I can't change the looks of this, used to be, excellent site. If I even decided to change browsers, (I won't, you know?), that will not make this Forum easy to use as it was just a few days ago. It's been totally ruined. For what? Hell if I know. It reminds me of something I've seen before but can't quite place. A news site I tried reading through once, I think. I guess I don't remember because I never went back there. I didn't have years of my life and interests invested in that site as I do this one. That's a big difference. I didn't care for that news site. I care plenty about OCN. Too much it seems. I honestly feel personally betrayed.
Actually since I posted my fix they've darkened the text color to make it more readable, and are working on other elements as well. And this should work in IE as well, but I've completely stripped that garbage from my computer and I'm not going to reinstall it just to test it.
 

·
Premium Member
Joined
·
16,927 Posts
this works awesomely. thank you so so so so SO much
smile.gif
 

·
Premium Member
Joined
·
9,806 Posts
Ok, I went and tried to put in Coffee junkies style code and got a few error messages (in FF).

CoffeejunkiesOCNstyleerrormsgs1.jpg


In this first one, it has something to do with the // . I'm no coder so I have no idea.

CoffeejunkiesOCNstyleerrormsgs.jpg


In the second same deal it seems.

There was also another that I had already fixed, on mine it was line 44 at the end of the line where is says: !important; there was an additional ! after important. I just deleted the extra exclamation point and it went away.

At any rate, how do I fix the errors?
 

·
Premium Member
Joined
·
11,939 Posts
Quote:
Originally Posted by BlackOmega View Post

Ok, I went and tried to put in Coffee junkies style code and got a few error messages (in FF).

In this first one, it has something to do with the // . I'm no coder so I have no idea.

In the second same deal it seems.

There was also another that I had already fixed, on mine it was line 44 at the end of the line where is says: !important; there was an additional ! after important. I just deleted the extra exclamation point and it went away.

At any rate, how do I fix the errors?
For some reason some forum formatting has been pasted in with the code, it should just be
Quote:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain('overclock.net'){
then just remove those two indents.
Honestly it is probably easier for you to just download the file here, as it will be free from any imposed forum formatting -
http://dl.dropbox.com/u/8006874/userContent.css
(the above file will only work on Firefox!)
And good catch on that extra exclamation mark, as I said I just posted it up quickly, didn't exactly expect lots of people to be using it xD

I'll tidy the code a little later today, and re-upload a new version
smile.gif


EDIT: Another thing I should add. OCN may break for you at some point in the future due to this code (it's unlikely), if you have a bug to report please temporarily remove the style before contacting the Huddler/OCN team. I will try and continue to support the upkeep of the style as long as I can regardless of what changes the Huddler team make, even if I do not use the style myself by then
tongue.gif
 
1 - 20 of 90 Posts
Top