saritastevens 0 Report post Posted April 25, 2011 As a start point - I would like to have a gradient page background on my fixed width site. I am not sure WHICH css file this should go in. I've looked on firebug - but the changes I've made haven't actually done anything, so I must have changed the wrong file. I have installed pro and base - all vanilla right now. Site at www.nwcoc1.themarketingcrew.com Share this post Link to post Share on other sites
historicshed 0 Report post Posted April 25, 2011 Paste it in the custom code box or use the WP editor to put it in the base.css file (my preference is to use the regular WP editor under Appearance): body #page { background: #ffffcc; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CC9966', endColorstr='#FFFFCC'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#CC9966), to(#FFFFCC)); /* for webkit browsers */ background: -moz-linear-gradient(top, #CC9966, #FFFFCC); /* for firefox 3.6+ */ } Hope that's helpful Share this post Link to post Share on other sites
saritastevens 0 Report post Posted April 25, 2011 Jo-Anne, Thanks - that worked :-) However, I was kinda hoping to put a png in to the code. Could I substitute the url of the png for the colors in the code? Sarita Share this post Link to post Share on other sites
ricardo 0 Report post Posted April 25, 2011 A more conventional approach (although it might not suit your needs) is to create an image file with the gradient you want, make it the page background and simply lock it in place, preventing it from scrolling. Ricardo Share this post Link to post Share on other sites
saritastevens 0 Report post Posted April 25, 2011 ok Ricardo, that's what I initially thought I would need to do - but trying to find out where in the code do I refer to the url? Can you help? Share this post Link to post Share on other sites
saritastevens 0 Report post Posted April 25, 2011 I'm sure this is a quick answer for someone! I'd sure appreciate the help! I'm just trying to find out WHERE to link a png to in the code, if I want to give my page an image background in fixed width mode? Share this post Link to post Share on other sites
ricardo 0 Report post Posted April 26, 2011 You add the following to your PlatformPro Settings > Custom Code > Custom CSS Rules: body { background: #fff url('/path/to/background.jpg') no-repeat fixed !important; } The #fff bit adds a default background color, what you'll see while the background image loads. In some sites I've found that I prefer a middle value instead of the lightest or darkest color of the gradient. The !important bit just says "this takes precedence over other css rules for this element". Try without it first, if it works then leave it out. Beware that you will need to change the background of the other elements that stack over the body and have background colors already defined. This should be enough: #site, #page, #page-canvas, #header, #page-main { background: transparent !important; } Ricardo Share this post Link to post Share on other sites
saritastevens 0 Report post Posted April 26, 2011 Hey Ricardo - I'll check it out tomorrow - but wanted to thank you so much for your time helping me out today :-) I'll let you know how it goes! Share this post Link to post Share on other sites
ricardo 0 Report post Posted April 26, 2011 You're welcome Let us know if that works! Share this post Link to post Share on other sites