geekhack

Site Announcements and Feedback => Announcements/Feedback/Suggestions => Topic started by: aggiejy on Fri, 31 May 2013, 20:39:12

Title: Custom Theme Modifications via userstyles.org
Post by: aggiejy 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 (https://addons.mozilla.org/en-US/firefox/addon/stylish/) and Chrome (https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en) 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 (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:
[attach=1][attach=2][attach=3]

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/ (https://www.heroku.com/) :)
Title: Re: Custom Theme Modifications via userstyles.org
Post by: rowdy 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.

(http://i.imgur.com/BCMP4yY.png)

Basically just a start on changing Nostalgia to Nostalgic Yellow.  Heaps not done on it yet.
Title: Re: Custom Theme Modifications via userstyles.org
Post by: tsangan on Sat, 01 June 2013, 06:27:31
Anything other then Nostalgia is not GH!!!!
Title: Re: Custom Theme Modifications via userstyles.org
Post by: rowdy on Sat, 01 June 2013, 06:41:00
Anything other then Nostalgia is not GH!!!!

+1

But with a touch of yellow ;)
Title: Re: Custom Theme Modifications via userstyles.org
Post by: SpAmRaY 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
(http://i.imgur.com/BCMP4yY.png)


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
Title: Re: Custom Theme Modifications via userstyles.org
Post by: codyeatworld 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)

(http://i.imgur.com/AaV2dI6.png)

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;
}
Title: Re: Custom Theme Modifications via userstyles.org
Post by: aggiejy on Sat, 01 June 2013, 16:30:39
Thanks for sharing! :)  Some rainy day perhaps I'll pick up where you left off.
Title: Re: Custom Theme Modifications via userstyles.org
Post by: SmallFry 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 (http://web.archive.org/web/20071230043419/http://geekhack.org/)
Title: Re: Custom Theme Modifications via userstyles.org
Post by: keymaster 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.
Title: Re: Custom Theme Modifications via userstyles.org
Post by: aggiejy 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!)
Title: Re: Custom Theme Modifications via userstyles.org
Post by: keymaster on Mon, 03 June 2013, 22:49:41
There seems to be a bug when I browse the Recent Unread Topics page (http://geekhack.org/index.php?action=unread). Whenever I click the Last Post arrow ( (http://geekhack.org/Themes/Thoriated/images/icons/last_post.gif) ), 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.
Title: Re: Custom Theme Modifications via userstyles.org
Post by: aggiejy 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 [attachimg=1] to the top of each post, so you can more easily get a permalink.

ie, it looks like this now:
[attachimg=2]
Title: Re: Custom Theme Modifications via userstyles.org
Post by: keymaster 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.
Title: Re: Custom Theme Modifications via userstyles.org
Post by: aggiejy 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.
Title: Re: Custom Theme Modifications via userstyles.org
Post by: keymaster 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
Title: Re: Custom Theme Modifications via userstyles.org
Post by: daerid on Wed, 26 June 2013, 11:28:17
Was looking for this thread, wanted to post my latest in here:

(http://i.imgur.com/KMZ7vyA.png)

(http://i.imgur.com/cWoWBpO.png)
Title: Re: Custom Theme Modifications via userstyles.org
Post by: aggiejy on Wed, 26 June 2013, 12:57:19
Cool! You should post it to userstyles.org sometime so we can try it.
Title: Re: Custom Theme Modifications via userstyles.org
Post by: aggiejy 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
Title: Re: Custom Theme Modifications via userstyles.org
Post by: Photoelectric 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!
Title: Re: Custom Theme Modifications via userstyles.org
Post by: aggiejy 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. :)
Title: Re: Custom Theme Modifications via userstyles.org
Post by: Photoelectric 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: