Forum:Vector sidebar width, padding, and margins
- Forums: Index > Community help
- Note: This discussion was moved from User talk:Jack Phoenix.
Greetings again. I have been playing with the sidebar width on my wiki:
I copied the CSS code from here:
It increased the sidebar width in Firefox so that entries are no longer laddered for me. I use a larger text size in Firefox options. The left margin though is too wide in the Firefox sidebar, and wastes space since it is blank.
The added CSS code made the sidebar too wide in Internet Explorer and Chrome. Both the right and left margins are too wide in the sidebar. Can I lessen both margins somehow so that there is less wasted blank space? --Timeshifter (talk) 12:09, 7 July 2013 (UTC)
- You mention that you use a larger text size in Firefox options — have you checked what the site looks like for Firefox users using the default settings? Because if the site looks fine for those users, you could consider moving the relevant CSS to your personal user CSS page (s:w:cannabis:Special:MyPage/vector.css). --Jack Phoenix
(contact) 19:55, 10 July 2013 (UTC)
- The left sidebar looks fine in all 3 browsers at default text size settings. With or without the added CSS. But at higher text size settings the added CSS causes problems with the left sidebar being too wide and eating into content space. In Chrome: advanced settings, font size. In Firefox and Internet Explorer: View menu, text size.
- Many people use higher text size settings, and I want to help them too.
- I did a test just now and removed the added CSS temporarily. I viewed the sidebar with large text size and default text size. In all 3 browsers. The only problem with laddering was in Firefox at large text size.--Timeshifter (talk) 05:48, 16 July 2013 (UTC)
- The Text-Resize Detection article by Lawrence Carvalho and Christian Heilmann (two Yahoo! developers) might be an interesting read. A related question at StackOverflow suggests that while text size detection is possible, it's tricky and usually not worth it. It seems that some JavaScript is indeed needed for this.
Unfortunately I'll have to admit that this isn't my area of expertise — maybe Ciencia Al Poder can help you with the JS code in question. Have you tried asking, for example, the people that maintain Wikipedia's CSS pages? Or other online CSS/JS resources? I'm sure there's someone out there who knows more about your text size question and has more experience with similar issues. Best of luck! --Jack Phoenix (contact) 20:29, 20 July 2013 (UTC)
- The Text-Resize Detection article by Lawrence Carvalho and Christian Heilmann (two Yahoo! developers) might be an interesting read. A related question at StackOverflow suggests that while text size detection is possible, it's tricky and usually not worth it. It seems that some JavaScript is indeed needed for this.
(unindent) Thanks. I looked around at a lot of pages. I also installed the Firebug addon for Firefox. After playing around with it, and with Web Developer Tools that comes built-in to Google Chrome, I found some things that I could change in CSS. I don't understand it all, and I am just hacking at it to see what works. I found some CSS that is helping. See my efforts at s:w:cannabis:MediaWiki:Vector.css. I found a way to implement some of the CSS changes so that they only effect Firefox:
- http://www.getallfix.com/2013/01/firefox-only-css-hack-opera-only-css-hack
- http://ohdoylerules.com/snippets/target-mozilla-only-in-css
I tested it and those particular CSS changes are only effecting pages viewed in Firefox. More work needs to be done, but the laddering problem in Firefox has been solved.
The right margin of the sidebar in Chrome needs to be further reduced, because it is still way too wide when larger text sizes are set in Chrome settings.
CSS is so mind-bogglingly intricate. I am also trying to figure out how to decrease the left margins (or padding) for the sidebar sections that expand such as the toolbox section of the sidebar. I do not want those sections to have an additional indentation. --Timeshifter (talk) 13:47, 24 July 2013 (UTC)
