Need help? Check out our Support site, then


Need Help with Mobile Theme CSS

  1. Hey, everybody.

    I've spent a few hours doing the right thing by looking through the forums for my answer. No such luck however. Here's my issue. By default, the Mobile Theme's foreground color is white and all I want to do is change it to a grey (#1c1c1c). Just so you know, I have a premium account and already figured out how to change the background (border) color...currently green. Oh, and one other thing. I'd like to know how one can inspect elements of the Mobile Theme so I can change other things as necessary. Any help would be greatly appreciated.

    Thanks.

    The blog I need help with is bayareathrowbacktheater.com.

  2. Great questions!

    You can add ".mobile-theme" to the beginning of any selector to make it only apply to the WordPress.com mobile theme. For example, to change the header, main content area, widget area, and footer background to #1c1c1c, you could add this to your Appearance > Customize > CSS editor:

    .mobile-theme #page,
    .mobile-theme #branding,
    .mobile-theme .widget-area,
    .mobile-theme #colophon {
    	background: #1c1c1c;
    }

    Note that you must also have the "Include this CSS in the Mobile Theme" option checked in the CSS panel.

    The Safari browser has a built in way to let you view using a mobile user agent. To turn it on, open Safari Preferences > Advanced and check the “Show Develop menu in menu bar” option. Then open your site in Safari and select Develop > User Agent > iPhone.

    From there, you can use Safari’s web inspector to find CSS:
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

  3. Great answers!

    Thanks so much for the help. The code worked. However there's one last issue. Now that those elements are now grey, the post titles have also become grey...making it quite difficult to read. Is there a way to override the grey text and instead make it white?

    Again, thanks for your help.

  4. I think the post titles were grey before, but now you're just noticing how grey they really were. :)

    Here's an example that will change post titles, post titles that are also links, and widget titles to yellow:

    .mobile-theme .entry-title,
    .mobile-theme .entry-title a,
    .mobile-theme .widget-title{
    	color: #ff0;
    }

    Adjust the color code as needed.

    Note that you may also find other bits of text you want to change along the way. I think the best thing to do is just keep adding content and keep checking the mobile site and check it a few times to make sure nothing else pops up that you may want to change.

  5. Hi,

    The following CSS changes post titles to white on mobile theme:

    .mobile-theme .entry-title,
    .mobile-theme .entry-title a {
        color: #fff;
    }
  6. @designsimply I'm three seconds late! :p

  7. @designsimply I mean minutes. Okay I'll stop.

  8. Ahahahaha. Awesome. :D

  9. Huge thanks to both of you!

    Believe it or not, I was actually doing the research and had just found out how to do it.

    @designsimply, I was wondering which elements "branding" and "colophon" refer to.

  10. "branding" is typically the an ID value used for the header area in a lot of theme designs, and "colophon" is typically used for the footer area.

    One trick you can do to try to help spot where things are is to add a temporary border around them using CSS. For example:

    .mobile-theme #branding,
    .mobile-theme #colophon {
    	border: 1px dashed red;
    }

    A quick check on something like that can come in very handy when working with CSS.

  11. That'll be very helpful.

    By the way, I want you BOTH to know that I've permanently added you to my website's credits...under "special thanks". It's the very least I can do in return. Check it out.

  12. Whoa, @designsimply deserves the majority of the credits here. Thanks for including me too!

  13. hfzrhmn, you may be able to help me a little more.

    I'm currently trying to remove the search field from mobile. Having trouble locating the correct tag.

  14. Guess what? I just figured it out. :)

  15. I take that back. For some reason, both search forms are gone. I want to keep the one above the header and lose the one below the slideshow...but only on mobile.

  16. Give the following a try. It removes the search widget on mobile, but leaves it on the full site.

    .mobile-theme #search-2 {
    display: none;
    }
  17. thesacredpath, sorry for the delay. That did the trick. Thank you, sir.

    All of you have been awesome!

  18. You are welcome.

  19. Hey, team.

    Found a couple more things to change. Been at it all afternoon but can't find the proper tags.

    1. I'd like to change the background color of the drop menu to another color. It's currently white.

    2. In every post, I'd like the date and leave a reply button to fit in-between the movie title and movie photo (under the title, above the photo).

    Any help would be greatly appreciated.

    Thanks.

  20. 1. Add this and edit the color code as desired.

    #access ul.nav-menu.toggled-on {
    background: #CC0000;
    }

    2. Move date and reply button to top below title. (This solution will work as long as none of your post titles go to two or 3 lines since position: absolute has to be used. If the title goes to two lines, it will overlay the date/comment reply link.

    .mobile-theme .hentry {
    position: relative;
    }
    .mobile-theme footer.entry-meta {
    position: absolute;
    top: 30px;
    }
    .mobile-theme .entry-content {
    margin-top: 30px;
    }
  21. thesacredpath, thanks again!

    I actually figured out the first problem on my own...after several failed attempts.

    You knocked the second problem out of the ballpark though. Nice work! Got a question. Is it at all possible to move the reply button to the right...or right-justify it...so that it's not so bunched up next to the date button?

    And what is this? It's at the bottom of your last reply.

    .mobile-theme .entry-content {
    margin-top: 30px;
    }
  22. You know what? Strike that.

    There's no way I can only have one line of text devoted to the title of a movie. Just won't work...but thanks again for your efforts.

  23. If you have an example of a movie title with two lines, you might work with the positioning (margin-top) and space things for two lines and see what things look like with one line. You might be able to find a compromise. Of course if the title then went to three lines... ;-P

Topic Closed

This topic has been closed to new replies.

About this Topic