Posts categorized "Features" 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! 

 


Out of Beta: Easily Add and Upload YouTube Videos to Posts and Pages

YouTube Roll out banner

We are so thrilled to announce that all Typepad subscribers should see the new option to add and upload YouTube videos directly to their post.  With the brand new Image Gallery's recent release, that's two great new Typeapad features in just a few weeks!

To recap, this lets you both upload your videos directly to your own YouTube channel and add them to the post and also search YouTube to add other videos to your posts.

First we'll cover uploading your own videos.

To start, click the Upload Video to YouTube button to switch to upload mode.  You should see it here:

Uploadvideo
You're on your way to uploading your video!

If you are not already signed in to a YouTube account, you will be prompted to sign in to Google. You will also be asked to choose which YouTube account to use if you have multiple YouTube accounts associated with your Google account.

After doing that, simply click the Browse or Choose File button to locate the video file on your device and open the file. YouTube supports the following video formats: .MOV, .MPEG4, MP4, .AVI, .WMV, .MPEGPS, .FLV, 3GPP, WebM

Now just click the Upload Video button. It may take some time for the video to finish uploading. Once done, the progress bar will reach 100% and the video thumbnail will appear when the video upload is complete. You can now add a Title and Description which will display at YouTube.

Click Insert and Close to embed the video in your post or page after the upload is complete. Easy as pie!

Now we're going to show you how to search for videos and add them directly that way. Here's the section where you do this:

Searchvideo
Finding a video for your post.

To search for your own YouTube videos, click My Videos, select the video you wish to embed, enter a title, and click Insert and Close.

To search for any public YouTube video to embed, enter the search terms, select the video to embed, edit the title (optional), and click Insert and Close.

What do you think of this new feature?  Is there anything else you'd wish we had included or done differently?

Have any questions, want to give us some feedback, or need more help? As always, the Typepad Support team is here for you!


Out of Beta: A Brand New Image Gallery

Image Gallery Beta Roll Out (1)

We're so very excited to announce that the brand new Image Gallery has rolled out of Beta and is now available to all of our subscribers!

To quickly recap, with this feature you can now add image galleries to you posts and Pages.  There are several options for the galleries, like adding a description and choosing row and column sizes, that allow you to find the perfect way to showcase your photos.

Gallery_exampleCreate your own by going to the Compose editor and clicking the Insert Image button.  You can read more about using the Image Gallery in our Knowledge Base.

We hope you love this feature as much as we do!  Please let us know any feedback you may have either in the comments section here or by opening a help ticket.


Rolling Out of Beta: Easily Add and Upload YouTube Videos to Posts and Pages

YouTube Roll out banner

A month ago today, we released to our Beta Team a brand new feature making it a snap to add and upload YouTube videos to your blog post.

We're happy to announce that this has started to be released to all of our subscribers. Some of you will already see this feature on your Compose page.  Just look for the little YouTube icon.

As a quick reminder, you'll now be able to search for your own and any other YouTube videos and add it to your post with just a click of your mouse.  You can also upload your own videos from your computer to YouTube and then add them to your post. You can read more about these features here.

We'll be continuing to roll it out to our members, so you should see it in your own options soon, if you don't already.  If you'd rather not wait, you can join our Beta Team now.

We hope you love this feature as much as we do!  Please let us know any feedback you may have either in the comments section here or by opening a help ticket.


Rolling Out of Beta: A Brand New Image Gallery

Image Gallery Beta Roll Out

Back in August, we released a brand spanking new version of the Image Gallery.

We've been fine-tuning it based on member feedback and our own testing and we're excited to announce that we're rolling it out of Beta! As of right now, 25% of our members will see this new feature in their account, even if they're not Beta.

To give you a quick recap, this feature lets you create beautiful image galleries to highlight the images in your blog. You can see an example here:

Gallery_example

There are multiple options allowing you to find just the right one for your blog's photos.  We have more information on this in our Knowledge Base.

We'll be continuing to roll it out to our members, so you should see it in your own options soon.  If you'd rather not wait, you can join our Beta Team now.

We hope you love this feature as much as we do!  Please let us know any feedback you may have either in the comments section here or by opening a help ticket.


New to Beta: Easily Add and Upload YouTube Videos to Posts and Pages

In today's day and age, we're all taking videos or finding videos online that we want to show people.  Typepad has now made it easier than ever to add videos from YouTube to your posts and Pages with our new YouTube Video feature.

The feature lets you both upload your videos directly to your own YouTube channel and add them to the post and also search YouTube to add other videos to your posts. This is currently only for our Beta Team members, so if you don't see the option, be sure to join.

First we'll cover uploading your own videos.

To start, click the Upload Video to YouTube button to switch to upload mode.  You should see it here:

Uploadvideo
You're on your way to uploading your video!

If you are not already signed in to a YouTube account, you will be prompted to sign in to Google. You will also be asked to choose which YouTube account to use if you have multiple YouTube accounts associated with your Google account.

After doing that, simply click the Browse or Choose File button to locate the video file on your device and open the file. YouTube supports the following video formats: .MOV, .MPEG4, MP4, .AVI, .WMV, .MPEGPS, .FLV, 3GPP, WebM

Now just click the Upload Video button. It may take some time for the video to finish uploading. Once done, the progress bar will reach 100% and the video thumbnail will appear when the video upload is complete. You can now add a Title and Description which will display at YouTube.

Click Insert and Close to embed the video in your post or page after the upload is complete. Easy as pie!

Now we're going to show you how to search for videos and add them directly that way. Here's the section where you do this:

Searchvideo
Finding a video for your post.

To search for your own YouTube videos, click My Videos, select the video you wish to embed, enter a title, and click Insert and Close.

To search for any public YouTube video to embed, enter the search terms, select the video to embed, edit the title (optional), and click Insert and Close.

For our non-Beta users, we'll be releasing it soon, but we urge you to give the Beta Team a try in the meantime.

What do you think of this new feature?  Is there anything else you'd wish we had included or done differently?

Have any questions, want to give us some feedback, or need more help? As always, the Typepad Support team is here for you!


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!


New to Beta: A Brand New Image Gallery

We here at Typepad love taking pictures and showing them off to friends and family, so we know that you must love it too!

To make showing your images off a better experience, we've completely updated the Image Gallery, a feature currently available to our Beta Team. This will allow you to put your best foot forward and make a great impression with your blog's photos.

Gallery_example
An example Image Gallery.

To get started, you'll notice the following pop-up when you insert an image, select Edit, and then the Image Gallery option on the Compose Page:

Image_insert
The new Image Gallery image insert.

The first thing you want to do is choose your Thumbnail Size.  This will be the size of the image that is displayed on your blog.

Images added to your Image Gallery will be placed in a grid format (unless you check the Scroll Gallery box, but more on that in a minute), so you'll want to choose your Gallery Width.  This is how wide the Image Gallery will be when displayed on your blog.

Typepad will automatically offer only the number of image options that will fit on your blog's design, so no need to worry about images fitting the gallery.  For example, if you choose the 75 pixel thumbnail size, you'll be able to fit more images in a row than if you choose the 250 pixel thumbnail size, so there will be more choices for 75 pixels than 250 pixels.

You can check the first box to add a border around your Image Gallery.  If this remains unchecked, no border will be added.

Next, you can choose if you'd rather have one line of images for your Image Gallery instead of the grid format.  Checking Scroll Gallery will result in an Image Gallery that looks like this:

Scroll_gallery
An example of a scrolling Image Gallery.

Your readers can then use the scroll bar to see more images in your Image Gallery.

We know that there are times you'll want to edit an Image Gallery to make changes like adding more images, deleting an image, or other adjustments.

To do this, simply click your cursor on an image in the Image Gallery and then click the Insert Image button again. When you do, you'll see the Image Gallery pop-up from earlier, containing the options you've chosen previously. You can pick different ones and save your changes. You can also insert additional new images at this time.

You'll notice one other new option when clicking on an image and clicking the Insert Image button.  When you do this, you can now add a title and an alt-image description for the image. The title will be displayed under the pop-up version of your image when your readers click on the thumbnail on your blog.  The alt image description will only be seen if the images do not load.

Insert_edit
The new image options when editing your Image Gallery.

Double clicking the image will open up the familiar Aviary image editor to make changes to the image's rotation, filter, and more.

Another way you can edit your Image Gallery is by dragging and dropping the images into a new order within the Image Gallery itself.

To do this, click once on the image you want to move within the gallery. You'll see a grey bar appear underneath the image once it's been selected and clicked on. Use this bar to grab the image and move it to its new location.

Grey_bar
The grey bar indicates the image has been selected.

When your readers click an image to view within your Image Gallery, this is what they'll see:

Image_popup.com_footer_.com_foote
An example of an Image Gallery pop-up.

To move to the next or previous image, readers can click the arrow to the sides of the image or the left and right arrow keys on their keyboard. When they reach the final image, they'll be taken back to the first one.

If you'd like to display different colors for the arrow background and/or arrow itself, our Pro Unlimited subscribers can use the Custom CSS feature to do so.  Our Knowledge Base article has example code you can edit and use on your own blog. You can upgrade your plan at any time to begin using Custom CSS.

For more information on the Image Gallery itself, please read our Knowledge Base article.

And there you have it! We love our image gallery makeover and we're sure you will too! Since this is a Beta Team feature, if you want to see it right now, you'll need to join our Beta Team. That will give you immediate access to this and other Beta Team features.

For our non-Beta users, we'll be releasing it soon, but we urge you to give Beta a try in the meantime.

What do you think of its changes?  Are there any features you'd wish we had included or done differently? We also want to see your Image Galleries, so please leave links in the comments so that both us and your fellow Typepad community can take a look!

Have any questions, want to give us some feedback, or need more help? As always, the Typepad Support team is here for you!


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.