Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › [How-to] Customize the OCN theme
New Posts  All Forums:Forum Nav:

[How-to] Customize the OCN theme - Page 6

post #51 of 90
Yeah, the way it's styled doesn't allow the image to be displayed or something of the sort...
Anyways, gradient BG is aesthetics...
Did you narrow down the side margins? If so, how?
Edited by csm725 - 11/18/11 at 2:58am
Turbulence
(19 items)
 
  
CPUMotherboardGraphicsRAM
Intel i5-2500k 4.4GHz Asus P8P67 Pro 3.1 HIS HD 7870 2GB G.SKILL Ripjaws X 16GB 1600MHz 
Hard DriveHard DriveOptical DriveCooling
Crucial m4 128GB Samsung Spinpoint F3 1TB Asus DRW-24B1ST Noctua NH-D14 
CoolingOSMonitorKeyboard
Accelero Twin Turbo II Windows 7 Professional N Dell U2311H Realforce 87U White 55cN 
PowerCaseMouseMouse Pad
Corsair TX650V2 Fractal Design R3 Black Pearl Razer DeathAdder SteelSeries 4HD 
AudioAudioAudio
Audinst HUD-mx1 Beyerdynamic DT990 Premium 600 Ω Recabled M-Audio AV40 
  hide details  
Reply
Turbulence
(19 items)
 
  
CPUMotherboardGraphicsRAM
Intel i5-2500k 4.4GHz Asus P8P67 Pro 3.1 HIS HD 7870 2GB G.SKILL Ripjaws X 16GB 1600MHz 
Hard DriveHard DriveOptical DriveCooling
Crucial m4 128GB Samsung Spinpoint F3 1TB Asus DRW-24B1ST Noctua NH-D14 
CoolingOSMonitorKeyboard
Accelero Twin Turbo II Windows 7 Professional N Dell U2311H Realforce 87U White 55cN 
PowerCaseMouseMouse Pad
Corsair TX650V2 Fractal Design R3 Black Pearl Razer DeathAdder SteelSeries 4HD 
AudioAudioAudio
Audinst HUD-mx1 Beyerdynamic DT990 Premium 600 Ω Recabled M-Audio AV40 
  hide details  
Reply
post #52 of 90
Well fiddlesticks!

Thanks I made the Gradient BG myself, just a nice added touch. tongue.gif

I went ahead and updated the image of what my OCN looks like now, I think you will be able to tell a big difference in narrowing the padding around everything.

The side margins are not narrowed down, I just cut the margins out cause I felt they weren't useful. Lol. I'm using the fixed width option.
post #53 of 90
Ah. Shame, because the waste of space on the homepage is incredible frown.gif
BTW, nice gradient =)
Also, I haven't used or heard anyone use the phrase "fiddlesticks!" in so long; I now remember how much I love it! biggrin.gif Thanks! wubsmiley.gif
Turbulence
(19 items)
 
  
CPUMotherboardGraphicsRAM
Intel i5-2500k 4.4GHz Asus P8P67 Pro 3.1 HIS HD 7870 2GB G.SKILL Ripjaws X 16GB 1600MHz 
Hard DriveHard DriveOptical DriveCooling
Crucial m4 128GB Samsung Spinpoint F3 1TB Asus DRW-24B1ST Noctua NH-D14 
CoolingOSMonitorKeyboard
Accelero Twin Turbo II Windows 7 Professional N Dell U2311H Realforce 87U White 55cN 
PowerCaseMouseMouse Pad
Corsair TX650V2 Fractal Design R3 Black Pearl Razer DeathAdder SteelSeries 4HD 
AudioAudioAudio
Audinst HUD-mx1 Beyerdynamic DT990 Premium 600 Ω Recabled M-Audio AV40 
  hide details  
Reply
Turbulence
(19 items)
 
  
CPUMotherboardGraphicsRAM
Intel i5-2500k 4.4GHz Asus P8P67 Pro 3.1 HIS HD 7870 2GB G.SKILL Ripjaws X 16GB 1600MHz 
Hard DriveHard DriveOptical DriveCooling
Crucial m4 128GB Samsung Spinpoint F3 1TB Asus DRW-24B1ST Noctua NH-D14 
CoolingOSMonitorKeyboard
Accelero Twin Turbo II Windows 7 Professional N Dell U2311H Realforce 87U White 55cN 
PowerCaseMouseMouse Pad
Corsair TX650V2 Fractal Design R3 Black Pearl Razer DeathAdder SteelSeries 4HD 
AudioAudioAudio
Audinst HUD-mx1 Beyerdynamic DT990 Premium 600 Ω Recabled M-Audio AV40 
  hide details  
Reply
post #54 of 90
I fixed the - thing on my latest version, it's only for firefox at the moment (been too busy to work on Chrome compatibility, maybe you can blade)
Anyway find it here -
http://dl.dropbox.com/u/8006874/OCN2/userContent.css
post #55 of 90
Still no way to widen the homepage? =/
Thanks though wink.gif
Turbulence
(19 items)
 
  
CPUMotherboardGraphicsRAM
Intel i5-2500k 4.4GHz Asus P8P67 Pro 3.1 HIS HD 7870 2GB G.SKILL Ripjaws X 16GB 1600MHz 
Hard DriveHard DriveOptical DriveCooling
Crucial m4 128GB Samsung Spinpoint F3 1TB Asus DRW-24B1ST Noctua NH-D14 
CoolingOSMonitorKeyboard
Accelero Twin Turbo II Windows 7 Professional N Dell U2311H Realforce 87U White 55cN 
PowerCaseMouseMouse Pad
Corsair TX650V2 Fractal Design R3 Black Pearl Razer DeathAdder SteelSeries 4HD 
AudioAudioAudio
Audinst HUD-mx1 Beyerdynamic DT990 Premium 600 Ω Recabled M-Audio AV40 
  hide details  
Reply
Turbulence
(19 items)
 
  
CPUMotherboardGraphicsRAM
Intel i5-2500k 4.4GHz Asus P8P67 Pro 3.1 HIS HD 7870 2GB G.SKILL Ripjaws X 16GB 1600MHz 
Hard DriveHard DriveOptical DriveCooling
Crucial m4 128GB Samsung Spinpoint F3 1TB Asus DRW-24B1ST Noctua NH-D14 
CoolingOSMonitorKeyboard
Accelero Twin Turbo II Windows 7 Professional N Dell U2311H Realforce 87U White 55cN 
PowerCaseMouseMouse Pad
Corsair TX650V2 Fractal Design R3 Black Pearl Razer DeathAdder SteelSeries 4HD 
AudioAudioAudio
Audinst HUD-mx1 Beyerdynamic DT990 Premium 600 Ω Recabled M-Audio AV40 
  hide details  
Reply
post #56 of 90
Quote:
Originally Posted by coffeejunky View Post

I fixed the - thing on my latest version, it's only for firefox at the moment (been too busy to work on Chrome compatibility, maybe you can blade)
Anyway find it here -
http://dl.dropbox.com/u/8006874/OCN2/userContent.css

How did you go about fixing it? As I'm trying to compare the old and new .css file they are in different orders and I don't know what option in firefox actually made the difference. Lol
post #57 of 90
Quote:
Originally Posted by csm725 View Post

Still no way to widen the homepage? =/
Thanks though wink.gif
I don't think I can find a way to do it through the CSS, no frown.gif
Quote:
Originally Posted by +Blade+ View Post

Quote:
Originally Posted by coffeejunky View Post

I fixed the - thing on my latest version, it's only for firefox at the moment (been too busy to work on Chrome compatibility, maybe you can blade)
Anyway find it here -
http://dl.dropbox.com/u/8006874/OCN2/userContent.css

How did you go about fixing it? As I'm trying to compare the old and new .css file they are in different orders and I don't know what option in firefox actually made the difference. Lol

No problem smile.gif

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

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

Basically just remove ".smminus, .smplus".
Would have gone into this with more detail this morning, but didn't have time smile.gif
post #58 of 90
Awesome! I did the same edit for mine in chrome and it fixed it in there as well. So looks like that was a universal fix.
post #59 of 90
After a bit of digging through the OCN CSS, I have found the variable that controls the forum widths. This will prevent the annoyance csm had with wasted space on profiles and the main homepage. It also allows greater flexibility with aero-snap (no horizontal scrollbars with 2 windows side-by side!). For this fix to work you must have 'View Forums Full Width' set to No. It will not work otherwise.

Download the UserContent.css file here, this version does not have my stylesheet colour fixes included, and is intended for people who just want the width improvement -
http://dl.dropbox.com/u/8006874/OCN2/width/userContent.css

You may customise the width to your own liking by editing the following percentage in the file-
Code:
#main-container.semi-fluid {
min-width: 550px !important;
max-width: 93% !important;
}
Change 93% to any value you like, this is a percentage of your total screen estate, 94% or higher will make the page wider, 92% or lower will make it narrower. I like 93%.


And here is an updated version of my stylesheet, with customised colours/readability and the width fix. It also fixed a small change Huddler made in the last code drop.
Download it here -
http://dl.dropbox.com/u/8006874/OCN2/v3/userContent.css

Updated 2nd Dec 2011 - fixed header logo v-offset.

Nathris it would be great if you could update the OP, or just provide a link to my dropbox file above, I can update it immediately if need be that way.
Edited by coffeejunky - 12/2/11 at 2:24pm
post #60 of 90
Well, I thought I'd try my hand at creating my own style. All the greys showing up everywhere were starting to annoy me. I just wanted a little bit less grey, so that's what I focused on. I also made thread lists more compact (even in compact mode, they aren't compact enough for me! biggrin.gif ) and changed sticky threads from a blue background to yellow. (because the thread onMouseOver highlight box is blue)

LessGrey Theme - CSS (Click to show)
Code:
@-moz-document domain('overclock.net'){

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


    .forum-announcement {
        background-color: rgb(247, 246, 227) !important;
        border-top-color: rgb(231, 220, 197) !important;
        border-bottom-color: rgb(231, 220, 197) !important;
        padding-top: 8px !important;
        padding-right: 8px !important;
        padding-bottom: 8px !important;
        padding-left: 8px !important;
    }
    

    .icon-col, .thread-col, .last-post-thread-col, .narrow-col {
        padding-top: 5px !important;
        padding-bottom: 4px !important;
    }
    
    .last-post-thread-col {
        background-color: rgb(204, 214, 226) !important;
    }
    
    .forum-list-tbl th, .icon-col {
        background-color: rgb(204, 207, 227) !important;
        color: rgb(37, 64, 143) !important;
    }

    .last-post-col {
        padding-top: 5px !important;
        padding-bottom: 4px !important;
    }
    
    div.quote-block div.quote-block {
        background-color: rgb(216, 224, 236) !important;
    }
    div.quote-block div.quote-block div.quote-block {
        background-color: rgb(204, 211, 221) !important;
    }
    div.quote-block div.quote-block div.quote-block div.quote-block {
        background-color: rgb(216, 224, 236) !important;
    }
    div.quote-block div.quote-block div.quote-block div.quote-block div.quote-block {
        background-color: rgb(204, 211, 221) !important;
    }
    div.quote-block div.quote-block div.quote-block div.quote-block div.quote-block div.quote-block {
        background-color: rgb(216, 224, 236) !important;
    }
    
    a.spoiler-link {
        background-color: rgb(216, 224, 236) !important;
    }
    
    div.spoiler-inner {
        background-color: rgb(224, 232, 240) !important;
    }
}
LessGrey Theme - Screenshots (Click to show)
overclocknetthemelessgr.png
overclocknetthemelessgr.png
overclocknetthemelessgr.png
overclocknetthemelessgr.png

I had the option of compacting the forum lists as well, and stripping out padding on posts... but for now I opted not to.

Some of these CSS padding tweaks might be beneficial to netbook users. smile.gif

Edit: New version! LessGrey Theme v2 - CSS (Click to show)
Code:
@-moz-document domain('overclock.net'){

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


    .forum-announcement {
        background-color: rgb(247, 246, 227) !important;
        border-top-color: rgb(231, 220, 197) !important;
        border-bottom-color: rgb(231, 220, 197) !important;
        padding-top: 8px !important;
        padding-right: 8px !important;
        padding-bottom: 8px !important;
        padding-left: 8px !important;
    }
    

    .icon-col, .thread-col, .last-post-thread-col, .narrow-col {
        padding-top: 5px !important;
        padding-bottom: 4px !important;
    }
    
    .last-post-thread-col {
        background-color: rgb(204, 214, 226) !important;
    }
    
    .forum-list-tbl th, .icon-col {
        background-color: rgb(204, 207, 227) !important;
        color: rgb(37, 64, 143) !important;
    }

    .last-post-col {
        padding-top: 5px !important;
        padding-bottom: 4px !important;
    }
    
    div.quote-block div.quote-block {
        background-color: rgb(216, 224, 236) !important;
    }
    div.quote-block div.quote-block div.quote-block {
        background-color: rgb(204, 211, 221) !important;
    }
    div.quote-block div.quote-block div.quote-block div.quote-block {
        background-color: rgb(216, 224, 236) !important;
    }
    div.quote-block div.quote-block div.quote-block div.quote-block div.quote-block {
        background-color: rgb(204, 211, 221) !important;
    }
    div.quote-block div.quote-block div.quote-block div.quote-block div.quote-block div.quote-block {
        background-color: rgb(216, 224, 236) !important;
    }
    
    a.spoiler-link {
        background-color: rgb(216, 224, 236) !important;
    }
    
    div.spoiler-inner {
        background-color: rgb(224, 232, 240) !important;
    }
    
    div.forum-post-date, div.forum-post-num {
        padding-top: 8px !important;
        padding-right: 8px !important;
        padding-bottom: 8px !important;
        padding-left: 8px !important;
    }
    
    div.forum-post-num {
        background-color: rgb(216, 224, 236) !important;
    }
}
I compacted post headers a tiny bit. I also changed the greeny-grey colour under the post number to light blue.

Edit2: New version! [2011-12-03] (fixes Logo and some other minor things) LessGrey Theme v3 - CSS (Click to show)
Code:
@-moz-document domain('overclock.net'){

    #header-area {
        margin-top: -16px !important;
        margin-bottom: -16px !important;
    }


    .forum-announcement {
        background-color: rgb(247, 246, 227) !important;
        border-top-color: rgb(231, 220, 197) !important;
        border-bottom-color: rgb(231, 220, 197) !important;
        padding-top: 8px !important;
        padding-right: 8px !important;
        padding-bottom: 8px !important;
        padding-left: 8px !important;
    }
    

    .icon-col, .thread-col, .last-post-thread-col, .narrow-col {
        padding-top: 5px !important;
        padding-bottom: 4px !important;
    }
    
    .last-post-thread-col {
        background-color: rgb(204, 214, 226) !important;
    }
    
    .forum-list-tbl th, .icon-col {
        background-color: rgb(204, 207, 227) !important;
        color: rgb(37, 64, 143) !important;
    }

    .last-post-col {
        padding-top: 5px !important;
        padding-bottom: 4px !important;
    }
    
    div.quote-block div.quote-block {
        background-color: rgb(216, 224, 236) !important;
    }
    div.quote-block div.quote-block div.quote-block {
        background-color: rgb(204, 211, 221) !important;
    }
    div.quote-block div.quote-block div.quote-block div.quote-block {
        background-color: rgb(216, 224, 236) !important;
    }
    div.quote-block div.quote-block div.quote-block div.quote-block div.quote-block {
        background-color: rgb(204, 211, 221) !important;
    }
    div.quote-block div.quote-block div.quote-block div.quote-block div.quote-block div.quote-block {
        background-color: rgb(216, 224, 236) !important;
    }
    
    a.spoiler-link {
        background-color: rgb(216, 224, 236) !important;
    }
    
    div.spoiler-inner {
        background-color: rgb(224, 232, 240) !important;
    }
    
    div.forum-post-date, div.forum-post-num {
        padding-top: 8px !important;
        padding-right: 8px !important;
        padding-bottom: 8px !important;
        padding-left: 8px !important;
    }
    
    div.forum-post-num {
        background-color: rgb(216, 224, 236) !important;
    }
}

Edit3: New Version! [2012-01-06] Fixed the padding around some advertisements. (I turn them off) LessGrey Theme v4 - CSS (Click to show)
Code:
@-moz-document domain('overclock.net'){

    #header-area {
        margin-top: -16px !important;
        margin-bottom: -16px !important;
    }
    header .ad {
        min-height: 0px !important;
    }

    .forum-announcement {
        background-color: rgb(247, 246, 227) !important;
        border-top-color: rgb(231, 220, 197) !important;
        border-bottom-color: rgb(231, 220, 197) !important;
        padding-top: 8px !important;
        padding-right: 8px !important;
        padding-bottom: 8px !important;
        padding-left: 8px !important;
    }
    

    .icon-col, .thread-col, .last-post-thread-col, .narrow-col {
        padding-top: 5px !important;
        padding-bottom: 4px !important;
    }
    
    .last-post-thread-col {
        background-color: rgb(204, 214, 226) !important;
    }
    
    .forum-list-tbl th, .icon-col {
        background-color: rgb(204, 207, 227) !important;
        color: rgb(37, 64, 143) !important;
    }

    .last-post-col {
        padding-top: 5px !important;
        padding-bottom: 4px !important;
    }
    
    div.quote-block div.quote-block {
        background-color: rgb(216, 224, 236) !important;
    }
    div.quote-block div.quote-block div.quote-block {
        background-color: rgb(204, 211, 221) !important;
    }
    div.quote-block div.quote-block div.quote-block div.quote-block {
        background-color: rgb(216, 224, 236) !important;
    }
    div.quote-block div.quote-block div.quote-block div.quote-block div.quote-block {
        background-color: rgb(204, 211, 221) !important;
    }
    div.quote-block div.quote-block div.quote-block div.quote-block div.quote-block div.quote-block {
        background-color: rgb(216, 224, 236) !important;
    }
    
    a.spoiler-link {
        background-color: rgb(216, 224, 236) !important;
    }
    
    div.spoiler-inner {
        background-color: rgb(224, 232, 240) !important;
    }
    
    div.forum-post-date, div.forum-post-num {
        padding-top: 8px !important;
        padding-right: 8px !important;
        padding-bottom: 8px !important;
        padding-left: 8px !important;
    }
    
    div.forum-post-num {
        background-color: rgb(216, 224, 236) !important;
    }
}

Edited by Kramy - 1/6/12 at 1:39am
     
CPUMotherboardGraphicsRAM
FX-8350 @ 4.6ghz 1.425v Sabertooth 990FX Zotac GTX 1070 Amp! 32GB (4x8GB) Kingston Fury 1866mhz CL10 1T 1.5v 
Hard DriveHard DriveHard DriveHard Drive
Hitachi 2TB - HDS723020BLA64 Crucial M500 960GB - CT960M500SSD1 WD 4TB Black - WD4001FAEX WD 4TB Black - WD4001FAEX 
Hard DriveHard DriveHard DriveHard Drive
Seagate 2TB - ST2000DM001 WD 640GB Black - WD6401AALS Seagate 6TB - ST6000DM001 Micron M500 - MTFDDAK480MAV 
Optical DriveOptical DriveOptical DriveOptical Drive
Pioneer DVR-115DBK Samsung SH-S243D/BEBE LG GH22NS90 Lite-On EBAU108 External DVD 
CoolingCoolingCoolingOS
Noctua NH-D15 Fractal Design 140mm Fan - FD-FAN-140 Fractal Design 120mm Fan - FD-FAN-120 Windows 7 
OSMonitorMonitorKeyboard
Ubuntu 14.04 LTS Samsung 2343BWX 23" (2048x1152) BenQ GW2765HT 27" IPS LCD Monitor (2560x1440) Genius Keyboard KB-G235 PA 
PowerCaseMouseMouse Pad
Seasonic Platinum 1000w PSU - SS-1000XP Fractal Design Define R5 Steelseries Rival 6500 dcpi Mousepad + Desk 
AudioAudioOtherOther
Onboard Realtek® ALC 892 Cyber Acoustics CA-2992 2.0 Speakers Razer Krait 1600 DPI nGear G-C1601 Card Reader 
OtherOther
Pisen Card Reader Gigabyte M7 Thor 
CPUMotherboardGraphicsRAM
VIA Eden C7 1200mhz Jetway J7F4K1G2ES-LF VIA Onboard 512MB PC2-4200 
Hard DriveOptical DriveCoolingOS
A-Data FlashDrive None Fanless Linux 
MonitorKeyboardPowerCase
Headless None 65w Power Brick Antec ISK300-65 
MouseAudio
None Onboard VIA 
CPUMotherboardGraphicsRAM
Barton XP-M 2400+ FJQ4C Asus A7N8X-E Deluxe 256MB BFG 7800GS OC 2x512MB Samsung PC3200 
Hard DriveOSMonitorKeyboard
Raptor 74GB/Seagate 120GB Windows 2000 Pro 60hz 17" CRT Brandless PS2 Keyboard 
PowerMouse
Antec Neo HE 550w Logitech G5 
  hide details  
Reply
     
CPUMotherboardGraphicsRAM
FX-8350 @ 4.6ghz 1.425v Sabertooth 990FX Zotac GTX 1070 Amp! 32GB (4x8GB) Kingston Fury 1866mhz CL10 1T 1.5v 
Hard DriveHard DriveHard DriveHard Drive
Hitachi 2TB - HDS723020BLA64 Crucial M500 960GB - CT960M500SSD1 WD 4TB Black - WD4001FAEX WD 4TB Black - WD4001FAEX 
Hard DriveHard DriveHard DriveHard Drive
Seagate 2TB - ST2000DM001 WD 640GB Black - WD6401AALS Seagate 6TB - ST6000DM001 Micron M500 - MTFDDAK480MAV 
Optical DriveOptical DriveOptical DriveOptical Drive
Pioneer DVR-115DBK Samsung SH-S243D/BEBE LG GH22NS90 Lite-On EBAU108 External DVD 
CoolingCoolingCoolingOS
Noctua NH-D15 Fractal Design 140mm Fan - FD-FAN-140 Fractal Design 120mm Fan - FD-FAN-120 Windows 7 
OSMonitorMonitorKeyboard
Ubuntu 14.04 LTS Samsung 2343BWX 23" (2048x1152) BenQ GW2765HT 27" IPS LCD Monitor (2560x1440) Genius Keyboard KB-G235 PA 
PowerCaseMouseMouse Pad
Seasonic Platinum 1000w PSU - SS-1000XP Fractal Design Define R5 Steelseries Rival 6500 dcpi Mousepad + Desk 
AudioAudioOtherOther
Onboard Realtek® ALC 892 Cyber Acoustics CA-2992 2.0 Speakers Razer Krait 1600 DPI nGear G-C1601 Card Reader 
OtherOther
Pisen Card Reader Gigabyte M7 Thor 
CPUMotherboardGraphicsRAM
VIA Eden C7 1200mhz Jetway J7F4K1G2ES-LF VIA Onboard 512MB PC2-4200 
Hard DriveOptical DriveCoolingOS
A-Data FlashDrive None Fanless Linux 
MonitorKeyboardPowerCase
Headless None 65w Power Brick Antec ISK300-65 
MouseAudio
None Onboard VIA 
CPUMotherboardGraphicsRAM
Barton XP-M 2400+ FJQ4C Asus A7N8X-E Deluxe 256MB BFG 7800GS OC 2x512MB Samsung PC3200 
Hard DriveOSMonitorKeyboard
Raptor 74GB/Seagate 120GB Windows 2000 Pro 60hz 17" CRT Brandless PS2 Keyboard 
PowerMouse
Antec Neo HE 550w Logitech G5 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › [How-to] Customize the OCN theme