• 0
Sign in to follow this  
Followers 0

Most commonly asked CSS tweaks (for PlatformPro)

Question

Posted · Report post

This topic will be a complete list of the most commonly asked CSS customisation questions on the support forums. PageLines Framework 2.0 CSS Tweaks - Coming Soon! - Link will appear here! iBlogPro 5 - Coming Soon! - Link will appear here! Below you will find a title of a commonly asked question and underneath will be the answer, simply add the code into the custom code area in your themes settings. If you have a CSS tip or trick you would like to submit please add it to the comments below. How do I change the primary nav background color. Full Width of site. Example Image: Iw1oU.jpg

	/* CSS FOR NAV BACKGROUND COLOR */
	#primary-nav { background-color: #FF0000; }
	
	/* THIS HIDES THE BORDER AT THE BOTTOM */
	#nav_row.main_nav, ul.sf-menu ul li { border-bottom: 0 none; }
	
	/* THIS MAKES THE li BACKGROUNDS TRANSPARENT */
	.sf-menu li, .main_nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background-color: transparent; }
	
	
Width of Layout. Example Image: AoBmx.jpg
	/* CSS FOR NAV BACKGROUND COLOR */
	#primary-nav .content { background-color: #FF0000; }
	
	/* THIS HIDES THE BORDER AT THE BOTTOM */
	#nav_row.main_nav, ul.sf-menu ul li { border-bottom: 0 none; }
	
	/* THIS MAKES THE li BACKGROUNDS TRANSPARENT */
	.sf-menu li, .main_nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background-color: transparent; }
	
	
How to change the primary nav text color.
	/* THIS WILL CHANGE THE FONT COLOR IN THE NAV */
	.main_nav li a { color: #000000 !important; }
	
How to change the the Link to Bold.
	/* THIS WILL CHANGE THE FONT WEIGHT TO BOLDER */
	.main_nav li a { font-weight: bolder !important; }
	
How to change the hover background/text color of menu item. Example Image: H6ql4.jpg
	/* CSS FOR WHEN HOVERING OVER A MENU ITEM */
	.main_nav .main-nav li a:hover,
	#grandchildnav .current_page_item a,
	#grandchildnav li a:hover,
	#grandchildnav .current_page_item ul li a:hover,
	.sf-menu li:hover,
	.sf-menu li.sfHover { background-color: #FF0000; color: #FFFFFF; }
	
How to change the current menu item background/text color.
	/* CSS FOR CURRENT PAGE MENU ITEM */
	.main-nav li.current-page-ancestor a,
	.main-nav li.current_page_item a,
	.main-nav li.current-page-ancestor ul a,
	.main-nav li.current_page_item ul a.sf-menu li li { background-color: #FF0000; color: #FFFFFF; }
	
How to change the active menu item background/text color:
	/* CSS FOR ACTIVE MENU ITEM, USEFUL FOR DROP DOWN MENUS */
	.main-nav li.current-page-ancestor a:active,
	.main-nav li.current_page_item a:active,
	.main-nav li.current-page-ancestor ul a:active,
	.main-nav li.current_page_item ul a:active { background-color: #FF0000; color: #FFFFFF; }
	
Secondary Navigation:
	/* THIS ALLOWS YOU TO CHANGE THE COLOR OF THE LINK & STOPS IT BEING UNDERLINED */
	#secondnav li a { color: #FF0000; text-shadow: none !important; }
	
	/* THIS ALLOWS YOU CHANGE THE BACKGROUND COLOR OF THE LINK WHEN YOU HOVER OVER IT */
	#secondnav li a:hover {  background: #FFFFFF; }
	
	/* THIS ALLOWS YOU TO ADD A UNDERLINE WHEN HOVERING OVER THE LINK */
	#secondnav li a:hover {  text-decoration: underline; }
	
	/* THIS ALLOWS YOU TO CHANGE THE COLOR OF THE LINK WHEN HOVERING OVER THE LINK */
	#secondnav li a:hover {  color:#00FF00; }
	

More to come... If this post helped you, hit the "Thanks" button please!

1 person likes this

Share this post


Link to post
Share on other sites

33 answers to this question

  • 0

Posted · Report post

@Pankaj The above code is for [b]Platform Pro[/b] only, I will try to get a PageLines Framework 2.0 version up sometime tomorrow. If you would like for anything to be added to the new post that isn't covered here, please reply to this post and I will try too add all the suggestions.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@Danny I changed the title yesterday (I think) to avoid as much confusion as possible. :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@Danny What I would really like is some simple videos put out there for general public out there that doesn't understand most of the html/css etc on the various new things (plugins, boxes, banners, features) that you've now added to pageline framework during your transition from platform pro. I will have more questions along the way but for the moment, please address, banners, features, boxes, re order and a bit of css to be able to move things like social networking icons etc.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Nooooo ... please. No more videos! Videos are often good for step by step "how to" - but horrible and frustrating for "reference" and should never replace documentation. For those who don't know CSS - there are plenty of GREAT how-to videos on youtube; and it is not pageline's responsibility to teach the basics of css and html. But it is their responsibility to document the product. The existing basic product document is fine - but since so much of the product depends on using rather obscure or complex combinations of custom css tags - it is this documentation that is missing, badly. I will start an armed revolution here if the folks at Pagelines spent time, money and energy on more videos at the expense of documentation and reference. For anyone who is using one of the pagelines products (beyond your first week) - By far your biggest time drain is in identifying the right CSS selectors/tags/classes that you need to accomplish something relatively straight forward. All you want to do is look it up (15 seconds) as opposed to having to endure a 7 minute video that MIGHT tell you what the right CSS code is (if you don't miss it in the video. As for the forums - there are so many overlapping discussions in the forums that it is getting nearly impossible to merely search to find similar answers (many of the results are contradicting because they represent separate conversation, or they apply to different product flavor. Anyway - without transforming this into a venting session. No video! Please. No video. Documentation! ... and in lieu of documentation - just a few single pages showing the most common CSS (sidebars, content areas etc) And - in lieu of that - a sticky forum posting (or two) like this! Pagelines - take note of how popular this ONE SINGLE POST was among your customers. It might take someone a half hour per separate page to post similarly illuminating information (as opposed to the dozens of hours it takes to produce video or write documentation).

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Indeed, having the tweaks listed out here is SO helpful. A lot of us just need this little push in the right direction to help us figure out exactly how to get the look or functionality we want. Having these snippets in an easy to find place so we can play with them and learn is a great way to go about it without committing a lot of resources. :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm waiting desperatly for "PageLines Framework 2.0 CSS Tweaks - Coming Soon! - Link will appear here!" I need excatly the same customazisations for Pagelines Framework 2.0.1

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yes Please. the class flow appears to be totally different in 2.0. I am having a bear of a time trying to highlight (background and/or text color) for secondnav. Amazing when I first used Pagelines there was a section with a color picker for this. Seems weird to take it away in an 'upgrade' If you are interested in my dev and what I am looking at http://tester.assuresol.com/immunome/about-us/ I want the secondary nav to have a highlight on the active page. None of the custom css is helping me. When I look at it in firebug, the element is hard to nail down.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I've started the post here for 2.0. I will be adding more now that Christmas is over! http://www.pagelines.com/forum/discussion/15956/pagelines-framework-2.0-css-tweaks.#Item_1

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  
Followers 0