Long story short, I don't like the new layout much - too much empty space, too little content for me. Instead of whining about it though, I decided to create a solution by making a custom style for Stylish (Firefox extension), which I'll post here just because some other people might be interested. By the way, the tweaks are just CSS, so they're not limited to Stylish - I'm sure you could implement it in any browser on any system, I just don't know how :)
Also, be aware that my knowledge of CSS is extremely limited, so I basically hacked the thing together while googling extensively and I have no idea if what I did breaks anything - seems to be working fine for me, but caveat emptor, yadda yadda.
Here's what the code changes:
- On the video page it makes the thumbnails below the main video smaller. I wanted to change it so that more of them appear in a single row, but didn't know how to do it, so it's pretty useless, but it still looks slightly better (to me) and requires less scrolling.
- I modified the look of comments and forums - the avatars are slightly smaller now and there's less space between the posts - again, less empty space and scrolling.
- Finally, I made the huge images on the main page only appear when you hover your mouse over the 10 pixel wide area right below the main video - otherwise they stay hidden (well, not really hidden, since I didn't know how to do it - I just set the transparency to 0, but hey, it works, so there ;))
I tested the change with multiple font sizes and they seem to work fine here - I normally zoom the text out in Firefox two to three times, but I tried going back to the original (HUGE) size and nothing was obviously broken, so it should work for you guys too, hopefully.
And now for the code - if you have Stylish, just create a new style, name it something and paste it. If you use a different method, just use the object names and properties for reference.
----- Copy everything between this line and the one below -----
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("giantbomb.com") {
/* Smaller video thumbnails */
.editorial.grid.thirds > li:nth-of-type(n), .editorial.grid.thirds > dd:nth-of-type(n) {width: 20% !important; }
/* Comments & forums - less empty space between posts, smaller avatars, etc. */
.message {margin: 0 0 0px !important; }
.avatar-user {width: 50px !important; }
.message-wrap {margin-left: 60px !important;}
/* Promo strip hide/show on mouse hover */
.promo-strip {height: 10px !important; opacity: 0 !important;}
.promo-strip:hover {opacity: 100 !important; height: auto !important;}
}
----- This is "the line below" -----
Log in to comment