Jump to content
Sign in to follow this  
amieldror

CSS - Sidebar menu

Recommended Posts

amieldror

Hello Pagelines team! First I would like to say how much I'm excited about your framework! I've purchased it lately and I'm constantly studying its capacity. I have one question regarding the sidebar menu: I have tried to set it's parameters with CSS with no success: Here is the link to the site: http://www.invivographics.com/phys-pharm/ This is the code I used: #sidebar_primary .widget ul li { background-color: #EAEAEA; border-bottom: 1px solid #FFFFFF; margin: 0; } And this is how I would like it to actually looks like: http://www.nature.com/clpt/index.html (menu on the left) Thanks so much!

Share this post


Link to post
Share on other sites
Rob

This will require considerable tweaking on your part as much of it will not apply to your site. Be careful of duplication of CSS elements with existing or other CSS. This is straight from their source: .home .jn-home a:link, .home .jn-home a:visited, .aop .jn-aop a:link, .aop .jn-aop a:visited, .about-aop .jn-aop .subnav .jn-about-aop a:link, .about-aop .jn-aop .subnav .jn-about-aop a:visited, .issue .jn-issue a:link, .issue .jn-issue a:visited, .archive .jn-archive a:link, .archive .jn-archive a:visited, #archive .jn-archive a:link, #archive .jn-archive a:visited, .about-supp .jn-about-supp a:link, .about-supp .jn-about-supp a:visited, .press-releases .jn-press-releases a:link, .press-releases .jn-press-releases a:visited, .for-authors .jn-for-authors a:link, .for-authors .jn-for-authors a:visited, .for-referees .jn-for-referees a:link, .for-referees .jn-for-referees a:visited, .contact-eds .jn-contact-eds a:link, .contact-eds .jn-contact-eds a:visited, .about-the-journal .jn-about-the-journal a:link, .about-the-journal .jn-about-the-journal a:visited, .about-the-society .jn-about-the-society a:link, .about-the-society .jn-about-the-society a:visited, .subscribe .jn-subscribe a:link, .subscribe .jn-subscribe a:visited, .advertising .jn-advertising a:link, .advertising .jn-advertising a:visited, .contact-npg .jn-contact-npg a:link, .contact-npg .jn-contact-npg a:visited, .site-features .jn-site-features a:link, .site-features .jn-site-features a:visited { color: #FFFFFF; } map.journal-nav ul li a, map.journal-nav ul li a:visited { color: #000000; display: block; font-size: 80%; font-weight: bold; margin: 0; padding: 4px 5px; text-decoration: none; } map.journal-nav ul { list-style-type: none; text-align: left; } The same effect could, theoretically be produced with a table within a text widget in the sidebar. It would require some styling, but if the content in each cell is static and not dynamic, there should be no problem and it might be much easier. Let me know your thoughts.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
amieldror

Thanks for your prompt reply! I think I will go with this design: http://www.invivographics.com/phys-pharm/ Is there a way to confine this code only to the menu inside a disbar? When I apply this CSS all the primary sidebar squire the same colors and I doesn't looks good on other pages: http://www.invivographics.com/phys-pharm/contact-us/ In this 'contact us' page I would like to have only white boxes. Is it possible? Thanks so much! P.s. this is the CSS I used: #page-canvas #sidebar_primary .widget { background-color: #EAEAEA; margin-bottom: 1em; overflow: hidden; margin: 10px 0; overflow: hidden; } #page-canvas #sidebar_primary .widget-title { background: none repeat scroll 0 0 #1F85B8; color: #FFFFFF; font-size: 80%; margin: 0; padding: 5px 7px; }

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  

×