Wikidot Community

Thanks Ed, I was dreading you were going to say that. Alas, I don't have the skillset to do as you suggest. My problem site is in private mode and has over 5,000 pages, so it's quite far gone. Looks not too bad considering it's an older design, but this top bar problem is going to be a deal breaker if I can't overcome it.

I found the image in question from the style sheet address:
http://www.wikidot.com/common--theme/shiny/css/style.css

}

div#container-wrap {
background-image: url(../images/body_bg.png);
background-repeat: repeat-x;
}

This is it in reality:
http://thejukeboxrebel.wikidot.com/common--theme/shiny/images/body_bg.png

Turns out it's only 3px wide!! Apparently, it's set to "amplify" to fill the page (presumably the "repeat-x" command). From here, I'm completely lost…

Here's 2 small changes you can make to your custom CSS to fix the white space when side scrolling.

#header {
    width: 100%;
}
#top-bar {
    right: 1em; /* or whatever right margin you want, but it can't be too big for small screens*/
}

The fixed width of the header that you currently have set to 1100px is causing the issue. You also need to lose most of the 50em right margin you have set on the top-bar to keep your menu from disappearing off the canvas on the left side on a narrower screen/window.

You just need to edit these items on your Global CSS page

Hope this helps!

Yep, I do the top-bar adjust in my private site.

Ed, you have come to my rescue yet again.

Thanks a million!

Duh. I've had a stern word with myself.

The aforementioned "public test site" is now open to the public!

Great pointers Ed, thanks indeed.

I'm learning a lot, and will have a bit of experimenting with it.

Yes, I'm good with that Ed. I've put the relevant pieces of my private site CSS code in the public test site, and have adjusted the top bar contents. As you can see, we've got a great result on that part of the task ; - ) (don't worry about the site header, it gets overwritten by images)

Below is my screenshot for the contact page (L to R) in Firefox, Chrome & Opera. Every one breaks the shiny template? The wide image is easily fixed of course, but I've placed it there untreated to underline the problem i.e. the shiny template design not holding 100% width. I'm looking for the scroll bar to kick in and stay within the frame of the design, not to go beyond it?

If you left-justify the form on the contact page instead of centering it, it will prevent the overflow blowing out the right margin.

You could wrap the CSS below into a media query so it only kicks in for smaller viewports.

Contact page source change
From this:

= **To send a message to the site owner, use this form:**

To this: (removes centering of the line)

**To send a message to the site owner, use this form:**

Add to Global CSS:

table.form { margin: 0 }
/* if you want to change the send button position, mess with this */
.mailform-box > form > .buttons { width: 430px; }

Every instance above is already as left as it can Ed - the template automatically pushes left as the browser width lessens.

I'm more talking generally to let you understand, rather than solving that one problem. I know it's not ideal to have a design that breaks the right margin in the first place, but in a site of 5,000+ pages I have this issue with tens of pages (for various reasons, usually due to wide data tables) and can live with it more comfortably if the ugly background image break wasn't so stark.

Changing the temp site to Co - no side bar I get the following (desired) result:

My guess at what's going here is there's a primary page beyond the background image page (I'm out of my depth tho). My guess again is that the design of Co - no side bar has set the background image page and the primary page beyond it, to be the same colour, thereby "the overflow blowing out the right margin" doesn't seem so bad visually.

For Shiny Template to work, my guess (I'm doing a lot of guesswork!!!) is that I need to find the overall primary page and mimick the background image page so that the design matches up in both?

The issue (in general terms) is related to tables and has nothing to do with the styles applied to the parent container(s). Any tables are going to have this issue when they get squeezed into a smaller viewport (whether it's the contact form or your wide datasets formatted in HTML tables). Unless you switch to fixed table layouts as explained on css-tricks.com, this right margin issue is going to continue to give you fits.

After some testing, I think the best and simplest way to preserve the look and feel of the Shiny theme is to remove all of the background images and apply a background gradient to the body element (the outermost container). There is some trial and error involved, but background: linear-gradient supports multiple color breakpoints, so you can fine-tune it pretty well.

The code below applies the gradient so it's visible primarily in the header section and then quickly sets the color to white for the rest of the page content. I think I tracked down all of the background images, so the code below should give you a good starting point.

There's good information on CSS background gradients at W3Schools.

/* kill the background images */
div#container-wrap { background-image: none; background-repeat: no-repeat; }
#header { background-image: none; }
/* apply a gradient to the body - covers the page from top to bottom */
body { background: linear-gradient(#000, #666, #888, #fff,#fff, #fff, #fff, #fff, #fff, #fff); }

Et voila!

The top bar isn't exact with alignment, but I can live with that.

I simply opted to use the original 1x524px image in the body:

body {
background-image: url(http://shinytheme.wikidot.com/common--theme/shiny/images/body_bg.png);
background-repeat: repeat-x;
}

Thanks again for being so generous with your time and expertise Ed, top man.