Overclock.net › Forums › Overclockers Care › Overclock.net Folding@Home Team › [Guide] Making your own HFM website theme
New Posts  All Forums:Forum Nav:

[Guide] Making your own HFM website theme

post #1 of 24
Thread Starter 
So I made an OCN theme for my HFM site a while back and someone asked if I could make a thread on how to do it, so here it goes. You can make your theme look pretty much however you want. For anyone familiar with HTML, this should be pretty easy and you probably won't even need this. For this guide, we'll recreate the OCN theme:



Step 1
Locate the installation folder for HFM. Once in, find and open the CSS folder.


Step 2
Inside the CSS folder, there will be a number of CSS files (cascading style sheet). Pick one of them (doesn't matter which one) and create a copy of it. Rename to appropriate title.


Step 3
Open the copied file you made. It will look like this:

As you can see, there are a number of different rules that are used to control the colours (body, TD, instance, overview, etc.). We will be editting these to get the colours we want.

Step 4
First, we need to change the background colour. The rule that controls this is "body." To do this, add background-color: #46566B;. #46566B is the hex code for the OCN background (can be changed for any code).


We also need to do the same for the "Blank", "Empty", and "Plain" rules. The bg-color tag is already in there, you just have to edit the hex code.

Step 5
Under the "Heading" rule, change the bg-color code to #748BA5 (keep color as #FFFFFF).


Step 6
Save the CSS file. Open HFM, then go Edit>Preferences>Web Visual Styles. Your new theme should now show up in the window. Just select it and you're good to go.


Notes
I'm going to coming back and editting this post to add some information and fix any mistakes. I'm hoping to have everything finished within a couple of days. I also reserved a couple of posts for a "gallery" and misc. info.
Edited by cc_brandon - 5/10/11 at 10:44pm
i7-970 Build
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7-970 Asus Rampage III Extreme 2x EVGA GTX 470 - 9800GT G.Skill Ripjaw 12gb 
Hard DriveOSPowerCase
OCZ Vertex 2 60gb Windows 7 Corsair AX1200 HAF 932 
  hide details  
Reply
i7-970 Build
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7-970 Asus Rampage III Extreme 2x EVGA GTX 470 - 9800GT G.Skill Ripjaw 12gb 
Hard DriveOSPowerCase
OCZ Vertex 2 60gb Windows 7 Corsair AX1200 HAF 932 
  hide details  
Reply
post #2 of 24
Thread Starter 
Reserved
Edited by cc_brandon - 5/10/11 at 10:28pm
i7-970 Build
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7-970 Asus Rampage III Extreme 2x EVGA GTX 470 - 9800GT G.Skill Ripjaw 12gb 
Hard DriveOSPowerCase
OCZ Vertex 2 60gb Windows 7 Corsair AX1200 HAF 932 
  hide details  
Reply
i7-970 Build
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7-970 Asus Rampage III Extreme 2x EVGA GTX 470 - 9800GT G.Skill Ripjaw 12gb 
Hard DriveOSPowerCase
OCZ Vertex 2 60gb Windows 7 Corsair AX1200 HAF 932 
  hide details  
Reply
post #3 of 24
Thread Starter 
Gallery
Below are themes that others and I have come up with. Feel free to post up your themes for others and I will add them to this post when I have time Click the spoiler to show the coding.

Overclock.net

/* Overclock.net Theme (HFM.NET)
*/

body
{
font-family: Tahoma, Arial, Sans-Serif;
font-size: x-small;
background-color: #46566B;
}

TD
{
font-size: x-small;
vertical-align: top;
}

.Instance
{
padding: 5px 5px 5px 5px;
margin: 2px 2px 2px 2px;
border-collapse: collapse;
font-size: x-small;
}

.Overview
{
padding: 5px 5px 5px 5px;
margin: 2px 2px 2px 2px;
border-collapse: collapse;
font-size: x-small;
}

.Heading
{
background-color: #748BA5;
color: #FFFFFF;
font-weight: bold;
padding: 5px 5px 5px 5px;
margin: 2px 2px 2px 2px;
}

.Heading2
{
background-color: #000066;
color: #FFFFFF;
font-style: italic;
padding: 5px 5px 5px 5px;
margin: 2px 2px 2px 2px;
}

.Blank
{
border: none;
background-color: #46566B;
color: #FFFFFF;
padding: 5px 5px 5px 5px;
margin: 2px 2px 2px 2px;
font-size: inherit;
}

.Empty
{
border: none;
background-color: #46566B;
color: #FFFFFF;
padding: 5px 5px 5px 5px;
margin: 2px 2px 2px 2px;
font-size: inherit;
}

.Plain
{
border: none;
background-color: #46566B;
color: #FFFFFF;
padding: 5px 5px 5px 5px;
margin: 2px 2px 2px 2px;
font-size: inherit;
}

.StatusCol
{
border: solid 1px #000066;
padding: 5px 5px 5px 5px;
margin: 2px 2px 2px 2px;
font-size: inherit;
vertical-align: top;
}

.LeftCol
{
border: solid 1px #000066;
background-color: #F5F5FF;
color: #000066;
padding: 5px 5px 5px 5px;
margin: 2px 2px 2px 2px;
font-size: inherit;
vertical-align: top;
}

.RightCol
{
border: solid 1px #000066;
background-color: #F5F5FF;
color: #000066;
padding: 5px 5px 5px 5px;
margin: 2px 2px 2px 2px;
font-size: inherit;
vertical-align: top;
}

.AltLeftCol
{
border: solid 1px #000066;
background-color: #E5E5FF;
color: #000066;
padding: 5px 5px 5px 5px;
margin: 2px 2px 2px 2px;
font-size: inherit;
vertical-align: top;
}

.AltRightCol
{
border: solid 1px #000066;
background-color: #E5E5FF;
color: #000066;
padding: 5px 5px 5px 5px;
margin: 2px 2px 2px 2px;
font-size: inherit;
vertical-align: top;
}

a:link, a:visited
{
color: #000066;
}

http://www.mediafire.com/?003fcegzbt1q5z2
Edited by cc_brandon - 5/12/11 at 6:48pm
i7-970 Build
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7-970 Asus Rampage III Extreme 2x EVGA GTX 470 - 9800GT G.Skill Ripjaw 12gb 
Hard DriveOSPowerCase
OCZ Vertex 2 60gb Windows 7 Corsair AX1200 HAF 932 
  hide details  
Reply
i7-970 Build
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7-970 Asus Rampage III Extreme 2x EVGA GTX 470 - 9800GT G.Skill Ripjaw 12gb 
Hard DriveOSPowerCase
OCZ Vertex 2 60gb Windows 7 Corsair AX1200 HAF 932 
  hide details  
Reply
post #4 of 24
Nice work! I may tweak mine this evening.
Main PC
(10 items)
 
File Server
(11 items)
 
 
CPUMotherboardGraphicsRAM
i5 2550k ASUS Maximus V GENE EVGA GeForce GTX 660 Ti+ 3GB w/Backplate 16GB Kingston Hyper-X 
Hard DriveHard DriveCoolingOS
2x Kingston HyperX 3K RAID 0 Seagate USB 3.0 External Drive Thermalright Venomous X Windows 10 Pro x64 
MonitorPower
3x 22" Dell Ultrasharp Corsair CX500 
CPUMotherboardRAMHard Drive
amd a10-7700k ASrock FM2A88M-HD+ Corsair Dominator 2x2GB Toshiba 
Hard DriveHard DriveHard DriveHard Drive
Toshiba Western Digital Green Western Digital Black Western Digital Green 
OSPowerCase
Windows Professional 8.1 OCZ 650W Antec 300 
  hide details  
Reply
Main PC
(10 items)
 
File Server
(11 items)
 
 
CPUMotherboardGraphicsRAM
i5 2550k ASUS Maximus V GENE EVGA GeForce GTX 660 Ti+ 3GB w/Backplate 16GB Kingston Hyper-X 
Hard DriveHard DriveCoolingOS
2x Kingston HyperX 3K RAID 0 Seagate USB 3.0 External Drive Thermalright Venomous X Windows 10 Pro x64 
MonitorPower
3x 22" Dell Ultrasharp Corsair CX500 
CPUMotherboardRAMHard Drive
amd a10-7700k ASrock FM2A88M-HD+ Corsair Dominator 2x2GB Toshiba 
Hard DriveHard DriveHard DriveHard Drive
Toshiba Western Digital Green Western Digital Black Western Digital Green 
OSPowerCase
Windows Professional 8.1 OCZ 650W Antec 300 
  hide details  
Reply
post #5 of 24
Awesome. Smart people make my life easy! Will update my files tonight!
I Wish
(10 items)
 
Air Cooling Solution
THERMALRIGHT SILVER ARROW DUAL14CM ROUND FAN HEATSINK
Sold my baby
(19 items)
 
CPUMotherboardGraphicsRAM
AMD A10-5800K Trinity 3.8GHz (4.2GHz Turbo) Soc... MSI FM2-A85XA-G65 FM2 AMD A85X (Hudson D4) HDMI... ASUS HD7870-DC2-2GD5-V2 Radeon HD 7870 GHz Edit... G.SKILL Ripjaws X Series 8GB (4 x 2GB) 240-Pin ... 
Hard DriveCoolingOSKeyboard
SAMSUNG 840 Pro Series MZ-7PD256BW 2.5" 256GB S... Thermalright Silver Arrow SB-E Extreme Dual Fan... Windows 7 Logitech 110 
CaseMouse
COOLER MASTER HAF 932 Advanced Blue Edition RC-... Logitech G500 
  hide details  
Reply
I Wish
(10 items)
 
Air Cooling Solution
THERMALRIGHT SILVER ARROW DUAL14CM ROUND FAN HEATSINK
Sold my baby
(19 items)
 
CPUMotherboardGraphicsRAM
AMD A10-5800K Trinity 3.8GHz (4.2GHz Turbo) Soc... MSI FM2-A85XA-G65 FM2 AMD A85X (Hudson D4) HDMI... ASUS HD7870-DC2-2GD5-V2 Radeon HD 7870 GHz Edit... G.SKILL Ripjaws X Series 8GB (4 x 2GB) 240-Pin ... 
Hard DriveCoolingOSKeyboard
SAMSUNG 840 Pro Series MZ-7PD256BW 2.5" 256GB S... Thermalright Silver Arrow SB-E Extreme Dual Fan... Windows 7 Logitech 110 
CaseMouse
COOLER MASTER HAF 932 Advanced Blue Edition RC-... Logitech G500 
  hide details  
Reply
post #6 of 24
Yay thanks!
I looked at it earlier and didn't know what I was supposed to be changing. Experimenting now.

EDIT: I found a hex generator for those interested.
http://www.2createawebsite.com/build/hex-colors.html

Also its probably worth noting (for us web coding noobs) that the file has to be saved with the .css extension on it.

EDIT2: Your code in post #2 doesn't show up like the picture.
    
CPUMotherboardGraphicsRAM
i7 970 4.15 @ ~1.39v HT ON, Turbo Off EVGA x58 3x SLI 2x EVGA GTX 980 SLI (watercooled), 1x EVGA GTX ... 6 GB 1600 OCZ DDR3 Gold Edition 7-7-7-18 @1475Mhz 
Hard DriveOptical DriveOSMonitor
Samsung 840 SSD 250GB, 2xSamsungF3 1TB (Raid0) 22x Super Multi, 8x Blu-ray Reader Windows 7 Ultimate x64 2x Yamakasi Catleap Q270s (2560x1440) 
PowerCaseMouseAudio
Kingwin 1000w Platinum HAF 932 Black Interior Logitech G500 Logitech Z5500 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
i7 970 4.15 @ ~1.39v HT ON, Turbo Off EVGA x58 3x SLI 2x EVGA GTX 980 SLI (watercooled), 1x EVGA GTX ... 6 GB 1600 OCZ DDR3 Gold Edition 7-7-7-18 @1475Mhz 
Hard DriveOptical DriveOSMonitor
Samsung 840 SSD 250GB, 2xSamsungF3 1TB (Raid0) 22x Super Multi, 8x Blu-ray Reader Windows 7 Ultimate x64 2x Yamakasi Catleap Q270s (2560x1440) 
PowerCaseMouseAudio
Kingwin 1000w Platinum HAF 932 Black Interior Logitech G500 Logitech Z5500 
  hide details  
Reply
post #7 of 24
Thread Starter 
Glad you guys like it, I'm intrigued to see what you can come up with

Quote:
Originally Posted by Klue22 View Post
Yay thanks!
I looked at it earlier and didn't know what I was supposed to be changing. Experimenting now.

EDIT: I found a hex generator for those interested.
http://www.2createawebsite.com/build/hex-colors.html

Also its probably worth noting (for us web coding noobs) that the file has to be saved with the .css extension on it.

EDIT2: Your code in post #2 doesn't show up like the picture.
That's basically how I figured it out, just played around with the different rules I don't believe you need to save as a CSS as the file was copied. If it was a new file though, it would need the CSS. I'll make sure to add that to the OP with some other stuff. I'll also add the hex generator link.

Another handy little program I found is called "Instant Eyedropper." It'll give you the hex code of the colour your cursor is over. I can't remember exactly how I got it to work with W7 but once I figure that out, I'm going to add it to the 2nd post.

I'll take a look and see what's wrong with the code. I didn't copy it from the actual file I'm using right now so something might be a bit different. You're talking about the code in the "gallery" right?
i7-970 Build
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7-970 Asus Rampage III Extreme 2x EVGA GTX 470 - 9800GT G.Skill Ripjaw 12gb 
Hard DriveOSPowerCase
OCZ Vertex 2 60gb Windows 7 Corsair AX1200 HAF 932 
  hide details  
Reply
i7-970 Build
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7-970 Asus Rampage III Extreme 2x EVGA GTX 470 - 9800GT G.Skill Ripjaw 12gb 
Hard DriveOSPowerCase
OCZ Vertex 2 60gb Windows 7 Corsair AX1200 HAF 932 
  hide details  
Reply
post #8 of 24
I will definitely try this later. Thanks for the guide!
Sandy Maximized
(16 items)
 
 
FreeNAS Server
(13 items)
 
CPUMotherboardGraphicsRAM
Core i7 2600K@ 4.6GHz 1.38 Asus Maximus IV Extreme MSI GAMING X 8G GTX 1070 Patriot Viper 3 16GB 1600MHz Cas 9 
Hard DriveHard DriveOptical DriveCooling
Samsung 850 Pro 256GB  Western Digital RE4 3TB (Data) LG DVD-RW Corsair H100 Push / Pull 
OSMonitorKeyboardPower
Windows 10 x64 Acer 27" 1920 x 1080 LED LCD Corsair Vengeance K60 Keyboard with Cherry® MX ... Corsair Pro Series HX850 
CaseMouseMouse PadAudio
NZXT Switch 810 Glossy Black Razer DeathAdder 3.5G Corsair Vengeance MM400 Mouse Mat Realtek ALC889 
CPUMotherboardRAMHard Drive
Core 2 Duo 6420 2.13GHz Super Micro PDSML-LN2+ 4GB DDR2 5300E 150GB Western Digital 10k Velociraptor 
Hard DriveOSCase
150GB Western Digital 10k Velociraptor PFsense FreeBSD 1U Rack Mount Half Depth 
CPUMotherboardGraphicsRAM
Core 2 Duo 6400 2.13GHz GIGABYTE GA-G41MT-S2PT LGA775 Onboard Gskill 8GB DDR3 1333 
Hard DriveHard DriveHard DriveHard Drive
Western Digital Red 2TB WD20EFRX ZFS Mirror Western Digital Red 2TB WD20EFRX ZFS Mirror Hitachi HDT721010SLA360 1TB ZFS Mirror Hitachi HDT721010SLA360 1TB ZFS Mirror 
CoolingOSPowerCase
Enermax Magma 120mm Fan FreeNAS 8.3.0 x64 Cooler Master Silent Pro M600 Some old Velocity Micro / Lian Li  
Other
Intel PRO / 1000 MT Dual Gigabit Nic 
  hide details  
Reply
Sandy Maximized
(16 items)
 
 
FreeNAS Server
(13 items)
 
CPUMotherboardGraphicsRAM
Core i7 2600K@ 4.6GHz 1.38 Asus Maximus IV Extreme MSI GAMING X 8G GTX 1070 Patriot Viper 3 16GB 1600MHz Cas 9 
Hard DriveHard DriveOptical DriveCooling
Samsung 850 Pro 256GB  Western Digital RE4 3TB (Data) LG DVD-RW Corsair H100 Push / Pull 
OSMonitorKeyboardPower
Windows 10 x64 Acer 27" 1920 x 1080 LED LCD Corsair Vengeance K60 Keyboard with Cherry® MX ... Corsair Pro Series HX850 
CaseMouseMouse PadAudio
NZXT Switch 810 Glossy Black Razer DeathAdder 3.5G Corsair Vengeance MM400 Mouse Mat Realtek ALC889 
CPUMotherboardRAMHard Drive
Core 2 Duo 6420 2.13GHz Super Micro PDSML-LN2+ 4GB DDR2 5300E 150GB Western Digital 10k Velociraptor 
Hard DriveOSCase
150GB Western Digital 10k Velociraptor PFsense FreeBSD 1U Rack Mount Half Depth 
CPUMotherboardGraphicsRAM
Core 2 Duo 6400 2.13GHz GIGABYTE GA-G41MT-S2PT LGA775 Onboard Gskill 8GB DDR3 1333 
Hard DriveHard DriveHard DriveHard Drive
Western Digital Red 2TB WD20EFRX ZFS Mirror Western Digital Red 2TB WD20EFRX ZFS Mirror Hitachi HDT721010SLA360 1TB ZFS Mirror Hitachi HDT721010SLA360 1TB ZFS Mirror 
CoolingOSPowerCase
Enermax Magma 120mm Fan FreeNAS 8.3.0 x64 Cooler Master Silent Pro M600 Some old Velocity Micro / Lian Li  
Other
Intel PRO / 1000 MT Dual Gigabit Nic 
  hide details  
Reply
post #9 of 24
Nice basic CSS. You could also change the font.
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 #10 of 24
Thread Starter 
Quote:
Originally Posted by Iris View Post
I will definitely try this later. Thanks for the guide!
No problem, enjoy

Quote:
Originally Posted by csm725 View Post
Nice basic CSS. You could also change the font.
For sure, definitely a lot of things you can do. I'll add something about changing text size later today hopefully

To anyone who is trying to use the OCN theme in the gallery, it should work now. I'd check but I'm on a Mac right now If it doesn't work, I will have working one up later today.

Oh and to Klue, I took a quick look at adding pictures and it might be possible. If it can be done, it'll take a little while for me to figure out but I'll definitely figure it out and add it to the OP
Edited by cc_brandon - 5/10/11 at 10:40pm
i7-970 Build
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7-970 Asus Rampage III Extreme 2x EVGA GTX 470 - 9800GT G.Skill Ripjaw 12gb 
Hard DriveOSPowerCase
OCZ Vertex 2 60gb Windows 7 Corsair AX1200 HAF 932 
  hide details  
Reply
i7-970 Build
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7-970 Asus Rampage III Extreme 2x EVGA GTX 470 - 9800GT G.Skill Ripjaw 12gb 
Hard DriveOSPowerCase
OCZ Vertex 2 60gb Windows 7 Corsair AX1200 HAF 932 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Overclock.net Folding@Home Team
Overclock.net › Forums › Overclockers Care › Overclock.net Folding@Home Team › [Guide] Making your own HFM website theme