The Element theme is available for all Pro plans.
With a one-column layout, and sleek design elements, this theme is perfect for a wide variety of blog types. No matter what type of blog you apply the design to, though, you can enjoy the standout features that allow your content to be the real focus.
With the Element theme comes six separate color variations, so your chances of finding a theme that suits your style or color preferences is pretty high! Try out the default green variation, but don't hesitate to preview the blue, sand, gray, metal, and pink variations as well!
Standout Features
- Displays in a one-column layout only, which means your content is the main focus and visitors aren't distracted by sidebar content (sidebar content can still be added, but will appear at the bottom of the blog);
- Uses a subtle herringbone pattern for the banner background image, making it suitable for a wide variety of blog types;
- The wide column is perfect for images, videos, or showcasing your text;
- Set a post to be featured and it'll stand out as a great way to grab your readers' attention (e.g. disclaimer; a slideshow; thumbnails of products you're selling; and so on); and
- Showcases stunning fonts, suitable for a wide range of blog types and content.
Customize this theme
If you are a Pro Unlimited blogger or above then you will be able to customize the theme even further with the Custom CSS feature.
To get started, let's take a look at the color variation CSS for the default (green) version of Element:
/*============ Element Theme // FRAME - DEFAULT============*/
body { background-color: #7AB24D; }
/* All Links - Color */
a { color: #7db828; }
/* All Links - Hover Color */
a:hover { color: #202020; }
/*============ Element Theme // BANNER============*//* Blog Background --------*/
#banner-header {
background: #fff url(http://example.typepad.com/image.jpg) repeat center;
}
/*============ Element Theme // POSTS============*//* Featured Post Container Color */
.entry-featured {
background-color: #202020;
}
/* Featured Post Title - Link */
.entry-featured .entry-header a { color: #ffffff; }
/* Featured Post Body - Font */
.entry-featured .entry-content { color: #f4f4f4; }
/* Featured Post Body Link - Font */
.entry-featured .entry-body a { color: #7db828; }
.entry-featured .entry-body a:hover { color: #fff; }
/*============ Element Theme // PAGINATION============*//* Blog Pagination - Font */
.pager a { color: #333; }
/*============ Element Theme // SIDEBAR============*/
/* Other Accounts - Link Color */
.module-elsewhere .module-list-item a {
color: #7db828 !important;
*color: #7db828 !important; /* force IE */
_color: #7db828 !important; /* force IE */
}
/*============ Element Theme // COMMENTS============*//* Adjust color for Comment Links */
.comments a, .comments-open a { color: #fff; }
/* Change color of links in comment footer */
.comment-footer a { color: #7db828; }
All of the above CSS adjusts the colors for the theme variation. The only item that doesn't involve a hexadecimal is the banner image, but that's addressed below.
To override a specific color, or all colors if you want to completely customize the theme to your preferred colors (branding!), locate the section of CSS that references the area you want to customize. Copy that CSS and paste it into Design > Custom CSS.
Replace the default hexadecimal code (e.g. #7db828) with the hexadecimal color code of your choice, preview, then save your changes.
Replace the default banner with a custom repeatable banner
The default banner in the Element theme uses a repeatable pattern. For this design, we recommend using a repeatable pattern as well since it will require less editing of the CSS involved.
If you use a repeatable pattern, then you can replace the default image with the following CSS:
#banner-header {background: url(http://example.typepad.com/image.jpg);}
You'll need to upload your custom banner image to the File Manager, then replace the example URL with the URL of your uploaded image.
Replace the default banner with a custom height-specific banner
Since the default banner in the Element theme uses a repeatable pattern, using a height-specific pattern will require some additional CSS tweaks.
We recommend you retain a width of 900px. The height is up to you, though we suggest nothing taller than 250px so that the banner doesn't take up the a large portion of the screen when your blog first loads.
In our example below we have an image that is 900px wide by 200px tall.
We're going to use the earlier instructions for uploading our custom image to the File Manager so that we can copy its URL later.
Then, at Design > Custom CSS, we'll add the default CSS, pre-edits:
/*============ Element Theme // BANNER============*//* Blog Background --------*/
#banner-header {
background: #fff url(http://example.typepad.com/image.jpg) repeat center;
}
To it we'll need to make the following changes:
- replace the old URL with the URL of the custom banner image
- add height property to match actual height of custom banner image
- remove all padding for #banner-header so that it doesn't add additional height to the banner area
- set
repeattono-repeat - change
centerpositioning totop center - hide the blog title from appearing on top of the custom banner image
The code for the above changes looks like this:
/*============ Element Theme // BANNER ============*/
/* Blog Background --------*/
#banner-header {
background: #fff url(http://example.typepad.com/banner.jpg) no-repeat top center;
height: 200px;
padding: 0px;
text-indent: -1000em;
}
If you want to make sure that the link for your banner remains intact, then you'll also need to add the following CSS:
/* Set Link Height and Width for Banner */
#banner-header a {
display: block;
height: 200px;
width: 900px;
}For our fixed banner height example above, we've decided to customize the Sand version of Element, then change the Featured post background color. After using the above CSS edits, the result is:
With the above changes you should be able to customize the theme as much as you like. If you find that something is missing, or you aren't clear on a particular step, feel free to reach out to fellow Typepad bloggers in the forums.