[mollypop]

This thread is essentially a continuation of http://www.gamesas.com/topic/1246655-forum-themes/ which was created back in early 2010 when the forums were updated and all the old themes were removed. User styles from this old thread may or may not work, I've not tried, but given the amount of changes from the page source from what I remember the old page source looking like, I'd say they probably won't work well.


Install Guides (Stolen from the previous thread)


Google Chome Install Guide
- Download the https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en-GB
- Press the Spanner Icon (Top right) and Press Extensions
- Press the Options button for Stylish
- Press "Add New Style"
- Write a name in the name box (anything you want)
- Copy the CSS scripts that you want into the large text box marked "code"
- Check "Enabled"
- In the "Applies to" drop down, select "URLs Starting With" and in the text box put "http://www.gamesas.com/" (Without the quotes)
- Press Save

Firefox Install Guide
- Install https://addons.mozilla.org/en-US/firefox/addon/stylish/
- Click on the new icon bottom right
- Ensure you are on the forums
- Press Write New Style, then For www.gamesas.com
- It should open a dialog box
- Put any name you want in the "name" box
- Paste the CSS scripts that you want between the braces. e.g.:

@namespace url(http://www.w3.org/1999/xhtml);@-moz-document domain("www.gamesas.com") {/* paste code in this bit */}

- Press Save

Opera Installation Guide (By DEFRON)
-Save CSS somewhere
-right-click the forum website
-Edit Site Preferences
-Display
-Using the Choose Dialoge, locate the CSS file
-Open it, ok out

----------------------------------------------
Creating your own User Style

Creating a user style is simple if you have web design experience. Even if you don't, it's not that hard.

The bare minimum you need is a notepad program and a way to view page sources (which any browser has), however I'd recommend using a program with syntax highlighting (like http://notepad-plus-plus.org/) and a web developer tool (my favorite is http://www.opera.com/dragonfly/, but http://getfirebug.com/ is also good I hear). Firefox also has a very neat https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/3D_view which can be helpful when selecting the right box to apply your changes to.


-----------------------------------------------
Useful tricks

Disable stalker bar and add padding to the body to make room for it:

body{padding-top: 20px !important;}#bar{position: absolute !important;}

Replace pink hearts (Opera and Chrome):

img[src*="http://www.gamesas.com/images/smilie/bullet_pip_pinkheart.png"]{content: url("http://i.imgur.com/FYVx0i3.png");}

Replace pink hearts (Firefox):

img[src*="http://www.gamesas.com/images/smilie/bullet_pip_pinkheart.png"]{background-image: url('http://www.gamesas.com/images/smilie/bunny.gif');background-repeat: no-repeat;width:22px;padding-top: 22px;display:inline-block;height: 0px;}

For firefox, you have to match the padding-top and width to the height and width of the image you wish to use.

For any browser, I don't suggest you exceed a width of 28px for your image (height can be pretty much anything)
-----------------------------------------------
UserStyles for the Forums

Elegant Reborn
By Defron
Attempts to recreate the Elegant theme from the old forums after the update, currently in beta.

https://dl.dropboxusercontent.com/u/13148065/Beth/elegantreborn.css

https://dl.dropboxusercontent.com/u/13148065/Beth/elegant_reborn2.jpg | https://dl.dropboxusercontent.com/u/13148065/Beth/elegant_reborn.jpg


Most of the every-day things are Elegant-styled now, the one main exception is the post editor (especially the rich text editor). There's still a few things in the user profile unfixed, most hidden menus, and search-related things, and creating new threads. These will be addressed as I have free time


Share your user styles and I'll add them to the OP for others to use.

[Marilú]

Excellent! I run Chrome and by right clicking on any page, it has inspect elements, then an edit code screen pops up, I have always wondered what that was about. I assume this is where the transformation begins?

I should probably take a few moments to read more...huh?

[Naomi Ward]

The changes in the inspector do not persist, you'd need to do it each time. The Stylish extension takes care of that, though, by allowing you to have your own styles persist across web pages.

[Lory Da Costa]

I smell what you're steppin' in Froggy. I just need to spend a few minutes, hrs... days. figuring it out.

YAY! Instruction videos!

[roxxii lenaghan]

Heya,

like http://home.arcor.de/varana/skscreens/BethForum00.png - if the text wraps, there's almost no space between lines.

Firefox, Win7, 1920x1080, Windows font scaling of 125%.

Edit: Not only when wrapping; if I don't insert a blank line, it looks like that every time.

Edit 2: What is the "stalker bar"?

[Robert Devlin]

Works like a charm. All hail DEFRON

[Chantelle Walker]

The stalker bar is the list at the bottom that tells you who's browsing what.

[Rachyroo]

Does anyone know what element http://i.imgur.com/D8j8yB4.png fall under? I'd like to change them to green, like the button on the right.

[Dawn Porter]

Nope, the stalker bar is the bar on top that lets you log in/out, shows you your PMs, notifications, and has the search box.

It's set to have fixed position, causing it to stalk you as you scroll (hence the name) and takes up valuable verticle screen real estate.

You said "right" both times

In my style, the ones circled in blue are:

.pagination .page a, .pagination .back a, .pagination .forward a{background: url("http://www.gamesas.com/images/smilie/highlight_reallyfaint.png") 0px 0px repeat-x #3F5783 !important;color: #DDDDDD !important;}.pagination .page a:hover, .pagination .back a:hover, .pagination .forward a:hover{background: url("http://www.gamesas.com/images/smilie/highlight_reallyfaint.png") 0px 0px repeat-x #3F5783 !important;color: #FFFFFF !important;}.pagination .pages li.active{ background: url("http://www.gamesas.com/images/smilie/highlight.png") 0px 0px repeat-x  #3F5783 !important;}

[joannARRGH]

Official fix will come later (at work), but you can edit yours now

Search your style for:

14px/13.2px (it exists in three places)

and replace it with 14px (the '/13.2px' part is specifying too small of a line height).

That was copy/paste from Opera's stylization generator when examining a saved file of the original Elegant theme in MHTML format, didn't bother correcting it.

[ILy- Forver]

Thank you, works great now.

[Phillip Brunyee]

I got the Styles extension set in place, and created my own named style and continued to follow your instructions in the OP for a chrome user.

I copied and pasted the "Useful Tricks" codes for the bar and the tags, but it doesn't work. The screen flashes as if something changed and I get the little red "1" on the Styles button, so I know it's active. However, i still have the tags list at the bottom and the bar at the top.

[Khamaji Taylor]

Elegant Reborn is a terrific theme and I really appreciate all of DEFRON's work to bring it to us. There are a few items I'd like to tweak though, to make it a bit easier for me to read, and I'd appreciate it if anyone can point me to the right locations in the CSS file so I can make those changes myself. I'll post screens of what I want to tweak.

FYI, I'm using Chrome with Stylish for Chrome.

1. Forum Thread List (CD shown, but it looks the same in all of them).

http://i43.tinypic.com/11r4x93.jpg

As you can see, the text in the stalker bar is very dark and hard to see. Also, the buttons by the threads to go to the first unread post can barely be seen. I'd like to lighten the stalker bar text and darken the thread buttons.

2. Game Forum Page (Oblivion shown)

http://i43.tinypic.com/345lc9l.jpg

The circled items are the timestamps for the last post made to the subforum. How do I darken these so I can read them?

[Lauren Graves]

Does this work for IE7?

I'd use chrome but my GF doesn't like the interface for some reason so i don't wanna get her pissed of...

[Miranda Taylor]

Tested it in Firefox and Opera, and it works fine Chrome is reserved for a virtual machine on my home PC and I'm at work right now so can't help any further, sorry.

for the first point: in my style it's:

#user_navigation a{color: #000000 !important;text-shadow: none !important;}

Change the color hex code as you see fit

The second one is image-based, so unfortunately nothing can be done unless I get a hold of better images (which I might at some point, but too much of a PITA to bother with until everythign else is fixed)

That's a common li problem due to nesting issues, I'll see if I can fix it

IE7 has very primitive user style support, and you can't set domains, making it useless.

[Manuel rivera]

No need to apologize. Your efforts are greatly appreciated. Don't worry about me, you make those big bucks, for now. I can wait for the chrome side to get adjusted. Maybe I'm not doing something correctly. Although, copy/paste should be rather straight forward. However, the latter is very well possible.

[Veronica Flores]

I'll make the one tweak I can then, and just wait until things settle down for the rest. Thanks for the response!

[Claudz]

.ipsType_small li .desc.lighter, .ipsType_small li .desc.lighter.blend_links a{color: #000000 !important;}

That'll fix your Oblivion issues (along with others). Note, that's a quick and dirty "let's just make sure it changes" fix, so you'll probably want to choose a different text color other than #000000. Also probably would want to add another one with the :hover psuedo-type

[matt oneil]

Thanks a lot for this.

I wanted to remove the big Bethesda logo taking up space at the top of the page (in Warrior), like it was with Exo's old tweak plugin. So I adjusted the padding to 37px, then added

#branding{display: none !important;}

Essentially just copying the method used to remove the tagged topics. Works nicely, and I don't think I removed anything important.

I also like a padding of 45px with the above. It leaves just a bit of breathing room between the static stalker bar and the rest of the forum.

This is my first time mucking around with Stylish, but I'll see what other minor tweaks I can figure out.

Also removed the thread tools (Reply button) at the top of the page because I always scroll to the bottom first. That's personal preference.

div.topic_controls{display: none !important;}

EDIT: Don't do this if you value the ability to change the page you're on.

I'm considering doing the same with the "x replies to this topic" bar:

div.maintitle.clear.clearfix{display: none !important;}

Don't blame me if these break something, I don't know what I'm doing.

[Wayland Neace]

I use Chrome and it works for me. Stalker bar stays in one place, I can still see "Also tagged with one or more of these keywords" bar, but the list of threads is gone.

Thanks, Defron!

[Hilm Music]

Yeah, unfortuantley I don't think I can hide the "Also tagged with one or more of these keywords" bar without using Javascript, which I'd rather avoid at least for now (it doesn't appear to have any unique class/element hierarchy)

[Emzy Baby!]

I pasted this into my .css file, tweaked the colors and it worked great. Thanks!

I sent you a PM a few minutes ago with a link to some GIMP work I did with the read and unread post images for the threads. Let me know if you have any problems getting the .zip file - it was my first time using Google's file sharing app.

[kelly thomson]

The Stalker Bar stays in one place? You mean it remains pinned at the top when you scroll down?

The Stalker Bar remains static for me and the Tagged list bar remains as well as the list of threads.

I can assume you just copied and pasted the code form the OP to the code box in the Stylish Edit window?

[Jah Allen]

Thanks for this, makes reading the forums a little less painful... although this quote box is all [censored] up so who knows if you can actually read this. Christ, always with the changes for the sake of change, there was nothing wrong with the old setup. I ended up editing your edit and using 56px, makes for a bit more padding than what you had and allows the edited forum to line up a bit better. YMMV of course but it looks good to me now.

Big thanks as well to Defron for starting this topic and getting the ball rolling with this user editing to fix the problems. Works great with Stylish in Firefox, forums are tolerable again.

[flora]

Yes. Looks like http://i.imgur.com/pIb8QZB.jpg.