Theme Editor (deprecated)

Avatar
Metro Publisher Support Squad
Follow

Overview

The theme editor can be used to choose from a variety of pre-designed templates that determine the look and feel of your website. To give your site a distinctive look, the theme editor also includes tools to upload logos, set fonts, and define the color palette. The theme editor is separated into three parts based generally on the sorts of tasks you will perform:

 

For full screen viewing, click the expand icon in the video player.

 

Change Theme

Under the tab labeled "Change Theme," you can select from a variety of different themes and predefined color palettes.

NOTE: The Preview in the regular Content Editor is using the published design.

The Theme Editor has two views, one that lets you do real-time design changes, and the Live Preview which lets you see your actual Content with the design edits you've made.

If the Live Preview and the homepage preview are different, it is most likely because there are unpublished theme edits.

If you are looking at previews of Content, as your readers would experience it, use the Preview in the place you're editing, i.e Homepage Editor, Section Editor, or Content Editor.

The previews available in the Theme Editor are for seeing changes to your design elements such as colors, typefaces, logos, etc.

change-theme.png

 

  1. Main Navigation within Theme Editor: From here you can switch between the three main tasks.
    • Change Theme
    • Refine Colors
    • Refine Text
  2. Theme: Here there are a variety of themes in different visual styles.
  3. Color Palette: As you hover over a theme with your mouse, the options for pre-defined color palettes appear. Click on a color palette to select the theme with that particular palette. Once you have selected a theme and a palette, you can then refine the colors and other elements of the theme.
  4. Action Panel: The action panel contains for special tasks.
    • Save: Saves any changes you make while working in the theme editor.
    • Live Preview: Opens a new tab with a preview of your website using your live database and the current unpublished changes from the theme editor.
    • Revert: Reverts any unpublished changes back to live version of your website.
    • Publish: Pushes all changes from theme editor live. Be very careful. Once you have published your changes you will not be able to retrieve your previous settings. If you make a mistake, you can go back and go through the selection process again to make corrections.

 

Refine Colors

Once you have selected a theme and a color palette, you can refine the colors, add a background image, and upload various versions of your logo.

refine-colors.png

 

Click on the pencil icons to edit.

  1. Logo:
    • Desktop Logo: The desktop logo is the logo that will appear in your header when viewed on desktop and laptop computers at full screen size.
      • Maximum width = 990px
        NOTE: The width varies depending on the margin of the navigation.
      • Maximum Height = 150px
    • Responsive Logo: The responsive logo is not required. Because responsive design will scale your logo down on smaller screens, this is an option to upload a different version of your logo that looks better on smaller screen sizes. For example, if your logo is very horizontal, you might want to upload an alternative version that is less horizontal so it is easier to read on smaller screen sizes.
      • No fixed size
        IPhone-5.png
        Example of a logo that is very long horizontally and a more square "responsive" version.
    • Favicon: A favicon is a 16x16 px graphic that appears in the browser as well as search results on some search engines. The best file format is ICO, however a PNG, GIF or JPG will also work. For more information about favicons, read here.

      favicon-sample.png

      Example of a favicon on Firefox. Favicons appear in various places on different browsers.
    • Default Social Media Icon: Add a square version of your logo that will be used on Facebook and other social media. This is the image that will appear any time a reader shares and article, review, or blog entry that does not have any images. Without this, Facebook and the other social media services will show only a blank area next to the link back to your content.
      • Minimum 200x200 px (square)
        fb-sample.png
        Example of a story without any images as it would be seen with and without the default social media icon.

  2. Colors: Adjust individual colors from the pre-defined color palette.
    • Each theme has different usage and numbers of color
  3. Background: Modify the background color or add a background image.
    • Background Color
    • Background Image: Choose from the existing images or upload your own.
    • Repeat Options: Choose a tiling rule depending on the type of image.
      • Repeat = tiles horizontally and vertically
      • Repeat-x = tiles horizontally
      • Repeat-y = tiles vertically
      • No-repeat = does not tile

Refine Text

Allows you to select font families, sizes, and styles for text throughout your site.

refine-text.png

 

Click on the pencil icons to edit.

  1. Navigation: Refine font family, style, and size for the main navigation and sub-navigation.
  2. Headers: Refine font family, style, and size for the header text throughout your website.
  3. Body Text: Refine font family, style, and size for the body text throughout your website.
  4. Custom Fonts: For clients who have a Typekit account and would like to use their own custom fonts. Add your Typekit ID here, and your custom fonts will appear as options in the font-family pull downs above.
Have more questions? Submit a request

Comments

Powered by Zendesk