Most commonly asked CSS tweaks (for PlatformPro)

[Danny+ 1,327]

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:

	/* 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:

	/* 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:

	/* 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!

[jennajonesdesign+ 15]

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

[Jenny 33]

Thanks Danny!

[meanmcbean 12]

Thanks!

[jasonnettles 0]

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

[cornell2 0]

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

[holly 0]

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

[cornell2 0]

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.

[saltydisciple 0]

Excellent! Thanks Danny!

[saltydisciple 0]

Excellent! Thanks Danny!

[slingr 0]

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?

[Danny+ 1,327]

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!

[jenndiesi 0]

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!

[bestrag 22]

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

[pastrami00 0]

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

[ryanjohnjackson 0]

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?

[reda77 0]

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

[tranceandy 0]

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

[Pankaj32 1]

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.

[tranceandy 0]

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

[Jenny 33]

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

[tranceandy 0]

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

[Jenny 33]

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

[Pankaj32 1]

@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?

[Pankaj32 1]

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