[Ziggur]

I can confirm what Mealtog said: Metro Plus theme, background tile functionality not working, Brian Dempsey's fix works.

This fix led me to a solution for another problem. I wanted to make the background image responsive, in that it's never going to seen on a small scree, e.g.: a phone, so why make them download all that extra image weight? So instead of putting it at the end of my CSS I put it in the responsive section, using a min-width statement, as follows:

@media only screen and (min-width: 800px) {

body {
background: url(http://YOURDOMAIN.com/wp-content/uploads/2013/10/IMAGENAME.png) repeat #766856;
}

}

Haven't tested it across too many devices yet, but 800px seems to reliably give me a tiled image background for an iPad in landscape mode on up, and a flat color in portrait mode on down. Obviously use your own URL for the image, and your own hex code for the fallback color.

Brian M

[Ziggur]

Hi Susan! Well it took me a while, but I got there. What follows is not for you so much as for others who, like me, may be trying to figure this out from zero.

1st: Cool tip on how to assign unique classes to menu items. So easy once you know, right?

2nd: Because I'm an amateur, not a pro, it took me a lot of trial and error and then finally reading and trial and error (but that's how we learn), to figure out that I needed to identify the parent or superset class (for lack of a better term) as well, in the CSS, for the new subclass I had created, with "." separators for each. So after giving my individual menu item a custom class name of, say, Fred, I couldn't just call ".Fred" in the style sheet, I had to call ".menu-item.Fred"

3rd: Once I got there, making it visible or invisible, based on screen size, was easy. But, I also determined that once what I was calling was a subset of the class "menu-item" that I could do the same thing with the existing, unique (WP-assigned) menu item ID#, as with the new, unique class of "Fred". So, in my case at least,

.menu-item.Fred
and
.menu-item.menu-item-123

both did the same thing, allowing me to effectively add or remove just that one menu from the primary nav, based on the screen size (making it responsive).

I wouldn't have gotten there without your help. Thanks again!

Brian

[Ziggur]

Hi Susan - thanks for jumping in!

I've done that with other mobile-specific page content using DIVs to create custom classes for custom content. But I don't know how, or where, to create a unique, custom class for a specific menu item in the navigation. I've tried using the .menu-item-ID# in the responsive section of the CSS but that didn't seem to work. Any tips on how to give one menu item its own CSS class?

Brian

[Ziggur]

For what it's worth, I found these two methods/tutorials. The second one seemed to work best for me, although as best as I can tell it pretty much kills the ability to use the Header-Right widget area and have it appear as an overlay over the header image on mobile. FYI I'm using this on the Metro Plus theme.

Customize Header Logo & Banner Images In Metro Theme

http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo/

[Author]

Posts