Don Caprio

Change MobilePress Theme – Edit the Colors and Add a Logo

You are here: Home / Blogging / Marketing / Wordpress / Change MobilePress Theme – Edit the Colors and Add a Logo
Posted by Wale Adekile . Posted on: at .

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.