33 replies to this topic

[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:

Navigation background color full width of layout

 #nav .content-pad { background-color: #F1F1F1;}

Example Image:

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:

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:




More to come soon...

[Danny]

Reserved!

[James B]

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

[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

[cbesett]

Why do the sample images not work?

[gavin_launchpad]

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/...geschool.co.uk/

any ideas?

Thanks

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

[gavin_launchpad]

Hi Danny not resolved yet thanks

[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!

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

[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

[DelhiREguy]

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?

[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!

[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://rainbowsemina...mg/nav-demo.jpg so I need to be able to stretch the hover bg in height and change its color thanks

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

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

 <section id="branding" class="container fix secondnav-branding branding-nav">
	</section>

[Jenny]

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

[virplay]

Thx

[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

[Jenny]

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