WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] JetPack Mobile Theme - Change Color Scheme (11 posts)

  1. saturnus
    Member
    Posted 1 year ago #

    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/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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.

  3. saturnus
    Member
    Posted 1 year ago #

    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 :)

  4. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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

  5. saturnus
    Member
    Posted 1 year ago #

  6. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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);
    }
  7. saturnus
    Member
    Posted 1 year ago #

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

  8. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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/

  9. saturnus
    Member
    Posted 1 year ago #

    submitted a request via the form. :-)

  10. JonPowellDC
    Member
    Posted 11 months ago #

    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

  11. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 11 months ago #

    @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!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.