Author Topic: Custom Theme Modifications via userstyles.org  (Read 3041 times)

0 Members and 1 Guest are viewing this topic.

Offline aggiejy

  • ** Moderator Emeritus
  • Thread Starter
  • Posts: 1125
  • Location: ~Austin, Texas
Custom Theme Modifications via userstyles.org
« on: Fri, 31 May 2013, 20:39:12 »
Just curious if there are any others that have perhaps messed with userstyles.org?  If not, the short story is that they make a Firefox and Chrome Add-on (called "Stylish") that allows you to inject CSS over any site.  You can actually do simple things (like hiding something you don't want, or changing colors) easily. 

I was thinking, if anyone else with some CSS skills wanted to have a go, would be fun to share.  (You can post them on userstyles.org)

I started out doing it just to limit avatar size down to 64px.  But then, I kind of got carried away and ended up making a fixed width site very similar in color and such to Deskthority. (I've always loved their simple and light design.)  I'm several years out of practice with CSS, but with some (very ugly and hacky) code I was able to bring the site a bit closer to my tastes.

Here's my style: (Note, you have to have the default geekhack theme activated for it to work right.)
http://userstyles.org/styles/87758/aggiejy-s-geekhack-light-theme-1?r=1370049770
Also, I only tested in Chrome, on a Mac... exact fonts shown in shots may not all be there on PC.

Some screenshots of the three main page layouts:
23953-023955-123957-2

Of course, I have some things hidden that you wouldn't... if only I had documented the CSS so it was easier to modify to your liking.  :o But, I just added bits and pieces as I've used it.  Been my default for a week or two now I guess, so far so good.  The only slight drawback is the old theme pops up briefly on some refreshes in Chrome.

Perhaps if someone makes a really good one (and one that's original... not "fan art" like mine), perhaps we can talk Russ into making it into an actual theme. :)  Personally, I'd love something dark and purple like https://www.heroku.com/ :)
« Last Edit: Fri, 31 May 2013, 20:44:43 by aggiejy »

Offline rowdy

  • HHKB Hapster
  • * Erudite Elder
  • Posts: 21054
  • Location: melbourne.vic.au
  • Missed another sale.
Re: Custom Theme Modifications via userstyles.org
« Reply #1 on: Sat, 01 June 2013, 04:50:13 »
Wow!  I didn't know something like that existed.

I fiddled around for a few minutes and made a yellow theme.



Basically just a start on changing Nostalgia to Nostalgic Yellow.  Heaps not done on it yet.
"Because keyboards are accessories to PC makers, they focus on minimizing the manufacturing costs. But thatís incorrect. Itís in HHKBís slogan, but when Americaís cowboys were in the middle of a trip and their horse died, they would leave the horse there. But even if they were in the middle of a desert, they would take their saddle with them. The horse was a consumable good, but the saddle was an interface that their bodies had gotten used to. In the same vein, PCs are consumable goods, while keyboards are important interfaces." - Eiiti Wada

NEC APC-H4100E | Ducky DK9008 Shine MX blue LED red | Ducky DK9008 Shine MX blue LED green | Link 900243-08 | CM QFR MX black | KeyCool 87 white MX reds | HHKB 2 Pro | Model M 02-Mar-1993 | Model M 29-Nov-1995 | CM Trigger (broken) | CM QFS MX green | Ducky DK9087 Shine 3 TKL Yellow Edition MX black | Lexmark SSK 21-Apr-1994 | IBM SSK 13-Oct-1987 | CODE TKL MX clear | Model M 122 01-Jun-1988

Ị̸͚̯̲́ͤ̃͑̇̑ͯ̊̂͟ͅs̞͚̩͉̝̪̲͗͊ͪ̽̚̚ ̭̦͖͕̑́͌ͬͩ͟t̷̻͔̙̑͟h̹̠̼͋ͤ͋i̤̜̣̦̱̫͈͔̞ͭ͑ͥ̌̔s̬͔͎̍̈ͥͫ̐̾ͣ̔̇͘ͅ ̩̘̼͆̐̕e̞̰͓̲̺̎͐̏ͬ̓̅̾͠͝ͅv̶̰͕̱̞̥̍ͣ̄̕e͕͙͖̬̜͓͎̤̊ͭ͐͝ṇ̰͎̱̤̟̭ͫ͌̌͢͠ͅ ̳̥̦ͮ̐ͤ̎̊ͣ͡͡n̤̜̙̺̪̒͜e̶̻̦̿ͮ̂̀c̝̘̝͖̠̖͐ͨͪ̈̐͌ͩ̀e̷̥͇̋ͦs̢̡̤ͤͤͯ͜s͈̠̉̑͘a̱͕̗͖̳̥̺ͬͦͧ͆̌̑͡r̶̟̖̈͘ỷ̮̦̩͙͔ͫ̾ͬ̔ͬͮ̌?̵̘͇͔͙ͥͪ͞ͅ

Offline tsangan

  • ★★★
  • ** Moderator Emeritus
  • Posts: 2755
  • Location: Clack Factory's Dumpster
  • 1000/600
Re: Custom Theme Modifications via userstyles.org
« Reply #2 on: Sat, 01 June 2013, 06:27:31 »
Anything other then Nostalgia is not GH!!!!
Keyboardless

Offline rowdy

  • HHKB Hapster
  • * Erudite Elder
  • Posts: 21054
  • Location: melbourne.vic.au
  • Missed another sale.
Re: Custom Theme Modifications via userstyles.org
« Reply #3 on: Sat, 01 June 2013, 06:41:00 »
Anything other then Nostalgia is not GH!!!!

+1

But with a touch of yellow ;)
"Because keyboards are accessories to PC makers, they focus on minimizing the manufacturing costs. But thatís incorrect. Itís in HHKBís slogan, but when Americaís cowboys were in the middle of a trip and their horse died, they would leave the horse there. But even if they were in the middle of a desert, they would take their saddle with them. The horse was a consumable good, but the saddle was an interface that their bodies had gotten used to. In the same vein, PCs are consumable goods, while keyboards are important interfaces." - Eiiti Wada

NEC APC-H4100E | Ducky DK9008 Shine MX blue LED red | Ducky DK9008 Shine MX blue LED green | Link 900243-08 | CM QFR MX black | KeyCool 87 white MX reds | HHKB 2 Pro | Model M 02-Mar-1993 | Model M 29-Nov-1995 | CM Trigger (broken) | CM QFS MX green | Ducky DK9087 Shine 3 TKL Yellow Edition MX black | Lexmark SSK 21-Apr-1994 | IBM SSK 13-Oct-1987 | CODE TKL MX clear | Model M 122 01-Jun-1988

Ị̸͚̯̲́ͤ̃͑̇̑ͯ̊̂͟ͅs̞͚̩͉̝̪̲͗͊ͪ̽̚̚ ̭̦͖͕̑́͌ͬͩ͟t̷̻͔̙̑͟h̹̠̼͋ͤ͋i̤̜̣̦̱̫͈͔̞ͭ͑ͥ̌̔s̬͔͎̍̈ͥͫ̐̾ͣ̔̇͘ͅ ̩̘̼͆̐̕e̞̰͓̲̺̎͐̏ͬ̓̅̾͠͝ͅv̶̰͕̱̞̥̍ͣ̄̕e͕͙͖̬̜͓͎̤̊ͭ͐͝ṇ̰͎̱̤̟̭ͫ͌̌͢͠ͅ ̳̥̦ͮ̐ͤ̎̊ͣ͡͡n̤̜̙̺̪̒͜e̶̻̦̿ͮ̂̀c̝̘̝͖̠̖͐ͨͪ̈̐͌ͩ̀e̷̥͇̋ͦs̢̡̤ͤͤͯ͜s͈̠̉̑͘a̱͕̗͖̳̥̺ͬͦͧ͆̌̑͡r̶̟̖̈͘ỷ̮̦̩͙͔ͫ̾ͬ̔ͬͮ̌?̵̘͇͔͙ͥͪ͞ͅ

Offline SpAmRaY

  • NOT a Moderator
  • * Certified Spammer
  • Posts: 14660
  • Location: Į\(į_o)/Į
  • because reasons.......
Re: Custom Theme Modifications via userstyles.org
« Reply #4 on: Sat, 01 June 2013, 07:54:15 »
Wow!  I didn't know something like that existed.

I fiddled around for a few minutes and made a yellow theme.

Show Image


Basically just a start on changing Nostalgia to Nostalgic Yellow.  Heaps not done on it yet.

that's interesting but needs to be green instead of yellow :P

but I do like nostalgia

Offline codyeatworld

  • * Destiny Supporter
  • Posts: 943
  • Location: Bay Area, California
Re: Custom Theme Modifications via userstyles.org
« Reply #5 on: Sat, 01 June 2013, 11:47:02 »
I used to use Stylish for deviantART and facebook years ago...

I started a purple heroku based theme (cause you mentioned it) while drinking my coffee, but the messy source is throwing me off so I probably won't continue it. (sorry)



If anyone wants it...

Code: [Select]
body {
  background: #1B1B24;
  color: #CCC;
  width: 70%;
}

a:link, a:visited {
  color: #45a4ff;
}

#wrapper {
  border: 5px solid #29264D;
  border-radius: 10px;
}

#header,
#header .frame,
#header #top_section,
#header #upper_section,
#header #main_menu {
  background: #21212b !important;
}

#header #siteslogan {
  color: #CCC;
  font-size: 14px;
  font-style: italic;
  font-weight: bold;
}

#header #search_form .input_text {
  background: #1B1B24;
  border: 1px solid #44a3fe;
  border-radius: 5px;
  color: #CCC;
  padding: 5px;
}

#header #search_form .button_submit {
  background: #44a3fe;
  border: 1px solid #44a3fe;
  border-radius: 5px;
  color: white;
  padding: 5px;
}

.dropmenu li a.active,
.dropmenu li a.active span.firstlevel,
.dropmenu li a.firstlevel:hover, .dropmenu li:hover a.firstlevel,
.dropmenu li a.firstlevel:hover span.firstlevel, .dropmenu li:hover a.firstlevel span.firstlevel {
  background: #44a3fe !important;
  border: none;
  border-radius: 5px;
  color: white;
}

.dropmenu li a.firstlevel
{
  border: none;
}

.dropmenu li ul {
  background: #44a3fe !important;
  border: none;
  border-radius: 5px;
  margin-top: 1px;
  padding: 5px;
  width: 300px;
}

.dropmenu li li {
  border: none;
  width: 300px;
}
.dropmenu li li a span {
  color: white;
  display: block;
  font-weight: bold;
  padding: 8px;
}

.dropmenu li li:hover > a span { color: #44a3fe; }
.dropmenu li li:hover > a {
  background: #1B1B24;
  border-radius: 5px;
  text-decoration: none;
}

#content_section,
#content_section .frame,
#content_section #main_content_section {
  background: #21212b !important;
}

.table_list tbody.content td.children {
  color: #ccc;
}

.table_list tbody.content td.info a.subject {
  color: #44a3fe;
}

.table_list tbody.header tr {
  background: #29264D;
}

.table_list tbody.header tr a {
  color: #ccc;
}

.windowbg2 {
  background: #1B1B24;
  color: #ccc;
}

.windowbg {
  background: #101015;
  color: #ccc;
}

.roundframe {
  background: #1B1B24;
  border: none;
}

div.title_barIC,
div.title_barIC h4.titlebg {
  background: #29264D;
}

#footer_section,
#footer_section div.frame {
  background: none !important;
}

#footer_section div.frame {
  padding: 20px 0;
}

.stickybg,
.stickybg2 {
  background: #29264D;
}

.locked_sticky,
.locked_sticky2,
.lockedbg,
.lockedbg2 {
  background: #101015;
}




Offline aggiejy

  • ** Moderator Emeritus
  • Thread Starter
  • Posts: 1125
  • Location: ~Austin, Texas
Re: Custom Theme Modifications via userstyles.org
« Reply #6 on: Sat, 01 June 2013, 16:30:39 »
Thanks for sharing! :)  Some rainy day perhaps I'll pick up where you left off.

Offline SmallFry

  • ** Moderator Emeritus
  • Posts: 3887
  • Location: Wisconsin, USA
  • Leaving 6/15; returning 6/22 or so.
Re: Custom Theme Modifications via userstyles.org
« Reply #7 on: Sat, 01 June 2013, 16:33:59 »
GH used to not have any orange, FWIW. Hellocodes' layout looks the closest to the OG theme of GH

Offline keymaster

  • Topre Revolution Theorist
  • Posts: 1148
Re: Custom Theme Modifications via userstyles.org
« Reply #8 on: Sat, 01 June 2013, 17:41:11 »
Thanks, aggiejy. I've been using the DT-style theme you made for about 2 weeks now. I really like it and don't plan on using anything else.

Offline aggiejy

  • ** Moderator Emeritus
  • Thread Starter
  • Posts: 1125
  • Location: ~Austin, Texas
Re: Custom Theme Modifications via userstyles.org
« Reply #9 on: Sat, 01 June 2013, 19:40:31 »
Thanks, aggiejy. I've been using the DT-style theme you made for about 2 weeks now. I really like it and don't plan on using anything else.

Cool!  Be sure to "check for updates" in stylish, I fixed a little bug earlier today.  (Though, you may want to duplicate and save the current as a personal style in case I remove something you like!)

Offline keymaster

  • Topre Revolution Theorist
  • Posts: 1148
Re: Custom Theme Modifications via userstyles.org
« Reply #10 on: Mon, 03 June 2013, 22:49:41 »
There seems to be a bug when I browse the Recent Unread Topics page. Whenever I click the Last Post arrow ( ), it doesn't take me to the last post but at least a few before it. I hope you can find a fix -- I really love using your theme.

Offline aggiejy

  • ** Moderator Emeritus
  • Thread Starter
  • Posts: 1125
  • Location: ~Austin, Texas
Re: Custom Theme Modifications via userstyles.org
« Reply #11 on: Mon, 03 June 2013, 23:01:33 »
Be sure to do an update.  I just fixed that bug yesterday or the day before I think. I also added a little to the top of each post, so you can more easily get a permalink.

ie, it looks like this now:

Offline keymaster

  • Topre Revolution Theorist
  • Posts: 1148
Re: Custom Theme Modifications via userstyles.org
« Reply #12 on: Mon, 03 June 2013, 23:09:05 »
Hmm, odd...I updated the theme and restarted Firefox and it hasn't fixed it yet. What exactly is the code that modifies this?

Edit: Oh, and after I make a new post, the web page is redirected to
Code: [Select]
http://geekhack.org/index.php?topic=44196.new#new but it doesn't scroll to the post, but instead goes to one of the previous posts near the top of the page.

Offline aggiejy

  • ** Moderator Emeritus
  • Thread Starter
  • Posts: 1125
  • Location: ~Austin, Texas
Re: Custom Theme Modifications via userstyles.org
« Reply #13 on: Mon, 03 June 2013, 23:29:34 »
Yeah, I think it is a firefox issue.  (I only use Chrome)  I just did another update.  At least on a mac, I had to uninstall the style and reinstall it to get it to work.  But I *think* it goes down to #new now though.

I need to style that code block!  One day I'll spend some time on it and make it easier to modify to your liking.  But please let me know if there are any big things you want different.
« Last Edit: Mon, 03 June 2013, 23:34:26 by aggiejy »

Offline keymaster

  • Topre Revolution Theorist
  • Posts: 1148
Re: Custom Theme Modifications via userstyles.org
« Reply #14 on: Mon, 03 June 2013, 23:43:33 »
It looks like it's been fixed :D
I don't think the theme needs much work at all. It's pretty much perfect as it is. I prefer minimalistic design and this current theme is more than sufficient. You know how the Navy saying goes: "Keep it simple, stupid". :P

Offline daerid

  • Posts: 4271
  • Location: Denver, CO
    • Rossipedia
Re: Custom Theme Modifications via userstyles.org
« Reply #15 on: Wed, 26 June 2013, 11:28:17 »
Was looking for this thread, wanted to post my latest in here:




Offline aggiejy

  • ** Moderator Emeritus
  • Thread Starter
  • Posts: 1125
  • Location: ~Austin, Texas
Re: Custom Theme Modifications via userstyles.org
« Reply #16 on: Wed, 26 June 2013, 12:57:19 »
Cool! You should post it to userstyles.org sometime so we can try it.

Offline aggiejy

  • ** Moderator Emeritus
  • Thread Starter
  • Posts: 1125
  • Location: ~Austin, Texas
Re: Custom Theme Modifications via userstyles.org
« Reply #17 on: Thu, 04 July 2013, 14:59:05 »
keymaster, or anyone else using mine... you may want to update.  Fixed some bugs related to the new header changes and to work with the (current) default theme (Austere) instead of the other other white theme.

http://userstyles.org/styles/87758/aggiejy-s-geekhack-light-theme-1?r=1372967784

Offline Photoelectric

  • * Administrator
  • Posts: 6753
Re: Custom Theme Modifications via userstyles.org
« Reply #18 on: Thu, 20 February 2014, 19:31:12 »
Just saw this, and it's something I've been after for quite a while.  Trying out all the themes linked here and also going to work on modifying my own.

aggiejy, I like your original theme, but I'm trying to find the part in the code responsible for delimiting the width of the web page.  I'm using a 2560-pixel-wide monitor, so with your original theme, the forum is just a narrow column in the center.  I've been looking through the code, trying to find how to take out the fixed page width but keep overlooking it, I think.

Could anyone give me some tips on where that part might be?  Thanks!


Found it!
« Last Edit: Thu, 20 February 2014, 19:34:19 by Photoelectric »
- Keyboards: LZ-GH (Jailhouse Blues)M65-a, MIRA SE, E8-V1, MOON TKL, CA66
- Keyboard Case Painting Tips -
- Join Mechanical Keyboards photography group on Flickr -

Offline aggiejy

  • ** Moderator Emeritus
  • Thread Starter
  • Posts: 1125
  • Location: ~Austin, Texas
Re: Custom Theme Modifications via userstyles.org
« Reply #19 on: Sat, 22 February 2014, 15:40:21 »
Yay, glad you found it!

FWIW, I use a 2560px wide monitor too, but I can't stand to have my browser wider than ~1200ish range. Not sure why. :)

Offline Photoelectric

  • * Administrator
  • Posts: 6753
Re: Custom Theme Modifications via userstyles.org
« Reply #20 on: Sat, 22 February 2014, 15:43:36 »
I'm still slowly playing with various options.  There are other widths that I'm still looking into, such as internal thread view.  I hate those empty unused tabs on the left and right in full screen, so I have to have the width scale with my window.  Thanks for these examples  :thumb:
- Keyboards: LZ-GH (Jailhouse Blues)M65-a, MIRA SE, E8-V1, MOON TKL, CA66
- Keyboard Case Painting Tips -
- Join Mechanical Keyboards photography group on Flickr -