How/where to edit mobile css styling??

You can follow the instructions here to customize the mobile theme design:
https://jetpack.me/2013/06/27/customize-mobile-theme/

Let me know if you need more help!

Hi Jeremy,

I would love some more help, thanks very much. I applied the mobile theme as directed by the instructions, but it made no difference. Do you want a screenshot?

I also see the suggestion to use the .mobile-theme class to add more customization, however, I wonder if the problem doesn’t have something to do with the fact that our theme is already fairly mobile responsive. What do you think? The main problem with the “Orange” theme is how it lobs off the right side of the banner in mobile devices, and I wasn’t getting a response from the theme creator. Everything else there looks good, but we can’t keep the partial header. There are more css errors with the Jetpack plugin, but our banner displays correctly.

I looked at the jetpack css files (the ones that don’t warn not to edit them directly!) and I can see that the off colors are there; for example, the default blue menu header color shows up there. I would also need to change the text colors, the extra padding around the banner image, and be able to customize as more of our pages go live.

Which would be more appropriate, in this case? Jetpack css or our theme’s css? (I’m learning as I go through Firebug, tweaking, and seeing what works!)

Thanks,
Nicole

(We also really need to get rid of the comments feature that shows up only in mobile!)

Nicole

Jetpack’s Mobile Theme will indeed completely overwrite your desktop theme on mobile devices. That means that when activating the module, nothing of your theme is left except for custom background (ref) and custom header (ref) if your theme supports them.

You can then customize the mobile theme with some custom CSS. However, I would strongly recommend not to edit any of the Jetpack plugin files (or any other plugin files), as your changes will be overwritten when you update the plugin.
You can’t make the changes in your theme’s stylesheet either, since that theme stylesheet is not loaded when you use another theme, like Jetpack’s Mobile Theme.

You’ll consequently have to use Jetpack’s Custom CSS module to load custom CSS in the mobile theme.

You could, for example, change the background color of the mobile theme header with this CSS:

.mobile-theme .menu-search,
.mobile-theme .search-form #s {
	background-color: #EEB476;
}

(We also really need to get rid of the comments feature that shows up only in mobile!)

The Comment form will disappear if you disable comments on the posts or pages where you don’t want comments to appear. You can follow the instructions here to do so:
https://en.support.wordpress.com/enable-disable-comments/

I hope this helps.

Hi Jeremy, and happy new year! There are a few things I don’t understand, but here is the big one:

Changes can’t be made in my stylesheet, but the edit custom CSS feature is located in the main appearance menu and doesn’t seem directly connected to Jetpack’s theme. So where do changes I make there register?

The reason I’m stuck on this is because I’m learning as I go. Although I basically understand CSS I have no idea what all the right CSS terms are to change individual plugin items. Previously, I’ve used Firefox’s “Inspect Element” feature to find the language for the item I need to change when I get stuck, and tweaking very carefully. If something doesn’t work I’ve had immediate control to revert to previous code. Now, if I can’t mimick coding I can see either in a visible stylesheet or in a browser, I no longer have access to the language I need.

For example, the language you gave didn’t work for me. I know that the language I need to enter probably begins with “.mobile-theme” but should not be followed by “body,button,input,select,textarea” even though that’s probably the first element I need to change the color of. However, I can’t look at comparable language to know whether to begin my edit with a # or a . or a { or whatever else. To make an analogy, I know basic English, and I have all the words to write a complete sentence, but I don’t which order the adjectives, adverbs, nouns, etc. go in, in this dialect. I’m liable to accidentally insult the padding and get myself shot.

Does this make sense? Can you tell me where I can find the “translation” key I’m looking for? I’m working on this on my own but am taking way too long….

Thanks,
Nicole

I hope these pictures will help. Here is a link to a screenshot I just took of the site as it appears on my phone: https://postimg.org/image/8gimd09cn/

As you can see, the color of the menu and search bar is blue, and padding with a white background has been added around the banner image.

Here is a link to our site, where you can view the header without padding, as it should be: https://pdi2015.org/ You can also see that the text here is a dark indigo color, and it should be that color on our mobile site.

Even access to the right coding to make these changes would be a great start and VERY much appreciated!

Nicole

Even access to the right coding to make these changes would be a great start and VERY much appreciated!

Try adding the following code to Appearance > Edit CSS in your dashboard, and save your changes (after making sure the CSS editor options are set to be mobile compatible, on the right of the editor):

.mobile-theme .menu-search,
.mobile-theme .search-form #s {
	background-color: #7c9f48;
	-webkit-box-shadow: 0 0 0 #7c9f48;
	box-shadow: 0 0 0 #7c9f48;
}

.mobile-theme .search-form #s {
	border: 1px solid #7c9f48;
}

Hi Jeremy,

This didn’t really work. It basically made the menu & search bar all one bright blob of color.

If I give you a very short list of specific things I need to change, can you just tell me the CSS to add them? It seems like this would be the easiest thing, but let me know if there’s a better way. (And maybe this will help future users too!)

Here is a list, in order of urgency:

1. CSS to make the search area of the menu a darker shade. (You have given me CSS to make the menu bar a uniform color. I want to make it our shades of lighter and darker green, instead of the lighter and darker blue that are the default.)

2. CSS to make the bottom of the search area line up with the bottom of the menu area. (Currently the CSS you gave makes the search box drop down out of alignment with the menu bar, as you can see in this screenshot: https://postimg.org/image/mgxt56zsr/

3. CSS to remove the white padding around the banner image. (Our main site does not have this, because there is no white padding around the image itself. You can see this here in a non-mobile browser: https://pdi2015.org/ This is something Jetpack seems to be adding, and I need to remove it. It makes our already reduced-size banner even smaller.

4a. CSS to change the color of the drop-down menu bar background, as you can see here: https://postimg.org/image/cluq5e9sb/. It is white; we want to make it green.
4b. CSS to change the color of the drop-down menu bar text, seen at the same link, from blue to yellow.

5a. CSS to change the menu/search-bar text color (from white to yellow, as on the main page.)
5b. CSS to change the content text color. (Currently it is black; it should be dark indigo.)

6. CSS to change the footer background and text colors.

THANK YOU!!! (Everybody here at ASMC thanks you too!)

Nicole

It basically made the menu & search bar all one bright blob of color.

That’s indeed what the code was intended to do. I used your desktop theme’s background color and applied it to the navigation menu.

CSS to make the search area of the menu a darker shade.

Try this:

.mobile-theme .menu-search {
	background-color: #7c9f48;
	-webkit-box-shadow: inset 0 -1px rgba(82, 117, 30, 0.8), 0 1px 3px rgba(82, 117, 30, 0.4);
	-moz-box-shadow: inset 0 -1px 0 rgba(82, 117, 30, 0.8)), 0 1px 3px rgba(82, 117, 30, 0.4);
	box-shadow: inset 0 -1px 0 rgba(82, 117, 30, 0.8), 0 1px 3px rgba(82, 117, 30, 0.4);
}

.mobile-theme .search-form #s {
	background-color: #52751E;
}

.mobile-theme .search-form #s {
	border: 1px solid #52751E;
}

CSS to make the bottom of the search area line up with the bottom of the menu area.

That’s because I had changed the color of the border to green as well. Once you add a second color back, the effect disappears.

You can play with this more by changing the margin and padding values of the search element.

CSS to remove the white padding around the banner image.

This will do the trick:

.mobile-theme #branding {
	padding: 0;
}

.mobile-theme #branding #header-img {
	line-height: 0;
}

4a. CSS to change the color of the drop-down menu bar background, as you can see here: https://postimg.org/image/cluq5e9sb/. It is white; we want to make it green.
4b. CSS to change the color of the drop-down menu bar text, seen at the same link, from blue to yellow.

.mobile-theme #access ul.nav-menu {
	background: #7c9f48;
}

.mobile-theme #access ul.nav-menu a {
color: #f9e363;
}`

<blockquote>5a. CSS to change the menu/search-bar text color (from white to yellow, as on the main page.)</blockquote>

.mobile-theme #access .menu-toggle {
	color: #f9e363;
}

You can’t change the searchform input color, though, as it’s controlled by your browser.

<blockquote>5b. CSS to change the content text color. (Currently it is black; it should be dark indigo.)</blockquote>

.mobile-theme {
	color: #201531;
}

<blockquote>6. CSS to change the footer background and text colors.</blockquote>

The whole footer is in a container with the #colophon id, so you can make all the changes you want by targetting .mobile-theme #colophon.

If you want to make more changes, but are not familiar with CSS, I’d suggest looking at this tutorial:
https://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

Thanks so much! Everything is working great except for two things.

(I know about Firebug but I’m working with elements on a phone- as far as I know there is no such plugin for that. That’s why I haven’t gotten stuck working on this site till now.)

1. The dropdown text is the right color now, but the word “Menu” and the little dropdown triangle are still the wrong color. Can this be edited? (Or is this what you meant by “you can’t change searchform input color?)

2. The .mobile-theme #colophon. code didn’t work. Below is what I tried; what is the correct phrasing?

.mobile-theme #colophon .footer {
background: 7c9f48;
}
.mobile-theme #colophon .footer a {
color: #E4BD20;
}

Thanks again, our mobile site is looking much better!!!
Nicole

Nevermind!

Apparently all I needed to to was click my heels together three times because I had the answer under my nose all along. I found a link that directed me to the correct css to edit, and once I was there and could see everything laid out the logic made sense. I was able to make the remaining edits I needed in about 5 minutes. So happy today, to finally have this done.

If anyone else gets stuck in a similar way I highly recommend checking out some of the tips on this blog: https://topislamic.com/how-to-edit-jetpack-mobile-theme/ (Of course, I made sure to copy-paste the original code into Notepad++ to make sure I had a backup in case of errors.)

Jeremy, thanks again for all your help!
Nicole

If anyone else gets stuck in a similar way I highly recommend checking out some of the tips on this blog: https://topislamic.com/how-to-edit-jetpack-mobile-theme/ (Of course, I made sure to copy-paste the original code into Notepad++ to make sure I had a backup in case of errors.)

I would strongly recommend not to follow any of the recommendations in that post, as they suggest that you should edit the plugin files to make design changes. Editing plugin files is often a bad idea, because all your changes will be deleted when you update the plugin. That’s an advice I would give for just about any plugin, not just Jetpack.

Instead, you can place custom CSS in the custom CSS editor, as I suggested above. All the Custom CSS code I posted earlier can be pasted under Appearance > Edit CSS in your dashboard, will work just fine, and won’t disappear when you update Jetpack.

(I know about Firebug but I’m working with elements on a phone- as far as I know there is no such plugin for that. That’s why I haven’t gotten stuck working on this site till now.)

Google Chrome includes a mobile device emulator; that’s what I used to test all the CSS I gave you earlier. Here is how it looks:
https://i.wpne.ws/ZJWQ

You can read more about it here:
https://developer.chrome.com/devtools/docs/device-mode

1. The dropdown text is the right color now, but the word “Menu” and the little dropdown triangle are still the wrong color. Can this be edited?

This can indeed be edited with custom CSS.

2. The .mobile-theme #colophon. code didn’t work. Below is what I tried; what is the correct phrasing?

I see you used .mobile-theme #colophon .footer . .mobile-theme #colophon should be enough, as there isn’t any container with a class of .footer inside #colophon.

I hope this helps.

Hello..

Can you please help me get the custom header which shows on the desktop version on my jetpack mobile version of my site?

https://www.teccarpetcleaning.com

What code do I enter in the CSS section?

Any help is greatly appreciated, thank you!

@teccarpetcleaning I replied in the thread you started here.