MediaWiki talk:Vector.css

From Cannabis
Jump to navigation Jump to search

More info on the Vector sidebar[edit]

Decrease the padding within the sidebar. This allows more room for text.

I don't understand CSS very well, but this seems to work here for now:

/* Reduces sidebar padding on the left. Text is closer to left side of screen. */
#mw-panel { padding-left: 0; } 

/* Reduces sidebar margins on left and right. Text is yet closer to left side. 
/* Sidebar takes up less width overall for same text width.  */
div#mw-panel div.portal { margin-left: 0; margin-right: 0; } 

/* Reduces the left margin of the expanded tools section at the bottom of the sidebar. */
div#mw-panel div.portal div.body { margin-left: 0.5em; } 

Remove the 2nd line of CSS if you don't want the sidebar text to be so close to the left side of the browser window.

The third line is for decreasing the left margin of the expanded tools section at the bottom of the sidebar.

If you don't see anything in MediaWiki:Vector.css, then I may be experimenting in my personal CSS first: User:Timeshifter/skin.css.

Sometimes CSS changes that are saved do not show up right away, even after bypassing my browser cache, or doing the simple purge explained at the top of mw:Manual:Purge.

Changes show up right away in the preview of my personal CSS, but not in the preview for MediaWiki:Vector.css. In either case changes can sometimes take awhile to show up after saving. Sometimes I have had to contact the overall wiki farm sysop here about sidebar problems. Something about memcache, if I am remembering correctly.

Firefox's Inspect element[edit]

I do not understand all this CSS stuff very well. Here is some more info:

I figured out some of the CSS by playing around with Firefox's "Inspect element".

Open up MediaWiki:Vector.css in a separate window from this page. Show the windows side by side so you can read these instructions while following them in the other window.

Right-click the top link in the sidebar of MediaWiki:Vector.css. Then click "Inspect element" in the context menu that pops up. Then scroll up to div id="mw-panel" in the left panel. Open up the show-hide arrows as necessary. Click on div id="mw-panel". Then click on div#mw-panel in the right panel (rules tab).

At times you will see different areas highlighted on the page above. Scroll rapidly up and down the left panel of the inspection window to easily see this. Also, try clicking on different things in the left and right panels. Click on the "box model" tab in the right panel.

Then click on:

  • div id="p-navigation" (in the left panel)

Note that the colors in the boxes line up with sidebar colors when you scroll over the box.

Click again on div id="mw-panel" in the left panel. Note that the top bar narrows things down:

> div#mw-navigation > div#mw-panel > ...

Run your mouse cursor over each item in the top bar to see what is highlighted on the page above. Then click on each item in the top bar to see what shows up in the right panel. Tests can be made in the right panel (rules tab) by changing some of the numbers, and seeing what changes on the page above.

The "box model" tab is interesting. Note how the sizes in it change at times as you increase and decrease the width of the browser window.