Now that Sandi and I have finished our "How To Setup a Blog" series at Stamping and Blogging, and I've finished up the 101 Blogging Tips series here at Blogs By Heather, I'm back into giving you what I do best… "how to" tutorials. Have any suggesetions? Post them to my Q&A page – thanks 😀

TypePad Tutorial: Responsive Design

Today's tutorial is on "How to use TypePad's new Responsive Design".  It's not really for me personally as I now use Advanced Templates, have a custom dropdown menu and advanced coding, but I experimented anyway 😀

NOTE: Create a test blog to experiment with!

Instructions

  1. Go to Design.
  2. Click Choose Theme.

    2-ChooseTheme

  3. The responsive theme is actually called Snap.
  4. Then choose a color theme.

    3-SnapColor

  5. You can either click Preview or you can choose to Apply the design and then View Blog.

    7-preview
    It is very simplistic, although TypePad plans on building more themes. And it will scale for all devices.  However, for many they want more "design" elements.

  6. Additionally, you can choose Custom CSS.

    6-CustomCSS
    This is the code (below) to upload a custom banner
    to your theme.

    You should load the banner (image) to your File Manager – then Right-Click on the image to get the URL path. 

    Replace the URL you see in the URL() setting.
    Setup Width and Height to that of your banner. These settings are for my example.

    #banner
    {
    width:970px;
    height:300px;
    background: url(https://heatherporto.typepad.com/BlogDesign-BlogSetup-Banner.png) no-repeat;
    }

    See the Related Links at the bottom of the post for more help in customizing CSS.

  7. Click Save Changes.

    9-ResponsiveDesignBanner

  8. For me, the Blog Title was still showing (where this code works perfectly in Theme Builder). So…..
  9. TypePad Everything, Colleen, gave me a shout out and told me about this code to add to the Custom CSS area to 1. hide the Blog Title and Description (that is needed for SEO) and help the banner scale appropriately as well.

     .container .jumbotron { padding: 0; } .jumbotron { padding: 0; margin-top: 15px; } .jumbotron h1 { margin: 0; } .jumbotron h2 { display: none; } .jumbotron h1 a { background: url(banner.jpg) center top no-repeat; background-size: contain; display: block; left: 0; top: 0; height: 200px; width: 100%; text-indent: -1000em; min-width: 320px; } /* Extra Small */ @media (max-width: 768px) { .jumbotron { height: 90px; } } /* Small */ @media (min-width: 768px) { .jumbotron { height: 140px; } } /* Medium */ @media (min-width: 992px) { .jumbotron { height: 180px; } } /* Large */ @media (min-width: 1200px) { .jumbotron { height: 200px; } } 

  10. Remember to save these last changes as well.

 

Related TypePad Links
on this new theme design:

 

Join Stamping and Blogging!

Guess what? You can now purchase a yearly subscription to Stamping and Blogging! AND you save, getting 2 months FREE!  For those that are currently monthly customers, cancel your current profile, let the month cycle complete and then Subscribe using the new button! Just remember to give me a heads up that you're switching payment plans! Email us at stampingandblogging@gmail.com. Thanks 😀

Pin It on Pinterest