Featured Friday! Rounding up the best TypePad blogs
Chotie Darling

Weekend Project: Style Your Mobile Blog with Advanced Templates

This Weekend Project is for those of you with Advanced Templates, a Pro-Unlimited feature that lets you edit the HTML of your blog's design and layout. You'll need to already utilize Advanced Templates for your blog's design, or be comfortable coding with HTML and CSS in order to successfully create a new design using the Advanced Templates feature.

The Project for this weekend is on styling your mobile blog, by simply using one or two new custom template modules:

  • head-common-extra-mobile
  • footer-extra-mobile

The first module listed above is the key for being able to customize your blog's mobile design. When created, it is automatically inserted into the HEAD of the mobile template. Due to its position within the source code of the mobile design, you can use it to insert CSS to style only the mobile view.

The second module listed above allows you to add additional content below the footer of your blog's mobile design. When created, it is automatically inserted into the mobile template, above the closing BODY tag (e.g. </body>). This module is ideal for adding a link to the full version of your blog, if you so choose.

All TypePad blogs have a mobile location at the /.m/ directory of their blog. For example, you can visit Everything TypePad's mobile version at http://everything.typepad.com/.m/blog/. The /.m/ directory sits behind the main domain of your blog and before the blog folder. If you have Domain Mapping in place, set to point to a specific blog, the domain would simply end with the /.m/ directory (e.g. www.domain.com/.m/).

Note: At this time, mobile versions of TypePad blogs are not auto-detectible. With Advanced Templates, however, you can add the necessary code that will detect, and launch the proper view, when a mobile device views your blog. Use your favorite search engine to find out how!

If you look at the images below, you'll see three different views of the same blog (click to view larger images). From left to right, they are:

  • Full blog design, without the /.m/ directory, as seen on an iPhone 4
  • Default mobile design for all TypePad blogs, with the /.m/ directory, as seen on an iPhone 4
  • Mobile design using custom styles to override the default mobile view, as seen on an iPhone 4
iPhone Default View iPhone Mobile Folder iPhone Mobile Override

As you can see, the design is clean, simple, and retains some small details of the original design so that it is visually linked. The design will also load quickly and efficiently for mobile devices, which is a huge advantage if your full design is is image- or script- heavy.

For the mobile design above, I created the head-common-extra-mobile module at Design > Templates (remember, we're using Advanced Templates!). Within that module, I used the following CSS:

<style type="text/css">
/* Body of the Mobile Design */
body {
 font-size: medium !important;
 font-family: verdana, 'lucida grande', helvetica, arial, sans-serif;
 line-height: 1.5;
 background: #404040;
}

/* Mobile Design Container and Banner */
#container { background-color: transparent !important; }

#banner {
 width: 80% !important;
 margin: 30px auto 0px auto !important;
 padding: 2px 30px !important;
 background-color: #222 !important;
 border-bottom: 1px solid #000 !important;
}

#banner-header {
 color: #ffffff !important;
 margin-top: 0px !important;
}

hr { display: none !important; }

/* Mobile Design Post Content */
.entry {
 background-color: #fff !important;
 width: 80% !important;
 margin: 0 auto !important;
 padding: 2px 30px !important;
 font-size: small !important;
}

.entry-header a {
 color: #078d99 !important;
 text-decoration: none !important;
 text-transform: uppercase !important;
 font-size: small !important;
}

.entry-body {
 padding: 0px 30px !important;
 margin: 0px !important;
}

.entry-footer {
 text-align: left !important;
 padding: 0px 30px !important;
}

.entry-footer a {
 color: #078d99 !important;
 text-decoration: none !important;
 font-size: small !important;
}

.entry-footer img { padding-right: 5px !important; }

/* Content Pagination Link at Bottom of the Design */
.content-nav { padding: 10px !important; }

.content-nav a {
 color: #fff !important;
 text-decoration: none !important;
 font-size: medium !important;
 font-weight: bold !important;
}

/* Tell the Footer to Hide Itself */
#footer { display: none !important; }

/* Navigation Bar links added via the footer-extra-mobile module */
#nav {
 width: 80% !important;
 margin: 0px auto 0px auto !important;
 padding: 0px 30px !important;
 background-color: #222 !important;
 border-bottom: 1px solid #000 !important;
 height: 40px;
}

.nav-list {
 border-top: 1px solid #000000;
 margin: 0px;
 padding: 0px;
 list-style: none;
}

.nav-list-item {
 background-color: #222222;
 border-right: 1px solid #000000;
 display: block;
 float: left;
 padding: 10px 15px;
}

.nav-list-item a {
 text-decoration: none;
 color: #ffffff;
 font-family: verdana, 'lucida grande', helvetica, arial, sans-serif;
 font-size: 14px;
 letter-spacing: 1px;
 background-color: #222222;
 display: block;
}

.last-nav-list-item { float: right !important; border: 0px !important; }
</style>

As noted in the CSS, the navigation section of CSS applies to HTML I added to the footer-extra-mobile module. The code I entered was simply the default code for the navigation bar.

Once the code is saved in their respective modules, the new mobile design at the /.m/ location will begin to show.

Interested in taking on this project for your blog? You can learn more about the entire process for a mobile design by visiting the Knowledge Base.

comments powered by Disqus