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.
Related
I wish to change the appearance of this page
https://www.wizardmodels.ltd/checkout/order-received/21061/?key=wc_order_NesCNU4ih80Xn
generated after an order made in chrome's incognito mode
screenshot
all CSS I write into the child theme appearance>edit seems not to affect this page, for example
.order_details ul li {
padding: 0em 0em!important;
}
and variants thereof. Is there something about the Thank you.... page? Is it like an email with CSS editing through PHP snippet?
Any help greatly appreciated.
Your child style is loaded, The problem is because of .order_details is the ul and not the ul container :
Simply change your CSS selector from .order_details ul li to ul.order_details li.
I am looking to change the font size and weight of the navigation menu items on my WordPress site, I am using The Company theme, but I can't seem to figure out the CSS required
My site is www.thepowerwithin.org.uk
I am looking to make the items in the main menu at the top bigger and bold
I have reviewed your question. I think you want to apply CSS only on main-menu anchor text not on sub-menu anchor text. If I am right then you can do as:
ul.menu:not(.sub-menu) > li > a {
font-size: 16px;
font-weight: bold;
}
You should use children-selector > to apply CSS only on the direct children of ul
When use ul.menu:not(.sub-menu) it ignores sub-menu ul of li.
The best thing to do is learn how to use the developer tools in Firefox or Chrome or Safari or IE to see what's loading on your site and how to work with and change the CSS and HTML. Dev tools allows you to make temporary changes to the locally cached browser copy of the site. You can then add the CSS changes to the theme, either by adding new CSS in theme options or to the style sheet.
If the theme allows you to add custom CSS to modify the menu, that's good. If not, make a child theme so you don't lose your changes when the theme is updated. See Child Themes « WordPress Codex
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');
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;
}
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.