nicolaluna

All set!

Thank you Baden, this makes perfect sense! ??

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

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

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

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

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

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

Nicole

Bump! Anyone? I’m getting no responses anywhere….

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

Hello Leah,

Thanks very much, and sorry for my delay in replying! I’ve been delayed by some other issues updating our site.

In terms of getting what we need, if I understand you correctly, we’d need the Events Calendar PRO widget to display the calendar in month view in a sidebar, and then we’d need the Filter Bar widget to filter out categories of events. That might work, but I’m not the one holding the credit card in this office. ??

So just to clarify, say we started with 1 year of support on one site, for both. Would we be paying $65 for each, a $130 total? And is there any guarantee window- for example- if I tried plugging it in and it didn’t do what I thought it should, could we get our money back?

Thanks much!
Nicole

Hi Viktor,

Thanks very much. I think a lot of our code will “break” if we do that, and it may require a lot of work before we can manually upgrade. (Which is apparently why it hasn’t been done just yet!)

Thanks again! I’ll letcha know if we have more questions.
Nicole

Figured this out. Apparently can’t delete. Thanks anyways!