• 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

This is awesome! I have had many of these questions. Very helpful to have it all in one place.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Danny!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Great job, appreciate you taking the time for this, just goes to show that pagelines listens to customers.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I've love to see more pages like this !!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks danny and if you ever have the time adding the dropdown menus would be lovely, ty

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'd like to see all major page sections documented like this (though annotated with a screenshot is even better). accompany it with an indexed wiki and I could die a happy man.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Excellent! Thanks Danny!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Excellent! Thanks Danny!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Can you clarify if these are specific to just Platform Pro or are they supposed to apply to all Pagelines products? And will these work in PP 2.0?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The above code was tested on Platform Pro and I will create a new one for PageLines Framework 2.0, on or right after release! If enough people reply, I will do a similar one post for each PageLines theme too!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Omg, this would have saved me so much time if it had been in the documentation - I spent a lot of time figuring this out yesterday. (I guess I should come to the forums *before* I try to figure it out on my own?) :P To me - this stuff is really needed and should be a basic part of the documentation. Thanks again!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yeah sure, you guys should definitely add some common css tweaks to your documentation.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

This is a great idea. I can't tell you how close I have been to smashing my computer trying to figure out CSS.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

This is for 1.x and works great for that. So far a lot of this doesn't work in 2.0. I'm using the inspector to try to fix things but the IDs and Classes are sometimes different in 2.0. Correct?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Excellent??¦ more and more pages like this Dany, it's very helpful :P Thank you

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Great work Danny! Looking forward to the topic for PageLines Framework 2.0 =D

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

This looks like a good post and I would love to benefit from this. Can somebody please also explain where exactly all these codes needs to go to be able to get the desired result. I did not know its going to take some knowledge of CSS so pardon if this is too dumb a question to be put on this forum. I did try to put the code into the "settings - custom code - css rules area however, could not see any change after saving.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The recommended way is to use the customisation plugin. You can find out how to use it at http://www.pagelines.com/wiki/index.php?title=How_to_Use_the_Pagelines_Customize_Plugin Hope that helps

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@pankaj1 You enter the code into Custom Code -> Custom CSS. @tranceandy that is for PageLines 2.0 only. This post is for PlatformPro.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@simple_mama I should have clarified that, my mistake. Not sure what version @pankaj1 is using.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@tranceandy It's no problem :) Just wanted to avoid any confusion.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@tranceandy you mean I need to take the ftp route and make changes? Thats even more confusing. Atleast, this is what the documentation seem to suggest if I were to take the customisation plugin route. I don't want to do anything fancy at the moment, simple things like moving the social networking icons here up or down etc.. also, can somebody direct me to an elaborate documentation where I can find material about how to use banners and boxes.. is there a way by which the framework (pageline) could re-size the uploaded pictures automatically for banners?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@simple_mama Thanks for pitching in there.. but still no luck with this css thing :(, @tranceandy - I am on a pageline developer version

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@pankaj1 you can go the FTP route or you can use the editor from within pagelines in the admin cp. Once you have installed the customisation plugin, select Plugins - Pagelines Customize - Edit then choose pagelines-customize/style.css

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