Jump to content


Photo
- - - - -

PageLines Framework 2.0 CSS Tweaks.


This topic has been archived. This means that you cannot reply to this topic.
33 replies to this topic

#1 Danny

Danny

    Is Awesome!

  • Moderators
  • 16376 posts

Posted 12 December 2011 - 01:48 PM

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: http://i.imgur.com/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: http://i.imgur.com/DV8P1.jpg




More to come soon...

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16376 posts

Posted 12 December 2011 - 01:53 PM

Reserved!

#3 James B

James B

    Advocate

  • Members

  • 5126 posts

Posted 12 December 2011 - 02:27 PM

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

#4 ryanjohnjackson

ryanjohnjackson

    Super Member

  • Members
  • 143 posts

Posted 12 December 2011 - 02:32 PM

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

#5 cbesett

cbesett

    Member

  • Members
  • 20 posts

Posted 12 December 2011 - 05:56 PM

Why do the sample images not work?

#6 gavin_launchpad

gavin_launchpad

    Advocate

  • Members

  • 499 posts

Posted 12 December 2011 - 06:13 PM

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

#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 16376 posts

Posted 13 December 2011 - 12:25 PM

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

#8 gavin_launchpad

gavin_launchpad

    Advocate

  • Members

  • 499 posts

Posted 16 December 2011 - 10:05 AM

Hi Danny not resolved yet thanks

#9 lennyc

lennyc

    Newbie

  • Members
  • 4 posts

Posted 16 December 2011 - 09:08 PM

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!

#10 yasharozov

yasharozov

    Advanced Member

  • Members

  • 43 posts

Posted 17 December 2011 - 10:51 AM

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

#11 glynt

glynt

    Super Member

  • Members
  • 201 posts

Posted 19 December 2011 - 08:08 PM

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

#12 Pankaj32

Pankaj32

    Super Member

  • Members

  • 117 posts

Posted 20 December 2011 - 07:49 AM

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?

#13 stellitak

stellitak

    Member

  • Members
  • 22 posts

Posted 02 January 2012 - 10:58 AM

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!

#14 indigo

indigo

    Newbie

  • Members
  • 6 posts

Posted 02 January 2012 - 07:42 PM

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

#15 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts

Posted 02 January 2012 - 09:16 PM

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


#16 olofdeskdesign

olofdeskdesign

    Member

  • Members
  • 14 posts

Posted 13 January 2012 - 01:47 PM

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>


#17 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts

Posted 18 January 2012 - 03:03 AM

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

#18 virplay

virplay

    Super Member

  • Members
  • 146 posts

Posted 18 January 2012 - 07:31 AM

Thx

#19 olofdeskdesign

olofdeskdesign

    Member

  • Members
  • 14 posts

Posted 18 January 2012 - 12:46 PM

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

#20 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts

Posted 18 January 2012 - 02:05 PM

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