Simple CSS is a new plugin for the PageLines Framework for WordPress. Two versions will be available:
- Simple CSS Lite: This FREE plugin allows the user to easily customize background, text, hover, active, and submenu colors of the PageLines navigation menu. Works with both the Navigation and BrandNav sections.
- Simple CSS Pro: Includes Lite features plus the ability to change CSS for nearly every aspect of PageLines. This version is still in development. Please leave a comment below for any specific features you would like to be included in the Pro version (example: the ability to change widget title colors, footer text color, etc).
Appreciate this? Please donate!
Simple CSS Lite is FREE. If you are thrilled I made it and appreciate the time spent, please consider making a donation to my coffee addiction. The PayPal donate button is up there on the right!
Installation
Installation is simple and depends on your method of purchase. Here are some tips:
- When purchased through your WordPress admin (easiest method), just visit WordPress -> PageLines -> Store -> Plugins to install and activate. Updates for this plugin will be shown here also.
- When purchased from PageLines.com, upload the original zip file to WordPress -> Plugins -> Add New -> Upload. Activate the plugin to use it right away. Updates for this plugin will be shown at WordPress -> PageLines -> Store -> Plugins.
Set the Options
The Simple CSS options are located at WordPress -> PageLines -> Settings. You will see a new menu item called Simple CSS Lite or Simple CSS Pro (depending on your version). Note: Make sure you don’t have both plugins activated at the same time; if you have Simple CSS Pro, it should always be your active plugin.
- Navigation Colors (Lite & Pro): This section controls the background, text, hover, active, and submenu colors of the navigation menu. Works with both the Navigation and BrandNav sections. Click the “More Info” button on the settings page for a description of each option.
- Navigation Bottom Border Style (Pro only): This section controls the color, width, and type of the border below the navigation menu. Read the “More Info” section on the settings page for a description of each option.
- More options will be added to Pro as it is developed. Please leave a comment below with your requests!
Change Log
1.0: Initial release of Lite version.
1.1: Fixed a bug that wouldn’t show the plugin as active within the PageLines Store, even though it was active.
1.2: Re-wrote CSS selectors for better handling of active menu items as well as submenu items. This adds two new options to the settings panel: Text Color of Active Menu Item and Background Color of Active Menu Item. Also moved the Navigation Bar Background Color to the bottom for better flow and usability.
1.3: Corrected an invalid CSS selector. Text color now shows correctly for regular menu items (since v1.2).
1.4: Corrected an invalid math call that was creating a text shadow on menu items (since PageLines 2.1.4). Also added support for menus that do not use the drop down menu option.
Thanks for Stopping By!
If you have any questions, feature requests, or bugs to report, please leave a comment below or on the Simple CSS PageLines product page. Enjoy!
Hallo mama I am trying to simply choose a background colour from simple CSS lite... nothing happens I do have , in pageline tne Nav bar....do i have to shut this out first ?
- spam
- offensive
- disagree
- off topic
Likefudgie This plugin only works with Classic Nav. You'll need to add Classic Nav via Drag&Drop, and then watch your color choices come to life. :) Full instructions are above, if you need any help!
- spam
- offensive
- disagree
- off topic
LikeHello! I was able to install and configure the plugin for one site. However, when I tried using it on my other site, when I set up the background color (which is the first thing I ried to do) the color will only show to the right of the menu items in the navigation bar. I am using the classic bar, and am doing everything exactly as the first time. I tried deactivating plugins and it keeps doing the same thing. Any suggestions to fix this? Thanks.
- spam
- offensive
- disagree
- off topic
Likeagastelum I would need a little more information to help you. A live link to your site showing the issue would be perfect.
It sounds like you've not set the background color of your menu items. You should set that color to match the navigation bar color if you want the entire navigation menu the same color.
- spam
- offensive
- disagree
- off topic
LikeHi there. Thanks for the plugin - as others have said great time saver. However I have a small problem that hopefully you can help me with. If you look here http://74.52.155.20/~fosterwi/ and mouse over a menu item with a drop down then move your mouse to one of the items in the dropdown you'll see that the colour of the top level nav option changes as you move your mouse away. How can I get it so the top level text colour stays white when you mouse over the sub options?
Any help greatly appreciated.
- spam
- offensive
- disagree
- off topic
LikeOh I see there's no fix for this :/ is there another way to sort this? If only PL supplied the css so we could just change the colours.
- spam
- offensive
- disagree
- off topic
LikeChasenet This is actually the Wordpress standard menu. And they have the CSS for it hidden all over the place. It was a nightmare to build this plugin lol. :)
- spam
- offensive
- disagree
- off topic
LikeOh my oh my. I cant tell you how helpful this is for speedy mockups and trying colors schemes. Its always a nightmare tracking down the CSS, and it seems to change whenever there's an update. Anyway, first run working a charm. THANKS!
- spam
- offensive
- disagree
- off topic
Likeadriankinloch Yay!! I'm so happy to hear that and so glad I could help make your job a little easier. :)
- spam
- offensive
- disagree
- off topic
LikeHi, Cant seem to get it to work. Installed and set all the colors. Does not seem to have an effect on navbar. I have the latest version of framework professional. I tried disabling all plugins.
Thanks, site I am building hepgutters.com
- spam
- offensive
- disagree
- off topic
LikeMake sure you're using Classic Nav and not NavBar. :)
- spam
- offensive
- disagree
- off topic
LikeI don't know if its because I am using a new version of Pagelines or because I am using the free version but the directions listed above to locate and use this plugin does not work for me - Wordpress - Pagelines - Settings.... I don't have the "Settings" option and clicking through the available options doesn't reveal this plugin. Can anyone help with this issue at all?
- spam
- offensive
- disagree
- off topic
Likeclaytonc2 It works with both the newest version of PageLines as well as with the free version. :) Your layout will be different since you're using the free version. Just click the PageLines menu and it should show up there toward the bottom. Make sure you have installed AND activated the plugin.
- spam
- offensive
- disagree
- off topic
LikeCan you please tell me how to get Simple CSS to work on the Nav Bar in pagelines child theme? I've changed the settings in Simple CSS, but it does not change the color in the main navigation bar.
Thanks,
Bruce
- spam
- offensive
- disagree
- off topic
LikeBruce_Alfred As stated above (and on the product page), Simple CSS only works with Classic Nav or Brand Nav, not the NavBar.
- spam
- offensive
- disagree
- off topic
LikeDear Mama-Jen, thank you for sharing on PageLines css with everyone. I'm hoping you can tell me how to get the line-height to cooperate in the feature slider. I reduced the font-size but height won't cooperate. The way it looks right now is here: http://goo.gl/R5K9D
Here's the css:
.fheading h2.ftitle a {font-size:18px; line-height:50%;}.fheading.ftitle {line-height:50%;}.hentry-pad * {padding-left:3px;padding-right:5px;}.hentry-pad img {padding:0px;}
PS, is there a better way to control the padding in the posts?
- spam
- offensive
- disagree
- off topic
LikeAny idea what the CSS might be to set the background color of the parent menu item when you are hovered over one of the submenu options?
- spam
- offensive
- disagree
- off topic
LikeDaveMoppert In the hours and hours I've spent on this, I haven't found a way to control it separately.
- spam
- offensive
- disagree
- off topic
LikeMama-Jen ,
Thanks for the response.
If you do find a way to do it, I would love to know.
I got most of the nav functionality done -- all I need now is for the parent link option to stay highlighted when I roll over onto one of the secondary links. http://updated-kid2kid.com.
Thanks!
- spam
- offensive
- disagree
- off topic
LikeDaveMoppert Yeah the only way I can get it to do that in this plugin is if it is the current menu item. Like if you look above, the whole menu for "PageLines Add-ons" is highlighted. Not sure how to do what you're wanting though, sorry!
- spam
- offensive
- disagree
- off topic
LikeDaveMoppert Mama-Jen
Dave. did you find a way to sort this?
- spam
- offensive
- disagree
- off topic
LikeChasenet DaveMoppert Mama-Jen
Yeah, I was able to get some help from Danny. Check it out here: http://www.pagelines.com/forum/topic/23633-navigation-styles/
Hopefully you find the solution!
- spam
- offensive
- disagree
- off topic
LikeDear Mama-Jen,
First thank you for making this plugin as it does make life easy. I am having this problem with it as it seems that it will not play nice with the event calendar by modern tribes. I have been speaking to the guys at pagelines oh the support forums and was wondering if you could help. http://www.pagelines.com/forum/topic/23273-blog-on-navbar-is-highlighted-when-another-navbar-item-is-selected/
Dave
- spam
- offensive
- disagree
- off topic
Likedgosine Hi Dave. I replied to that post, but for reference, I said:"The easiest way to do it would be to make those two items NOT be a child of the other item, then the CSS won't apply. Deselect "schedule" as the parent of those 2 pages and you should be okay."
Hope that helps!
- spam
- offensive
- disagree
- off topic
LikeMama-Jen Hi Jen, I have been trying to do what you have asked, but i can not figure it out. As the event calendar pages are acting like a special page. Its hard to explain. If you have a test server maybe you can test it. If not i can let you use my server to see see the problem.Dave
- spam
- offensive
- disagree
- off topic
Likedgosine If you visit the Wordpress -> Pages menu, do you see 'upcoming events' and 'calendar' pages?
- spam
- offensive
- disagree
- off topic
LikeMama-Jen Nope, they do not show up under the pages. Menu.
- spam
- offensive
- disagree
- off topic
LikeMama-Jen Ok, i was mistaken in my first statement about them being child pages. The are neither parent or child, as they are rather virtual dynamic pages created by the plugin.
- spam
- offensive
- disagree
- off topic
Likedgosine Okay what you're gonna need to do is alter those two (?) menu items' CSS. You can use Firebug for Firefox or Chrome's inspection tools to find the menu-id of each one, and then use the CSS that James provided you in the forum (altering it of course). Alternatively, you can contact that plugin author to see if they have any ideas. The Simple CSS plugin styles the default Wordpress menu so this is likely something they have encountered before.
- spam
- offensive
- disagree
- off topic
LikeMama-Jen I have spoken to plugin author and it seems that there is no page-ID for them. If i do add a page-ID it could conflict with other auto generated ID’s. Which is also not good. When i test the plugin with the Twenty Eleven theme the "Blog" in the navbar does not get highlighted if i go tp "calendar" or "upcoming events'
- spam
- offensive
- disagree
- off topic
Likedgosine I can't see it live on your site because it looks like you changed it, but you can fix all this with the CSS that James posted in the forum. You will just need to find the menu item IDs of the ones that are behaving badly.
For example, for the services menu above, the code is:
li id="menu-item-385" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-385"
So I could use #menu-item-385 to target that menu item specifically. Use that with the CSS provided in the forum to change the color as needed.
- spam
- offensive
- disagree
- off topic
LikeMama-Jen Sorry Jen, The site is back up now. I was testing things and forgot about it last nite. I did what you said and found the "calendar" was set to "menu-item-77"
but when i enter in the following nothing changed#menu-item-77 #menu-item-41 .main-nav li.current_page_parent a {background: black !important;}Did i do something wrong?
- spam
- offensive
- disagree
- off topic
LikedgosineI don't know where the "menu-item-41" came from in your code but it shouldn't be there. I can't get it to work how I assumed it *should* work so try this:
#page .main-nav li.current_page_parent a {background: #000000;}
- spam
- offensive
- disagree
- off topic
LikeMama-Jen "menu-item-41" would be the "Blog" menu item, which i have removed now. I only have the following code. Still not working. #menu-item-77 .main-nav li.current_page_parent a {background: #000000;}I have done the following, which is to remove the Custom menu "Calendar" which was pointed to the following "http://tsttokyo.com/events/month/" and create a page which linked to the same link. I have added that page into the menu as a page. Now that item is not even getting highlighted, only the blog is highlighted.I did have the following code#menu-item-100 .main-nav li.current_page_parent a {background: #000000;}and then removed it to see what would happen. Nothing changed. Jen, would you like to mail me as i feel really bad by taking up your comments. Dave
- spam
- offensive
- disagree
- off topic
Likedgosine It is no problem at all. :)
I went through your site when I wrote my last comment and the code I pasted above does work. Did you try to add it?
- spam
- offensive
- disagree
- off topic
LikeMama-Jen Jen, i am sorry it seems that your code does work i just made an error when i entered it. So if one clicks on "Calendar" the "Blog" will not be highlighted. The new problem is that when one clicks on "Blog" it will not be highlighted.
- spam
- offensive
- disagree
- off topic
Likedgosine I've been looking at this while I"m on the road trying to figure it out and I can't get it to work. Somehow pages are showing with a parent/child relationship which is odd. My last bit of advice would be to make sure your blog page does not have a parent assigned to it (look in the page editor). If it doesn't, then I have no idea why it's happening. :(
An alternative would be to disable Simple CSS and write the custom code from scratch so you can try to get it exactly how you want. The Wordpress menu is no fun to style, I can attest to that. Best of luck!
- spam
- offensive
- disagree
- off topic
LikeMama-Jen I have checked and confirmed that the Blog does not have parent assigned to it. I know what you mean when you say its not fun to style. I built another site (50ccplus.com), using the mediawiki integration, and noticed that the same thing happening without the Simple CSS installed. The only plugin's installed are as follows (Jetpack by WordPress.com, Pagelines Customize, Pagelines Sections, and Page Links To). If one clicks on "Artist Bio" the "Blog" will stay highlighted. I am wondering if pagelines is the problem?
- spam
- offensive
- disagree
- off topic
Likedgosine I dont know what "page links to" is but it's possible it could be causing things. I also don't know if PageLines itself could be the issue. It's just behaving odd and I really don't know why. :( Another alternative would be to use the NavBar section instead of Classic Nav.
- spam
- offensive
- disagree
- off topic
LikeMama-Jen "page links to" is just a way to link pages to a link. I have disabled it but its still acting the same way. I am playing around with the NavBar but doesnt always seem to work.
- spam
- offensive
- disagree
- off topic
LikeGot the colours working fine, its a great little plugin. I'd really like to float the navigation to the right, any thoughts on how to achieve this with CSS or...?
- spam
- offensive
- disagree
- off topic
LikeGavClarke Glad you like my plugin! :) The navigation should be able to be floated with CSS. Try something like floating the UL of the menu div.
- spam
- offensive
- disagree
- off topic
Likenice plugin for pagelines... really like being able to style the navigation more... however, another feature i would love to see it the ability to have the drop down menus not do word wrap... other themes don't word wrap the drop down menus but pagelines default does which can make the drop downs very long due to extra lines that are not needed... will you be adding that functionality in the future?
- spam
- offensive
- disagree
- off topic
LikeHi Larry. Most likely no because i haven't found a way to do it automatically. Width set to auto does not work but you can do it with custom CSS by playing around with the pixel value of the LI's. Thanks for your comment!
- spam
- offensive
- disagree
- off topic
LikeHow do I make the background color of menu items transparent?
- spam
- offensive
- disagree
- off topic
Likecmaki You can try erasing the value for that option, but most likely the default PageLines style will take over. If so, you'll have to write custom CSS code to do that.
- spam
- offensive
- disagree
- off topic
LikeMama-Jen cmaki I tried erasing the value, and also adding "transparent" into the field, but neither worked. Do you have any suggestions on what the CSS code would be?
- spam
- offensive
- disagree
- off topic
Likecmaki I would recommend adding a value to the field and then inspecting the element with Firebug or Chrome's inspection tools. Then copy all of the selectors to your custom CSS and add transparent for the bg color. More info on CSS customizations at http://www.pagelines.com/wiki/Custom_CSS
- spam
- offensive
- disagree
- off topic
LikeMama-Jen cmaki You're a genius! That did the trick. Thanks so much!
- spam
- offensive
- disagree
- off topic
Likecmaki haha :) Glad to help!
- spam
- offensive
- disagree
- off topic
Like