twenty twelve random image header not working on mobile

  • kcullinan · Member ·

    hello, this is my first post on the support forum so be gentle =) i’m working on http://robtco.wordpress.com/ and i have upgraded to the pro package. i’m very happy with the theme almost perfectly as is, but I noticed that when I use the “random” option for my header image, it gets stripped out of the mobile version (at least on my iphone). when I set it to one specific header image it works like a charm.

    So is there any fix for this apparent glitch? OR… is there a way I can, via CSS, set this theme to show a specific different image on each page?

    thanks for any advice!
    Kyle

    The blog I need help with is: (visible only to logged in users)

  • designsimply · Member ·

    I checked http://robtco.wordpress.com/ just now in a browser, and the heading is always the same. Did you turn the random option off on the Appearance → Header page in your blog dashboard?

    Also, check to make sure you’re viewing the Twenty Twelve theme on mobile, and not the mobile theme (which is separate). You can find the setting on the Appearance → Mobile page in your blog dashboard. Here’s a related help page with more info about how it works:
    http://en.support.wordpress.com/themes/mobile-themes/#disabling-mobile-themes

  • kcullinan · Member ·

    Thank you for your quick reply! Yes, I turned off the “random” setting for the time being but I just switched that back so you can see the issue. (I guess it would be smart to leave it that way while I’m asking people to help me! LOL)

    Yes, I am viewing the mobile theme (as opposed to “view full site”) and that is because I feel it’s a much nicer interface and menu for the small screen of a phone. I’m just puzzled why it can successfully do one image on the mobile theme, but not the random header option.

    I’m also curious if this is just an issue with iphone and I wonder if it works properly on other mobile devices.

    Assuming there is no fix for mobile theme + random header, I was wondering if I could make each page have it’s own designated header image in the hopes that it would resolve the issue.

    Thanks again!

  • designsimply · Member ·

    Yes, I am viewing the mobile theme (as opposed to “view full site”)

    That’s the important bit. The mobile theme is a completely separate theme which was never actually designed to use the random header feature. That said, we’ve seen a couple previous requests for something like that and the theme team made a note that they would look at adding it as a new feature for the mobile theme next time it gets updated.

    In the mean time, you have a couple options:

    1. Don’t use the Mobile Theme option—Twenty Twelve is actually a responsive theme and it should work for mobile if you want to use it by itself.

    2. You could use the unique body classes for each page to target a CSS update to the header image on each one. To see the body classes, view the page source for any of your pages in a browser and find the “body” HTML tag. Each page will have unique class names that you can use in your CSS. There’s even a setting on the Appearance → Custom Design → CSS page that will let you extend the CSS to work for the mobile theme. Doing this option would take some work. I can help you walk through one example if you’re interested in trying it out.

  • kcullinan · Member ·

    That would be so so helpful. I would be very appreciative if you could help me walk through using a unique body class for each page.

  • designsimply · Member ·

    Okay! First, it helps very much to look at a specific example.

    Let’s look at this page:
    http://robtco.wordpress.com/about-robtco/

    And let’s use this as the example header image:
    https://robtco.files.wordpress.com/2013/02/copy-twenty12banner-032.jpg

    If you view the page source for http://robtco.wordpress.com/about-robtco/ you’ll see this for the body tag:

    <body class="page page-id-96 page-template-default logged-in admin-bar no-customize-support custom-background typekit-enabled custom-font-enabled single-author highlander-enabled highlander-light">

    The “page-id-96” class is unique to this page alone, so you can use that to target the page. However, you also need to target the mobile theme, which gets a body class of “mobile-theme” added as well. So, in order to target both of those classes together with CSS, you would put them side-by-side with no spaces in between and with a “.” in front of each one to indicate it’s a class. That will get you “.mobile-theme.page-id-96” which you can use in your CSS to target anything in the mobile theme rendering of the page.

    So. Next you want to add a background image to only that specific page and only when the mobile theme is in use, and you could do that by setting a background on the “hgroup” tag with an appropriately sized image and with the spacing adjusted:

    .mobile-theme.page-id-96 hgroup {
	background: url('//robtco.files.wordpress.com/2013/02/copy-twenty12banner-032.jpg?w=320') center 60px no-repeat;
	height: 140px;
}

    Note that you can change the pixel values to adjust the spacing if you’d like. Also note how I added “?w=320” to the end of the image URL. That works because WordPress.com let’s you resize images with query strings. Another alternative would be to upload an image sized to the exact dimensions you’d like to use into your media library and use the image URL for that one inside the url() function instead.

  • designsimply · Member ·

    Also, I should have mentioned requirements before. In order for the example above to work, you must be viewing the mobile theme (not the responsive version of the Twenty Twelve theme) and you must have set the “Mobile-compatible” option to “Yes” on the Appearance → Custom Design → CSS page.

  • kcullinan · Member ·

    This is fantastic, thank you!

    I did make my banners the specific size for this theme 960×250. So is the “?w=320” relevant for resizing to the mobile theme? Or was that just an example just in case I would need to resize?

    I’m going to try playing around with this now. Thank you SO much!

  • kcullinan · Member ·

    sorry! i just re-read what you wrote about the mobile theme which answers my previous question!

  • kcullinan · Member ·

    So far, no luck… I used the example code you provided and changed only the page id for each page (by the way… how do you find the blog page id?) and the image file name for each page (I currently only have 4 headers).

    Thus far, I see no image on the mobile theme. The regular browser version is still doing the random header, which I assume is what it’s supposed to be doing since the CSS you showed me is specific to the mobile theme. I also did turn on the “mobile compatible” option under the publishing CSS settings.

    I noticed there was a little code hint saying “don’t use adjoining classes” next to each class.page_id I was calling.

    I’m going to attempt to share my CSS with you below… bear with me if I don’t do this right the first try.

    /*home header*/
.mobile-theme.page-id-2 hgroup {
	background: url('//robtco.files.wordpress.com/2013/02/copy-twenty12banner-032.jpg?w=320') center 60px no-repeat;
	height: 140px;
}
/*about us header*/
.mobile-theme.page-id-96 hgroup {
	background: url('//robtco.files.wordpress.com/2013/02/copy-twenty12banner-022.jpg?w=320') center 60px no-repeat;
	height: 140px;
}
/*services header*/
.mobile-theme.page-id-19 hgroup {
	background: url('//robtco.files.wordpress.com/2013/02/copy-twenty12banner-012.jpg?w=320') center 60px no-repeat;
	height: 140px;
}
/*property header*/
.mobile-theme.page-id-6 hgroup {
	background: url('//robtco.files.wordpress.com/2013/02/copy-twenty12banner-042.jpg?w=320') center 60px no-repeat;
	height: 140px;
}
/*association header*/
.mobile-theme.page-id-8 hgroup {
	background: url('//robtco.files.wordpress.com/2013/02/copy-twenty12banner-032.jpg?w=320') center 60px no-repeat;
	height: 140px;
}
/*homeowner header*/
.mobile-theme.page-id-13 hgroup {
	background: url('//robtco.files.wordpress.com/2013/02/copy-twenty12banner-022.jpg?w=320') center 60px no-repeat;
	height: 140px;
}
/*tenant header*/
.mobile-theme.page-id-10 hgroup {
	background: url('//robtco.files.wordpress.com/2013/02/copy-twenty12banner-012.jpg?w=320') center 60px no-repeat;
	height: 140px;
}
/*news header*/
.mobile-theme.page-id-96 hgroup {
	background: url('//robtco.files.wordpress.com/2013/02/copy-twenty12banner-042.jpg?w=320') center 60px no-repeat;
	height: 140px;
}
/*contact header*/
.mobile-theme.page-id-15 hgroup {
	background: url('//robtco.files.wordpress.com/2013/02/copy-twenty12banner-032.jpg?w=320') center 60px no-repeat;
	height: 140px;
}
  • designsimply · Member ·

    by the way… how do you find the blog page id?

    I like using this method to find the page ID which I mentioned above:

    If you view the page source for http://robtco.wordpress.com/about-robtco/ you’ll see this for the body tag:

    <body class="page page-id-96 page-template-default logged-in admin-bar no-customize-support custom-background typekit-enabled custom-font-enabled single-author highlander-enabled highlander-light">

    The “page-id-96” class is unique to this page.

  • designsimply · Member ·

    How do you find the image file name for each page (I currently only have 4 headers)?

    To find a link to an image, first upload the image to your media library, then go to the main media library page and click on the image you just uploaded, find the “File URL” field on the right. The link in that filed is a direct link to the image.

  • designsimply · Member ·

    So far, no luck… I used the example code you provided and changed only the page id for each page

    Try the exact code without modifying it. Also, double check to make sure you are viewing the mobile theme and that you have turned on the “Mobile-compatible” option:

    In order for the example above to work, you must be viewing the mobile theme (not the responsive version of the Twenty Twelve theme) and you must have set the “Mobile-compatible” option to “Yes” on the Appearance → Custom Design → CSS page.

  • designsimply · Member ·

    The regular browser version is still doing the random header, which I assume is what it’s supposed to be doing since the CSS you showed me is specific to the mobile theme.

    Correct.

  • designsimply · Member ·

    I noticed there was a little code hint saying “don’t use adjoining classes” next to each class.page_id I was calling.

    You’ve got to go against the warning and do it anyway in this case. :)

  • designsimply · Member ·

    Aha, there’s one more thing you should check, make sure the ” Show header text with your image” option is checked on the Appearance → Header page. The CSS I tested was based on a blog where that option was turned on. If you want to experiment with the CSS and adjust it to work with a different selector (other than using “hgroup”), you could leave that option unchecked and try setting the background on a different page element such as the post title (i.e. “.entry-title”). After that, you would need to experiment with different spacing options (i.e. adjust the pixel values in the examples).

  • kcullinan · Member ·

    I completely understood how you explained the unique page id, and I was able to get all of these except the blog page of the site (for robtco it is the news page http://robtco.wordpress.com/news/ ). This one page did not show a “page id” like the rest of them which is why I was asking. For this page the code was:

    <body class="blog custom-background typekit-enabled custom-font-enabled single-author highlander-enabled highlander-light">

  • kcullinan · Member ·

    Ok. Enabling the “show header text” did indeed produce an image on the mobile theme, so that’s good, thanks. But as is often the case in web dev… by going ‘one step forward’ on that, I went ‘two steps backward’ on some other things. It added a big white space above my navigation where the header text would normally be (I don’t want the header text so I left those blank), there’s also extra white space on the mobile theme. I already have the main navigation margin set to 1px to make it as close to the top of the page as possible, but I think enabling the header text adds too much white space.

    Unless you think there’s a simple fix for minimizing the header area (without deactivating it), I would definitely like to try and see if I can set the background on a different page element as you have suggested (ie – entry title).

    On that note, is there somewhere I can view the original mobile theme CSS so I can see the names of the different elements and classes and such?

  • designsimply · Member ·

    Including specific examples like this one is so helpful! :)

    <body class="blog custom-background typekit-enabled custom-font-enabled single-author highlander-enabled highlander-light">

    Okay, so that’s the posts page, it doesn’t really have an ID number because a bunch of different posts get displayed on that page all at once. Using “.blog” on that page should be unique.

    See how that class list has “blog” whereas the other ones you looked at have “page” instead?

  • kcullinan · Member ·

    Yes! thank you!

1 2
  • The topic ‘twenty twelve random image header not working on mobile’ is closed to new replies.