or Connect
EpicSki › The Barking Bear Forums › EpicSki Feedback/Tech Talk › Site Suggestions (and Compliments) › Ridiculously Wide Posts - CLIENT SIDE SOLUTION
New Posts  All Forums:Forum Nav:

Ridiculously Wide Posts - CLIENT SIDE SOLUTION

post #1 of 22
Thread Starter 

 

Since the folks that run Epic Ski don't seem to be interested in solving the usability issue, I took a crack at it myself.

 

Problem: Posts are too wide, and either run off the screen necessitating horizontal scrolling or they're just too wide to read comfortably.

 

Solution: use a client side style-sheet to override the settings from the server.  It's fairly easy to do, and pretty much anybody with a modern browser can do it.  The instructions below are for Firefox & Windows. You can do this in other browsers and OS's too, but you'll have to consult the help files for your specific browser on how to use user styles.

 

1) Find your Profile directory.  Go to Help -> Troubleshooting Information and click the button that says "Open Containing Folder".  A windows explorer window will open.

 

2) Open the subdirectory called chrome.  Create a file in that directory called userContent.css

 

3) Open that file in your favorite text editor (Notepad works just fine) and paste in the following line:


.single-post {width: 600px ! important;}

 

4) Save the file and restart your browser.

 

Problem solved!

 

Admittedly, this is a hack, and will break when Epic changes their site. And since this tweak applies to all pages you view on the internet, any other site that has a style called single-post will be affected (there are plug-ins available that allow you to apply user styles on a site-by-site basis, but I'm too lazy to bother with that level of solution). NOTE: Depending on your screen resolution and your font size, you might want to pick a number other than 600.

 

Happy Reading!


Edited by Walt - 10/15/10 at 3:04pm
post #2 of 22

OMFG Walt, I just did this in Safari on the Mac, just put the .css file in Username/Library/Safari

 

and it seems to work!  More later after some playing around.

 

Unbelievable how simple it is.

post #3 of 22

actually not sure if it's doing anything.

post #4 of 22

Lets

post #5 of 22

Find

post #6 of 22

Out

post #7 of 22


I created a .css as described by Walt on my desktop, then went to Safari->Preferences->Advanced->Style sheet.  Selected "Other" and navigated to my file.  Tried it at 600 & 300, both worked as Walt described.

 

Thats the only thing I've ever done with style sheet, where do you learn that this syntax ".single-post {width: 600px ! important;}" does that?

 

 

Quote:
Originally Posted by SkiMangoJazz View Post

OMFG Walt, I just did this in Safari on the Mac, just put the .css file in Username/Library/Safari

 

and it seems to work!  More later after some playing around.

 

Unbelievable how simple it is.

post #8 of 22

Awesome Chris, thanks - that did it!

 

 

I found the perfect width is 639 instead of 600, that matches to what it is now for the first few posts that have ads on the right, then continues down from there.

 

Now Walt, can you suggest text to add to that style sheet to make the reply box less wide? 

post #9 of 22

Here's the css file folks, put this anywhere (I put it in Library/Safari) and as cgeib described select it in Preferences on a Mac Safari, or do something else with it depending on your platform.

 

Note you must rename the file from .txt to .css     Epic wouldn't allow .css attachments.

 

Thanks Walt, this makes epic so much more readable.

post #10 of 22

I used the "attach files" feature which did bring up the pop-up selection box but it doesn't seem that it attached.  Does anyone see the attachment?

post #11 of 22
Thread Starter 
Quote:
Originally Posted by cgeib View Post


Thats the only thing I've ever done with style sheet, where do you learn that this syntax ".single-post {width: 600px ! important;}" does that?

 

 

 

 

Since I do this stuff for a living, it was pretty obvious how to tweak it.  I just examined the source HTML and CSS coming from the server. Each post is surrounded by a div tag which has the style "single-post" assigned to it.  I gave that style a reasonable width, added the ! important directive to override any other settings, and we're done.  It's a quick and dirty hack that solved my immediate problem  - were I coding on the server side I would have done it differently.

 

There's a pretty good tutorial on CSS at http://www.w3schools.com/css/default.asp if you want to learn more about it.

post #12 of 22

No.
 

Quote:
Originally Posted by SkiMangoJazz View Post

I used the "attach files" feature which did bring up the pop-up selection box but it doesn't seem that it attached.  Does anyone see the attachment?

post #13 of 22

Yeah I guess that was never fixed.

post #14 of 22
Thread Starter 

It's just a text file.  Post the text in-line and we can figure out how to cut and paste it into a file.

post #15 of 22

Walt, please consider me computer challenged.  I am having trouble with step three.  How do I open the newly created file in notepad?

 

I've tried double clicking and right clicking and opening.  That just tells me that the file is empty.  I've tried dragging the file into a notepad window and I get a little window informing me that access has been denied.

 

What simple little thing am I missing?

post #16 of 22

bf - just open notepad (or any text editor) create a "new" file and copy/paste the text into it, then save it as a .txt file and call it userContent.css

 

Walt, all my attempt at an attachment was your text, pretty much just so people (like bumpfreaq) wouldn't have to create the .css file themselves.

 

Thanks again for this, my epic browsing is so much better now.

 

Steve

post #17 of 22
Quote:
Originally Posted by SkiMangoJazz View Post

Awesome Chris, thanks - that did it!

 

 

I found the perfect width is 639 instead of 600, that matches to what it is now for the first few posts that have ads on the right, then continues down from there.

 

Now Walt, can you suggest text to add to that style sheet to make the reply box less wide? 

 

Well, SMJ, if it works for ya, great! I hope it doesn't get broken in the future then, as Walt suggests could happen. I just tried it to see what it did and have reverted back. I prefer the wider layout with my display and resolution settings, though it does seem a bit odd the way it expands after the right column content runs out.

post #18 of 22
Quote:
Originally Posted by Walt View Post

 

Since the folks that run Epic Ski don't seem to be interested in solving the usability issue, I took a crack at it myself.

 

Problem: Posts are too wide, and either run off the screen necessitating horizontal scrolling or they're just too wide to read comfortably.

 

Solution: use a client side style-sheet to override the settings from the server.  It's fairly easy to do, and pretty much anybody with a modern browser can do it.  The instructions below are for Firefox & Windows. You can do this in other browsers and OS's too, but you'll have to consult the help files for your specific browser on how to use user styles.

 

1) Find your Profile directory.  Go to Help -> Troubleshooting Information and click the button that says "Open Containing Folder".  A windows explorer window will open.

 

2) Open the subdirectory called chrome.  Create a file in that directory called userContent.css

 

3) Open that file in your favorite text editor (Notepad works just fine) and paste in the following line:


.single-post {width: 600px ! important;}

 

4) Save the file and restart your browser.

 

Problem solved!

 

Admittedly, this is a hack, and will break when Epic changes their site. And since this tweak applies to all pages you view on the internet, any other site that has a style called single-post will be affected (there are plug-ins available that allow you to apply user styles on a site-by-site basis, but I'm too lazy to bother with that level of solution). NOTE: Depending on your screen resolution and your font size, you might want to pick a number other than 600.

 

Happy Reading!



 Hmmm.......I've never had a problem like that. 

post #19 of 22
Thread Starter 
Quote:
Originally Posted by SkiMangoJazz View Post

Now Walt, can you suggest text to add to that style sheet to make the reply box less wide? 

 

Examining the source code, the width of the text area is hard-coded as 86 characters wide.  This is not something that can be changed via a stylesheet (or maybe I should say that I don't know how to do it with a stylesheet).  You could do it with some client side javascript and a plug-in like Grease Monkey that allows you to apply your own client-side scripting to the page.

 

The (untested) javascript syntax would be something like

 

    forum-post-form.editor-textarea.cols = 60;

 

Since the reply box width looks fine to me, I'm not motivated to spend the hour playing with Grease Monkey to make it narrower. 

post #20 of 22
Thread Starter 
Quote:
Originally Posted by bumpfreaq View Post

Walt, please consider me computer challenged.  I am having trouble with step three.  How do I open the newly created file in notepad?

 

I've tried double clicking and right clicking and opening.  That just tells me that the file is empty.  I've tried dragging the file into a notepad window and I get a little window informing me that access has been denied.

 

What simple little thing am I missing?

 

 

There are several solutions, but as SMJ suggests the simplest way is to just open notepad, paste the line of code into the file and Save As userContent.css in the appropriate directory.

 

 

Another approach (which is a handy thing to have in general anyway) is to make a shortcut to notepad on your desktop so you can just drag any file onto the icon to open with notepad.  Go to your start menu, find Notepad, right click and drag to the desktop and choose "Copy here" from the context menu.  Once you have a Notepad icon on your desktop, just drag the file onto the icon.

 

 

If that doesn't work, try right-clicking on the file and selecting Properties -> Security. That may give a clue why you're getting the "access denied" message.

post #21 of 22

any luck bumpfreaq?  I'm loving it myself.  Wish I could get it on my iPhone.

post #22 of 22

looks like huddler broke this solution on mac safari anyway.  all pages now have a blank area at the top.

New Posts  All Forums:Forum Nav:
  Return Home
EpicSki › The Barking Bear Forums › EpicSki Feedback/Tech Talk › Site Suggestions (and Compliments) › Ridiculously Wide Posts - CLIENT SIDE SOLUTION