Change MobilePress Theme – Edit the Colors and Add a Logo

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.

Comments

  1. says

    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.

  2. says

    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!

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

  3. says

    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?

  4. samint says

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

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

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

  6. 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”

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

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

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

  9. says

    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

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

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

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

  12. ken says

    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.

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

  13. EHIMOND says

    Thanks for the tutorials. Trying to change the colour of text and other items but cannot find the directory in my cpanel. After navigating to ./public_html/wp-content/plugins/mobilepress/ there is no folder/item named “System”. Please help, I need to change the colour. Thank you.

  14. vincelee says

    please m tired of downloading corrupt themes>>>>>>pls share me the link from where i can download a genuine sykline theme pleaseeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee am waiting ohhhhhhh

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