Joined
·
18,254 Posts
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:
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:
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.
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]
}
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:
Code:
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:
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:
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
Direct .css download(Right Click 'Save link as...')
http://dl.dropbox.com/u/445558/overclock.net/Forum%20Ideas/Blade_OCN_Theme.css
Quote:
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/]
[URL=http://www.overclock.net/content/type/61/id/971702/width/600/height/329/flags/]
Screenshot 2
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.
