[How-to] Customize the OCN theme - Overclock.net - An Overclocking Community

Forum Jump: 

[How-to] Customize the OCN theme

Reply
 
Thread Tools
post #1 of 90 (permalink) Old 11-11-2011, 04:30 PM - Thread Starter
New to Overclock.net
 
nathris's Avatar
 
Join Date: Sep 2007
Location: Victoria, BC
Posts: 12,988
Rep: 1004 (Unique: 746)
Continued from here: https://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:
@-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:
nathris's OCN Style fix (Click to show)
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:
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's OCN Style fix (Click to show)
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:
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;
}
Blade's OCN Style fix (Click to show)
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"]

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


Screenshots! (Click to show)
Screenshot 1
329

Screenshot 2
329
CSS Code (Click to show)
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.

Quote:
Originally Posted by Miki
You have to work a lot harder at customizing an iPhone. I'm never going back. Ever.


nathris is offline  
Sponsored Links
Advertisement
 
post #2 of 90 (permalink) Old 11-11-2011, 04:33 PM
 
Join Date: Apr 2009
Location: Ocean City, Maryland
Posts: 8,747
thumb.gif
Lazloisdavrock is offline  
post #3 of 90 (permalink) Old 11-11-2011, 04:33 PM
New to Overclock.net
 
Allen86's Avatar
 
Join Date: Apr 2008
Location: Houston, Tx
Posts: 1,638
Rep: 73 (Unique: 67)
You should put screen shots of the different "fixes" if you're going to compile them into one thread.

Allen86 is offline  
Sponsored Links
Advertisement
 
post #4 of 90 (permalink) Old 11-11-2011, 04:34 PM - Thread Starter
New to Overclock.net
 
nathris's Avatar
 
Join Date: Sep 2007
Location: Victoria, BC
Posts: 12,988
Rep: 1004 (Unique: 746)
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?

Quote:
Originally Posted by Miki
You have to work a lot harder at customizing an iPhone. I'm never going back. Ever.


nathris is offline  
post #5 of 90 (permalink) Old 11-11-2011, 06:07 PM
Linux Lobbyist
 
Skoobs's Avatar
 
Join Date: Oct 2010
Posts: 3,088
Rep: 95 (Unique: 88)
Quote:
Originally Posted by nathris View Post

I... did?

where?

actually, its customizable, so everyone's results will be different.

SoCal Member
Steam: xSKOOBSx
Origin: xSKOOBSx


Skoobs is offline  
post #6 of 90 (permalink) Old 11-11-2011, 07:07 PM
New to Overclock.net
 
5prout's Avatar
 
Join Date: Oct 2010
Posts: 1,572
Rep: 56 (Unique: 52)
Oh my gosh. Thank you sooo much! I like this a whole lot better now!


5prout is offline  
post #7 of 90 (permalink) Old 11-11-2011, 07:46 PM
Retired Staff
 
-iceblade^'s Avatar
 
Join Date: Apr 2008
Location: Equestria :D
Posts: 16,922
Rep: 814 (Unique: 613)
would this work in opera?

R.I.P Syrillian
Blitz6804, ... you watch too many telecomunications commercials XD
staryoshi: Your wallet is tight like a clam. Let it breathe like a fish
JCG: you spent half of your life studying for a job, and the other half complaining about the said job
Miki, re Boxxy; She's totally adorable, who could not like her? I know, I know, some find her annoying. But, I think they are just boring so their opinions don't count.
Afrodisiac; You are such a hypocrite it's not even funny


-iceblade^ is offline  
post #8 of 90 (permalink) Old 11-11-2011, 07:47 PM
Retired Staff
 
KarmaKiller's Avatar
 
Join Date: Nov 2007
Location: Springfield
Posts: 4,214
Rep: 123 (Unique: 103)
Thanks for posting this.. Gonna start on a dark theme. smile.gif
+cookie for you

Learn how to use the new features of the site:


Currently Playing: H1Z1:KOTK, Overwatch, World of Tanks, Project Cars


KarmaKiller is offline  
post #9 of 90 (permalink) Old 11-11-2011, 07:57 PM
New to Overclock.net
 
5prout's Avatar
 
Join Date: Oct 2010
Posts: 1,572
Rep: 56 (Unique: 52)
Could you post the script when you are done KarmaKiller?


5prout is offline  
post #10 of 90 (permalink) Old 11-11-2011, 08:06 PM
Retired Staff
 
KarmaKiller's Avatar
 
Join Date: Nov 2007
Location: Springfield
Posts: 4,214
Rep: 123 (Unique: 103)
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

Learn how to use the new features of the site:


Currently Playing: H1Z1:KOTK, Overwatch, World of Tanks, Project Cars


KarmaKiller is offline  
Reply

Quick Reply
Message:
Options

Register Now

In order to be able to post messages on the Overclock.net - An Overclocking Community forums, you must first register.
Please enter your desired user name, your email address and other required details in the form below.
User Name:
If you do not want to register, fill this field only and the name will be used as user name for your post.
Password
Please enter a password for your user account. Note that passwords are case-sensitive.
Password:
Confirm Password:
Email Address
Please enter a valid email address for yourself.
Email Address:

Log-in



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Show Printable Version Show Printable Version
Email this Page Email this Page


Forum Jump: 

Posting Rules  
You may post new threads
You may post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off