Need Help with Mobile Theme CSS

  • Author
    Posts
  • #1703623

    cinemunkie
    Member

    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.

    #1703759

    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/

    #1703769

    cinemunkie
    Member

    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.

    #1703792

    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.

    #1703794

    hfzrhmn
    Member

    Hi,

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

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

    #1703795

    hfzrhmn
    Member

    @designsimply I’m three seconds late! :p

    #1703796

    hfzrhmn
    Member

    @designsimply I mean minutes. Okay I’ll stop.

    #1703798

    Ahahahaha. Awesome. :D

    #1703799

    cinemunkie
    Member

    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.

    #1703800

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

    #1703801

    cinemunkie
    Member

    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.

    #1703805

    hfzrhmn
    Member

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

    #1703806

    cinemunkie
    Member

    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.

    #1703807

    cinemunkie
    Member

    Guess what? I just figured it out. :)

    #1703808

    cinemunkie
    Member

    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.

    #1703810

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

    cinemunkie
    Member

    thesacredpath, sorry for the delay. That did the trick. Thank you, sir.

    All of you have been awesome!

    #1703827

    You are welcome.

    #1703847

    cinemunkie
    Member

    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.

    #1703867

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

The topic ‘Need Help with Mobile Theme CSS’ is closed to new replies.