queezy 0 Report post Posted August 30, 2011 Greetings, My site http://cruiseabode.com, the full width design framework is turned on and a custom background (1160x1600 pixel) is uploaded. 1. Can the background of the primary navigation/search bar in the header, the post page navigation and other site elements be transparent and sit directly on top of the custom background so it shows through? Currently my navigation is transparent and the page background color (set to white to match the background fade effect) shows through. If I match the page background color it creates a conflict with the custom background dimension and content layout. If I increase the custom background dimension it doesn't display correctly on my iPhone. Thank you. Share this post Link to post Share on other sites
catrina 103 Report post Posted August 31, 2011 What site elements (other than the ones already mentioned) do you want transparent? Also, what is current CSS in Custom Code > Custom CSS (if any)? 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
queezy 0 Report post Posted August 31, 2011 Hi Catrina, It'd be most helpful to be able make all primary site elements, navigation and lines transparent so the custom background shows through. As it stands the white area around the navigation elements are appear "clunky" and the white lines below the widgit titles and in the posts and pages look busy to me. My CSS codes for the site are as follows: #carousel .content-pad {background:transparent} #carousel img {width:90px;height:80px;} #carousel .thecarousel { display: none; font-size: 10px; overflow: hidden; padding: 2 65px; position: relative;} #primary-nav {background: transparent;} Thanks! Share this post Link to post Share on other sites
kastelic 6 Report post Posted August 31, 2011 [code] body #page, .sf-menu li, #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .commentlist ul.children .even, .alt #commentform textarea { background-color: transparent !important; } [/code] With Google chrome, right-click and "inspect" any element. In the left side of the inspector, drill down to the innermost element. Then, watching the right side ( the css rules), click on each parent element one by one until you find the elements with background colors attached to them. Share this post Link to post Share on other sites
queezy 0 Report post Posted August 31, 2011 Hi Kastelic, Oh! The code was so close. The resulting footer color framing the custom background is nice. However because the custom background is a specific length the footer color runs behind the content on the longer first page. I know from earlier attempts that if I make the custom background longer it conflicts with the proper disply of the website on my iphone. I really like the code though it's a bit too advanced for me to tweak. Your kind help is greatly appreciated. Share this post Link to post Share on other sites