Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

Geek Culture / Custom TGC Forum Style Sheet

Author
Message
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 10th Sep 2013 00:40 Edited at: 28th Sep 2013 02:19
Link
Phaelax and I have created alternative style sheets for the TGC forum. You can install these directly with the Stylish browser extension.

DarkTextured [IMG]
Phaelax [IMG]

Try them out and tell us what you think.


Formerly OBese87.
Back to top
Profile PM Email
The Zoq2
16
Years of Service
User Offline
Joined: 4th Nov 2009
Location: Linköping, Sweden
Posted: 10th Sep 2013 00:44 Edited at: 10th Sep 2013 00:47
Link
It looks pretty good, but I don't like the dark color of the links on the dark background

Also, I just looked at the code HTML code for the forum and saw that the HTML uses tables

Say ONE stupid thing and it ends up as a forum signature forever. - Neuro Fuzzy
Back to top
Profile PM Email
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 10th Sep 2013 00:48 Edited at: 10th Sep 2013 00:49
Link
Quote: "It looks pretty good, but I don't like the dark color of the links on the dark background"

The links shouldn't be dark, they should be bright cyan. Does it look different to the screenshot to you? If so, what browser are you using?


Formerly OBese87.
Back to top
Profile PM Email
The Zoq2
16
Years of Service
User Offline
Joined: 4th Nov 2009
Location: Linköping, Sweden
Posted: 10th Sep 2013 00:49
Link
Looks like it, but looking at it again, it seems like they are smaller than usual which I don't really like. Other than the small text, I really like the looks of it though

Say ONE stupid thing and it ends up as a forum signature forever. - Neuro Fuzzy
Back to top
Profile PM Email
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 10th Sep 2013 00:54
Link
I haven't changed the text size.


Formerly OBese87.
Back to top
Profile PM Email
The Zoq2
16
Years of Service
User Offline
Joined: 4th Nov 2009
Location: Linköping, Sweden
Posted: 10th Sep 2013 01:00 Edited at: 10th Sep 2013 01:01
Link
That's really odd, because it looks smaller (atleast the links on the first page. Also, I wans't a fan of the stripes in the background and it looks a lot better IMO

Say ONE stupid thing and it ends up as a forum signature forever. - Neuro Fuzzy
Back to top
Profile PM Email
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 10th Sep 2013 01:05
Link
The stripy background is in a single entity, everything else is just transparency, so you can easily replace it with another image or colour if you prefer.


Formerly OBese87.
Back to top
Profile PM Email
Phaelax
DBPro Master
23
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 10th Sep 2013 03:36 Edited at: 10th Sep 2013 07:23
Link
I don't care for the background stripes.

http://zimnox.com
Back to top
Profile PM Email Website
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 10th Sep 2013 04:01
Link
Quote: "I don't care for the background stripes."

I'll admit they are an acquired taste. I might create a cleaner version without the stripes.

I like that subtly textured look some sites have — attached example from the mozilla about:home page, if you look closely you can see it is not a solid colour. I can't seem to reproduce the effect without an obvious seam. If it has to be one big image then it wont work for pages that scroll, unless the background is fixed of course but that might look odd.

Any suggestions?


Formerly OBese87.
Back to top
Profile PM Email
Dar13
18
Years of Service
User Offline
Joined: 12th May 2008
Location: Microsoft VisualStudio 2010 Professional
Posted: 10th Sep 2013 04:16 Edited at: 10th Sep 2013 04:18
Link
It's just a noise image. Here's their source image:
chrome://browser/content/abouthome/noise.png

Just tinker with the levels in GIMP or Photoshop and you should be able to get the colors you want.

EDIT: Seems Apollo doesn't want to link my link.

Back to top
Profile PM Email
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 10th Sep 2013 04:59 Edited at: 10th Sep 2013 05:04
Link
Quote: "Just tinker with the levels in GIMP or Photoshop and you should be able to get the colors you want."

Thanks, I've managed to make one without horrible seams now.

I thought I'd experiment with rounded borders too. →


Formerly OBese87.
Back to top
Profile PM Email
Dar13
18
Years of Service
User Offline
Joined: 12th May 2008
Location: Microsoft VisualStudio 2010 Professional
Posted: 10th Sep 2013 05:01
Link
That looks good IMO. Perhaps scale back a bit on the rounded corners' radius. Have you changed the color for the quotes or are you going to leave that alone?

Back to top
Profile PM Email
Fuzz
19
Years of Service
User Offline
Joined: 14th Nov 2006
Location: Tasmania, Australia
Posted: 10th Sep 2013 06:33
Link
Looks good

Back to top
Profile PM Email Website
easter bunny
13
Years of Service
User Offline
Joined: 20th Nov 2012
Playing: Dota 2
Posted: 10th Sep 2013 07:02
Link
using it! Looks good.
I like the rounded corners, can you please update the upload?


The NEW, awesomest app on Google Play
Back to top
Profile PM Email
Phaelax
DBPro Master
23
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 10th Sep 2013 08:28 Edited at: 10th Sep 2013 08:29
Link
I spent more time trying to figure out how to make stylish work than actually editing the code. They really need a beginners page on their site.
Anyway, I took a shot at making one myself, highly inspired by Libervurto's latest concept photo.

(screenshot attached)
http://userstyles.org/styles/92821/tgc-phaelax?r=1378790467


It's not finished yet, I haven't changed the styles for new/unread posts, just the basic stuff so far.

http://zimnox.com
Back to top
Profile PM Email Website
Aaron Miller
20
Years of Service
User Offline
Joined: 25th Feb 2006
Playing: osu!
Posted: 10th Sep 2013 09:31
Link
Really nice, guys! I like both styles, but some of the images on the site seem really out of place. (e.g., profile buttons and such.)

Libervurto, I think I liked the dark blue you did for the new posts a bit more than the purple, what color code did you use for it? #008?

Web - Tweets
“Typing is no substitution for thinking.”
Back to top
Profile PM Email Website
Fuzz
19
Years of Service
User Offline
Joined: 14th Nov 2006
Location: Tasmania, Australia
Posted: 10th Sep 2013 09:41
Link
Really cool, Phaelax!

Back to top
Profile PM Email Website
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 10th Sep 2013 15:01 Edited at: 10th Sep 2013 16:17
Link
Quote: "Libervurto, I think I liked the dark blue you did for the new posts a bit more than the purple, what color code did you use for it? #008?"

I can't remember, but it was more of a dark cyan. I changed it because I found that in sunlight it was harder to distinguish between the grey. Maybe upping the opacity would have worked just as well.

@Phaelax I have started organising the style sheet by grouping things together that use the same parameters. FILE ATTACHED →
Is this helpful or a bad idea?


Formerly OBese87.
Back to top
Profile PM Email
Phaelax
DBPro Master
23
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 10th Sep 2013 17:46
Link
I don't think it's a bad idea, I've done the same to some extent.

http://zimnox.com
Back to top
Profile PM Email Website
Phaelax
DBPro Master
23
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 10th Sep 2013 18:22
Link
ghjfghjf

http://zimnox.com
Back to top
Profile PM Email Website
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 10th Sep 2013 18:32 Edited at: 10th Sep 2013 18:46
Link
Did you run out of new messages to look at?

I can't seem to give the "info_table_header" and "info_table tbody" rounded corners. I've got their backgrounds right, so I know I'm referencing them correctly.

Latest Screenie →


Formerly OBese87.
Back to top
Profile PM Email
MrValentine
AGK Backer
15
Years of Service
User Offline
Joined: 5th Dec 2010
Playing: FFVII
Posted: 10th Sep 2013 18:59
Link
Quote: "Did you run out of new messages to look at? "


You have no idea...

Quote: "I can't seem to give the "info_table_header" and "info_table tbody" rounded corners. I've got their backgrounds right, so I know I'm referencing them correctly."


More than welcome to shout me a PM if you want any CSS help...

Back to top
Profile PM
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 10th Sep 2013 19:12
Link
With a bit of jiggling we now have the entire row of an unread thread highlighted. (Well, apart from the icon box, but I can't seem to get at that.)

PIC →


Formerly OBese87.
Back to top
Profile PM Email
Phaelax
DBPro Master
23
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 10th Sep 2013 19:20
Link
Quote: "Did you run out of new messages to look at?"

I'm not sure what happened there, I didn't post that on purpose.

I was going to suggest code for the input boxes, but it looks like you already had it figured out. Here's something to do checkboxes:


I still haven't been able to alter (properly) the 'choose file' button.

http://zimnox.com
Back to top
Profile PM Email Website
The Zoq2
16
Years of Service
User Offline
Joined: 4th Nov 2009
Location: Linköping, Sweden
Posted: 10th Sep 2013 19:29
Link
That looks really good Lib

Say ONE stupid thing and it ends up as a forum signature forever. - Neuro Fuzzy
Back to top
Profile PM Email
Indicium
18
Years of Service
User Offline
Joined: 26th May 2008
Location:
Posted: 10th Sep 2013 19:30
Link
I really like Phaelax's except new messages are not affected it seems.


They see me coding, they hating. http://indi-indicium.blogspot.co.uk/
Back to top
Profile PM
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 10th Sep 2013 19:43
Link
Quote: " More than welcome to shout me a PM if you want any CSS help..."

Thanks, I will do if I can't work out what's causing it.

I pinched Phaelax's quote code and modified it for mine →


Formerly OBese87.
Back to top
Profile PM Email
Indicium
18
Years of Service
User Offline
Joined: 26th May 2008
Location:
Posted: 10th Sep 2013 19:48
Link
I prefer your quotes.


They see me coding, they hating. http://indi-indicium.blogspot.co.uk/
Back to top
Profile PM
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 10th Sep 2013 19:49
Link
Which quotes?


Formerly OBese87.
Back to top
Profile PM Email
Phaelax
DBPro Master
23
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 10th Sep 2013 19:54 Edited at: 10th Sep 2013 22:18
Link
Quote: "[quote][quote]I prefer your quotes."
[/quote][/quote]
I just wanted to test nested quotes


Have you been able to control the spacing between the table cells?

All these nested tables without any IDs is very annoying.

More updated. I think I've covered just about everything forum related, minus code snippets.
http://userstyles.org/styles/92821/tgc-phaelax?r=1378840570

http://zimnox.com
Back to top
Profile PM Email Website
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 11th Sep 2013 01:27 Edited at: 11th Sep 2013 01:39
Link
Both Phaelax and I have updated our styles. Just click the Stylish extension (if you've already installed it) and click "Find styles for this site"

Updated piccy of mine →

[edit]
Aaah! Switching back to the default style is blinding now.

Quote: "Have you been able to control the spacing between the table cells?"

I haven't tried. I've noticed the spacing looks uneven on some cells, if that's what you mean, but I ignore that.

Quote: "All these nested tables without any IDs is very annoying."

You can say that again!


Formerly OBese87.
Back to top
Profile PM Email
Phaelax
DBPro Master
23
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 11th Sep 2013 04:00
Link
I like your textures better. But the inputs (buttons, dropdown) don't match your image. They're still rendering as normal (attached screenshot).

http://zimnox.com
Back to top
Profile PM Email Website
Phaelax
DBPro Master
23
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 11th Sep 2013 07:00
Link
I had been trying to figure out how to make my texture a background yet use the table rows as a separate transparent background color. When I was looking through your CSS (mainly for the link to your background texture) I realized you did exactly what I was after. So umm, yea, I kinda swiped some of your css.

But, I managed to find a way to replace any images on the page, which will now allow us to truly customize the page with more than just color.


Basically, using the src attribute as the ID.


http://zimnox.com
Back to top
Profile PM Email Website
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 11th Sep 2013 13:42
Link
Quote: "I managed to find a way to replace any images on the page, which will now allow us to truly customize the page with more than just color."

Awesome!

Quote: "So umm, yea, I kinda swiped some of your css. "

Someone stole my code and replaced it with an exact replica!


Formerly OBese87.
Back to top
Profile PM Email
Phaelax
DBPro Master
23
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 12th Sep 2013 01:09
Link
Not exact! Just, almost. There are some subtle differences I still admit credit to you for 99% of the design.

http://zimnox.com
Back to top
Profile PM Email Website
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 12th Sep 2013 03:25 Edited at: 12th Sep 2013 12:48
Link
Quote: "Not exact! Just, almost. There are some subtle differences I still admit credit to you for 99% of the design."

It was a joke. I still have my code, it's fine, that's what I meant. lol
I stole bits of yours too btw.

Hmm, I can't get changing the button images to work on firefox. I checked your style and it doesn't work in ff either, works fine in chrome though.


Formerly OBese87.
Back to top
Profile PM Email
Phaelax
DBPro Master
23
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 12th Sep 2013 13:48
Link
I think those particular CSS features may be webkit specific for now.

http://zimnox.com
Back to top
Profile PM Email Website
MrValentine
AGK Backer
15
Years of Service
User Offline
Joined: 5th Dec 2010
Playing: FFVII
Posted: 12th Sep 2013 14:00
Link
Most CSS can be controlled in many ways, have a look at the !important call

Back to top
Profile PM
Phaelax
DBPro Master
23
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 12th Sep 2013 18:31
Link
Most of the CSS I wrote needed !important to work.

http://zimnox.com
Back to top
Profile PM Email Website
The Zoq2
16
Years of Service
User Offline
Joined: 4th Nov 2009
Location: Linköping, Sweden
Posted: 12th Sep 2013 23:54
Link
What does the !important do, after 1 year of web design at school, I have never heard of it...

Say ONE stupid thing and it ends up as a forum signature forever. - Neuro Fuzzy
Back to top
Profile PM Email
Phaelax
DBPro Master
23
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 13th Sep 2013 00:08
Link
It basically gives the rule more importance than it would normally have among the natural flow of the hierarchy. It gives the rule a higher priority.

Basically, if you have a rule in an external stylesheet, it can be overriden by an inline rule. Using important in the stylesheet changes that habit so the inline rule doesn't affect it.

Realistically, I wouldn't normally recommend using it. However, in this situation where all we can do is add CSS to existing site and not specifically change the original, then we sometimes have to use it to have our rules take effect.

http://zimnox.com
Back to top
Profile PM Email Website
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 13th Sep 2013 01:51
Link
Have you gotten img[src="/g/top.gif"]:hover to work?


Formerly OBese87.
Back to top
Profile PM Email
Phaelax
DBPro Master
23
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 13th Sep 2013 06:31 Edited at: 13th Sep 2013 07:57
Link
Yes. Depending on whether you're viewing a thread or just viewing the board, the two pages references the images differently. On one page it'll have the image path as you posted. On the other page it won't have the preceding forward slash before the g.

Therefore, you must write a rule to search for both.
img[src="/g/top.gif"]:hover, img[src="g/top.gif"]:hover{}


Btw, here's my latest update:


http://zimnox.com
Back to top
Profile PM Email Website
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 17th Sep 2013 23:18 Edited at: 17th Sep 2013 23:19
Link
Is this a good idea? → I think it might be neat if it doesn't take up so much of the screen!
Also the transparency looks a bit weird.


Formerly OBese87.
Back to top
Profile PM Email
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 18th Sep 2013 03:56 Edited at: 18th Sep 2013 05:50
Link
I found it quite useful to have the post box right there but it was too big. Maybe if there was some way to embed a script to allow you to show/hide the post box that would be cool, but for now I've switched to fixing this bar instead →
It's only green because I was having trouble picking it out with CSS commands so I used green to see what I was grabbing.
Here is the code for grabbing it:
Annoyingly the page structure is slightly different for threads so I had to make a separate case for viewing thread pages.

[edit]
Oh this is NICE! →


Formerly OBese87.
Back to top
Profile PM Email
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 18th Sep 2013 05:09 Edited at: 18th Sep 2013 05:15
Link
Super-Swish Update! http://userstyles.org/styles/92846/tgc-forum-darktextured?r=1379469865

Screenshot attached →


Formerly OBese87.
Back to top
Profile PM Email
Phaelax
DBPro Master
23
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 18th Sep 2013 05:47
Link
I see what you did there. I didn't like the post box in the first pic, looked messy/too busy. I'm impressed you managed to get that box to stay on top like that without having to change the code structure. I would've thought it'd break the overall layout possibly. I forgot all about nth-child too. Maybe make the transparency a little more subtle to improve its visibility.

http://zimnox.com
Back to top
Profile PM Email Website
Libervurto
20
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 18th Sep 2013 06:24 Edited at: 18th Sep 2013 06:24
Link
Thanks. Have you tried using it since the update? The floating nav-bar is pretty useful but I keep forgetting it's there and scrolling up out of habit.

Next I would like to look into tweaking the scripting so that the post and search buttons show/hide the respective boxes, and they float just like the nav-bar. I think there's an extension called "scriptmonkey" or something that might let me do that.


Formerly OBese87.
Back to top
Profile PM Email
Phaelax
DBPro Master
23
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 19th Sep 2013 05:51
Link
Quote: "Next I would like to look into tweaking"

I been on FB too much lately, I really read that as 'twerking'

This morning I had some free time and decided to remake the forum myself without using tables at all, and I've done just that. (and it works in IE) I'm looking to see if the existing site can be done with less code. Even saving 10kb on a page can greatly reduce the server's bandwidth on a high traffic site. Even so, I doubt TGC would want to bother changing their code anyway. Oh well, just for fun!

http://zimnox.com
Back to top
Profile PM Email Website
easter bunny
13
Years of Service
User Offline
Joined: 20th Nov 2012
Playing: Dota 2
Posted: 19th Sep 2013 10:16 Edited at: 19th Sep 2013 10:18
Link
I'm using both DarkTextured and Phaelax Styles and it looks GREAT!
Except for the the viewprofile page: http://forum.thegamecreators.com/?m=view_profile&i=32a0fa0d6b1a815345d62d97b587b7a7

edit: never mind, they're known bugs


Audacia Games
Back to top
Profile PM Email
Back to top

Login to post a reply

Server time is: 2026-07-08 14:13:15
Your offset time is: 2026-07-08 14:13:15