Jump to content
Sign in to follow this  
bvanallen

Customizing Content Background Color Help

Recommended Posts

bvanallen

Hello, Right now I have the entire look of my website dependent on the background image. The problem is I would like the content area to be a different color from the rest of the background, such as the canvass mode in Platform Pro. However, when I have the canvass mode activated to achieve said effect, it overlays the entire header area of my site that is currently being customized via the bg image. In order to achieve the "canvass look", as well as keep my custom header, I just built the background color of the content into the background image itself, the problem is, the background image ends after 2560px. (and I don't want to make a GIANT background image that goes on forever...it's already too large) Basically you can see my problem by looking at the post on this page. http://diablo3.gosunews.com/diablo-3-beta-patch-5-notes See how the post runs off the bg image there? The entire look of the site is a single background image, but I need the "content" area of the website to continue down forever being that grayish color. The free version of platform is currently installed on that website. I already bought pro, but I'm waiting to figure out how to make this fix before I make the switch. I really need full custimzation of the header area to be seperate from the body area... if that makes sense. But your "header" area is part of the body and included in the content area... Any Help would be much appreciated.

Share this post


Link to post
Share on other sites
catrina
You can add a background color behind the main content using CSS since the main content below the header uses a separate DIV. Try adding this CSS to Custom Code > Custom CSS in the PlatformPro settings: [code]div#pagelines_content {background-color: #GREYCOLORHERE; margin-top: 45px;}[/code] ^ Replace GREYCOLORHERE with the hex code for the background color you're using in the image. In the CSS I also increased the top margin (resulting in the page content including the sidebar moving down a little) so that the grey background color doesn't cover up the bottom three prongs of the Diablo logo.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
bvanallen
It might take me a second to try this out. But thanks so much! I'll be back on here to post the results shortly.

Share this post


Link to post
Share on other sites
bvanallen
Thank you! That worked. However I just ended up making the logo smaller and moving it to avoid that problem. I have a couple other questions involving backgrounds. 1). Can I add a background image to the content area as well as have a background color? So that I can have a "stone" look run from the beginning of the content section and then fade into the "gray" color. But I only want the background image to be small and stay at the top non repeat. After the bg image ends I would like to still keep the background color. If that makes sense. If so, what would be the code for something like that? 2). In this theme, can I change the background color/image of the sidebar as well? So that I can customize the look of the sidebar independently from the "content" area? I feel being able to customize the look of the sidebar will make it "pop"... rather than being on the same "plane" as the content.

Share this post


Link to post
Share on other sites
Danny
Hi Bvanallen, First of all I can't wait for Diablo 3 and site looks awesome, good job! 1. Yes, its possible all you would need to do, if you don't want the image to repeat, is create an image that has the same width as your content area. The CSS would look something like this: [code] #column-main { background: url(path to image.jpg) no-repeat center top #DDD; } [/code] 2. There is no settings to change the image/color of the sidebar. However, you can change its color or add an image to if you like, simply add your custom CSS to Platform Settings --> Custom Code --> CSS Rules: Here is an example, this will change the sidebars color to white. [code] #sidebar-wrap { background-color:#FFF; } [/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Jenny
Please start a new topic with your question since this topic is about a different theme. Thanks!

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
hockpunk426
So I am going to open this one back up because I am trying to accomplish the same thing in platform pro. The code I cam up with is [code]#column-main { background-color: #737373;}[/code] I am not sure why this isn't working. I got the #column-main from firebug and then this thread confirmed that I was correct. I am just trying to achieve a canvas look for my content. Something that sets it apart from the background. The site is http://www.livingspacebychris.com

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×