Mist Documentation

Overview

Thank you for choosing Mist for your website project. I hope that you find it makes your project easy to realize so that you can focus more time on growing your business.

Below, please find all of the documentation to customize your theme that you have just purchased. I have seperated this document into categories for your ease of use. You can use the top navigation to jump to any desired area.

If you have any questions or comments regarding your theme, please feel free to contact support. Also, if you are happy with the theme, I would be grateful for your feedback with a Review on the MOJO website. Thanks so much!

Back To Top

Installation

To install the Mist Theme you will need WordPress v3.5 or newer. Installing the theme can be done two ways. You can upload the theme ZIP file using the built in WordPress theme upload, or copy the files through an FTP client.

1) Using WordPress Theme Upload

Be sure to extract the file "Mist.zip" from the "Mist - Theme and Documentation" download before uploading. Using the "Mist - Theme and Documentation" zip file directly will result in a "Missing Style Sheet" error.

  1. Login to your WordPress admin.
  2. In the "Appearance > Themes" menu click the tab "Install Themes"
  3. At the top of the page click, "Upload", then click the file input to select a file.
  4. Select the zipped theme file, "Mist.zip", and click "Install Now"
  5. After installation you will receive a success message confirming your new install.
  6. Click the link "Activate"

2) Uploading by FTP

  1. Login to your FTP server and navigate to your WordPress themes directory.
    Normally this would be "wp-content/themes"
  2. Extract the files from the zipped theme.
  3. Copy the folder "Mist" to your themes directory.
  4. After the files finish uploading, login to your WordPress admin.
  5. In the "Appearance" menu click "Themes"
  6. Click "Activate" for the theme "Mist"

Finished with Installation?

Once the theme is installed you can configure it for your content. See the sections below on configuring the theme to start adding your content.

Back To Top

Theme Options

Whenever a setting is changed in the Theme Options panel, scroll to the bottom of the page and click the Save Options button.

Note: Clicking the Restore Defaults button will erase all values for the entire Theme Options panel, not just the section that is currently being viewed. Use caution when clicking this button as you can lose valuable data if not careful.

Theme Options - General

Logo Upload

  • By default, Mist will display your website name in the top left corner of the site. If you wish to use a logo image instead, the optimum maximum dimensions are 230px for width and 60px for height. To add a logo, use the Upload button.
  • When the image uploader pops up, you will be given two options (Upload Files or Media Library). Choose the method you wish to add your logo, choose the image, and click the Select button.
  • If you wish to have a retina optimized logo, you will need to have a version of the logo with the same file name plus the addition of "@2x" to the end. For example, logo.png and logo@2x.png. The @2x version should be a size that is twice the dimensions of the regular version. For example, if the regular logo is 230px x 60px then the @2x version should be 460px x 120px. Both files should be located in the same directory of the Media Library.

Favicon Upload

  • A favicon is the small icon seen in the url or tab bar of most browsers. It's also referred to as a bookmark icon. Favicons should be either 16px (square) or 32px (square) and should be either a .png file or an .ico file. To add a favicon, use the Upload button.
  • When the image uploader pops up, you will be given two options (Upload Files or Media Library). Choose the method you wish to add your favicon, choose the image, and click the Select button.

Custom CSS

  • Mist comes with the option to add custom CSS as needed to completely stylize every aspect of the site. To add new CSS rules, paste them into the textarea provided. Valid CSS standards should be followed when adding additional CSS.

Theme Options - Colors

Changing colors

  • To change the colors used throughout the site, select the option that you wish to change (Call to Action, Footer, Font, etc). Click the Select Color button. A pop-up will appear, providing several options for selecting a new color. You can enter 6 digit hexadecimal codes in the top field, or you can use the color selector tools to view additional colors. If needed, the Default button for that color can be clicked to revert back to the default color for that option. The Default button is not to be confused with the Restore Default button which will erase all of your Theme Options custom settings.

Theme Options - Fonts

Changing the body font

  • Any Google Font can be used as the body font for the site. To use a Google Font, select a font from their site, and enter the font name into the field. Names with spaces should be entered with the space included. For example, if you wanted to use the font Titillium Web, it should be entered as "Titillium Web" (without the quotes). If the body font field is left blank, then the default font will be used.

Changing the heading font

  • Any Google Font can be used as the heading font for the site. To use a Google Font, select a font from their site, and enter the font name into the field. Names with spaces should be entered with the space included. For example, if you wanted to use the font Titillium Web, it should be entered as "Titillium Web" (without the quotes). If the heading font field is left blank, then the body font value will be used.
  • Mist has an optional Call to Action bar that can be displayed in the header on all pages/posts. Enter your message into the Call to Action Text field. To change what the button says, enter your button text into the Call to Action Button Text field. Enter your URL into the Call to Action Button Link field.
  • When entering your URL into the Call to Action Button Link field, be sure to enter a full URL, including http:// or https:// such as http://www.your-website.com/your-link.
  • If you wish to simply display a message and no button, then paste the following code excerpt into the Custom CSS field on the General Tab of the Theme Options page:
    #header-cta-button { display: none; }

Theme Options - Homepage

Theme Options - Pages

  • Please refer to the Pages section.

Theme Options - Posts

  • Please refer to the Posts section.

Theme Options - Portfolio

Theme Options - Footer

Footer Text

  • Enter desired text to the Left Footer Text field to change the text that appears on the left side of the footer. Leave blank to display the default text.

Social Icons

  • Choose which Social Icons are displayed in your footer by checking the appropriate boxes. Enter the URL for the appropriate page for any icons that are used. For example, if you wish to use the Facebook icon, make sure that the checkbox is selected, then enter the URL for your Facebook page you wish to promote: https://www.facebook.com/bottomlessdesign
  • If you wish to use the Email icon, enter an email address in place of a URL: name@email.com
  • If you wish to use a link that doesn't have an icon represented, you can use the Custom Link option and enter the desired URL.

Theme Options - Analytics

Google Analytics

Back To Top

Homepage

Setting up the homepage

  • By default, Mist will display your latest posts on the homepage. To use the homepage as seen in the demo, first create a new page and name it Home. As you're creating this page, select the "Homepage" template from the Page Template section in the far right column.
  • After creating the new Home page with the Homepage template, go to Settings/Reading (in the left navigation bar). For "Front page displays", choose "A static page", and for "Front page" select the new Home page from the drop-down menu. Then click Save Changes.

Homepage Slider

  • You can add and manage slides for the homepage slider under the "Slides" tab in the main WordPress admin menu. To add a new Slide, click Add New. Slides should be given a title. Images for the slides should be entered in the Background Image section. The optimum size of the slider image is 1200px width x 500px height. To enter a Background Image, click the Upload button. You can drag and drop your image to the pop-up media uploader or click the Media Library link if you've already added the image to your Media Library. When selecting an image, be sure to include a Link URL. (Note: due to the nature of background images, this won't actually create a link, but leaving this field blank or set to None can sometimes create issues when uploading an image.) Once your image is selected, click the "Insert into Post" button.
  • If you wish to upload a retina optimized image, the recommended dimensions are 2400px width x 1000px height.
  • Slides have an optional feature to display text. If you choose to display text with your slide, enter your text into the Description field. Select a Text Alignment (Left, Center, Right), and make sure to check the box for Show Text. When displaying text, the title of the slide will be displayed above the description.
  • You can add as many slides as you wish to the slider, although a good number is 1-4. It's not recommended to go over 6 slides. If you only choose a single slide, a static image will be shown in place of the slider. Slides will be displayed in the order they are posted (most recent first). If you need to adjust the order of the slides, edit the publish date/time.
  • To display the slider on the homepage, go to Theme Options / Homepage and check the box for Display Homepage Slider.
  • To change the speed of the slider, enter a number (in seconds) in the field labeled Slideshow Delay. (Note: This will also change the speed used for the slideshow shortcode).

Homepage Message - Theme Options / Homepage

  • To display the homepage message, go to Theme Options / Homepage and check the box for Display Homepage Message.
  • To change the text for the message, enter the text in the field labeled Homepage Message Text.
  • Additional, optional text can be entered in the field labeled Homepage 2nd Message Text.

Homepage Portfolio - Theme Options / Homepage

  • To display the homepage portfolio, go to Theme Options / Homepage and check the box for Display Homepage Projects.
  • To change the number of projects to be displayed, enter a number in the field labeled Homepage Number of Projects to Display. It is recommended to display any multiple of 3 (3, 6, 9, etc).
  • Select the type of projects to display, by choosing from the Type of Projects to Show drop-down menu. All projects will display the most recent projects. Featured will display projects that have been checked Feature on Home on the project edit screen. For more information on Feature on Home, see the Portfolio section.

Featured Pages - Theme Options / Homepage

  • Check the box to display this section, or uncheck it to hide it.
  • Enter a title to be displayed with this section.
  • Select from any published pages to be displayed in the Featured Pages section. If the selected featured page has been given a Featured Image, the Featured Image will also display on the homepage.
  • If you wish to control the text that is displayed for the Featured Page on the homepage, please refer to the Pages/Page Excerpt section.

Featured Posts - Theme Options / Homepage

  • Check the box to display this section, or uncheck it to hide it.
  • Enter a title to be displayed with this section.
  • Select a category from your Post Categories to display on the homepage. You may wish to create a category such as Featured Posts, or use a category such as News, Events, etc.
  • Choose how many Featured Posts to display on the homepage.

Additional Homepage Content - Theme Options / Homepage

  • Check the box to display this section, or uncheck it to hide it.
  • Enter a title to be displayed with this section.

  • Content for the Additional Homepage Content section is entered on the page that was created with the Homepage Page Template (typically called Home). Go to Pages (in the left navigation menu) and select the Home page. Images and content entered on the edit screen will appear in the Additional Homepage Content Section. You can use images, text, HTML, or shortcode here as you would on any other page.

Back To Top

Pages

Page Templates

  • Mist comes with the following Page Template types: Default, Full Width, Homepage, Blog & Portfolio.
  • The Default template is the main template seen throughout the demo for any page that has a sidebar. When adding a new page, this will always be used unless another template is selected.
  • The Full Width template does not display a sidebar, otherwise, it's the same as the Default template. To use the Full Width template, select it from the Page Template section in the far right column when adding or editing a page.
  • The Homepage template is used for displaying the homepage as seen in the demo. To use the Homepage template, select it from the Page Template section in the far right column when adding a page. For more info on setting up the Homepage, please refer to the Homepage section.
  • The Blog template is used for displaying the blog page when the homepage is set to the Homepage template. To use the Blog template, select it from the Page Template section in the far right column when adding a page. For more info on setting up the Blog page when using the Homepage template, please refer to the Posts section.
  • The Portfolio template is used for displaying the portfolio page. To use the Portfolio template, select it from the Page Template section in the far right column when adding a page. For more info on setting up the Portfolio page, please refer to the Portfolio section.

Page Featured Image - Theme Options / Pages

  • Check the box to display the Featured Image at the top of an individual page, or uncheck it to hide it. The optimum size for a Page Featured Image is 764px width x 357px height. In either case, you can still use the Add Media button to add an image anywhere within your page.

Page Excerpt

  • This feature will give you control over what is displayed for a page that is selected for the Homepage Featured Page.
  • To use the Excerpt feature on a Page, go to the edit screen for the desired page.
  • You may need to make the option visible. If this is the case, go to the very top of the edit screen and click the "Screen Options" button on the right. A drop-down menu will appear with display options. Check the box next to Excerpt to make it visible.
  • With the Excerpt section visible, enter your text into the Excerpt field. You can enter HTML here and it will be displayed.

Leave a Reply - Page Comments

If the bottom of your page displays the "Leave a Reply" section, this means that comments are turned on for that page.

To turn off comments for a page:

  • From the back-end of your site, go to Pages (in the left-hand navigation). Click on the link for the page you wish to remove the comments. This will bring you to the edit screen for that particular page.
  • The comment settings are in a section labeled Discussion. By default, Discussion is typically not visible. To make it appear, you will need to click the tab in the top-right corner of your screen for Screen Options. A drop-down menu will appear. Check the box for Discussion. Now scroll down the page.
  • You should now see a box for Discussion at the bottom of the page. Uncheck both options in Discussion. Then Save/Update your page. Repeat as necessary for all pages you wish to hide comments on.

Back To Top

Posts

Setup the Blog page

  • By default, Mist will display your latest posts on the homepage. If you are using the homepage as seen in the demo, you will also need to create a page to display the blog.
  • First create a new Page and name it something like Blog or News. As you're creating this page, select the "Blog" template from the Page Template section in the far right column.
  • After creating the new Blog page with the Blog template, go to Settings/Reading (in the left navigation menu). For "Front page displays", choose "A static page", and for "Posts page" select the new Blog page from the drop-down menu. Then click Save Changes.

Post Meta Data - Theme Options / Posts

  • You can choose to display or hide the following meta data from each post: Author, Date, Category, Tags, & Comment Count.
  • To display each feature, check the box to display, or uncheck it to hide it.

Post Featured Image - Theme Options / Posts

  • It is recommended to use the Featured Image when creating a new post. The Featured Image will display a thumbnail alongside the post on the main blog page and any blog archive pages. The optimum size for a Post Featured Image is 764px width x 357px height.
  • By default, the Featured Image will also be displayed at the top of the individual post as well. If you choose to turn off this second feature, you can uncheck the box for Display Featured Image on posts.
  • In either case, you can still use the Add Media button to add an image anywhere within your page.

Show Full Posts - Theme Options / Posts

  • Check this box to show full posts instead of excerpts on blog and blog archive pages. (Note: this will not display full posts on the homepage template page--that will only display excerpts.)

Author Bio

  • To edit the Author Bio found at the bottom of every post and also on the author archive page, go to Users/Your Profile (in the left navigation menu). Scroll down to Biographical Info and enter your bio here. Click Update Profile.
  • A Gravatar account will be needed for your User profile image. If you already have a Gravatar account, whatever image you've uploaded to your Gravatar account will be displayed on the front-end of your site. If you do not yet have a Gravatar account, you will need to create a free account and use it to add an image to your email address. Please note: changes to your Gravatar (such as uploading an image) typically take several minutes before you will see them live on your site.

Back To Top

Portfolio

Setup the Portfolio page

  • Create a new Page and name it something like Portfolio. As you're creating this page, select the "Portfolio" template from the Page Template section in the far right column.
  • Images and text added to the Portfolio Template page will not be shown. If you wish to use the Portfolio page as one of the Featured Pages on the homepage, text should be entered into the Portfolio page Excerpt section. For more info on using the Excerpt, see the Page Excerpt section.

Adding Projects

  • New portfolio items are added as Projects. Projects are added/edited in much the same way that Posts are added/edited. Images and text can be added as needed to the individual Portfolio post the same as any other post. Shortcodes can be used with any Portfolio Project.
  • Skills are used to order the projects (such as Photography, Graphic Design, Illustration). Skills are essentially Categories for Projects.
  • If Featured Projects will be displayed on the homepage as oppossed to the most recent, then check the box for Feature on Home for the desired projects. Be sure to also select Featured on Theme Options / Homepage / Types of Projects to Show.

Back To Top

By default, any new page created will be adding to the navigational menu in the order created. If you wish to have greater control over your menu, go to Appearance / Menus

  • In the right-hand column, add a "Menu Name" and click Save
  • The left-hand column gives you options for adding pages to your menu. In the "Page" section, click the "View All" link. Here, check the pages that you wish to add, then click "Add to Menu".
  • The selected pages will all be added to the right-hand column. Drag and drop them into the desired display order. It is possible to inset a page underneath and to the right of another page. Doing so will create a drop-down option.
  • When all of the pages are in the desired order, click Save Menu.
  • Click Manage Locations to assign your menu to the theme.
  • On the next screen, select your newly created menu from the Assigned Menu drop-down and click Save

Back To Top

Widgets

Content for your Sidebars and Footers are handled through Widgets. To access Widgets, go to Appearance / Widgets (in the left navigation menu).

  • There are three Sidebars: Main Sidebar, Page Sidebar, and Post Sidebar.
  • Main Sidebar is the default Sidebar. If you are planning on displaying the same content on both Pages and Posts, Main Sidebar should be used.
  • If Page Sidebar or Post Sidebar are left blank, they will default to displaying whatever is in Main Sidebar.
  • If you wish to display different content on either Pages or Posts, you can add different widgets to either. the Page Sidebar will display on any pages created with the Default page template. The Post Sidebar will display on any individual post, the main blog page, and any post archive pages.
  • The Footer Widget section will display widgets in the footer of your site for every page/post other than the homepage.
  • The Homepage Footer Widget section will only display widgets in the footer of the homepage.
  • Widgets from the Available Widgets column can be dragged into any of the Sidebar/Widget sections. It is possible to reuse a Widget in multiple locations.
  • The Text Widget is a powerful option. You can enter a text message to display in one of the sections. You can enter HTML into the Text Widget. You can also add an image to a Text Widget. To add an image to a Text Widget, first add it to the Media Library. Then, enter the URL path to the image into the Text Widget in HTML. For example:
    <img src="http://yourdomain.com/wp-content/uploads/2013/06/yourimage.png">

Back To Top

Shortcodes

Mist comes with simple to use shortcodes built right in, such as buttons and columns. Shortcodes can be added to any Page, Post, or Widget. To use the shortcodes, follow the instructions below.

Buttons

Button shortcodes can be added to any page, post, or widget. To add, use the following:

[button url="http://mist.bottomlessthemes.com/" label="Example Button" color="#2a9a75" target="_blank"]

EXAMPLE BUTTON

The button shortcode supports 4 attributes: url, label, color (optional), and target (optional).

Columns

Columns shortcodes can be added to any page, post, or widget. Columns can be created as one half, one third, two thirds, or one fourth of the content area’s width. To add, use the following:

[one_third] Example content 1 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing. [/one_third] [one_third] Example content 2 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing. [/one_third] [one_third_last] Example content 3 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing. [/one_third_last]

Example content 1 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing.Example content 2 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing.Example content 3 here. Lorem ipsum dolor sit amet, qui ex civibus qualisque adversarium, ad sea iusto scripta adipiscing.

Notice the addition of "_last" to the last column's shorcode. This is necessary for the columns to display properly.

Images can be inserted into the column shortcode and HTML can also be used (such as links or bold/italic text).

Slideshow

Slideshow shortcode can be added to any page, post, or widget. Images can be any size, although it is recommended that they are all the same size. You can add as many images as you like to a slideshow--just place each image on a new line. The slideshow can also be wrapped inside of a column shortcode for further customization. To add, use the following:

[slideshow] <img src="http://yourdomain.com/imageurl-1.jpg" /> <img src="http://yourdomain.com/imageurl-2.jpg" /> <img src="http://yourdomain.com/imageurl-3.jpg" /> <img src="http://yourdomain.com/imageurl-4.jpg" /> [/slideshow]

An example of the slideshow shortcode in action can be seen here at the bottom of the page.

Back To Top

CSS

The main CSS file is the style.css file bundled with the theme. It is not recommended to change this file as any modifications will be lost if the theme is updated. Instead, please put new CSS rules in the Theme Options / General / Custom CSS field. It is possible to write new CSS rules there that will override any other CSS rules on the site. Data input there will be retained if the theme is updated to a later version.

Back To Top

Notes

SEO Titles

If you opt to import the demo data, this will also include the demo site's SEO. To change it, you can install the Yoast SEO plugin. Once installed and activated, you can go to SEO / Titles & Metas to change your Title and Meta Description information.

Jetpack Mobile

If you opt to activate Jetpack, it's possible that its Mobile feature will be activated automatically. As Mist is mobile responsive by default, it's not necessary to use Jetpack Mobile. You can simply go to Jetpack / Settings and deactivate Mobile, or, if you're not using the other Jetpack features, you can go to Plugins and deactivate Jetpack altogether.

Back To Top

Credits

I've used the following images, icons or other files as listed.

Back To Top

Thank you again for purchasing Mist! I hope you enjoy using it as much as I enjoyed making it! Feel free to contact me with any questions or comments you may have.

-Adam

Back To Top