body background | content solutions >> JavaScript?

[The Mad Swede]

Suffusion v4.2;
Minima theme;
WordPress v3.3.2;
IE8 + latest browers ~ Opera | Chrome | Firefox
http://thewholisticedge.com
__________

Seeking advice to maintain white space as a buffer between left vertical body background color and text/images/content no matter the browser, screen size or device ~ if possible. I do not want the left vertical body background to bleed into the text/images/content.

Find below the following attachments:
~Example #1 [IE8 @ 90%] depicts what I desire and was achieved via Colin's expertise and patience.
~Examples #2 and #3 {IE8 @ 100% and 125%] depict the blood bath I wish to avoid.

I was referred to the "box model" but my novice back-end capabilities render me useless re: how to create margin, padding and border code to get the job done ~ if that route is even plausible. Would fluid width setting in Suffusion have any impact? I am unsure how to proceed...it appears this is becoming a project. Please Colin's comment below:

by Colin » 14 May 2012, 08:16

One problem you have is that the visitors to your site will have different screen resolutions and so as a result you need something that looks good at all resolutions. To do that you need to start dabbling in javascript and that is beyond my skill set.

Thank you for your recommendations.

~jsk

[sayontan]

Are your figures of 90%, 100% and 125% zooms or something else?

[The Mad Swede]

Sayontan~

Thank you for the swift reply.
Yes the shots/figures are zooms.
Perhaps a poor test of the bleed factor...
Is there any hope or did Colin nail it?

Thank you.

~jsk

[sayontan]

Zooms are not good indicators for such tests - you need to try this out against different screen sizes.

[sayontan]

Another thing to try would be to make the post backgrounds transparent.

[The Mad Swede]

Sayontan~

Thanks again for the prompt response.
I took the following action:

1-Suffusion Options >> Skinning >> Post Background >> Custom Styles >> Background Color = Transparent >> Settings Saved.

Since no image was uploaded I left the other settings per below:
~Image URL >> blank;
~Image position >> top left;
~Image repeat >> vertically

**Please advise if I need to make any other adjustments.

2-I will check different sized screens on various devices.

Infinite thanks for your assistance.

~jsk

[The Mad Swede]

***Continued from WordPress Forum | 20 May 2012


Sayontan~

The #wrapper is now transparent.
Thank you.

I respectfully request your help outlining the path in Suffusion Options to accomplish your #wrapper element and #header-container recommendations [please see below].

Thank you.

~jsk

_______________________

Sayontan~

I adjusted the "post background" to transparent. I did not do anything
w/ the "wrapper." My mistake.

I did see the W3C tutorials re: "padding" but I was unsure if it would have any impact. I will certainly implement your instructions via Suffusion Options.

Thank you for your tireless support and your genius!!!

~jsk

______________________

I did offer you a suggestion on the support forum of making the background transparent. E.g. if your "#wrapper" is transparent, then the background blends fairly well with your content. The only issue you will see is when someone resizes the browser and the wrapper gets pushed to the left edge (in which case your black text overlaps a dark background, becoming unreadable). To mitigate this you can add a left and a right padding to the #wrapper element (say around 100px). You will have to add a similar padding on the #header-container element to ensure that your header stays aligned.

[sayontan]

Try:

Code: Select all

#wrapper { padding: 10px 100px; }
#header-container { padding: 0 100px; }

[The Mad Swede]

Sayontan~

Thank you for your effort.
I inserted the code you created [see below] to "Custom Styles."
Nothing changed ~ the wrapper and the black background merge when the browser is resized.
I altered the #s to 300px...w/ no effect.

#wrapper { padding: 10px 100px; }
#header-container { padding: 0 100px; }

I am open to suggestions if you are cool w/ it.
Sorry for the trouble.

Thank you for your eternal patience and assistance.

~jsk

[sayontan]

Then I am sorry, I don't understand your question. Can you provide me with screenshots of what you expect the design to look like? Because I thought you wanted the colours to blend, and that is what I provided a solution for.

At this point your site is without a background, so I cannot test your changes.