Everything Typepad

Open this post... Just Because

Today is the day to do something just because you want to. Something you may have been putting off or something you never thought about doing.

Because we love our bloggers and cannot wait to meet new bloggers we are offering a Just Because promotion.

Current Typepad Bloggers

We will add a $10 credit to the first 50 bloggers who comment below what they did 'Just Because' along with their Typepad blog URL (promote your blog and help us find your account!).  The credit will be applied to your account before the end of August 2017. This is only for current Typepad Bloggers.

New Typepad Blogger

Your ‘Just Because’ may be to start a blog today! We are going to give you a 30 day free trial with no credit/debit card required. Get started today… Just Because!

When setting up your account use the promo code JUSTBCTYPEPAD. This promo code is only available for Plus and Unlimited plans. You will be asked to enter a credit/debit card after the trial is over.

Make sure to share this great deal on your social media sites! Use the #JustBecauseTypepad to share with other Typepad bloggers or new bloggers! 

Featured Blog: Don't Mess With Taxes

You can count on Death and Taxes….

You can also count on Don’t Mess With Taxes to provide great tax advice and news that is fun and humorous. Key Bell runs a personal finance blog that focuses on taxes, with the goal of helping people reduce their federal and state tax bill. Everyone loves more money! Follow her blog for tax stories, legislation, updates and daily/weekly tax tips. She is a veteran of taxes and Typepad, been a member since November 2005.

Follow: Typepad | Facebook | Twitter | Pinterest | Tumblr

Would you like your blog featured on Everything Typepad?

CSS Tips: 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.

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:

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:

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:

And 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!

Featured Blog: Social Embers

Social Embers is about death and technology. We all leave a digital footprint and Social Embers help to navigate what to do with that digital footprint once a loved one has passed.  Many people in the US and the UK now use social media to communicate. When someone passes it may be hard to go through their physical property; Social Embers provides information to sort through their digital property.  Digital bereavement will be more and more important as those that have grown up in the digital age start to get older and pass. Learn more about what to do to preserve your digital memories for your loved ones from Social Embers.

Follow: Typepad | Facebook | Twitter | Instagram

Would you like your blog featured on Everything Typepad?

CSS Tips: Hide Post Footer Elements

We talk about CSS (cascading style sheets) a lot on Everything Typepad because there are so many ways you can change your blog's design with a snippet of CSS code. We love it when Typepad bloggers reach out to us with design queries and enjoy finding the code for you!

In this quick tip, we are answering a question about how to make small changes to the look of the Post Footer in responsive designs.

If you are using the Design Lab to create a custom, responsive design, you will notice the Permalink and Comments links in the Post Footer have an icon. Maybe you prefer to not include the icon, only text, which can be done with a little CSS.

Here is a look at the Post Footer with all elements:

First, let's hide the icons with some CSS:

.permalink::before { content: none !important; }

.entry-comments::before { content: none !important; }

The result:

If you like the look without the icons, go to Design > Custom CSS, enter one or both lines of code above in the text field, and click Save Changes.

Since you can click the Post Title to go to the individual post page, you may think the Permalink in the Post Footer is unnecessary. With a little more CSS, you can hide the Permalink entirely!

.permalink { display: none !important; }

Most other changes to the Post Footer style can be made at Design > Styles. To change what is displayed in the footer, you can do so at Design > Content for your blog.

Are you looking to make any other design tweaks with CSS? Let us know in the comments, and we can write up another tutorial with the code.

Featured Blog: Kitchen Encounters

From her blog post: Beefy, Cheesy, Fully-Loaded Mexican Tortilla Pizza

This is a caution... Reading Kitchen Encounters will cause you to gain 10lbs. Melanie’s Kitchen is a professional cooking resource operated by Melanie Preschutti, a self-taught chef, experienced cooking consultant, recipe developer, instructor, on-air cooking host/personality and food writer/blogger ... she was actually born a foodie. Melanie is also a member of the IACP (International Association of Culinary Professionals) at the Professional level. Her recipes not only look amazing, but are easy to follow! With over 700 recipes you will find the perfect one to try tonight! 

Follow: Typepad | Facebook

Would you like your blog featured on Everything Typepad?

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.

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:

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:

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.

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.

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:

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!