Jump to content
Sign in to follow this  
Danny

PageLines Framework 2.0 CSS Tweaks.

Recommended Posts

Danny    1,327
Danny

This topic will be a complete list of the most commonly asked CSS questions on the support forums. (This has been tested on PageLines Framework 2.0) To use this code, simply copy and paste the code into Wordpress Admin Dashboard > PageLines > Settings > Custom Code > CSS Rules. The code can also be applied to the style.css when you're using the PageLines Customise plugin, which can be installed from within the PageLines Store and will also work Child themes too. If you have a CSS tip or trick you would like to submit please add it to the comments below. NAVIGATION Navigation background color full width of site

#nav { background-color: #F1F1F1;}
Example Image: f783m.jpg Navigation background color full width of layout
#nav .content-pad { background-color: #F1F1F1;}
Example Image: dC0Fo.jpg Removes the bottom border from the navigation
.navigation_wrap { border-bottom: 0 none !important; }
How to change the primary nav text color.
.main_nav li a { color: #FF0000; }
This will make the text bold:
.main_nav li a {font-weight: bold;}
This will make the text underlined
.main_nav li a {text-decoration: underline !important;}
Change the background hover color & text color
.main-nav li a:hover,
	.main-nav .current-menu-ancestor .current_page_item a:hover,
	.main-nav li.current-menu-ancestor ul a:hover { background-color: #FFF; color: #FF0000; }
Example Image: CKYzl.jpg SUBMENU/DROPDOWN MENU Coming Soon...! MISC Read More/Continue link Turn the Read more on post excerpt into a button (sort of)
.continue_reading_link { color: #555;background-color: #f1f1f1;padding: 5px 15px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px; }
	
	/* Change the color when hovering over Read more */
	.continue_reading_link:hover { background-color: #4E7EAF;color: white;text-decoration:none !important; }

Example Image: DV8P1.jpg More to come soon...


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Reserved!


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
James B    436
James B

You Star! Many thanks..... been playing about with this all morning trying to work that out.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
ryanjohnjackson    0
ryanjohnjackson

Danny, Using your hover color css I was able to make the text transparent (only as a test). I was able to change the hover color BUT not make the hover transparent? I tried this:

.main-nav li a:hover, .main-nav .current-menu-ancestor .current_page_item a, .main-nav li.current-menu-ancestor ul a:hover {
	background-color: transparent !important; }

I basically only want the menus to drop down but no buttons

Share this post


Link to post
Share on other sites
Gavin_+    55
Gavin_

Hello Danny That was really useful I've used your code and modified slightly

	#nav .content-pad, #secondnav .content-pad {
	    background: none repeat scroll 0 0 #f7eec8;
	    -webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	    -moz-box-shadow: inset 0 0 5px #888;
	-webkit-box-shadow: inset 0 0 5px#888;
	box-shadow: inner 0 0 5px #888;
	    padding-bottom: 5px;
	    padding-top: 7px;
	border-bottom: 1px solid #FFFFFF;
	}
	
	.navigation_wrap { border-bottom: 0 none !important; }
	.main-nav li a:hover,
	.main-nav .current-menu-ancestor .current_page_item a,
	.main-nav li.current-menu-ancestor ul a:hover { background-color: #e2d8b1 !important; color: #000000; }
	
	.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  {
	    background: #e2d8b1 !important;
	border-top: 0.1em solid #9b9999;
	border-left: 0.1em solid #9b9999;
	border-bottom: 0.1em solid #ffffff;
	}
	
	.main-nav .current-menu-ancestor a, .main-nav li.current-menu-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .main-nav li.current_page_parent a, .sf-menu li li, .sf-menu li li li {
	    background: none repeat scroll 0 0 #e2d8b1 !important;
	}
	

Thing is I can't seem to get rid of the hover color that remains on the section as you scroll down the child pages? You can see what i mean here http://79.170.44.85/beechlodgeschool.co.uk/ any ideas? Thanks

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

@ryanjohnjackson - I think you may need to replace background-color: with simply background: @cbesett - They should work, however, I will move all images to Imgur @gavin_launchpad - I checked out your website, did you resolve this ? I will be posting css to create a simple, clean drop down which should help you make alterations.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Gavin_+    55
Gavin_

Hi Danny not resolved yet thanks

Share this post


Link to post
Share on other sites
lennyc    0
lennyc

Thanks Danny - this was very helpful. Framework is great - but due to the dynamic css - it is very hard to find the areas to tweak - even using firebug. A list of the items like this makes it much easier. It is especially hard with the sub-menu hover because it is hard to view in firebug - looking forward to your update!

Share this post


Link to post
Share on other sites
yasharozov    1
yasharozov

Hi, I am also waiting for a comprehensive update. It's strange that one of the most common problems or UI design decisions isn't yet properly documented for this product. In pagelines 1.3.9 this was much easier and when I upgraded by buying the framework I was surprised to see that none of the color options for changing the menus exist anymore...

Share this post


Link to post
Share on other sites
glynt    1
glynt

Hi Danny, I love the "Turn the Read more on post excerpt into a button (sort of)"... Do you know how to do it for the "more" link on the features? Many thanks, Glyn

Share this post


Link to post
Share on other sites
Pankaj32    1
Pankaj32

Hello Danny, Thanks for your putting this cheat sheet together, novice like me was able put some of these to good use. I have a little problem: Is there a code that can be used to reduce distance (if I am not wrong its called the padding?) between the header and the content area?

Share this post


Link to post
Share on other sites
stellitak    0
stellitak

Hello everyone and Happy New Year! I just managed to make my header full-width after a LOT of trial and error and I'd like to share the code in case anyone wishes to do the same. I wanted a full-width header with a gradient with my custom logo in the middle. So, I prepared 2 things in photoshop : 1. A png transparent file of my custom logo. I made sure the width of the image matched the width of my content (I am using 'Responsive with Pixel Width')i.e 960 pixels and the height was about 200px. 2. For the gradient background, I created a jpeg file of a 'snippet' of the gradient I wanted,200px high (to match my custom logo height) and about 50px wide. I uploaded the png file in Website Setup>Custom logo and inserted the following code in Custom Code>Custom CSS : #branding .content-pad {padding:0px;} #branding { background: url("http://localhost:8888/wp-content/uploads/2012/01/Header-background.jpg" ) repeat-x scroll left top; } ..and voila! It worked! Since I am a real noob in CSS, the code might be wrong and a more experienced member might be able to help make it more solid. In any case, I hope it helps those of you with no experience in CSS. Take care!

Share this post


Link to post
Share on other sites
indigo    0
indigo

THIS IS A BIG HELP THANKS!! I'd like to request code for tweaking the hover background in main navigation, I'm trying to creating this effect: http://rainbowseminars.com/img/nav-demo.jpg so I need to be able to stretch the hover bg in height and change its color thanks

Share this post


Link to post
Share on other sites
Jenny    33
Jenny

To fix the parent menu items' hover color when hovering on a child menu item, use this to fix:

.main_nav li:hover {
	    background-color: #ffffff; /*Insert color # or transparent here*/
	}


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

There's just one part that won't listen to my CSS: the background of the branding. Can anyone tip me how to get the background-color of this part right?

Share this post


Link to post
Share on other sites
Jenny    33
Jenny

Try #branding or #branding .branding-nav Include !important in your declaration.


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

In the end it turned out do be nothing more than

#branding.container{}

Still it's not easy to reverse-engineer the CSS code. But with some help we'll manage :D

Share this post


Link to post
Share on other sites
Jenny    33
Jenny

Glad you figured it out @olofdeskdesign. If you haven't used it before, make sure you check out Firebug. It helps a lot. :)


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

This is all SO helpful. Why is the CSS so hard on this? I am by no means a CSS expert, but this "should" change the background color on the hover to a dark green and the text to a yellow:

/*CHNAGES THE MAIN NAV HOVER BACKGROUND */
	.main-nav li:hover, .main-nav .current-page-ancestor a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .sf-menu li li, .sf-menu li li li {
		background-color: #353d33;
		color: #FFD200;
	}

It succeeds in changing the text to the yellow but NOT the background. It's still grey. WHY???? help!

Share this post


Link to post
Share on other sites
Jenny    33
Jenny

Try adding !important before each ; (semicolon)


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

That helped! Still need to work some css out. Hovers are not behaving. When I can find the time (hah-hah-hah) I need to take a deep CSS class!!

Share this post


Link to post
Share on other sites
aeruiz    0
aeruiz

Hello guys, Happy San Valentine's Day. <3 I'm new here, and just got the PageLines Framework - Developer. I am also having difficulties to find where can I erase or change the default hover for the BRANDING NAVIGATION. I keep searching and reading and it seems that I am just missing it. I wonder why is it that there is not an unique, specific and clear css files or elements that just deal with each navigation individually, in this case the Branding Navigation, without maybe affecting other navigation across the site. PageLines team, I will really appreciate your effective support on this. Thank you so much. ;-)

Share this post


Link to post
Share on other sites
purple    0
purple

I am trying to make my nav bar background all one color instead of gray on the active link and white on the nonactive. I have used the css given by Danny. You can see what I mean here: http://miami-pestcontrol.net/ Thanks in advance for your help.

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  

×