Sign in to follow this  
Followers 0
Woel

Dark & Sleek CSS Style for A Forum of Ice and Fire

36 posts in this topic

Hi! I've done a redesign of the forum using CSS and the Chrome add-on Stylish. I found the site as it was to be rather cluttered, and not very pleasing on the eye, which is what motivated me to create this style and now I thought I would share it with people on this forum. The CSS style can be found here - you only need to click the green button to install it with Stylish.

Some additional information: For headers I have set the free font Bitter, which is available for download at Google Web Fonts. I really recommend using it, but it's not "mandatory" since there are fallback fonts. Make sure to select all three font weights before you download. The body font is Corbel, which isn't free but should be available on most Windows 7 and Vista systems - not sure about OSX though. Again, there are fallback fonts.

If you find anything that hasn't been properly styled, please tell me here or comment at userstyles.org. If you know CSS, you most likely can fix the issue yourself - although be warned that the code is pretty jumbled. I update the style myself from time to time, as I find things to fix and improve. Enjoy the style!

http://cdn.userstyle...85955_after.png

Edited by Woel

Share this post


Link to post
Share on other sites

I like it AA. The only problem is that Stylebot requires me to download google Chrome. Not quite sure that I want to do that.

Looks great though!

Share this post


Link to post
Share on other sites

Looks cool but fire fox has adblock so that's what I use. Is there a way to use your stylesheet in that browser?

Share this post


Link to post
Share on other sites

I changed my name btw, sorry if it's confusing. The old one annoyed me.

Yes, you can use another add-on, for example Stylish which is available both for Chrome and Firefox (https://addons.mozilla.org/sv-se/firefox/addon/stylish/). If you click the link to the CSS style (http://stylebot.me/styles/2197), there is a button at the right of the page titled CSS. If you click this, it will bring up up the CSS code. Just copy+paste that into whatever interface Stylish provides - I'm not familiar with it personally. Thanks for the nice feedback, I'm happy that you like it!

Share this post


Link to post
Share on other sites

I'll have to try the FF version tomorrow. Again, thank you for the links!

Share this post


Link to post
Share on other sites

I'll have to try the FF version tomorrow. Again, thank you for the links!

You're welcome, not a problem.

Share this post


Link to post
Share on other sites

Re: Forum names...

One of the best ones ever was "A-hole Targaryen."

sorry for thread-jacking. Carry on. :)

Share this post


Link to post
Share on other sites

This is beautiful! I just don't know how to install/implement it. Are there instructions anywhere on the forums for doing this?

Share this post


Link to post
Share on other sites

This is beautiful! I just don't know how to install/implement it. Are there instructions anywhere on the forums for doing this?

Thank you! I edited the original post to clarify the instructions. You wouldn't find the instructions on the forums, since it is implemented using an add-on to your browser. If you don't have Chrome (and thus cannot install Stylebot), you can use Stylish which is available for Firefox. I'd recommend switching browser though, Chrome offers a much better browsing experience in my opinion (but that's you choice, obviously).

Share this post


Link to post
Share on other sites

Thank you! I edited the original post to clarify the instructions. You wouldn't find the instructions on the forums, since it is implemented using an add-on to your browser. If you don't have Chrome (and thus cannot install Stylebot), you can use Stylish which is available for Firefox. I'd recommend switching browser though, Chrome offers a much better browsing experience in my opinion (but that's you choice, obviously).

Thanks!

I use chrome and will try to implement this as soon as I can.

Share this post


Link to post
Share on other sites

Hi Woel

Nice to see someone else working on forum skinning, I like the work you've done here. I did a similar thing a couple of years ago when the latest forum design was introduced and we lost the old Stark and Targaryen skins that were available on the previous version of the board.

The Stark and Targaryen skins I created are for Stylish and there's a thread about them in the Help section here. It might be a good idea to add your information from this thread to the Help section before General Chatter moves on and this thread gets lost.

ETA: or come to think of it a better suggestion may be to ask a Mod to move this thread to the Help section.

Edited by princeMountainGoat

Share this post


Link to post
Share on other sites

Thank you princeMountainGoat, I'm glad you like it! It seems a mod aldready moved it to the Help section. I wasn't sure were to post it at first, so I put it in General Chatter, but the Help section is probably better. I just hope people find it, hah.

Share this post


Link to post
Share on other sites

Am I allowed to bump this up yet? Please don't ban me... Anyhow, I would really appreciate if anyone who has tried this could tell others about it. It needs some hype. And remember, I update the style regularly!

Share this post


Link to post
Share on other sites

Bump. Could a nice admin please sticky this post? It has been done for other CSS styles. Edit: Thank you nice admin!

Edit 2: I thought I would "tag" (i.e. quote) the people who have shown interest in the style so far, just to update them on the fact that it still exists, and is now available on userstyles.org and thus easily installable with Stylish.

I like it AA. The only problem is that Stylebot requires me to download google Chrome. Not quite sure that I want to do that.

Looks great though!

Looks cool but fire fox has adblock so that's what I use. Is there a way to use your stylesheet in that browser?

This is beautiful! I just don't know how to install/implement it. Are there instructions anywhere on the forums for doing this?

Hi Woel

Nice to see someone else working on forum skinning, I like the work you've done here. I did a similar thing a couple of years ago when the latest forum design was introduced and we lost the old Stark and Targaryen skins that were available on the previous version of the board.

The Stark and Targaryen skins I created are for Stylish and there's a thread about them in the Help section here. It might be a good idea to add your information from this thread to the Help section before General Chatter moves on and this thread gets lost.

ETA: or come to think of it a better suggestion may be to ask a Mod to move this thread to the Help section.

Edited by Woel

Share this post


Link to post
Share on other sites

I changed my name btw, sorry if it's confusing. The old one annoyed me.

Yes, you can use another add-on, for example Stylish which is available both for Chrome and Firefox (https://addons.mozil.../addon/stylish/). If you click the link to the CSS style (http://stylebot.me/styles/2197), there is a button at the right of the page titled CSS. If you click this, it will bring up up the CSS code. Just copy+paste that into whatever interface Stylish provides - I'm not familiar with it personally. Thanks for the nice feedback, I'm happy that you like it!

Tried copying the code into Stylish but it didn't really work. It did change the site style, but not as expected; I kind of had half the old styling and half of yours.

Any ideas?

ETA: Switching browsers is out of the question for me :P

Edited by Woftis

Share this post


Link to post
Share on other sites
Tried copying the code into Stylish but it didn't really work. It did change the site style, but not as expected; I kind of had half the old styling and half of yours.

Hi Woel, with Stylish you need to add !important to every CSS rule otherwise it won't be applied as Woftis is finding here. An irritating requirement and I don't know why they implemented Stylish in this way, it should have been the top layer CSS automatically overwriting all other rules but unfortunately that's not the way it is.

As mentioned before I really like the skin, I think it's easier on the eye than my Targaryen skin.

Share this post


Link to post
Share on other sites

Good to know it's not just me! If it all gets sorted out, please can you give me a shout?

Share this post


Link to post
Share on other sites

Hi Woel, with Stylish you need to add !important to every CSS rule otherwise it won't be applied as Woftis is finding here. An irritating requirement and I don't know why they implemented Stylish in this way, it should have been the top layer CSS automatically overwriting all other rules but unfortunately that's not the way it is.

As mentioned before I really like the skin, I think it's easier on the eye than my Targaryen skin.

Good to know it's not just me! If it all gets sorted out, please can you give me a shout?

Okay, weird. I use Stylish for Chrome and I only need to add some !important tags to make it work, which are all in the CSS at Stylish. There is a big downside to using !important tags on every rule though - making exceptions gets really hard, since you if you have one rule for "a" and one for "#example a" then the rule for "a" will always take precedence, at least in my experience. This messes up some of the CSS in this style. I will give it a try, though and update if I can figure out something that works.

Edit: There wasn't actually any major problems, so it seems I was mistaken. The only thing, which I fixed, was that !important messed up the images for icons in the "Edit Post" interface; I realized I could use background-color instead of background as a property. I also checked in Firefox and it seems identical to how it looks in Chrome now. I hope you enjoy it, and please tell me if there is anything that needs to be adjusted. Here is a link to the style.

Edited by Woel

Share this post


Link to post
Share on other sites

Thanks Woel, I'm at work at the moment so I can't report back but I'll check it out when I get home.

Am I right in saying I just copy your script into the pop up box in Stylish and it should work?

Share this post


Link to post
Share on other sites

Thanks Woel, I'm at work at the moment so I can't report back but I'll check it out when I get home.

Am I right in saying I just copy your script into the pop up box in Stylish and it should work?

Hi, you can install by clicking the big button that is either green and says "Install with Stylish", or that is blue and says "Update with Stylish" or something similar. You are looking at the one from userstyles.org, right?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0