Posts categorized "Weekend Projects" Feed

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:

    fieldset (fieldset.border)
          legend (legend.border)

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:

#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.

#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.

#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:

.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


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:

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

#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

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 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: (replace 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 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:

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 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 Services

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!


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('', {
limit: 6,
snippet: true,
header: true,
date: false


You'll need to change the URL there to your own Pinterest URL. To display your latest pins from all boards, use To show a specific board, use

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" »

Weekend Project: Automatically add a custom signature to each post

Important update: We've added a built-in Signature Module, which will allow you to add content to the end of each blog post automatically. 

Note: This project uses the Custom CSS feature, which is available to subscribers on the Pro Unlimited plan and above.

Today's project is all about adding a personal touch to each of your posts - without having to do any extra work. We're going to show you how to use the Custom CSS feature to automatically place a custom signature to the end of each post. You can use a scan of your actual signature or an image created with an image editing program.

Here's an example of how your posts will look when we're done.

custom signature
First, you'll need an image. It should be reasonably sized - not too large, since it's just a little personal touch, not a full-on design element. It can just be your name, a small icon or logo, or a little greeting. Either way, it should be personal and unique to your blog.

Save the image as a PNG, GIF or JPG and upload the file in Library > File Manager. Click the name of the file to open it in your browser. Leave that open - we'll need the URL for the image shortly.

The image will basically just be the background for each post, aligned to the bottom. First, we need to create some space for the image. In Blogs > Design > Custom CSS, add the following:

.entry-content {
padding-bottom: 75px;

You'll need to adjust the padding to accomodate your image, plus a bit of space for padding. So if your image is 70 pixels tall, you could make the space 90 pixels to accommodate it.

Now, we'll add in the code for the image, like this:

.entry-content {
padding-bottom: 75px;
background: transparent url( bottom left no-repeat;

That places the image at the bottom of the post, aligned to the left. You can also align it to the center or to the right.

Finally, you may wish to add some space right below your image and above the post footer, like this:

.entry-content {
padding-bottom: 75px;
background: transparent url( bottom left no-repeat;
margin-bottom: 10px;

That's it! When you view your blog, you should see your special image at the end of each post.

Have a great weekend and happy blogging!

Weekend Project: Display Your Photos from Instagram

If you're already using Instagram, you know how fun and addictive it is. If you're not, then all you need to know is that it's a bit like Twitter but for images. You snap a photo on your iPhone (Android users will get Instagram soon!), upload it to Instagram and the app shares the image across your social profiles like Twitter and Facebook.


But you don't just upload and share your images, you can also apply really awesome filters that make your pics look much more vibrant and interesting. A picture of your yummy dessert just looks better when you apply one of Instagram's moody filters.

So now you're hooked on Instagram and you're shooting and sharing with friends and family. What if you want to display those images somewhere on your blog?

That's what today's tutorial is all about. We're going to offer two ways for you to automatically post those images onto your blog's sidebar. Once you have it set up, the images will automatically update as you add more to Instagram. Presto!

The first option is super easy. Just go to SnapWidget and scroll down to enter your Instagram username. From there, you can enter in a specific hashtag to pull from, thumbnail sizes, and so on. There's a preview feature so you can see how your images will look before grabbing the code.

You can add the code to your sidebar via a Notes TypeList or the "Embed your own HTML" module in Blogs > Design > Content. We have more details in our Knowledge Base. Below is an example of how SnapWidget looks on a real blog.


The second method is a bit more complicated but allows for more control over the thumbnail size that shows in your sidebar. You'll use your Instagram RSS feed, a service that will convert that feed to JavaScript, and some Custom CSS to style the thumbnail.

Continue reading "Weekend Project: Display Your Photos from Instagram" »