Metro theme blues

Community Forums Forums General Discussion Metro theme blues

This topic is: resolved

Tagged: 

This topic contains 9 replies, has 3 voices, and was last updated by  PresterJohn 1 year, 6 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #33742

    PresterJohn
    Participant
    Post count: 64

    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.

    #33747

    wp guy
    Participant
    Post count: 233

    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.

    #wrap {
    clear: both;
    padding: 6px;
    padding: 1.25rem;

    #33751

    PresterJohn
    Participant
    Post count: 64

    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.

    #33764

    Bill Murray
    Participant
    Post count: 575

    @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.


    Web: https://wpperform.com or Twitter: @wpperform

    We do managed WordPress hosting.

    #33765

    PresterJohn
    Participant
    Post count: 64

    Thanks Bill.

    The background of the entire page is ALSO a problem, which you can see.

    Any ideas there?

    #33775

    Bill Murray
    Participant
    Post count: 575

    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.


    Web: https://wpperform.com or Twitter: @wpperform

    We do managed WordPress hosting.

    #33813

    PresterJohn
    Participant
    Post count: 64

    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.

    #33905

    PresterJohn
    Participant
    Post count: 64

    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.

    #34223

    Bill Murray
    Participant
    Post count: 575

    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.


    Web: https://wpperform.com or Twitter: @wpperform

    We do managed WordPress hosting.

    #34224

    PresterJohn
    Participant
    Post count: 64

    Thanks, Bill.

     

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Metro theme blues’ is closed to new replies.