Forum:Slightly Relocating the Floating Toolbar

I've recently begun work on the [http://sidmeierspirates.wikia.com/ Sid Meier's Pirates! Wiki], which I started with adjusting the visual layout. To create the appearance of a map scroll, I made a background for the page that has a tattered texture at both ends. Since the page text normally starts just off the left edge of the text area, I put a margin into the WikiaPage class as so:

.WikiaPage { background:url(http://images3.wikia.nocookie.net/sidmeierspirates/images/5/53/ArticleBackgroundMap.png); padding-left: 10px; padding-right: 10px; [...] }

I had to make some slight adjustments to the width of the text area, but overall I managed to fit everything in snugly, and it looks absolutely delicious.

However, I did run into a problem with the Floating Wikia Toolbar at the bottom of the screen. The toolbar originally floats at -5px left of the text area's left edge. Its width (1010) means that normally it also ends 5px off the right edge, which makes it "centralized". The problem is that the margin I used for the text area pushes the floating toolbar 10px to the right, along with everything else, and for the life of me I could not force it to go back to where it was.

I tried several acts of CSS wizardry (what little I know) to change the toolbar's margin-left-value from -5px to -15px to counter the offset, but it seems that whatever is controlling the toolbar prevents any adjustment to its margin-left-value - it remains at -5px regardless of CSS commands or even external interference via DOM inspector. No other CSS values I know of made any difference on this, and the toolbar stubbornly remains 10 pixels too far to the right.

The only solution I can think of would be to apply the 10px margin individually to each section of the main page except the toolbar, but that would be incredibly difficult. So the question is, is there any way to influence the X coordinate of the toolbar through CSS?

Thanks in advance.

--Headrock 22:38, March 20, 2011 (UTC)


 * Are you sure you're overriding the right css class? I replaced:

 /* For some reason this doesn't work... I guess Javascript is being used to redefine the toolbar constantly... */ .WikiaFooter div.Toolbar { margin-left-value: -10px !important; left: -10px !important; width: 1000px !important; }
 * with:

 margin-left: -10px; }
 * 1) WikiaFooter .toolbar {
 * and everything looks fine to me. My guess is that there is no  class (with a capitalized T) Sovq 08:13, March 21, 2011 (UTC)