The Scene theme is available for all Pro plans.
There are four variations of the Scene theme:
Each variation shares a number of design elements--namely, the blog width and positioning of specific sections (e.g. the navigation bar sits above the banner image). Where each theme varies is in the banner image and color palette. The overall clean and modern look of Scene provides an attractive look for a wide variety of blogs.
Standout Features
The Scene themes have several common features that make the set stand out from other available themes.
- Navigation bar appears above banner image
- Blog title and description sits below banner so it doesn't obscure the banner image
- Blog Footer is styled to work best as a content-rich footer with the use of the Advanced field
- Optimized for mobile viewing (mobile devices will see a slimmed down version of the blog, showing only the navigation, banner, blog title, and blog posts)
With the Pro Unlimited and higher plans you can use the Custom CSS feature to make adjustments beyond the defaults set for the Scene theme, including:
- Add a custom banner
- Hide blog name and description
- Change the background color
- Change the accent color
- Change font size and style
- Adjust column widths
- Change the blog footer
Making adjustments like the ones shared in this article are a great way to tweak a design to make it fit your needs.
Add a custom banner
If you like the general layout and look of the Scene themes, but want to try using your own custom banner image, we recommend following the instructions below to learn how to successfully make that change.
Banner Size
When you create your custom banner image, you'll need to make certain that it is the correct size to fit the theme. The size for the banner image, if you want it to perfectly replace the original image, should be 1000px x 200px.
If the banner image you create is the exact size specified above, then you can upload your image to the File Manager within your account. Once uploaded, click on the file name and then copy the URL of the image from your browser's address bar.
The URL should be formatted similar to:
http://example.typepad.com/banner_image.jpg
With the image URL copied, go to Design > Custom CSS, then add:
#banner {
background: transparent url(http://example.typepad.com/banner_image.jpg) !important;
}
The !important declaration will make certain that your change overrides the default banner image.
Troubleshooting Tip
Problem: My image isn't centered over the blog!
Answer: If the image isn't centered over the blog, then the size of the banner image you uploaded wasn't correct. Try recreating, or resizing, your banner image so that it's exactly 1000px wide and 200px tall, then follow the steps for uploading and adding the image again.
Hide blog name and description
If you have included the blog name &/or description within your custom banner image, you may want to hide the blog name description. At Design > Custom CSS, you can add the below CSS to prevent the blog title and description from displaying:
/* Hide Blog Name and Description */
#banner-inner { display: none; }
/* Set height of banner image; reduce bottom padding to counteract removal of banner-inner */
#banner { height: 200px; padding-bottom: 0px; }
/* Remove gap between banner and blog content */
#pagebody { margin-top: 20px; }
Change the background color
The Scene themes are set to have a dark gray background color. If you would like to change the color to something else, and know the hexadecimal color code for your preferred color choice, you can use the Custom CSS feature to make that change.
If you don't know the hexadecimal color code (e.g. #FFFFFF is the hexadecimal code for white), then we recommend using your preferred search engine to search for "hexadecimal color chart." One such site is the W3Schools' HTML Color Chart.
Once you have the color code, go to Design > Custom CSS in your blog, and add the following:
body { background-color: #FFFFFF; }
Replace #FFFFFF with your preferred color's hexadecimal code.
Change the accent color
The light gray in the Scene theme--seen behind the navigation bar, blog title and description, and post footer--is referred to as the accent color. If you want to change the accent color to something more fitting for your tastes, then you will need to use the Custom CSS feature and know the hexadecimal color code for the color you want to apply.
If you don't know the hexadecimal color code (e.g. #FFFFFF is the hexadecimal code for white), then we recommend using your preferred search engine to to search for "hexadecimal color chart." One such example is the W3Schools' HTML Color Chart.
Once you have the color code, go to Design > Custom CSS in your blog, and add the following:
/* Changes to Accent Color for Navigation Bar */
#nav {
background-color: #FFFFFF !important;
}
/* Changes to Accent Color for Blog Title and Description */
#banner-inner {
background-color: #FFFFFF !important;
}/* Changes to Accent Color for Post Footer */
.entry-footer p {
background-color: #FFFFFF;
}
Replace #FFFFFF with your preferred color's hexadecimal code.
Change font and font size
The default fonts set for the Scene themes are Arial and Helvetica. You can change the font/font-family used for the entire blog, blog posts, and headers, with the Custom CSS feature.
Note: a "font-family" refers to a list of fonts you would prefer your blog to use, in the order you would like them to be used. For example, if you prefer serif fonts, like Times New Roman or Georgia, but would like browsers to use Georgia above any other other serif font, you would use a font-family of: Georgia, 'Times New Roman', serif. Using a font-family list in that order would tell browsers to use Georgia for your blog but, if Georgia isn't loaded on a reader's computer, the browser should then use Times New Roman. Similarly, if Times New Roman isn't available, the default serif font in the reader's computer will be used.
If you use the example mentioned in the above note, the CSS you'd need to add to Design > Custom CSS would be:
/* Change Font for Entire Blog */
body { font-family: Georgia, 'Times New Roman', serif; }/* Change Font for Blog Title */
#banner-header a { font-family: Georgia, 'Times New Roman', serif; }/* Change Font for Blog Description */
#banner-description { font-family: Georgia, 'Times New Roman', serif; }/* Change Font for Post Titles */
.entry-header, .entry-header a {
font-family: Georgia, 'Times New Roman', serif;
}/* Change Font for Post Body */
.entry-content, .entry-body {
font-family: Georgia, 'Times New Roman', serif;
}/* Change Font for Module Headers */
.module-header, .module-header a {
font-family: Georgia, 'Times New Roman', serif;
}/* Change Font for Module Content */
.module-content {
font-family: Georgia, 'Times New Roman', serif;
}
If you want to increase or decrease the font sizes of the specific areas mentioned above, you can add another CSS property called font-size. Added to Design > Custom CSS alone, the CSS would look like:
/* Change Font Size for Post Titles */
.entry-header, .entry-header a {
font-size: 20px;
}
If you want to change both the font-family and font size, using the example for Post Titles above, you would add the code as seen below:
.entry-header, .entry-header a {
font-family: Georgia, 'Times New Roman', serif; /* change font of post title */
font-size: 20px; /* change size of post title */
}
Not sure about what size font you want to use? Check out CSS Type Set to find a font size that looks best to you.
Adjust column widths
The total width of the Scene theme is 1000px with 15px of padding on both the left and right of the blog container. The column(s) of content within the blog are split into portions of the 1000px.
For the Scene theme, the default column widths are defined as:
/* One-Column Layout */
.layout-one-column #alpha { width: 1000px; }/* Two-Column Right Layout */
.layout-two-column-right #alpha { width: 650px; }
.layout-two-column-right #beta { width: 330px; }/* Two-Column Left Layout */
.layout-two-column-left #alpha { width: 330px; }
.layout-two-column-left #beta { width: 650px; }/* Three-Column Layout */
.layout-three-column #alpha { width: 200px; }
.layout-three-column #beta { width: 570px; }
.layout-three-column #gamma { width: 200px; }/* Three-Column Right Layout */
.layout-three-column-right #alpha { width: 570px; }
.layout-three-column-right #beta { width: 200px; }
.layout-three-column-right #gamma { width: 200px; }
Using the default widths above as a comparison, you can follow the instructions on customizing column widths to make your changes at Design > Custom CSS.
Change the blog footer
The Scene theme, however, is specifically styled to make use of the Advanced section of the blog footer for a content-rich display. The setup is for three sections of content across the width of the blog footer, at 300px wide each.
The content you add is up to you. We recommend a few things from the following list:
- BlogRoll / list of links
- Flickr widget
- Social media icons
- Introduction to you or your blog
- Twitter widget
- Copyright / Disclaimer
- Mission Statement
- Welcome note
- Contact form
- Map with directions
- List of your favorite posts
- Logo image
- Search module
To implement a content-rich blog footer, we recommend reviewing all of the code and instructions in the Everything Typepad post, Weekend Project: Building a Content-Rich Blog Footer.
- Adjust column widths