Change MobilePress Theme – Edit the Colors and Add a Logo

Shortlink:

MobilePress is a plugin that gives your WordPress blog a nice looking mobile version. If you got to this site using your computer, I suggest to take a second to see how it looks on your mobile phone before we proceed. I’m definitely sure you like it! It’s fully customized to my taste and it mimics the full version in certain ways. Installing Mobilepress press gives you just a couple of themes to choose from and one thing I love is uniqueness. I love it when my sites look different from others in every way…a distinctive look gives your site an identity. MobilePress makes your wordpress blog look like others but if you really want to change this, follow this simple guide. MobilePress activates a different theme for iPhones and other devices and I think you should set both to default from Dashboard > MobilePress > Themes.

Changing the Theme Colors for MobilePress

To do this, you should know some CSS because you only need to change the styling from the head section of the mobile version. If you don’t have much idea about CSS, there’s still little you can do, OK? I’ll only give you a clue and you should try to figure out the rest. The stuff that control the layout and color of mobilepress is located in this file: ./public_html/wp-content/plugins/mobilepress/system/themes/default/header.php

You need to log in to cPanel and navigate to that directory through your file manager. Open header.php and edit it using the editor in cPanel. Search for this code:

<style type=”text/css”>

The color code for each class is located right underneath that. Don’t know nothing about CSS? Uh…let me see if we can still get some things done. If you scroll down a bit, you should see this

#header { background: #333; border-bottom: 1px solid #ccc; padding: 8px; }

This controls the header. As you can see, the header background color is #333 as shown in the code, right? Changing #333 to #fff gives you a white header background. You should know color codes to get this done and I suggest you check html-color-codes.com for help on that.

You can mess around with other classes and change the colors as you wish. There’s are lots you can change from here: footer, footerwrap, infoblock and so on.

Adding Your Site Logo to MobilePress

You can easily add your site logo to MobilePress directly from the dashboard settings, you still need to log in to cPanel. We’re editing the same file we edited up there, ok? Locate ./public_html/wp-content/plugins/mobilepress/system/themes/default/header.php. Edit the file and find this line of code:

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

Replace it with this:

<h1><a href="<?php bloginfo('url'); ?>"><img src="IMAGE URL HERE" /></a></h1>

Be sure to replace IMAGE URL HERE with your logo URL. You should’ve uploaded this before…you can still use the one on your blog’s full version. Just right-click on it and copy image addresss. I previously wrote a post on how to add google adsense for mobile to mobilepress and yo might want to check it out.

By now, you should have a better looking mobile version of your WordPress blog. There’s still more to do and you can watch out for my next post on MobilePress. If this post helped you, kindly hit th +1 button and if you’ve got a question not covered in the article, the comment box is open.

Filed Under: Wordpress





Author: Don Caprio

Don Caprio is a full time blogger / web designer living in Nigeria and apart from blogging, my other obsession is music. I'm a self-confessed Tupac fan, an iOS lover, an Android user, a Windows 8 power user, a writer with a 5-year old unfinished novel... and the list goes on and on. You can add me on Facebook, follow my updates on Twitter or add me to your circles on Google+! By the way, if your blog needs a custom design, you can contact me here...

Comments

  1. Ogami your boy don appear again o… My mobilepress is not redirecting to the p.c when on mobile… Other questions coming up

  2. Don Caprio says:

    I checked your blog here on my mobile phone, Kingsley, and it redirects fine. I can’t see any problems.

  3. great tip here bro Don, this is actually one of the great features am really missing on blogger. And might be the only reason why i may wanna join the WordPress team.

    • Don Caprio says:

      Blogger may decide this feature (customizing your mobile template) too someday but no one knows how soon that will be.

  4. Short and neatly written…. I am actually looking forward to making good mods/plugin for the mobileview (mobilepress enable sites atleast).. Instead of the code editing which some newbies find hard to comprehend. Thumbs!

    • Don Caprio says:

      That will be much appreciated! The plugin hasn’t seen any major development over the last couple of years though it’s still widely used.

  5. Working now SiR, how can i change te color to green and also add the categories,and footer

  6. ok Boss… How can i change the color to green

    • Don Caprio says:

      You should get the color code for green here – http://www.html-color-codes.com/ – and change it as explained in the article. Please read over again for better understanding. It’s quite simple to implement.

  7. Thanks Doncaprio for this awesome post. A question please. What if i want options such related posts, post navigation and social sharing buttons to display. How will i do?

  8. Charles D'Magnificient says:

    This particular post is giving me headace… I’ll get back to yu if I need more help though… thanks bro

  9. Nwosu Desmond says:

    MobilePress Comments link not working…what could be the problem? any solution?

  10. please i use a mobilepress on y blog but my facebook comment wont show or work. What can i do to make it work?

  11. Nwosu Desmond says:

    check this site out on a mobile plz www.netmediablog.com you cant be able to read the comments

  12. Oluwatobi says:

    Bro i use nazuka as my host but when i wan to acces my filemanager it prompts me to input my accoun password of the blog which i did but its bringing an error please Help

    • Don Caprio says:

      File manager? That should be your hosting account or ftp password. I think you should contact your host directly for help.

  13. Thankx 4 the quick reply abt the public_html i still have prob in editing it plz shed more light step by step

    • Don Caprio says:

      You can download the files and edit them on your computer using notepad. But be sure to make a backup of he original one in case you mess up the design.

  14. Daniel Masetla says:

    Is it possible to add a secondary image below the main header image on mobilepress? if so please advise on how this can be done. i am trying to create an ad space below the main header image so as to attract more advertisers to my blog. an example of this can be seen on the blackberry application “Ubbersocial”

    • Don Caprio says:

      yes, it’s quite possible. You can write the image in HTML and add it to the last line of header.php

  15. Daniel Masetla says:

    Is it possible for you to show me a typical example of this. i am editing from my cpanel directly and wouldn’t want to mess it up in any way. Thank you so far

    • Don Caprio says:

      Since you’re editing just the header.php, you should save it to your computer before editing so you can easily restore it back to it’s original state if something goes wrong. I don’y have a typical example except the one I use here on this blog. Of course, it’s very simple, just follow the guide closely. :)

  16. Daniel Masetla says:

    Hi again. I have re-written the same code, having only changed the image which is meant for the ad space. But the second image is still not displaying. Please be advised that this image is a .gif file. I think i need further assistance on my div tags cause i didn’t change them and left them as they are, cause i am not really familiar with css.

  17. Oyegbenga says:

    Nice post, please Don, A̶̲̥̅♏ having problem making the customizations show on my homepage. And I can’t seems to find how to add navigation bar to my mobilepress here. Please help me. I need to make d customizations show on my homepage and how to add navigation bar. Thanks

    • Don Caprio says:

      I checked your blog just now and saw the customization already. Just write the links in basic HTML and add it to the last line of header.php

  18. hey sir, i just came across your skyline mobilepress theme…. i am still working on tweaking it but just wanted to say thank you… i will update you as soon as am done? the site address is http://thecrackbox.com

  19. Selfmadecash says:

    Thanks a lot bro. This is really helpful. Is there a place where I could get a collection of themes for Mobilepress? I got one from ahmsta but i’m still finding it a little bit technical to fix since it sent back errors asking me to create category.php and adsense.php files. I don;t really know how to do these.

  20. Varun Khanna says:

    Bro i went inside “/wp-content/plugins/mobilepress” but cant find “system” folder there. Instead there’s a folder named “themes” which has a “header.php” inside it. When i opened it i cant find “” you mentioned. Please help. WordPress Version: 3.5.1 & MobilePress Version: 1.2.1.

    • Don Caprio says:

      This post was writtten based on an older version of MobilePress. I guess some things have already changed in the latest version but I haven’t had time to play around with it yet.

  21. Nice one…..i need how to add guest pictures to their comments made, for mobilepress

    • Don Caprio says:

      This theme has that: http://www.doncaprio.com/2013/03/skyline-2-0-customized-theme-for-mobilepress-1-2-and-newer-versions.html

  22. Oga don nice post, I don’t know wp at all but a friend of mine designed a wp site for me, I want to customise the mobile view and also add some plugins to it, how do it? Please help meeee ohhhh.

    • Don Caprio says:

      I’m sorry but since you don’t know WP at all, I’m not sure I can explain all that. Perhaps hiring someone to do that is advisable cuz it’s a bit technical.

Share Your Comments & Feedback:

Please do NOT use keywords in the name field because they won't be linked to anything anyway...just use your real name. Let's try to have a personal and meaningful conversation.

Commenting Note(s):
To insert code into comments, use: [php]code in here...[/php]
Some HTML tags allowed: <strong>, <em>, <del>, etc. (Just don't overdo it, please!)

Current ye@r *