Support » Plugin: Jetpack by WordPress.com » JetPack Mobile Theme – Change Color Scheme

  • Resolved saturnus

    (@saturnus)


    I want to change everything that’s blue to red since my site’s color scheme is red/white so it doesn’t look right atm on mobile having everything blue.

    Where is the CSS file located and is there a reference of everything that would need to be changed? Thank you.

    P.S I think it would be great to offer some color customizations in the next release. 🙂

    http://wordpress.org/extend/plugins/jetpack/

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Contributor Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    Where is the CSS file located and is there a reference of everything that would need to be changed?

    I would recommend that you don’t edit the plugin files, since your changes will then be overwritten with the next Jetpack update.
    Instead, you can check my reply on this thread to learn how to use Jetpack’s Custom CSS module to customize the look of the Mobile Theme.

    ok! i’ll use the custom css. i need to know which divs/classes to target to change the color, like the menu, the speech bubble comment, the “continue reading” the search box, the “older” / “newer” button, etc

    thanks 🙂

    Plugin Contributor Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    You can use your browser inspector to find our the name of all the containers.

    If you change your browser’s user agent to “iPhone” or “Android” you will be able to use your browser inspector to make any changes you want:
    http://i.wpne.ws/PpvE

    Plugin Contributor Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    No, to target the Mobile theme, you’d have to place the .mobile-theme class before each CSS selector, like so:

    .mobile-theme .menu-toggle {
    	color: rgb (240,2,1);
    }
    .mobile-theme #searchform {
    	color: rgb (144,2,2);
    }
    .mobile-theme a {
    	color: rgb (255,0,42);
    }
    .mobile-theme .comments-link a {
    	color: rgb (255,0,42);
    }
    .mobile-theme .nav-previous a,
    .mobile-theme .nav-next a {
    	color: rgb (240,2,1);
    }

    Included this, toggled between mobile theme support, cleared wp super cache, did a hard refresh. Didn’t change anything.

    Plugin Contributor Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    Could you post your site URL here, so I can have a look?

    If you want it to remain private, you can also contact us via this contact form:
    http://jetpack.me/contact-support/

    submitted a request via the form. 🙂

    Please help, I’m in the exact same boat, in that I have tried all the advises changes for mobile theme only to see not one change (I want the mobile theme to reflect the same color scheme — black/white/red — as the regular website). my website is jukeboxdc.com.

    Thanks!

    Jon

    Plugin Contributor Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    @jonpowelldc You can follow this tutorial to learn how to customize the Mobile Theme:
    http://jetpack.me/2013/06/27/customize-mobile-theme/

    If you still experience issues, could you please start your own thread, as per the Forum Welcome?
    http://wordpress.org/support/plugin/jetpack#postform

    Thank you!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘JetPack Mobile Theme – Change Color Scheme’ is closed to new replies.