Jump to content
Sign in to follow this  
mikec415

How to add a left nav beside a feature slider?

Recommended Posts

mikec415

Hello, I would like to know how to add a left navigation or sidebar with left navigation within it to the left of a feature area. Here is my site: www.callicotteco.com My goal is to be able to put the left navigation and logo on the left and have the feature area/slider be to the right. But I still want the navigation to have the same styling as when it is on the top. Please let me know if this is possible using Platform Pro or if I need to get it worked on by a pro. Thanks, Mike

Share this post


Link to post
Share on other sites
michaeljohnprice
This is the CSS I used to create the feature slider on the right hand side at http://www.dccouncilchair.com/: [code]#feature { background: url(images/slider-blu-bg.jpg) repeat-x scroll center top #233449; margin: 0; padding: 10px 0; } #feature .content { border: 2px solid #D9E1E7; } #feature_slider .fcontent .fheading { padding-bottom: 5px; } #feature_slider .fcontent .ftitle { font-size: 18px; font-weight: bold; } #feature_slider .text-right .fexcerpt, #feature_slider .text-left .fexcerpt { font-size: 13px; height: 40px; } #feature_slider .fmedia .dcol-pad { padding: 0px; position: relative; } #feature-footer { height: 300px; float: right; width: 300px; bottom: 301px; } #feature-footer .feature-footer-pad { background: #172332; border-top: none; border-bottom: none; border-right: none; height: 300px; border-left: none; width: 290px; } #featurenav a span.nav_thumb { display: block; float: left; margin-right: 0; vertical-align: middle; width: 285px; height: 93px; } #featurenav a span.nav_thumb span.nav_overlay { background: url(images/feature-thumb-overlay.png) no-repeat scroll 0 -186px transparent; box-shadow: 0px 0px 3px 2px #000 inset; width: 285px; height: 93px; } #featurenav a.activeSlide span.nav_thumb span.nav_overlay { background: none; box-shadow: 0px 0px 3px 2px #fff inset; border: none; } #featurenav a:active span.nav_thumb span.nav_overlay { background: none; box-shadow: 0px 0px 3px 2px #fff inset; border: none; } #feature-footer.thumbs span.playpause { position: relative; right: 5px; top: 240px; margin-top: 0px; height: 0; background: none; border: none; } #feature-footer span.playpause.pause span { background: url(images/glossy-buttons/pause-sign-mini.png) no-repeat scroll 0 0 transparent; height: 36px; width: 36px; } #feature-footer span.playpause.resume span { background: url(images/glossy-buttons/play-sign-mini.png) no-repeat scroll 0 0 transparent; height: 36px; width: 36px; padding: 4px 16px 12px; } #feature_slider { height: 300px; } #feature_slider .fcontent { width: 660px; top: 210px; left: 0; } #feature_slider .fcontent p { line-height: 1.5em; } #feature_slider .fcontent .dcol-pad { height: 90px; padding: 0px 30px 0px; } #feature_slider .text-right .fcontent { float: left; height: 90px; } #feature_slider .text-left .fcontent { float: left; height: 90px; } #feature_slider .text-bottom .fcontent { float: left; height: 90px; } #feature_slider .fcontainer .feature-wrap { width: 660px; } #feature_slider a.pagelines-blink.black-blink { float: top; position: absolute; right: 10px; top: 5px; } .fcontent a.post-edit-link { top: 60px; background: red; } [/code]

Share this post


Link to post
Share on other sites
kastelic
Have you seen this post on resizing the width of the feature slider? http://www.pagelines.com/forum/discussion/12458/featured-slider-width-a-solution/p1

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  

×