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:
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
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:
Replace it with this:
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.
Twitter: healthabeHQ
says:
Ogami your boy don appear again o… My mobilepress is not redirecting to the p.c when on mobile… Other questions coming up
I checked your blog here on my mobile phone, Kingsley, and it redirects fine. I can’t see any problems.
Twitter: edi4all
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.
Blogger may decide this feature (customizing your mobile template) too someday but no one knows how soon that will be.
Twitter: ahmsta
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!
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.
Twitter: healthabeHQ
says:
Working now SiR, how can i change te color to green and also add the categories,and footer
Twitter: healthabeHQ
says:
ok Boss… How can i change the color to green
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.
Don Caprio recently posted..Customize MobilePress Theme – Add Thumbnail and Post Summary / Excerpt
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?
Depends on your plugin. Most of the plugins I used display them on Mobilepress automatically
Twitter: techinfomania
says:
This particular post is giving me headace… I’ll get back to yu if I need more help though… thanks bro
Charles D’Magnificient recently posted..Facebook Phone Out Later This Year??
Twitter: mavtrevor
says:
MobilePress Comments link not working…what could be the problem? any solution?
Nwosu Desmond recently posted..How to email chat history in Whatsapp
please i use a mobilepress on y blog but my facebook comment wont show or work. What can i do to make it work?
You have to manually edit the mobile template, I think, but i don’t use facebook comment.
Twitter: mavtrevor
says:
check this site out on a mobile plz http://www.netmediablog.com you cant be able to read the comments
Nwosu Desmond recently posted..How to hide from your friends on Facebook Chat
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
File manager? That should be your hosting account or ftp password. I think you should contact your host directly for help.
Thankx 4 the quick reply abt the public_html i still have prob in editing it plz shed more light step by step
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.
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”
yes, it’s quite possible. You can write the image in HTML and add it to the last line of header.php
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
Daniel Masetla recently posted..1976 Lesson with Professor
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.
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.
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
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
Twitter: justdeen
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
Twitter: xandulyn
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.
Twitter: vkcoolstar
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.
Varun Khanna recently posted..Look At The World Through Google Glass
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.