Once Upon A Chef
Unable to post? Blog loading slowly? We're here to help!

Weekend Project: Style Your Mobile Blog with Basic Templates

You may remember a post we published last month about styling the mobile version of your blog with Advanced Templates. This weekend's project is how to style your mobile blog without Advanced Templates. This is a great tip for those of you who want a custom look for the mobile version of your blog, but don't use Advanced Templates, or only know enough CSS and HTML to get yourself into trouble.

First, let's begin with our test subject--Swoonish. This just so happens to be my personal blog, which I hadn't gotten around to designing the mobile view for yet. (You're helping me be productive when I'd rather be eating pizza, so thanks! :D)

This is what Swoonish looks like in your standard browser, via your standard computer:

image from screencast.com
If I wanted to, I could ignore that not everyone has an iPhone, or other compatible device that (usually) shows you how the blog should look. Unfortunately, I, and the rest of the support staff, are completely aware of the frustration that can come when you're trying to read a blog with an amazing, fully decked-out design, lots of photographs, scripts, and content, that just takes forever to load.

The purpose of this project, then, is to:

  1. retain some aspects of your blog's design so that it's still visually linked to the full version of your blog; and
  2. provide a slimmed-down, content-only (note: post content, not sidebar content) view that is easy to read and browse.

Excited to get started? Me too!

First, let's compare what Swoonish looks like in an iPhone, without accessing the mobile view, to its default mobile styles...

Swoonish - iPhone non-mobile view  Swoonish - iPhone mobile view before CSS changes

The original view isn't bad, though it would be easier to read in landscape mode. When compared to the mobile view on the right, however, the most noticable issues are: it looks nothing like the blog we just came from; and the print is very small.

Before I share with you the exact CSS I used to change the mobile view, and show off the screenshots from the finished result, let's go over a few things about the mobile view that we need to know:

  1. You can access the mobile view of your blog by placing .m between the shortened account URL and your blog folder's name. For example, if your blog was example.typepad.com/blog, you would place the .m like so: example.typepad.com/.m/blog.
  2. You can access the mobile view stylesheet, to see the default styles, by typing styles-mobile.css at the end of your blog's full URL. For example, using the fake URL in the previous item, it would be example.typepad.com/blog/styles-mobile.css.
  3. There are two views you need to focus on primarily, though you may get away with just focusing on styling the front page of the mobile version. Those views are the front page and individual post page of the blog's mobile location. They are almost the exact same, with only minor differences that can cost you a bit of extra time to correct if you highly style the mobile version (ask me how I know).

Here is the outline of the mobile version of your blog's front page:

body

div #container

div #banner
 - div #banner-inner
 -- div #banner-logo
 --- h1 #banner-header
 --- h2 #banner-description

hr.border

div .entry
 - h3 .entry-header
 -- .entry-header img
 - p .entry-body
 - p .entry-footer
 -- .entry-footer img
 --- .entry-footer img a (occurs 3 times: categories, time, comments)

hr.border

div .content-nav
 - .content-nav a (the "read more posts" pagination link)

hr.border

div #footer
 - #footer img
 -- #footer img a (occurs 4 times: categories list, recent comments, about, main)

Note that the number of hyphens reflects the depth level that you'd find that DIV, class, or tag. For example, you would find the "img" tag, for the icon that appears in front of the post title, inside of the DIV tag of the entry-header (post title) class, which is then inside the DIV tag for the entire entry. So, if you wanted to remove that image from appearing in front of any post titles of your mobile view, you would use something like the following:

.entry-header img { display: none !important; }

The items that are different within the code for the individual post are:

div .entry
 - h3 .entry-header
 -- .entry-header img
 - div .entry-content
 -- div .entry-body
 --- .entry-body p
 -- div .page-nav
 - p .entry-footer
 -- .entry-footer img
 --- .entry-footer img a (occurs 2 times: categories, time)

a #comments

div .comments
 - h3.comments-header
 - .comments p
 -- .comments p img
 -- .comments p a

div #atp-comments
 - #atp-comments form
 -- form input #comment-entry-xid
 - #comments-open, .comments-open
 -- h3.comments-open-header
 --- .comments-open-header img
 -- .comments-opens-content
 --- .comments-open-data
 -- #comments-open-footer, .comments-open-footer
 --- input #comment-post-button

Again, the number of hyphens reflects the depth level that you'd find that DIV, class, or tag.

Once I wrote out the main DIVs, classes, and tags, that I knew I could edit if I needed to, I began to make my edits. Thankfully, a good number of customizations I made to Swoonish were things I already knew offhand, so I was able to add them with relative ease. If you use one of the pre-defined themes, or the Theme Builder, you can either grab the blog colors you chose from your settings or view the source of your blog page to find the CSS stylesheet to your blog. Hint: you can use your browser's "View" menu item to select the option to view the source of the page.

Swoonish - iPhone mobile view of front page  Swoonish - iPhone mobile view of front page

In the two images above, you have the top of the mobile view on the left, and the bottom of the mobile view on the right. The Swoonish banner image appears, as does the body background image, and I was able to keep it clean, using the same colors, plenty of spacing, and larger text. I'm pretty pleased with the end result of the front page!

I made a large number of changes for Swoonish, to be honest. I wanted to retain specific aspects of the design, like the banner image, the body background image, the white background color behind the posts, and the link colors. I also wanted to make sure the text was large enough to read without making too many people have to zoom in with their phones. To be even more picky, I didn't want my blog posts to touch the edges of the iPhone browser window, so I had to make sure I padded the sides of the container and that everything lined up.

Swoonish - iPhone mobile post view  Swoonish - iPhone mobile post view

It wasn't until after I finished the changes for the front page of the mobile view did I realize I still had to make changes for the individual posts. Let's just say there were quite a few tweaks to be made after that, but I think they were completely worth it. Besides, now that the bulk of the code is in place, it takes less than a minute to make a tweak and upload the file.

To get started, you'll need to remember the example URL of the mobile stylesheet: example.typepad.com/blog/styles-mobile.css. If you're at all familiar with using the File Manager, you'll know that there is a folder within it that matches the folder name of your blog. The styles-mobile.css file needs to be placed in that folder to override the default style settings.

We'll get to that file a bit later. First, however, let's take a look at what those default styles are:

body { color: #; background-color: #; border: 0; }
#container { background-color: #; border: 0; }
#banner { background-color: #; color: #; text-align: ; border: 0; }
#banner h1 { color: #; text-align: ; }
#banner h2 { color: #; text-align: ; }
hr.border { color: #ccc; }
.entry-header { color: #; text-align: ; background-color: transparent; border: 0; }
.entry-footer, .comment-footer, .trackback-footer { color: #; background-color: transparent; border: 0; }
.comments-header, .comments-open-header, .trackbacks-header { color: #; text-align: ; border: 0; }

A lot of it is empty, leaving it up to the default styles of your computer (or phone) browser to set link and background colors. It's mostly a template for you to use if you want to know the essential items to edit, and is a great place to start. For my blog, however, I wanted to do a lot more than just the essential, which I've already covered.

Want to know the exact CSS code I used to make the changes seen above? It's a thing of beauty if you're a giant CSS nerd like myself (and the rest of the Support staff).

Here is the code I implemented:

/* MAIN CSS FOR MOBILE VIEW */

body {
 background-image: url(http://www.swoonish.com/assets/bg-darkwood.jpg) !important;
 background-color: transparent !important;
 background-repeat repeat !important;
 background-position: top left !important;
 font-size: 110% !important;
 font-family: Helvetica, Arial, sans-serif !important;
 color: #000 !important;
}

a:link { color: #ce0258 !important; text-decoration: none !important; }
a:hover { color: #02c0ce !important; text-decoration: none !important; }
a:visited { color: #ce0258 !important; text-decoration: none !important; }
a:active { color: #02c0ce !important; text-decoration: none !important; }

#container {
 background-color: transparent !important;
 margin: 0px auto !important;
 padding: 0px 15px !important;
}

#banner {
 background-image: url(http://www.swoonish.com/assets/swoonish-logo.png) !important;
 background-color: transparent !important;
 background-repeat: no-repeat !important;
 background-position: 0px 20px !important;
 width: 350px !important;
 height: 130px !important;
 border: 0px !important;
 margin: 0px 0px 10px 0px !important;
}

#banner-inner { border: 0px !important; }

#banner-logo, #banner-header { display: none !important; }

#banner-description {
 overflow: hidden !important;
 width: 0 !important;
 height: 0 !important;
 margin: 0 !important;
 padding: 0 !important;
 text-indent: -2000em !important;
}

hr.border { display: none !important; }

.entry-header {
 margin: 0px 17px !important;
 font-size: 115% !important;
 padding: 0px !important;
}

.entry-header, .entry-header a {
 color: #ce0258 !important;
 text-decoration: none !important;
 font-size: 115% !important;
}

.entry-header img { display: none !important; }

.entry {
 background-color: #ffffff !important;
 padding: 17px 15px !important;
}

.entry-body {
 padding: 0px 18px !important;
 font-size: 105% !important;
}

.entry-footer {
 background-color: #efefef !important;;
 margin: 0px 15px !important;
 padding: 5px !important;
 font-size: 85% !important;
 display: block !important;
 text-align: left !important;
}

.entry-footer img { display: none !important; }

.content-nav {
 text-align: center !important;
 background-color: #333333 !important;
 padding: 10px !important;
 margin: 0px 0px 15px 0px !important;
}

.content-nav {
 color: #ffffff !important;
 font-size: 100% !important;
}

.content-nav a {
 color: #02c0ce !important;
}

#footer { display: none !important; }

/* CHANGES AND TAGS FOR INDIVIDUAL POST ONLY */
#container .entry-header { font-size: 110% !important; }

#container .entry-footer {
 margin: 0px !important;
 padding: 5px 30px !important;
}

.page-nav { font-size: 100% !important; }

.comments, #atp-comments {
 background-color: #ffffff !important;
 margin: 0px !important;
 padding: 5px 30px !important;
}

#atp-comments { margin-bottom: 15px !important; }

h3.comments-header {
 padding: 15px 0px 0px 0px !important;
 margin: 0px !important;
 font-size: 110% !important;
}

.comments p {
 font-size: 100% !important;
 padding: 0px !important;
 margin: 0px 0px 0px 0px !important;
}

.comments p img { display: none !important; }

h3.comments-open-header {
 font-size: 110% !important;
 padding: 15px 0px 0px 0px !important;
 margin: 0px 0px 0px 0px !important;
}

.comments-open-header img { display: none !important; }

#comments-open-data { font-size: 95% !important; }

#comments-open-data dl dt, #comments-open-data dt dd {
 display: inline-block !important;
 float: left !important;
 padding: 0px !important;
 clear: right !important;
}

#comments-open-data dl dd input { margin: 0px 0px 5px 5px !important; }

#comments-open-data dl dd #comment-text {
 width: 50% !important;
 margin: 0px 0px 0px 5px !important;
}

Note: all the CSS lines include the !important declaration. This tells the browser to disregard any other default styles that may be set for that DIV, tag, or class, and listen to the one you tell it to adhere to.

If it looks daunting, don't worry--take it slow! You can take it apart, one piece at a time, and work through it to understand what each piece of code does. Just make sure that each section you copy has a beginning { and an end } so that nothing breaks. You may also want to swap out my blog's specific images for ones of your own, unless you WANT your blog's mobile design to say "Swoonish" all over it. ;)

Tip: keep your CSS in the order they were outlined above so that it's easier to locate a specific section you may need to edit at some future point.

Once you have the styles you want to try out, you need to paste them into a plain text file. This is easily done with either the Notepad (PC) or TextEdit (Mac) programs. Once the code is in either of those, you'll need to save the file as styles-mobile.css and make sure it does not include any other extension (e.g. .txt).

At this point, if you don't already know the folder name of your blog, you will need to locate it at Blog > Settings > Basics.

When you're ready, log into your TypePad account and click to Library > File Manager. Once in the File Manager, click on your blog's folder name. The folder contents will appear and you can use the browse button in the sidebar to select the styles-mobile.css file from your computer. Click "upload" to add the file to your blog's folder, then type in your blog's mobile URL into your browser and/or mobile device.

Make any additional tweaks you deem necessary or strip the whole thing down to only the essentials if you prefer. You can check your mobile blog's design progress by viewing the mobile URL in your non-mobile browser, refreshing between each tweak and file upload.

Finally, when it's completed to your satisfaction, add a link to your blog's navigation bar, or sidebar, to point viewers to the mobile version of your blog.

Remember, though--while these Weekend Projects can be a large undertaking, we really just want you to have fun with them. They're meant to teach, share, and inspire. Regardless of whether you choose to tackle these adventures in sprucing up some part of your blog, we don't want you to feel like you're left all alone to figure it out. So, if you think we've forgotten something, or something wasn't made clear enough for you, don't hesitate or be afraid to ask for help!

comments powered by Disqus