Archived

This topic is now archived and is closed to further replies.

PageLines Framework 2.0 CSS Tweaks.

34 posts in this topic

Posted · Report post

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...

Share this post


Link to post
Share on other sites

Posted · Report post

Reserved!

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

Why do the sample images not work?

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Danny not resolved yet thanks

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

Thx

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

Try adding !important before each ; (semicolon)

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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