Simple CSS Lite

Simple CSS Lite is a FREE plugin that provides options to customize background, text, and hover colors of the PageLines navigation menu. Works with both the Navigation and BrandNav sections. If you find this plugin useful, please consider making a donation at Simple Mama.

Support PageLines Development A majority of funds from Store purchases go to the developer of the extension.
Note PageLines Framework version 2 or better is required to use this extension.

Click To Add A Review ↓

Submit your review
Name: *
Email: *
Website:
Review Title:
Rating:	1 2 3 4 5
Review:

* Required Field Check this box to confirm you are human.

Apr 07, 2012 by bstaiks

Great plugin considering this was, apparently, take away from the previous framework. Well done!

Support for store products is hosted on the PageLines Forums. The comments below are for Pre-Sales questions only.

Product Support

38 comments

Newest | Oldest

KeithVaugh

Great plugin and easy to implement.

Have one problem and one Question:

Problem: I have a drop down menu (using BrandNav) colour 1 for buttons, colour 2 for active (or highlight). The problem if I select (click) the parent page of the drop down, all the children also highlight with the active colour. Is there a fix?

Q - is it possible to set a transparent background for the buttons?

KeithVaugh

Sorted out this problems with some custom CSS

#site .main-nav .menu-item ul li a { color: #ffffff; }

#site .main-nav .menu-item li:hover a { color: #ff4000; }

papa66ro

You got that error because you were trying to install your PLUGIN as a THEME (Theme install failed).

Try to install the plugin as a PLUGIN!! (duh!)

JAlLBREAKS

Will it assign different background color to different navigation items??

Mama-Jen moderator

@JAlLBREAKS In the options, you can choose one color for all navigation backgrounds. You can not select a different color for each item (if that's what you're asking). You'll have to use custom CSS for that.

rbarsalo

Installed it with Pagelines 2.3. Default setting for everything and PlugIn is activated, see the interface for it in Pagelines, tried several times to change colors and nothing happens... any ideas?

Mama-Jen moderator

@rbarsalo I always verify it works with new releases and it works fine with 2.3. You can see an example on my plain-jane site at http://jen.staff.pagelines.com/.

First, make sure you're entering the colors correctly. When typing the color in the pop-up pallette box, you do not use a # sign (but you do use a # sign if typing it in the text entry box). See above image for example. The colors will display in the tiny box to the left of each.

Make sure you don't have custom CSS code overwriting the CSS. Also disable all plugins to see if that helps.

rbarsalo

@Mama-Jen Just did that... This is a totally new installation of Pagelines developper edition Version 2.3.3. I disabled ALL the plugins except Pagelines Sections and Simple CSS Lite. I am using the Standard NavBar. I selected the colours as described... for the purpose of the test, the background of the NavBar should be #62f518. Still does not work... here is the dev link : http://www.setinitiative.com/

I really need to manage the colors of the NavBar... can't live with the ones provided by Pagelines. What's next? Really want to make this work...

Mama-Jen moderator

@rbarsalo Glad to help!

rbarsalo

@Mama-Jen Thanks. I will try that, found a lot of interesting stuff on the Header and footer options too.

Mama-Jen moderator

@rbarsalo You're welcome. :)

To see the difference, I recommend adding both to your header in Drag&Drop, then assign the menu for Nav Classic in Appearance -> Menus, and assign the menu for NavBar in PageLines -> Site Options -> Nav Bar. Then you'll be able to see the difference with both activated.

Also, there are additional options for enabling drop down menus, adding a shadow, etc, for Nav Classic in PageLines -> Site Options -> Header & Footer (I think that's right).

rbarsalo

@Mama-Jen That was simple... it works ;- ) Looking forward to your pro version. Thanks.

What are the differences between NavBar and NavClassic?

Mama-Jen moderator

@rbarsalo Simple CSS only works with Nav Classic, not Nav Bar. Activate Nav Classic in Drag&Drop to use Simple CSS.

trehop

I just loaded it and I can't seem to get it to work at all. I had some custom css but then deleted it and put in the settings for the CSS Lite. I do have the # for the colors. What else should I check?

Mama-Jen moderator

@trehop Make sure the color in the small square matches the hex color you've entered, meaning it should look like the screenshot above. If you need further step by step instructions, you can find those on my site at http://www.simplemama.com/simple-css/

trehop

@Mama-Jen I definitely have it set up with the hex colors entered. It just doesn't seem to want to read the settings at all.

Mama-Jen moderator

@trehop To verify, the colors in the boxes match the hex code you have set, yes?

If it's not working as intended, I would recommend disabling ALL of your active plugins to see if one is conflicting.

Also, make sure you have removed any custom CSS code as it will overwrite Simple CSS.

studio8c

Jenny,

would be great to have to following atributes as well

font-size: 12px;

font-weight: 400;

letter-spacing: 1.18333px;

text-transform: uppercase;

line-height: 11.9px;

Maybe its a idea for the next version

Mama-Jen moderator

@studio8c Thanks for the ideas!!

studio8c

@Mama-Jen your welcome

studio8c

HI Jenny,

i'm getting a Error after updating to Pagelines latest version

Error in custom Less code: parse error: failed at `, ` line: 1044

Mama-Jen moderator

@studio8c That means you have an error in your custom CSS code. :) Look for a , in your code (there are no commas in CSS)

studio8c

i get a Parse error on this after a validation check in my css editor

.w4_content_tabset ul.tab_links li a:hover, .w4_content_tabset ul.tab_links li a.active, .w4_content_tabset ul.tab_links li.ui-tabs-selected a {

background-color: #EEE;

color: #1f1f1f;

}

when i comment it it works again ;-)

Mama-Jen moderator

@studio8c .w4_content_tabset is not anything in Simple CSS or in PageLines as far as I know. A plugin maybe?

PsychedelicResistDance

ok. I'm really sorry about this but i'm very new. I installed plugin. the option for CSS lite appeared. i changed the colours of the menu. but now i want to edit them and the option for css lite has disappeared. cannot find the menu anywhere. how do you access the plugin options again. sorry, i know this is probably annoying

macnchz moderator

@PsychedelicResistDance Is it listed under Dasboard > Settings?

Helize

Is there a way to add gradients?

Mama-Jen moderator

@Helize You would have to use custom CSS to add gradients. The plugin is meant to be simple. :)

TheChristopherParks

1 Like

Bravo!

katiet

Hmm. Everything installed okay, and the plugin is present in my Pagelines Settings, but none of the changes I've made will show up on the front end? Am I missing something?

Mama-Jen moderator

@katiet Make sure you don't have any custom CSS for navigation as it will overwrite the plugin's settings. Also, make sure the colors are visually appearing properly in the boxes. If not, then you have entered the colors incorrectly. You enter them in the visual color pallette box with a # in front.

katiet

@Mama-Jen Thank you. It was the hash tag in front of the code that I was missing (I'm a beginner!). I appreciate the help!

Mama-Jen moderator

@katiet Glad i could help :)

Mama-Jen moderator

Fixed for 2.1.4.

Mama-Jen moderator

Plugin was completely re-worked and now mimics the Wordpress menu behavior exactly. I also added two new selections for active menu text color and active menu background.

boba1

Best thing for PageLines users to have!

Mama-Jen moderator

The current menu item always highlights. So if the current menu item is a top-level nav item, it will highlight. Working on figuring out Wordpress' insane menu system to get the parent/grandparent items to show as active without highlight all of the child items. Have spent hours on it to this point but will keep pluggin' away until I get it. :)

station16

I love this, but it is missing a few options:-Main Nav current location indicator background and text color-Secondary Nav current location bkgrnd and text color. Any chance that might be added soon? or other work around?

the PageLines Store

Simple CSS Lite

Standard License

Jenny