I'm developping a Wordpress website for a painter, and I'd like to use paintings as backgrounds for menu elements, just like on this picture :
http://img829.imageshack.us/img829/7364/capturedcran20120509094.png
The active page has colors, the inactive ones are in black and white, and become colored on mouse over.
I'm using a premium WP theme to have a similar menu, but I don't know how to achieve this menu. (this is a dropdown menu, if there is a submenu, everything below it drops down as it appears, but there is no spacial background on the submenu).
Do you know how to achieve that, please ?
There is no any type of option in WP menu but you can do it by assign class for each menu from WP menu section and providing custom CSS
Like
And CSS with bg image
.dashboard a {
background: url(../../images/navicons/81.png) no-repeat;
}
Just use the ID of the items and apply a background with CSS. Then add a Greyscale script: http://www.pryde-design.co.uk/2011/08/greyscale-jquery-plugin/ You can also apply a CSS fall-back if necessary (not with grey scale, but with opacity).
Related
I've browsed all of the other questions on this topic and tried all of the sample code that was provided, but I still can't seem to get a fix after a few hours, so here I am.
I am trying to change the color of the selected menu page for my site's navigation. I am using the Astra theme, and Elementor Page builder. I went into WP customizer and made my selections for link color and link hover color, but it seems those changes only take effect when I am on the "Shop" page of my menu. The only difference I can see with the "Shop" menu text is it is a custom link, rather than the starter theme default link? Pictures attached to show what I am talking about.
Red orange color when "Home" is selected
When "Shop" is selected it takes my selected link color from my global color settings. This is the only one that appears to be doing what I asked of it in the UI
The rest of the menu text does the same thing "Home" does - it draws the red orange color from an unknown source, and I don't know what the color code is or where to find it.
I'm trying to either change the selected menu text color away from that red orange color to another custom color -- or keep all of the text as the grey color and make the menu text underlined when hovered over or selected. Issue is I can't seem to make a change consistent when navigating across the menu items. Help would be greatly appreciated!
Write a custom CSS property, use this CSS class for your menu.
Appearance - Customise - Custom CSS (Write your custom CSS here)
Appearance - Menus - Header/Main Menu
At the top of the page, you should the "Screen Option" menu... Click on it and enable(check) the CSS class box.
Now, click on your menu items and specify the CSS class to each menu items.
There is something really strange happening with the menu on the child theme "Education" of the Genesis framework. This framework has two navigation positions: primary and secondary. As you can see here both appear one under the other in the red area. However, there is a third position that seems to be hardcoded in the child theme (?) and won't go away even if I don't assign a position to the menu.
Can you guys give me an idea what is going on? I'm not very good at this stuff. I tried looking into the child theme's code, but found nothing referencing this...
Ultumately what I want to do is use the top position (the one in the white area), but I can't, because I need to make the site multilingual, but that top position doesn't appear in the menu options, so I can't assign different menus for the different languages.
The white area at the top right is a widget area. The site already has two widgets in that Header Right widget area - a text widget (with the phone number), and a nav menu widget (the three locales).
You could make it two nav menu widgets. See Appearance -> Widgets, or use the Customizer. Alternatively, you could adjust the CSS, so that the red / grey locale 'tabs' become different looking links with a white background.
Also useful, if you do just need a single menu location there, would be the Genesis Header Nav plugin.
On my wordpress powered website I have widget title boxes if you have a look you will see I have a one titled 'british lions' in the left sidebar on the right hand side of the website.
This is a category widget and will only show posts from that category. I would like to change the title box from green to red to match the 'british lions' style.
I will then add more of these widgets but they will be pulling from different categories and will also have their own color style. You will see what i mean on the main content on the front page aviva is yellow super rugby is blue etc etc but i want this for the widgets aswell.
How do i target the specific widget boxes with css to change the background. I have tried with firebug but it seems to change all the widget title boxes and not that specific one i am after.
http://www.rugbyclubhouse.net
Hopefully someone can help and i am making sense.
Thanks
you can access it by its id #feacpost_featuredcategorypostswidget-2.
so you could add something like
#feacpost_featuredcategorypostswidget-2 h3 {
background-color: #b22023;
}
to your CSS.
It is possible.
Let us take the 'British Lions' tab here for instance.
#feacpost_featuredcategorypostswidget-2 h3 {
background-color: #ff0000 !important;
}
Take this css and put it inside your own stylesheet.
I hope this helps.
Is there a plug in or a block of code I can add in order to always display submenu?
The only time I can see the submenu that has a red border around it is when I click the menu item "SHOP", I would like the submenu that has a red border to be visible on any pageall the time
You could do this at the theme layer by editing page.tpl.php and printing $secondary_links.
You might also just prefer to use the Menu Block module, which has some pretty handy config options: http://drupal.org/project/menu_block
I'm using classic Galleria theme. I implemented the lightbox and changed the frame color:
.galleria-lightbox-shadow{background-color: transparent !important}
.galleria-lightbox-content{background:black !important}
But is it possible to change the color of the next, previous and close buttons in Lightbox?
Right now they are white. I would like to have them in black. Is there a solution to that?
If my hunch is correct, the 'next', 'previous' and 'close' buttons are images (as is with most Lightboxes).
You should edit the images in their folder and convert them into black-themed ones manually, or search online for any replacements.