Welcome, fellow TeamLiquid viewers!

I'm not really a blogging person, but I strongly believe that sometime everyone has something to say which is more of a statement thatn invitation to discussion so the blog is more appropriate than forum thread.

This time I will speak about a joy of using custom CSS on TeamLiquid.

Many of you are using high resolution displays and fullHD is screen is probably already a standard. However TeamLiquid website is not really that wide and there is a lot of white space around the page. Luckily for us - there is always a way to toy with the appearance of a website because browsers - at least some of them - support both client side scripting and client side styling.

I'm using Opera so it is really for Opera browser. Also this solution is not really tested that much - it just works for me.

My goal was to force TeamLiquid website to be wide and not look to awkward.

First - you need to create a custom CSS file. Create an empty text file just about anywhere on your computer. Call it i.e. userTL.css

Than go to teamliquid.net (you are already here), click right mouse button and choose "edit site preferences". Then display tab. Then click "choose" and navigate to userTL.css file.

Now open the file with just about any text editor. Notepad will do.

Now copy/paste the following text there:

+ Show Spoiler +

body > table:first-child {
width: 100% !important;
}

body > table:first-child > tbody > tr > td > script + table {
width: 100% !important;
}

body > table:first-child > tbody > tr > td > script + table > tbody > tr > td:first-child + td {
width: 100% !important;
}

body > table:first-child > tbody > tr > td > script + table > tbody > tr > td:first-child + td table {
width: 100% !important;
}

#news_main {
float: left !important;
}

And here you go. We just forced teamliquid to be extra wide. It will mean that there is less scrolling going on. It is tempting to force sidebars to be wider but it will force me to make two columns in a sidebar which may look awkward.

Hopefully Enjoy.
If you don't like the change you can remove the CSS from the aboce mentioned display tab - or empty it's content. Either way.

bokeevboke

Singapore1674 Posts

March 29 2012 09:59 GMT

I don't like reading wide pages. There is a reason why newspapers print everything in columns. But thanks anyway. Its a useful find. Might use on other sites, to narrow them down maybe

NarutO

Germany18839 Posts

March 29 2012 10:04 GMT

Can you screenshot how it looks for you now?

Tobberoth

Sweden6375 Posts

March 29 2012 10:06 GMT

Like bokeevboke said, I don't think this is a great idea unless paragraphs etc are handled, really wide paragraphs are extremely annoying to read, and I'd say the default TL look has it pretty well covered.

iTzSnypah

United States1738 Posts

March 29 2012 10:18 GMT

I'm pretty sure you could easily do this with grease monkey for Firefox. I would but I'm on a 5:4 monitor so It wouldn't change a thing.

Something pretty interesting I found while exploring the right click options for Firefox.

If each ad that was displayed to me gave TL 1/10 of a cent I've earned TL $4.31. I DO HELP E-SPORTS YAY!

MisterD

Germany1338 Posts

March 29 2012 10:53 GMT

i'm running my opera on a default zoom of 150% for every website, including TL. Makes mosts sites fit on the screen very well. only background images of youtube channels and the likes get cut off or webapps that simply require tons of screen get displayed a little ugly from time to time, but in those cases you can just zoom out manually.

go to opera:config in your adress bar, type "scale" in search and set the scale value under "User Prefs" to 150.

seiferoth10

3362 Posts

March 29 2012 10:53 GMT

Pretty cool.

I'll run it for a while until I run into problems. 1080p is just barely wide enough to have 2 columns on the front page.

Edit: I'm using mine on Firefox via Stylish. Here's the script I used:
+ Show Spoiler +

@-moz-document domain('teamliquid.net'), url-prefix('http://www.teamliquid.net'){
body > table:first-child {
	width: 100% !important;
}

body > table:first-child > tbody > tr > td > script + table {
	width: 100% !important;
}

body > table:first-child > tbody > tr > td > script + table > tbody > tr > td:first-child + td {
	width: 100% !important;
}

body > table:first-child > tbody > tr > td > script + table > tbody > tr > td:first-child + td table {
width: 100% !important;
}

#news_main {
	float: left !important;
}
}

nimdil

Poland3763 Posts

March 29 2012 11:02 GMT

On March 29 2012 19:53 seiferoth10 wrote:
Pretty cool.

I'll run it for a while until I run into problems. 1080p is just barely wide enough to have 2 columns on the front page.

Edit: I'm using mine on Firefox via Stylish. Here's the script I used:
+ Show Spoiler +

@-moz-document domain('teamliquid.net'), url-prefix('http://www.teamliquid.net'){
body > table:first-child {
	width: 100% !important;
}

body > table:first-child > tbody > tr > td > script + table {
	width: 100% !important;
}

body > table:first-child > tbody > tr > td > script + table > tbody > tr > td:first-child + td {
	width: 100% !important;
}

body > table:first-child > tbody > tr > td > script + table > tbody > tr > td:first-child + td table {
width: 100% !important;
}

#news_main {
	float: left !important;
}
}

That's more or less how I see it in Opera. I'm pretty sure the thing is doable on on other browsers as well. Not sure about Safari and IE as they are a bit rought here and there but probably it's possible on them as well.

Mobius_1

United Kingdom2763 Posts

March 29 2012 11:38 GMT

Always cool to see people do stuff for TL, even if it doesn't make a difference because I like to browse on half a monitor with the other half opening streams/videos/more windows.

seiferoth10

3362 Posts

March 29 2012 11:44 GMT

#10

I actually got tired of it already because the left sidebar was too far to the side for my liking. So I ended up playing with the values in the script, and if you change the first "100%" to pretty much any other percentage, you can customize the width. I have it set at 69% right now so it gives a little bit more width, but doesn't mess up the front page.

nimdil

Poland3763 Posts

March 29 2012 12:07 GMT

#11

On March 29 2012 20:44 seiferoth10 wrote:
I actually got tired of it already because the left sidebar was too far to the side for my liking. So I ended up playing with the values in the script, and if you change the first "100%" to pretty much any other percentage, you can customize the width. I have it set at 69% right now so it gives a little bit more width, but doesn't mess up the front page.

That's the spirit. Just customize it to your preferences

docvoc

United States5491 Posts

March 29 2012 17:05 GMT

#12

Hmm this is pretty cool, i wonder if there is a custom look for something like a different font ^^.

nimdil

Poland3763 Posts

March 29 2012 18:10 GMT

#13

Of course.

Just add:

* {
font-family: Verdana !important;
}

or

* {
font-family: Helvetica !important;
}

or

* {
font-family: monospace !important;
}