MARS

Theme Documentation

Intro

Mars is a creative, colorful grid theme for tumblr. It's responsive and widgets-ready and support all post types support. The .zip file includes:

  • assets: Folder containing :
    • css
    • img
    • font
    • js
    • index.html
    • answer_post.html
    • chat_post.html
    • link_post.html
    • photo_post.html
    • quote_post.html
    • text_post.html
    • page2.html (just a copy of index.html, for testing infinite scroll)
  • documentation: Offline documentation.
  • Mars-theme.txt (Note: This is the only file you need in order to install this theme)

List of Available Features

  • All post types
  • Custom backgrounds
  • Adaptive Design
  • Works on major browsers
  • Icon Fonts
  • Analytics Ready
  • Disqus Comment System included
  • Localized Theme (your theme appears in every language Tumblr supports)
  • Custom CSS
  • Custom Fonts
  • Custom Colors
  • Like / Reblog / Share Buttons
  • Search
  • Note Count / Permalink / Tag Pages
  • Twitter / Flickr / Dribbble Widgets
  • Custom Retina Logo
  • Many Social Icons Buttons
  • Free Support and Ongoing Updates.

Installation

Step 1

Log into Tumblr and click on the Settings (gear icon) on the top. From your left, select the blog you want to install this theme on, then click on Edit Theme then Edit HTML.

Step2

In the .zip file you downloaded from Themeforest you will find a text file containing the theme code: Mars-theme.txt

Open the file and select all and copy , then head to the HTML box and replace ALL the existing markup with your own.

For MAC Users: If you use TextEdit, please be sure you check "Ignore rich text commands in HTML files" before opening the text format. Find out how on here .

screen04

Step 3

Click on Update Preview. You will most likely not see any change yet, but head back to Appearance and click Save. Refresh your browser window and if everything went well, your blog should be updated with the new theme by now. To customize your theme, go back to Customize. Also, please remember that sometimes Javascript is not always updated while you are editing the theme. That means you will not see some widgets until you save and exit.

Step 4

This theme is already optimized for mobile, so you need to uncheck tumblr's feature "Use optimized mobile layout". Go to the Advanced section at the bottom of your panel.

Just uncheck. Save your changes and you're done.

screen06

Customization

Please notice: Some of this changes will only take effect after you Save and Exit your Customization Panel. Sometimes, you may not see them soon. Do not worry, simply exit and refresh your browser window.

Logo

Mars allows you to upload a custom logo image.

First, look for the option "Enable Image Logo" and check it. The image you upload will be shown on the top of your blog (Header Section). I recommend using a .png image with a transparent background. You can also upload a higher resolution of your logo for retina displays: Logo Hi-Res. If you don't upload a logo, your blog's title will be shown in its place.

Background

You can upload a background image. By default, the image will be repeated.

If you want a fixed background, check the option "Body Fixed Background" on your customization panel. In case you are uploading a fixed background, be sure your image is hq and at least 1200px wide, as it will be 100% stretched to cover the blog area;

You can also change the background shown on permalink pages and quote posts. Be aware they will be repeated.

Description Section

To show this section, check "Show Description Section" and fill both "Intro Heading" and "Intro Text" on you customization panel. You can upload a background image. By default, the image will be repeated, like it's shown in the demo.

If you want a fixed background, check the option "Description Section Fixed Background" on your customization panel.

Custom Fonts

You can choose between all fonts hosted by google to customize your typography. Just browser the Fonts Library and choose one. Mars uses Raleway for all the headings and Roboto for paragraphs and everything else. Let's say you want to use Open Sans: on your customization panel look for "Text Font" and write "Open Sans". Save and exit. You will most likely not see any changes while you are editing your blog, but once you refresh the page, you will be able to see them.

Footer

The footer features three sections: the first one will be populated with your blog's description and social icons.

Social Icons will be displayed only when enabled. To enable this widget, simply check Show Social Icons on your customization panel.

To link your icons with your own profiles, simply complete the [Social Network Of Choice] username field!

The second section will host the twitter feed and the third one the following widgets: Flickr and Dribbble.

Twitter Widget

In order to enable the twitter widget, you will have to authorize Tumblr to connect with Twitter. Head on to your Settings and select the blog you wish to display your latest tweets on. Then click on Sign in with Twitter. Once you are signed in, the last three tweets will be displayed on your blog. That's all.

Flickr Widget

To show your last pictures from Flickr, first be sure to check the option "Enable Flickr Feed" on your sidebar. Then click here and get your Flickr ID. Simply past that number in the Flickr ID field.

Dribbble Widget

To show your last show from Dribbble, first be sure to check the option "Enable Dribbble Feed" on your sidebar. Then fill in Dribble Username Widget with your own username.

Icon Fonts

You can find a list of icons here. You can place icons just about anywhere with the <i> tag.

<i class="icon-mail-3"></i>

Ask / Contact Feature

Ask feature allows users or anonymous readers to ask you questions. A link will be shown on the top of your blog when Ask is enabled. To enable this feature:

  • Click Settings (the gear icon) at the top of your Dashboard.
  • Click the blog you’d like to update on the left side of the page.
  • In the Ask section, check the box that says “Let people ask questions.”
  • Under “Ask page title,” fill in the title you’d like to name the Ask page and the Ask link on your blog.
  • If you want to allow anyone to ask questions, check the box that says “Allow anonymous questions.”
  • Hit “Save.”

Analytics

To track your visitors, simply fill the Google Analytics ID with your own ID!

Disqus Comment

Mars uses disqus comment system to display comments on your posts, all you need to do to enable it is adding your own Disqus Shortname and save.

Support

If you need help or have a bug/problem to report, feel free to contact me. You can email me to support@mimesis-themes.com

Credits