Academy Theme. Change background color of mobile menu

  • Unknown's avatar
    regisgehlen · Member ·

    I purchase the Academy Theme. I would like change the background of the mobile menu. What’s the CSS code?

    The blog I need help with is: (visible only to logged in users)

  • eurello · Staff ·

    Try the following to target the mobile theme: 

    .menu.mobile-theme {
background-color: #f99734;
}

    Let me know how that works!

  • Unknown's avatar
    regisgehlen · Member ·

    Thanks, I tried it, but the background color has not changed.

  • eurello · Staff ·

    Hi there,

    Ah, ok. Try this: 

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

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

    That’s with red and blue; you can replace the colors as desired.

  • Unknown's avatar
    regisgehlen · Member ·

    Yes, very good! Thanks!

    And, in mobile theme, how can I:

    1- change the blue text font color (in pages, last posts, dates, footer…) ?
    2- change the font of the blog title and the blog subtitle (for example, to 12pt)?
    3- change the color of the post titles?

  • eurello · Staff ·

    For the color of the post titles:

    .mobile-theme .post-title {
color: #666
}

    Edited to add: due to a cut-and-paste error, I had additional CSS here that didn’t apply to your question, sorry about that! I’m still working on how to make the other changes you asked about. :)

  • Unknown's avatar
    regisgehlen · Member ·

    Sorry, I’ve tried it, but the post title has not changed.

  • eurello · Staff ·

    Hmm. Try: 

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

    For the title and subtitle, try: 

    .mobile-theme #branding {
font-size: 14px;
}

    For the continue reading link, try: 

    .mobile-theme .entry.content a {
color: #000;
}

    For the other blue text (date, etc.), try:

    .mobile-theme .entry-meta {
color: #000;
}

    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/

  • Unknown's avatar
    regisgehlen · Member ·

    In Android Chrome, the mobile blog title has changed. Good!
    But the blue text have not changed (inside mobile menu, last posts, dates, pages, calendar, footer…)

  • Unknown's avatar
    designsimply · Member ·

    I can help you get started, then you should be able to follow eurello’s instructions about using Safari to view the site with a simulated mobile user agent and also be able to find the CSS properties needed to make the changes you want.

    In your last reply, you listed several items that have blue text:

    (inside mobile menu, last posts, dates, pages, calendar, footer…)

    It looks to me like you basically want to change the color for all links. If that sounds correct, try using the following CSS and then check to see if it makes the change you were looking for:

    .mobile-theme a,
.mobile-theme a:hover {
    color: red;
}

    Change red to a color code of your choice.

    Here are those instructions again about how to use Safari to view the site with a simulated mobile user agent and also be able to find CSS properties using built in browser tools. When I write CSS for mobile, I check it using this method:

    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/

  • The topic ‘Academy Theme. Change background color of mobile menu’ is closed to new replies.