Posts categorized "Weekend Projects" Feed

Mobile Themes Rolling Out Of Beta

Mobile Themes Rolling Out Of Beta

Users spend on average 69% of their media time on smartphones. (Source

A mobile responsive site looks professional and shows you care about your reader's experience on your site. Also, Google loves mobile responsive sites. So much so, they are prioritizing sites that are mobile responsive sites in search results.

We are excited to announce we are rolling out our Nimble Themes (mobile responsive themes) from Beta! They will now be available for everyone. We have 19 Nimble Themes for you to make your own. If you do not see the themes right away, you can join our Beta Team

Create A Test Blog

We know you are excited to get started and we've made it as easy as possible to get going. Before you jump in feet first for your main blog, we recommend you create a Test Blog. This will allow you to personalize one of our Nimble Themes before you apply it to your blog. Take your time with all the cool features and apply it when you are ready. No rush!

View Our Nimble Themes

Click on the Blogs tab, then the name of the blog. Click on the Design tab, then Choose Theme. On the left, click on Design Lab (Responsive). Here you will see all our Nimble Themes. Select the one that works best for your blog, then click on Choose.

Customize Your Theme

Style Tabs
Click on a tab to customize

After you have selected your Nimble Theme, click on the Style tab. Here you can customize your blog with your brand colors and fonts. There are many things you change about the design. When you select a color or font it will automatically apply to the preview design of your blog. 

What it looks like when you change the background colors.

 

After you personalize your blog, click on Save Changes.

Apply To Your Main Blog

Once your theme design is complete you can apply it easily to your main blog. Click on the Blogs tab, then click on the name of the blog you want to add the design to. Click on the Design tab. Under Your Design, find the design for your test blog. Click on Actions, then click Apply. Your new design will instantly be applied to your blog. Click on View Blog to see your new mobile responsive blog.

Resources

Below are resources from Everything Typepad and our Knowledge Base.

Make your blog mobile with these great templates!

What Mobile Designs Exist For Me to Use?

How Do I Switch to a Mobile Design?

25 Mobile Design Principles from Google

Nimble Design Lab - Beta

Nimble Design Lab: Applying Fonts - Beta

Nimble Design Lab: Style Settings - Beta

Getting to Know Nimble: Showcase Your Photos with the Highlight Bar

Getting To Know Nimble: Navigation Bar

Getting To Know Nimble: Banners

Getting To Know Nimble: Fonts

Nimble On Different Devices

Mobile Example 2
Mobile Example 2
Mobile Example 2

 After you have updated your blog to our new Nimble Themes, post a link in the comments! We would love to see what you have done! 

 


How To Use Constant Contact To Keep Your Readers Engaged

Typepad and Constant Contact

Keeping your blog posts in front of your readers is important to help them stay informed and up to date. They may not be on your blog or social media sites to see new posts or promotions. A great way to make sure your readers never miss a blog post is to create a sign up list. A mailing list is a great way to stay connected with your readers.

There are many email marketing companies out there and one we recommend and use is Constant Contact. Constant Contact is an email marketing company that helps you create and send professional looking emails to your readers. A great feature they offer is creating a customizable sign up form for your blog. You can customize the sign up form in Constant Contact and either link or embed the form on your blog. If you look to the right, you will see our email sign up button (sign up today!).

Add An Email Sign-Up Form To Your Blog

Typepad Sign Up Form
Join our mailing list!

After you create your sign up form in Constant Contact, you are given multiple choices to display your form. You can create a button, embed your form, or link to your form.

If you choose to embed your form or button; in Constant Contact they will give you code to add to your blog. You can use the Embed Your Own HTML module to add it to your blog's side bar. Click on the Blogs tab, then the name of the blog. Click on the Design tab, then Content. Under Categories, select Widget > Embed Your Own HTML. Click on Add This Module to get a window to add your code. Next to Label give your module a title (Like Newsletter sign up or Join Mailing List) then paste in your code in the HTML box. Click on OK and Save Changes. You will now see your sign up button or embed form on your blog!

When you create your sign up form, you can select to get the URL to your sign-up form. This is a great option if you want to use your own sign-up button (learn to create custom buttons). To add a clickable image to the sidebar of your blog, click on the Blogs tab, then the name of the blog. Click on the Design tab, then content. Under Categories, select Widget > Add A Sidebar Image. Click on Add This Module to get a window to upload your own button image. Next to Target URL, you will paste the URL Constant Contact provides you. Click OK, then Save Changes. Your image is now a clickable link to your sign up form.

You can also add the link to your sign up form on your navigation bar. Click on the Blogs tab, then Design. Click on Content, then next to the Navigation module, click on the pencil. Add a title and then paste in the URL Constant Contact provides you. Click Ok, then Save Changes. Now readers can sign up on your navigation bar. 

Don’t leave your readers hanging after they sign up, Constant Contact also has a Weclome email you can customize. Welcome them to your mailing list by telling them what you will send them and why. Provide your readers with links to your social media sites and encourage them to like and follow. Speak about any promotions that are going on that they may be interested in.

Some other features you have access to if you use Constant Contact.

Autoresponder
Facebook Sign Up Form
Text to Join
Create a QR code for your sign up form

Get started today with Constant Contact with their free 30 day trial. 


CSS Tips: the new beta Image Gallery

The new beta Image Gallery

In light of our new Image Gallery feature that's currently in Beta, here are some CSS tips to get you started on fitting it to your blog's theme and brand.

Before anything, check out our post on the new Image Gallery, covering the features it now has and how to use them. If you're not already a Beta team member, or aren't sure if you are, you can go to Account > Summary to make your changes. You'll also need to be an Unlimited or higher member to take advantage of the Custom CSS feature.

Note: these CSS changes assume that you will be using the same Image Gallery option setups each time you use the feature. The changes will always be applied. If you do not wish for that to happen, then we recommend placing the CSS inside <style> ... </style> tags in the HTML of the post or page.

Default Styles

Some of the default options are to add multiple images, set to a specific thumbnail size that will display in a grid pattern, and adding a title, description, and border. Those options are all selected and the final default result appears in the screenshot below.

default image gallery styles
The theme chosen for this example is a wide 1-column layout, so you're seeing the 2-thumbnail wide gallery aligned to the left in that space.

 

Before we get into the CSS tips, here is a breakdown of the CSS IDs and Classes used for the gallery:

#featherlight-gallery
    fieldset (fieldset.border)
          legend (legend.border)
      .featherlight-gallery
      #gallery-container
          ul.asset-thumbnails
              li.asset-thumbnail
                a

The offsetting shows which IDs and Classes are parents and children, in case you need to make further customizations than what will be done in the example below.

Width and Position

The first change we'll make is to tell the gallery we want it to take up more horizontal space and to always be positioned in the center of the post. Due to the fact that the example uses a wide 1-column theme, we can make use of the empty space the default gallery leaves to the right. To do that, we would use the following CSS:

/* IMAGE GALLERY - WIDTH & POSITION */
#featherlight-gallery, #featherlight-gallery fieldset { width: 90% !important; /* width of gallery */ margin: 0 auto; /* auto margin to center */ }

The above code sets the gallery width to be near 90% (you may need to make it wider or narrower, depending on your blog's width), so it can then have room to be positioned center to any other content you have in the post or page. Here's what that would then look like:

wider centered gallery
CSS for wider gallery and center positioning is applied.

Title and Description

While the default style works well with the new width, we're going to walk you through how to adjust the font and background color of the gallery title, then the positioning of the description.

Considering the color scheme the design we used has, the title may stand out more with a background color. It's also on the small size, so we'll want to make that a tad bigger. Having it automatically capitalized could look nice as well, so we'll go ahead and make that change too.

/* IMAGE GALLERY - TITLE */
#featherlight-gallery legend { font-size: 125%; /* increase font size */ background-color: #ea9f8f; /* change background color */ text-transform: uppercase; /* transform text to all uppercase */ }

With the color and size changes, it may seem too cramped inside the border of the title. We'll add some space to make that look better by adjusting the margin and padding.

/* IMAGE GALLERY - TITLE */
#featherlight-gallery legend { font-size: 125%; /* increase font size */ background-color: #ea9f8f; /* change background color */ text-transform: uppercase; /* transform text to all uppercase */ margin: 0 15px; /* adjust margin to have 15px space on left-right */ padding: 10px 20px; /* add padding to give text breathing room */ }

The description appears a little close to the bottom of the title, so to fix that, we can use the following:

/* IMAGE GALLERY - DESCRIPTION */
.featherlight-gallery { padding: 15px 0 10px; /* increase padding above and below description */ }

Note: some of these font style changes can be done in the editor but, again, we're assuming you want these style changes to be applied to all instances of the image gallery when it's used. If not, just make individual stylistic changes in the compose editor after inserting the gallery images.

Here is what the above changes would look like on the published blog:

Title and Description changes are applied
CSS for title and descriptions changes are applied

Opacity

The final change we'll make will be to change the opacity of the linked images so that they only show their full opacity when hovered on. This allows viewers to focus on a specific image before clicking to see it larger. Here's the CSS to do that:

/* IMAGE GALLERY - DIM IMAGE OPACITY */
#gallery-container ul li a { 
    opacity: 0.5;  /* set linked image to half opacity by default */
    }

/* IMAGE GALLERY - FULL IMAGE OPACITY */
#gallery-container ul li a:hover { 
    opacity: 1;  /* return full opacity on hover */
    }

The first set of code tells the linked image to appear at half opacity, so that it's dimmed by 50%. The second set of code tells it to return to 100% opacity when it's being hovered over. This is what that looks like in the published blog:

Image Gallery OpacityAnd that's it for today's CSS tips! If there's something we didn't cover in this particular article, and you're wondering if it's possible, feel free to leave a comment or open a help ticket at Help > New Ticket. We're always ready to help!


Update Your Security Question

Update Your Security Question

What would you do if you could not get access to your blog???? Do you know your username and password or just rely on the auto-fill  function? While you still have access to your account, it is important to create or update your security questions and answers. This saves you the trouble of verifying a bunch of information to get into your account.

To add or update your security questions, click on the Account tab, then Under Account Information look for Security Questions.  From the drop down you can pick one of our questions or use the custom question option to create your own. You will need to set up two security questions. After you have selected the questions and provide us with the answers, click on Save Changes.

Security questionsThe security questions will be used by Typepad support to verify ownership in case you need help getting access to the account or need private information about your account. 

If you ever need help getting access to your account let us know! You can contact us through our support form or email us at support@typepad.com.


Forward your email to Outlook

Forward your Typepad Email to Outlook (2)

Continuing in our email domain series, we are going to learn how to forward your emails to your Outlook account. After you have purchased your domain and set up your email address, you can forward it to Outlook. For Outlook, you will need the IMAP and the SMTP. We recommend you save this information somewhere safe. You will also need the email address (username) and password for your webmail account.

Reminder: If you misplaced this information you can find it in your domain account. Go to domains.typepad.com and log in. Click on My Account, then under Manage Free Service type in your domain and select Email Services from the drop down. Click on Manage Users/ Accounts, then you click on the email address. Here you will see the mail settings information.
If you forgot your webmail password you can reset it here too. To log into your webmail go to: http://webmail.yourdomain.com (replace yourdomian.com with the domain you purchased). 

The following instructions are for Outlook 2016. The instructions for each version are similar. If you would like specific instructions for the version you have, check out this great post Outlook Email Setup from Microsoft.  After you select the version, click on Other Email Account (or I don’t know).

Let’s get started

Open Outlook 2016. Click on the File tab, then click on Add Account. Click on Advanced Setup, then Manually setup or additional server types. Select POP or IMAP then click on Next. You will be taken to a window to add all your account information.

In the Add Account window, you will enter all the information you saved. Under User Information, include your name and the email address you want to add. Under Server Information, change the Account Type to IMAP and put in the IMAP and SMTP information. Under Login Information enter the email address and password for your webmail account.

OL 3

Click on More Settings. Under the Outgoing Server tab, then select the box for My outgoing server requires authentication. Click on the Advanced tab, change Use the following type of encrypted connection to SSL. This will change the Incoming server (IMAP) port number to 993, that is what you want. Change the Outgoing server (SMTP) port number from 25  to 465, then click on OK. This will take you back to the Add Account Window. 

OL 5

Click on Next to test the connections. Once the tests are successful, click on Close. Last, click on Finish to complete the set up.

If you have a gmail account you want to forward your emails to, check out our post Forward Your Typepad Email To Gmail. If you have an email client you would like instructions for, let us know in the Comments. We would be happy to provide more how-to's. 


Forward your Typepad Email to Gmail

Forward your Typepad Email to Gmail

When you purchase a domain through Typepad you get 2 free email addresses with that domain. To learn how to set up your free emails, check out the "Get an email address with your domain!" post. Once you have successfully set up your email address, you may not want another place to check emails. Here we will walk through how to forward your emails to your Gmail account. 

After you have set up your email address, you are given the POP, IMAP, and SMTP information to configure your account in other email clients. For Gmail, you will need the POP and the SMTP. We recommend you  save this information somewhere safe.  You will also need the Email address (Username), Password and webmail URL. You will need to log into your webmail account because Gmail will send a verification to that email address to complete the set up.

Tip: If you misplaced this information you can find it in your domain account. Go to domains.typepad.com and log in. Click on My Account, then under Manage Free Service type in your domain and select Email Services from the drop down. Click on Manage Users/ Accounts, then you click on the email address. Here you will see the mail settings. If you forgot your webmail password you can reset it here too. To log into your webmail go to: http://webmail.yourdomain.com

Let's get started! 

First, log into your Gmail account and Click on the Cog on the top right, then click on Settings. Click on the Accounts and Import tab across the top (in some versions it is just Account). Next to Check mail from other accounts, click on Add a mail account. In the pop-up,  add the new email address and click Next. On the next page, select Import emails from my other account (POP3) and click on Next.

Here you will add the Username, Password and POP link  you received for your webmail account. We recommend you select Leave a copy of retrieved message on the server. You will have the email in your webmail account and in your gmail account. This is helpful in case there is ever an issue with Gmail servers receiving your email. Then click on Add Account.

Gmail forward 1

You will be asked if you want to send emails from this address. Click on Yes, I want to be able to send mail as (your email address) and click on Next. Enter the name you want to be shown and make sure to check Treat as an alias, then click Next Step.  Now you are asked to configure the SMTP. Enter the SMTP link, Username, and Password to your webmail. Click on Add Account.

Gmail forward 2

An email will be sent to your webmail account to verify. Log into your webmail account by going to http://webmail.yourdomain.com and open the verification email.  Click on the link or get the verification code from that email. After you have clicked on the verification link, you will also be sent an email to your gmail account asking to verify your information.  Once both email clients have verified the accounts, you are all done.

You will start receiving your emails in Gmail and you can send from your new email address as well. If you have not bought a domain yet, what are you waiting for? Purchase your domain through Typepad today!  

You can also forward your emails to Outlook, check out the post Forward your email to Outlook.


Get an email address with your domain!

Email domain

When you purchase a domain through Typepad you also get two free email addresses that use your domain. You can use the webmail services to send and receive emails or you can forward them to a different email address. An email address from your domain has a professional look, it will give your blog and business more credibility.  

Set up your email address

First, you will need to log in to Typepad Domains by going to:

Manage Free Serviceshttp://domains.typepad.com/login.php

Once logged in, you will click on the Welcome tab, then click on My Account. Under Manage Free Services, type in your domain  and select Email Service from the drop down menu. You will be taken to a new page. Under Actions click on New User to create a new email address with your domain. You will need to fill out:

  • Name
  • Desired Email Address
  • Alternative Email Address for important communications
  • Country of User
  • Language of User


Once you have filled out the information you will click on Add User. After you have successfully created your email address you are given a personal webmail URL to check your email and a username and password. Make sure to copy this information and save it in a safe place.

Final successful registration

Next up....

Busy bloggers may not need another place to check email. You can forward your emails to Gmail, check out the post Forward your Typepad Email to Gmail. You can also forward your emails to Outlook, check out the post Forward your email to Outlook.


Customizing the Other Accounts module with your own social icons

In our last theme release we unveiled a customized Other Accounts module, which makes use of the default icon and overrides it with a custom social icon of our choosing.

Custom Social Icons for the Other Accounts module

We created 7 custom social icons for various services, then used CSS to override the Other Accounts module when it is in Grid format. (To add the Grid format, go to Design > Content, then add the Other Accounts module and check the Grid option. Save your changes.)

Here are the icons we created and used:

Facebook_chevronFlickrGoogle+InstagramTypepadPinterestRSS feedTwitter

Want to know more? Then...

Continue reading "Customizing the Other Accounts module with your own social icons" »


Weekend Project: Display Your Recent Pinterest Content In Your Blog's Sidebar

Important Update: We've added a built-in Pinterest widget, which can be added to your blog in Blogs > Design > Content. Read more here. Pinterest has also added easier options for displaying Pinterest content to your blog - we have instructions for that here.

Everyone seems to be talking about Pinterest lately, and for good reason - with Pinterest, you can organize and share all the beautiful things you find on the web, plan weddings, decorate homes, and even organize recipes - visually and socially.

We recently introduced the Pin It button to Typepad blogs, and we even taught you how to embed a pin in a blog post, but if you've ever wanted to display your most recent Pinterest pins on your blog's sidebar, then this weekend's project is for you. Thanks to Typepad blogger Zalary for the inspiration!

This project can be done easily with Basic Templates, and folks at all skill levels should be able to tackle it, so lets get started!

Pinbar

Step 1: Grab the code! Though this project is super easy, the block of code is quite large, so we've placed all of the code you'll need into a handy text file, which you can download right here. ***Note*** Make sure to open this file in plain text! For Windows users, that usually means using Notepad, and for Mac, that usually means using TextEdit. Using a rich text editor or an application like Word can break the code!

Step 2: Next, you'll be looking for a couple of lines of code in the text file, and replacing them with your relevant information. The first section of code to look for includes your Pinterest RSS URL and the number of pins you want to display, which looks like this:

$(document).ready(function () {
$('#pinterest').rssfeed('http://pinterest.com/username/feed.rss', {
limit: 6,
snippet: true,
header: true,
date: false
});

$('.nailthumb-container').nailthumb();
});

You'll need to change the URL there to your own Pinterest URL. To display your latest pins from all boards, use http://www.pinterest.com/USER-NAME-HERE/feed.rss. To show a specific board, use http://www.pinterest.com/USER-NAME-HERE/BOARD-NAME-HERE/rss

The default code is set to display your six most recent pins side by side in your sidebar. If you want to display more or fewer pins, just change limit: 6 to reflect that.

Step 3: The next step is for folks who want to customize the size of the thumbnails to fit perfectly within their sidebars. The default code provided works great for anyone with a 300 pixel sidebar, but if your sidebar is more narrow, you'll need to resize the images and change the padding a bit. Look for this bit of code:

.square {
width: 125px;
height: 125px;
overflow: hidden;
}

Taking into account the 30 pixels of padding that Typepad adds to each column, decide on how large or small you want your thumbnails to be, and update the width and height values, keeping them the same to maintain the proper ratio.

Next, look for this code:

.rssBody li.odd {
position: relative;
color: transparent;
/* overflow: hidden; */
padding-right: 20px;
float: left;
z-index: 1;
}

And change padding-right: 20px; to coincide with however many pixels you subtracted from the thumbnail size. That's it! You're done with code changes.

Step 4: Finally, copy all of the code in the text file (which has now been updated with your changes), and go to Design > Content in your Typepad account. There, click to add an Embed your own HTML module, and paste everything into the box provided. Click OK, then drag the module into place on your sidebar, and save your changes. You're all set! You should now see your most recent pins on your sidebar.

Extras: If you'd like to display a title above your pins, just paste the code into a new Notes TypeList and add that to your sidebar instead of using the Embed module.

You can also display a "Follow on Pinterest" button below your pins, by grabbing the "Follow Button" code from here and pasting it under the code for your pins in the same space.

Want to see the project in action? You can see my most recent pins on the sidebar of my blog, Hello Melanie! And we'd love to see it on your blog, so leave a comment and let us know if you're using it!


Weekend Project: Replace your banner with a fancy image slideshow

This weekend's project is for Basic Templates but because there's Custom CSS involved, you'll need to be at the Pro Unlimited plan to implement it on your blog. Upgrade if you aren't currently taking advantage of the Pro Unlimited plan.

Slideshows are a great way to show off groups of images without taking up a lot of space on a site. They haven't always been easy to set up, though. Fortunately, we have simple code that you can add to your blog via the Advanced area in the Navigation Bar.

Continue reading "Weekend Project: Replace your banner with a fancy image slideshow" »