Forum:Need flexible width up to a wider fixed width


 * Note. This is also a Wikia-wide feature suggestion, and not just for personal use.

I want this for personal use, and experimentation. Can this be done with CSS and JS?

Right now the fixed-width is totally inflexible. I would like a slightly wider fixed width. I would also like to be able to use smaller screens as with netbooks, iPads, tablets, etc..

That means the width needs to be fluid also. At least up to the fixed maximum width. I have seen this on many other websites.

I don't want to change the sidebar at all. I am talking about the content-space width.

I believe the combined width of the sidebar and content space is currently around 1024 pixels wide. Try changing your screen resolution to that width. Wikia pages seem to fit perfectly at that resolution.

I would like to try 1152 or 1280 pixels wide for the combined width of the sidebar and content space. Those are the next jumps in width in most monitor and screen settings. --Timeshifter 00:57, February 20, 2011 (UTC)


 * You could go with adding  to your personal css page but unfortunately most other elements (header, footer, sidebar etc.) on a wiki also have a fixed width which only fits the default 1000px, so to make whole pages look good you would need to restyle them as well = tons of work. For viewing Wikia wikis in low/high screen resolution I would use a browser's zoom in/out tools, but I guess that's not what you're looking for. Sovq 09:19, February 20, 2011 (UTC)


 * You could try using the following code in your global css. This works for most pages, but it will not work completely on userpages, and it will get messed up by any page with content that stretches the article area (such as this page: Forum:Increase content area width).

 .WikiaPage { max-width: 1200px; min-width: 1000px; width:auto; } /* Header and Footer bars */ .WikiaHeader { max-width: 1210px; width:auto; } .WikiaFooter .toolbar { max-width: 1210px; min-width: 1010px; } /* Content area and side rail */ .WikiaMainContent { margin-right: 310px; min-width: 680px; width: -moz-available; } .WikiaPageHeader, .WikiaPageHeader details { width: auto; } .WikiaRail { position: absolute; right: 0; } /* RTE Editing */ .oasis-one-column .WikiaMainContent { width: 100%; }
 * In the code above, the maximum width of a page is 1200px and the minimum is 1000px ( which is the same as Wikia's current fixed width). You can adjust all of these numbers to your liking if you want the maximum to be larger or the minimum to be smaller.
 * Monchoman45 has previously tried experimenting to increase the width, and he had this to say: "Unfortunately, I couldn't figure out how to make the side rail play nicely with the content area, so the only way to increase the content area is to hide the side rail completely." He created a button that let people toggle expansion of the content area and hide the sidebar on individual pages.(src)
 * it might be that there is no perfect way to increase the width while maintaining scalability. ~ Gardimuer { ʈalk } 09:51, February 20, 2011 (UTC)


 * Like I said; there are too many fixed width elements in the Wikia skin for the code above to work properly on all pages. With new features added every now and then by Wikia and various defualt css class changes, it's nearly impossible to maintain a working, other than 1000px, content width. Sovq 10:54, February 20, 2011 (UTC)


 * I toyed around with the code a bit more and fixed the problems, but only for Firefox browsers.  takes care of the too wide or too thin article content messing up the main content area. I don't know if other browsers have an equivalent of -moz-available. ~ Gardimuer { ʈalk } 01:45, February 21, 2011 (UTC)

(unindent). Wow. This is great on Firefox. Solves problems on these pages:
 * http://cannabis.wikia.com/wiki/Buenos_Aires,_Argentina
 * http://cannabis.wikia.com/wiki/User:Timeshifter/Page_2

I think I would stay with Wikia if they implemented something like this.

There is a scrolling problem. Not when using the scroll wheel, or the page-up and page-down keys. It only happens when grabbing and dragging the vertical scroll bar. It locks up the page for awhile, and I can't move up and down the page. I sometimes get this script notice when the page locks up:

''A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.''

Script: http://cannabis.wikia.com/static/js/oasis_loggedin_js/175f715d514b2bb6ad1bf163d488a400.js:498

Also, I noticed that the My Tools toolbar extends past the right side of the screen when I am set to 1024 by 768, or 1152 by 864. This causes a horizontal scroll bar. I think the vertical scrolling problem may be related since it occurs when the My Tools toolbar starts to move around when one approaches the bottom of the page while dragging the vertical scroll bar down.

It does not occur when screen resolution is set to 1280 by 1024. The scrolling lockup also does not occur. Personal CSS page I am using for testing:
 * http://cannabis.wikia.com/wiki/User:Timeshifter/wikia.css --Timeshifter 05:12, February 21, 2011 (UTC)


 * Sorry for the wait. Replace  with  . That should get rid of the horizontal scrolbar for any screen width greater than 1010px. As for the script busy popup, I have never seen that on a Wikia site, so I don't know what could have caused it. ~ Gardimuer { ʈalk } 02:40, February 24, 2011 (UTC)


 * Thanks for all the help. I think this could solve the main problem many people have with Wikia's new Oasis skin. At Special:Contact I may point to this forum as a possible solution and starting point to make the fixed width more flexible. (Later note: I sent in a message.)


 * The change you suggested did not help. On a hunch I removed that line altogether, and there are now no problems! Try it out on your personal CSS page:
 * http://cannabis.wikia.com/wiki/User:Gardimuer/wikia.css


 * I have removed that line from the table of CSS higher up in this forum for now if you don't mind.


 * I tried this out at various screen resolutions: 800x600, 1024x768, 1152x864, and 1280x1024. On pages with the right sidebar all those screen resolutions look fine.


 * On pages without the sidebar (Main Page and Portal pages) all the resolutions look fine except for 800x600. On those pages the minimum width is too high. Is it possible to set a narrower minimum width (800 instead of 1000) just for the content space in the Main Page and Portal pages? Then people with smartphones, ipads, tablets, etc. may still be able to view the content without having to scroll horizontally to read the content text. The sidebar would still be viewable by scrolling once to the right.


 * It would be nice if all the CSS could be adapted to work in other browsers besides Firefox. But that is probably for another day. Maybe Wikia can implement this.


 * I have my preferences set to view all ads, and at all the discussed screen resolutions the ads are viewable without problems in the sidebar, header, footer, etc.. --Timeshifter 13:53, February 24, 2011 (UTC)


 * I've also been working on a way to convert the side rail into a set of "submenus", ie, mousing over a small icon shows the rail module. This allows the content to be 1000px wide, which seems to solve a lot of problems (oddly enough, blog comments remain at 660px).
 * On to the subject at hand,  is CSS3, which IE essentially doesn't support. Opera might work with   or just available, and Chrome and Safari will likely work with  . But these are all speculations, as I  couldn't find   in W3C's list of CSS3 properties.


 * I am happy with around 850px wide content space. The increase in content space to 850 pixels wide combined with the 300px wide sidebar adds up to 1150px total width. That fits my normal 17-inch CRT monitor setting of 1152x864 just fine.


 * I am not that knowledgeable about the intricacies of CSS. I have seen flexible widths on pages when viewed with Internet Explorer. So I assume there must be some kind of CSS that will work. --Timeshifter 17:42, February 24, 2011 (UTC)


 * It's entirely possible, we just need to figure out how. As another thinkaloud side note, I just realized that it's entirely possible to write a completely unique skin with jQuery. It would be a major ToU violation, of course, but you could still have it in your global.js. Maybe I'll do that one day when I'm bored.

Problems solved by this
A slightly wider fixed width solves many problems:
 * Forum: Video problems - the problem with video galleries and expansion buttons.
 * Forum: Large tables - less need for expansion buttons if slightly wider fixed width.
 * Less need for portal pages.
 * http://cannabis.wikia.com/wiki/Buenos_Aires,_Argentina - regular-width videos combined with a graphics column. --Timeshifter 08:42, February 25, 2011 (UTC)

Other width-related forums
--Timeshifter 18:02, March 12, 2011 (UTC)
 * Forum:A creative way to increase content width
 * Forum:Why not get rid of the right sidebar altogether?
 * Forum:Increase content area width
 * Forum:How can i increase the width of my wikia
 * Forum:Should WoWWiki leave Wikia?
 * Forum:How do I make the Oasis skin wider in my Wikia.css?
 * Forum:New wikia skin is far too small/narrow.

Blogger.com offers more width choices
Wikia says that websites are going to a single fixed-width for their sites. That may be true for some sites. But many sites are not using the same fixed-width throughout their site. Here are some of the many choices Google's blog site provides (emphasis added):


 * "The Blogger Template Designer offers many templates, making it simple for you to create a professional-looking blog. In addition, the Template Designer lets you customize your template. Choose from hundreds of background images, tens of flexible layouts, and rearrange widgets through a drag and drop interface. Add gadgets such as slideshows, user polls, or even AdSense ads. Changing fonts and colors is easy too. And if that’s not enough control, you can even edit your blog’s CSS and HTML."

That is from their features page:
 * http://www.blogger.com/features --Timeshifter 02:47, March 14, 2011 (UTC)

Your personal Wikia.css page
You can experiment on your personal CSS page. Don't forget to change YOURWIKI and YOURUSERNAME: --Timeshifter 04:56, March 18, 2011 (UTC)
 * http://cannabis.wikia.com/wiki/User:Timeshifter/wikia.css
 * http://YOURWIKI.wikia.com/wiki/User:YOURUSERNAME/wikia.css

Wikia's new groove
It seems Wikia has been tuning up the Wikia/Oasis skin lately. Is it possible that it is time for a wider width? --Timeshifter 23:26, May 11, 2011 (UTC)