Jump to content


Photo
- - - - -

PageLines Framework 2.0 CSS Tweaks.


  • Please log in to reply
33 replies to this topic

#21 lisaren

lisaren

    Advanced Member

  • Members
  • 41 posts

Posted 02 February 2012 - 04:11 PM

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!

#22 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2917 posts
  • LocationWV
  • Country: Country Flag

Posted 02 February 2012 - 08:24 PM

Try adding !important before each ; (semicolon)

#23 lisaren

lisaren

    Advanced Member

  • Members
  • 41 posts

Posted 03 February 2012 - 04:35 PM

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

#24 aeruiz

aeruiz

    Member

  • Members

  • 13 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 14 February 2012 - 09:08 PM

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

#25 purple

purple

    Advanced Member

  • Members
  • 38 posts

Posted 17 February 2012 - 03:47 AM

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.

#26 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2917 posts
  • LocationWV
  • Country: Country Flag

Posted 17 February 2012 - 03:24 PM

@aeruiz and @purple There is a plugin coming to the store soon that will solve this for you.

#27 purple

purple

    Advanced Member

  • Members
  • 38 posts

Posted 17 February 2012 - 06:36 PM

@simple_mama Thanks for the info on the upcoming plugin. Do you know how long it will be until the plugin is available? I have several sites in different stages of development using Pagelines and would love to be able to do some variations with the nav bar to make them look different from one another. Thanks.

#28 jbekefy

jbekefy

    Advanced Member

  • Members
  • 33 posts
  • LocationOakland
  • Framework Version:2.2.5

Posted 17 February 2012 - 07:32 PM

Dude thanks!

#29 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2917 posts
  • LocationWV
  • Country: Country Flag

Posted 17 February 2012 - 07:39 PM

@purple Trust me, I am as anxious as you. :) The review team is aware of it and are going through Store items for review as quickly as they can. To get a sneak peak, check out http://simplemama.com/simple-css/ (plugin is live on the site too!).

#30 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2917 posts
  • LocationWV
  • Country: Country Flag

Posted 20 February 2012 - 02:37 AM

Plugin is live! http://www.pagelines...imple-css-lite/

#31 jankowalski

jankowalski

    Advocate

  • Members
  • 344 posts
  • Country: Country Flag

Posted 05 March 2012 - 11:09 AM

so , can you add css tips for dropdown menu?

#32 liajustine

liajustine

    Member

  • Members
  • 12 posts

Posted 26 March 2012 - 05:17 PM

Hi there, I'm looking for a little guidance on the border radius issue for the header area. I've been looking through the forums and found several solutions offered, none of which have worked for me. I was fiddling with my own work-around and have been partially successful, however I have not been able to set any ID on the content element to target one rather than all. I'm guessing it is most likely my syntax so I would really appreciate it if someone would be willing to take a look and give me a fresh perspective that might resolve the issue. [see img attached].

 .page-canvas { border:none; border-radius:15px 15px 15px 15px; }	.thepage .content { border-radius: 15px 15px 0 0; }	#branding .content-pad {	border-radius: 15px 15px 0 0;	background: #ffffff; /* for non-css3 browsers */	background: -webkit-gradient(linear, left top, left bottom, from(#EAEAEA), to(#ffffff));	background: -moz-linear-gradient(top,  #EAEAEA,  #ffffff);	background-image: -o-linear-gradient(top, #EAEAEA,#ffffff);	background-image: -ms-linear-gradient(top, #EAEAEA, #ffffff);	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#EAEAEA', endColorstr='#ffffff');	}

Any time I try to add one of the IDs so as not to affect EVERY content element, it fails. I've tried adding the header ID as well as branding ID. I'm going nuts trying to figure out how to JUST effect the first div area. I understand it has to do with layers and choosing the right ID to avoid effecting all the content areas, I just have have not been successful in targeting either the header or branding ID's.

Thank you!

Posted Image

#33 alainafrederick

alainafrederick

    Super Member

  • Members
  • 108 posts

Posted 08 August 2012 - 04:21 AM

I've tried your custom css code in the custom css area for the nav bar text color and bold. I'd like for the font to be white and for it to be bold &/or larger text. I can not get it to work http://blog.lilhelper.ca

 .navbar { background: #cd3e12;}
	.main_nav li a { color: #ffffff; }
	.main_nav li a {font-weight: bold;}


#34 Danny

Danny

    Is Awesome!

  • Moderators
  • 13148 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 08 August 2012 - 07:39 AM

Hi,

Firstly, the code above is the Nav Classic navigation section and not the new Navbar, thats why it didn't work.

Try adding this to your custom CSS.

 .navbar.pl-color-grey .navline > li > a { color: white; text-shadow: 0 1px 0 #CCC; font-weight: bold; }

If it doesn't work, try adding !important.