wordpress remove home icon woocommerce artificer menu - css

The free woocommerce theme artificer has an ugly home icon button that I would like to remove. Here is the page for the theme so you can see what the button looks like:
http://www.woothemes.com/products/artificer/
I tried searching around and found one person who said to make a new menu bar, which I did, although it still had the icon on it.

I think it looks OK actually :-)
But anyway, just add this to your custom CSS. You might be able to do this in the theme settings somewhere. If not, just set up a child theme and put this at the bottom of the CSS file:
#navigation ul.nav li.home a span {
background-image:none;
text-indent:0;
}

#navigation ul.nav li.home a {
display:none;
}

Related

how to remove post "categories" from showing up on the the hamburger/toggle menu in wordpress

I'm trying to find some CSS to help me stop having "post page categories" from showing up on the hamburger/toggle menu on wordpress. For example here, i'm making www.byjgk.com and when the hamburger menu is clicked, and gives me the dropdown, besides the normal menu items, i keep seeing "uncategorized" below the normal menu as additional menu items (or, if I add any categories to a post, those categories below the menu items.) It's driving me crazy and i can't figure out how to stop it! Please help, thanks!
FYI - I tried the follow two bits of CSS, but they didn't seem to do anything:
.hamburger-panel .category-links { display: none; }
.hamburger-panel .panel-body-contents > hr { display: none; }
And:
.menu-panel li a.widget-link[href="/categories"] {
display: none;
}
You can check for the same in theme settings and mobile menu if you want to do it with CSS try this code.
.widget_categories
{
display:none!important;
}

How can i change the background color of the sidebar in the backend of Wordpress?

im creating a plugin for change the look in the backend of Wordpress, and im stuck for change the background of the sidebar in the Backend, how can i change it?
Also, how can i change the icons? i want to delete the name and just be a icons.
So, if you want to do it yourself, you need to inspect wp-admin via Chrome Developer Tools section. Without inspecting you can't learn what is inside. (To inspect the webpage you need to press ctrl+shift+i and choose elements tab)
I give you the code which solves 2 things you want, but you need to learn inspecting for learning more about this.
Add this code to your theme's functions.php:
add_action ('admin_footer', function (){
echo '<style>
#adminmenu,#adminmenu li,#adminmenu li ul,#adminmenu li ul li,#adminmenuwrap,#adminmenuback,.wp-submenu
{background: red !important}
#adminmenu .wp-menu-name,.collapse-button-label,.wp-submenu li a
{display:none !important}
#adminmenuwrap,#adminmenu,#adminmenuback,.wp-submenu
{width: 40px !important} #wpcontent{margin-left:40px}
</style>';
});
add class "folded" in for hide title
Example in JS
$('body').addClass('folded');

Changing the menu on a wordpress site

I am using the 2011 theme on wordpress and I would like to make the font that appears on the primary menu bigger and more stylish, is it possible for me to achieve this and if so, how to I go about it. sosytee.wordpress.com is the site i am working on and i would like to change the menu to a font similar to the orange letters in my banner as well as the size also
You can edit style.css file for this.
Please add child theme and edit the CSS file
Main menu:
#access ul {
font-size:20px; /* change it as per your need*/
}
Dropdown:
#access ul ul a { ... }
Firebug plugin for Firefox may help to inspect CSS style.

Wordpress - Highlight the parent menu-item when child menu item page is selected/loaded

I have a basic menu and some of the menu items have submenus.
I have very little experience with wordpress and don't have time to dive deeper into the details right now. So my question is, what is the simplest way to highlight the top menu item when the use navigates to one of the submenu pages. (I tried using both javascript and also pure css to set the color property by element id and by using the "current-cat-parent" class but neither worked).
Any help is greatly appreciated.
Note: I am using a theme called chameleon.
you can assign current-menu-item class to .current-menu-ancestor class like
.main_menu li.current-menu-item a, .main_menu li.current-menu-ancestor a{
color: #777777 !important; /* highlight color */
}
It will highlight parent page menu
Please refer this page
You can insert the following code in the theme’s footer.php file right before the closing body tag .
<!-- Highlight parent page link when on child page -->
<?php if (is_page()) { // displaying a child page ?>
<script type="text/javascript">
jQuery("li.current-page-ancestor").addClass('current-menu-item');
</script>
<?php } ?>
The beauty of this is its in PHP so the code's dynamic. What it does is simply add another native WordPress nav li class that makes the link of the current page active.
I wrote a short post here explaining how it works: How to keep parent page navigation link highlighted when viewing a child/sub page!
Feel free to let me know if you have questions about it.
I had a bit of a problem editing this but found an easy solution.
I am using the Wordpress Storefront theme, just paste this into your child theme's style.css file:
li.current-menu-parent >a {
color:red !important;
}
Interesting. Your solution highlighted the parent but not the current child. But it put me on the right path and in the end, this was what I needed.
li.current-menu-parent >a, .current-menu-item >a {
color: red !important;
}
WordPress 5.7
Tested and Working, 2021
Year 2021. If any of you still looking for the solution, then here it is.
This will highlight the parent and its child. If no child menu then the parent will get highlighted. Remember !important is required.
.current-menu-parent > a,
.current-menu-item a {
color: blue !important; /* Important is required */
}
.current-menu-ancestor did not work for me. .current-page-ancestor did.
This worked for me. The following CSS will allow you to style the active menu... down to three menus deep.
.current-menu-ancestor{ background:RED !important; }
.current_page_parent{background:GREEN !important;}
.active{background:YELLOW !important;}
The menu button that represents the currently active page will be
YELLOW,
If the button representing the currently active page is nested, its
parent will be GREEN... else the Top-Level button on your menu will be GREEN.
And most importantly (no matter how many levels of nesting appear in
your menu) Any element with a class of .current-menu-ancestor
will be styled with a RED background.
It is also possible to ONLY style the .current-menu-ancestor and any parent menu-item will be styled.

Wordpress wp_nav_menu help

I am currently using wp_nav_menu to generate my nav menu. Although everything is working and menu highlighting is working, how do you get child pages to be highlighted as well?
For example, I have a menu item named "Page" and it has 3 child pages under that. So when I am in any of the child pages, I want the main Page to still be highlighted...how is that possible with using wp_nav_menu..?
The body_class function which WordPress has can help you out here.
http://codex.wordpress.org/Function_Reference/body_class
What you'll want is current-menu-parent which you can utilise in your CSS. Not particularly well documented as far as I can tell, but this article helps:
http://www.designisphilosophy.com/tutorials/highlight-current-page-or-category/
Wordpress will give the current page the class 'current-menu-item' so just add the css you want to that. e.g.
.current-menu-item {
background: #0077CC;
}
Edit:- You can target the child menu items with
.sub-menu .current-menu-item {
background: #0077CC;
}
Edit2:- Use this to hilight the parent menu item when on a sub page
.current-menu-parent {
background: #0077CC;
}

Resources