Tagged: Metro theme.
April 7, 2013 at 11:57 am #33742
I'm building a site using Metro theme (first time for me) and it is working really well with a few hitches I cannot seem to solve myself.
Here's the development site: http://dev.stgeorgeor.org/
1 - The header I uploaded is not showing up, but the header area is all blue. I think the header image itself is behind it, but I don't know what to do about it.
2 - The Slider works great, but on my iPad, it is extending over into the sidebar (You can see this in the Studiopress Mobile Responsiveness tester - http://www.studiopress.com/responsive/)
3 - last but not least, the padding or margin ABOVE the header is huge. I'd like to reduce it, but the code on the stylesheet is not exactly the same as on the other themes I've used. I'm not sure where it is on the stylesheet.
Thanks in advance.April 7, 2013 at 12:26 pm #33747
I can address #3. The margin above the heading is the wrap. When I removed the "1" from padding and left it at .25 it reduced the margin.
padding: 1.25rem;April 7, 2013 at 12:31 pm #33751
Thanks wp guy!
I fixed the Slider (using wrong plug in)
But I am still having trouble with the background. It is WAY too large in the display. Just using the uploader and it show up way too large (if it shows up at all). I'm leaving the current one on so that someone can see it, and hopefully solve it.April 7, 2013 at 1:15 pm #33764
@presterjohn - Is your problem the background of the entire page or the background of the header? Your header background color is caused because line 1608 of your child theme's stylesheet is giving the header a blue background. When you use an image header, that background comes after the image (which you've loaded correctly), so the background conceals the image.
This seems to be an odd little quirk of Metro - if you choose NOT to display header text (as I assume you have done), the blue background is applied to the entire #header a, which produces the undesirable outcome you see. If you did opt to display header text, the text would have the blue background.
The easiest fix for this is to delete .metro-blue #title a from the list of items near line 1608 of your child theme style sheet. Of course, you'll have to elete the comma at the end of the preceding item, since it will now be the last one in the list.
April 7, 2013 at 1:27 pm #33765
The background of the entire page is ALSO a problem, which you can see.
Any ideas there?April 7, 2013 at 2:06 pm #33775
What your background settings (for position, repeat, and attachment)? And what are you intending for the background to do/look like?
Your background image is very small (60 px square), so if you used the background settings from the demo (which uses a much larger image), you won't get the result that you're expecting.
April 7, 2013 at 5:34 pm #33813
Settings are LEFT, TILE HORIZONTALLY, and SCROLL.
Also, I've changed the image, and you can see the pattern expanded to a super large size more clearly.April 7, 2013 at 11:35 pm #33905
Also, the top margin is reduced using the method you recommend, wp guy, but then so do all the other margins. I need to reduce just the top margin.
And figure out what it wrong with the background! It is set up right, but displays waaaay larger than the file.April 8, 2013 at 10:54 pm #34223
I think there is a misunderstanding about what is happening with the background image in the Metro theme.
Metro uses the Backstretch jQuery plugin. This plugin will stretch an image to fit a page. So if you start with a small image, as you have done, when stretched, it will produce the look that you see.
The background image that is included in the demo is 1440 x 900 px. To achieve something closer to the demo, you'd have to compose a wide image (so there is less stretching, which produces the distortion that you see) by using a tool such as Photoshop to stitch together a series of your small images into a bigger image. The
The behavior of backstretch is different from normal CSS backgrounds, where tiling a small image can get you the look I suspect you want. Unless I am missing something, the background settings that are included with the Metro theme are a little misleading, because one might conclude that a small image will work in a way similar to CSS backgrounds. I don't think those settings will alter the way backstretch will behave with a small image. For reference, StudioPress indirectly addresses this by suggesting that one use a "large background image" in the Metro theme guide.
Therefore, you have a couple of possible paths to fix this. The first option is to disable using a custom background in Metro, which triggers backstretch. Without using a custom background, backstretch is never loaded, so you can use a normal background with CSS. Then, you'd apply your background using normal CSS in your child theme stylesheet. The next option is to follow my suggestion above and use an image editor to turn your small background image into a larger image. Personally, if you want to use an image similar to the one you've chosen, I think the first option is the better choice, but that's a quick reaction without actually having tested it across all mobile platforms. The advantages are that you skip loading backstretch and you only load a small image (less page load). Also, note that Metro doesn't even load the background image with backstretch on most mobile devices, so if you opt for the CSS route and adjust the responsive CSS, you'll likely get closer to what you want.
Hope that helps.
April 8, 2013 at 10:57 pm #34224
The topic ‘Metro theme blues’ is closed to new replies.