Jump to content
Sign in to follow this  
queezy

Custom background & Site Navigation

Recommended Posts

queezy

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
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
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
[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
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

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  

×