Jump to content
Sign in to follow this  
Danny

Most commonly asked CSS tweaks (for PlatformPro)

Recommended Posts

Danny    1,327
Danny

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!

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jennajonesdesign+    15
jennajonesdesign
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
jasonnettles    0
jasonnettles
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
holly    0
holly
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
cornell2    0
cornell2
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
saltydisciple    0
saltydisciple
Excellent! Thanks Danny!

Share this post


Link to post
Share on other sites
saltydisciple    0
saltydisciple
Excellent! Thanks Danny!

Share this post


Link to post
Share on other sites
slingr    0
slingr
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
Danny    1,327
Danny
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!

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jenndiesi    0
jenndiesi
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
bestrag    22
bestrag
Yeah sure, you guys should definitely add some common css tweaks to your documentation.

bestrag.net

professional dms plugins 

 

Share this post


Link to post
Share on other sites
pastrami00    0
pastrami00
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
ryanjohnjackson    0
ryanjohnjackson
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
reda77    0
reda77
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
tranceandy    0
tranceandy
Great work Danny! Looking forward to the topic for PageLines Framework 2.0 =D

Share this post


Link to post
Share on other sites
Pankaj32    1
Pankaj32
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
tranceandy    0
tranceandy
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
Jenny    33
Jenny
@pankaj1 You enter the code into Custom Code -> Custom CSS. @tranceandy that is for PageLines 2.0 only. This post is for PlatformPro.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
tranceandy    0
tranceandy
@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
Jenny    33
Jenny
@tranceandy It's no problem :) Just wanted to avoid any confusion.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
Pankaj32    1
Pankaj32
@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
Pankaj32    1
Pankaj32
@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

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  

×