WordPress.com Forums » Tag: minileven - Recent Posts

designsimply on "Custom Mobile Theme"

designsimply — Tue, 30 Apr 2013 23:49:49 +0000

Yes. First, go to the Appearance → Themes → Customize → CSS panel and select the option that says, "Include this CSS in the Mobile Theme." Then add the following custom CSS:

.mobile-theme .menu-search {
    background: #f00;
}

.mobile-theme .search-form #s {
	background: #00f;
	border: 1px solid #000;
}

I used red, blue, and black for the color codes. You should change those values to color codes you choose before saving the custom CSS changes.

borjaduran on "Custom Mobile Theme"

borjaduran — Thu, 25 Apr 2013 09:09:24 +0000

Hi,

Is it possible to change the color of mobile theme menu? By default is blue and I would like to change it.

Thanks in advanced!

kcullinan on "twenty twelve random image header not working on mobile"

kcullinan — Thu, 07 Mar 2013 21:29:30 +0000

You are truly a Happiness Engineer! That is perfect!

designsimply on "twenty twelve random image header not working on mobile"

designsimply — Thu, 07 Mar 2013 21:26:11 +0000

Hmm, also, if that hides it in the mobile theme, you can use this to add it back:

.mobile-theme .site-header h1 {
	display: block;
}

designsimply on "twenty twelve random image header not working on mobile"

designsimply — Thu, 07 Mar 2013 21:25:30 +0000

Or you could completely hide the site title container in normal views:

.site-header h1 {
	display: none;
}

kcullinan on "twenty twelve random image header not working on mobile"

kcullinan — Thu, 07 Mar 2013 21:10:50 +0000

This is working out very very nicely! Thanks for your help today.

I have the mobile theme working pretty well, now I just need to figure out how to close the gap at the top of the regular browser version. I'm thinking there must be a way to change the height of that area to 1px...

designsimply on "twenty twelve random image header not working on mobile"

designsimply — Thu, 07 Mar 2013 20:22:56 +0000

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?

Good question! Here's a link to the mobile theme stylesheet:
https://s1.wp.com/wp-content/themes/pub/minileven/style.css?minify=false

designsimply on "twenty twelve random image header not working on mobile"

designsimply — Thu, 07 Mar 2013 20:11:27 +0000

Unless you think there's a simple fix for minimizing the header area (without deactivating it)

Did you try changing the height value?

kcullinan on "twenty twelve random image header not working on mobile"

kcullinan — Thu, 07 Mar 2013 20:11:14 +0000

Yes! thank you!

designsimply on "twenty twelve random image header not working on mobile"

designsimply — Thu, 07 Mar 2013 20:10:08 +0000

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

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 on "twenty twelve random image header not working on mobile"

kcullinan — Thu, 07 Mar 2013 19:21:03 +0000

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?

kcullinan on "twenty twelve random image header not working on mobile"

kcullinan — Thu, 07 Mar 2013 19:04:23 +0000

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:

designsimply on "twenty twelve random image header not working on mobile"

designsimply — Thu, 07 Mar 2013 18:24:18 +0000

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

designsimply on "twenty twelve random image header not working on mobile"

designsimply — Thu, 07 Mar 2013 18:17:20 +0000

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 on "twenty twelve random image header not working on mobile"

designsimply — Thu, 07 Mar 2013 18:16:46 +0000

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 on "twenty twelve random image header not working on mobile"

designsimply — Thu, 07 Mar 2013 18:15:20 +0000

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 on "twenty twelve random image header not working on mobile"

designsimply — Thu, 07 Mar 2013 18:13:42 +0000

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 on "twenty twelve random image header not working on mobile"

designsimply — Thu, 07 Mar 2013 18:09:38 +0000

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:

The "page-id-96" class is unique to this page.

kcullinan on "twenty twelve random image header not working on mobile"

kcullinan — Thu, 07 Mar 2013 16:46:11 +0000

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;
}

kcullinan on "twenty twelve random image header not working on mobile"

kcullinan — Thu, 07 Mar 2013 15:47:28 +0000

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

kcullinan on "twenty twelve random image header not working on mobile"

kcullinan — Thu, 07 Mar 2013 15:45:07 +0000

This is fantastic, thank you!

I did make my banners the specific size for this theme 960x250. 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!

designsimply on "twenty twelve random image header not working on mobile"

designsimply — Thu, 07 Mar 2013 15:39:37 +0000

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.

designsimply on "twenty twelve random image header not working on mobile"

designsimply — Thu, 07 Mar 2013 15:37:53 +0000

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:

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.

kcullinan on "twenty twelve random image header not working on mobile"

kcullinan — Thu, 07 Mar 2013 14:25:31 +0000

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 on "twenty twelve random image header not working on mobile"

designsimply — Wed, 06 Mar 2013 22:49:23 +0000

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 on "twenty twelve random image header not working on mobile"

kcullinan — Wed, 06 Mar 2013 20:12:55 +0000

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 on "twenty twelve random image header not working on mobile"

designsimply — Wed, 06 Mar 2013 20:00:35 +0000

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 on "twenty twelve random image header not working on mobile"

kcullinan — Wed, 06 Mar 2013 18:19:52 +0000

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

designsimply on "Disable Widgets In Mobile Version"

designsimply — Fri, 30 Nov 2012 03:26:32 +0000

You can target the mobile theme using CSS selectors that begin with ".mobile-theme" and you must also have the mobile theme enabled in Settings → Mobile and check the option that says "Apply this CSS to the Mobile Theme" on the Appearance → Custom Design → CSS page.

timethief on "Disable Widgets In Mobile Version"

timethief — Wed, 31 Oct 2012 23:20:24 +0000

I don't help with CSS editing. I was just curious is all. :)