Mistix minimal HTML css theme

Minimal Portfolio HTML / CSS Theme: Mistix

June 10, 2012 by PremiumCoding - No Comments

Mistix is a playful and creative minimal portfolio HTML / CSS Theme, suited for creative folk that wish to present their products in a cheerful manner. It is suited for both personal and corporate websites.

The greatest feature on the home page is the recent posts / portfolio section. It will allow you to add several posts and portfolio projects to the front page in a unique way. It is designed so your visitors can see the description and images from the post on the fly without leaving the front page. Be sure to click on the posts to see this great feature in full. You can set the number of posts in the Theme’s administration. You have three possibilities of which elements to show. You can show both posts and portfolio items at once, only posts sorted by categories or only portfolio items sorted by categories.

Three different blog pages will give you the opportunity to choose the style that you prefer. You can choose from a standard blog, a minimalistic blog and a blog designed to look like portfolio.

LIVE PREVIEW

 
Mistix minimal HTML css theme

Fashy HTML/CSS Theme Features

  • 2 built in sliders (Slideshow with thumbs and simple Nivo )
  • Unique Recent Posts / Portfolio Items widget on the front page
  • CSS3 Features and Animations
  • Detailed written help file
  • +70 shorcodes with easy shortcode generator.
  • Use your custom logo and favicon icon.
  • 3 home page layouts (fullscreen & composition).
  • 2 portfolio page layouts (3,4 columns)
  • 2 Home Page Templates
  • 3 blog page Templates
  • Filterable portfolio items.

HOW TO REGISTER ON OUR SUPPORT FORUMS

Support is handled via our Envato support forum. It is designed in a way so only Envato users that have bought some of our plugins or Themes can register. You have to use the purchase code in the process. This has been causing some problems so please check the screenshots below to see where to get the purchase code.

Click on the image for a larger preview!

After you click on the License Certificate you will then be able to see the code in the file which will look like in the screenshot below:

QUICK GUIDE

FILE STRUCTURE

Below is a file structure for different aspects of the HTML site.

CSS FILES

  • style.css
  • CSS/orange.css
  • CSS/yellow.css
  • CSS/blue.css
  • CSS/lightblue.css
  • CSS/green.css
  • CSS/pink.css
  • CSS/purple.css

CSS is structured so you have one main file (style.css) and a second css file called for instance red.css that define the leading color and some other aspects of the Theme (hover colors, background colors, etc.). If you want to choose a different coloring scheme simply replace the current css file with new one in each HTML file.
[cc lang="html"]

[/cc]

FOLDERS

  • css (This folder holds the CSS for all of the secondary styles)
  • js (This folder holds all of the JavaScript used throughout the template.)

PAGE TEMPLATES

Mistix HTML Website Template comes with several premade page templates that are listed below.

HOME PAGE TEMPLATES

  • index.html (Main home page with advanced Nivo Slideshow with Thumbs)
  • simple-nivo.html (Home page with Simple Nivo Slideshow)
  • home-portfolio.html  (Home page with a portfolio of latest Posts)

CONTENT PAGE TEMPLATES

  • page-full-width-with-nivo.html  – (Static Page with simple Nivo Slideshow)
  • nivo-with-thumbs.html  (Static Page with Nivo Slideshow with Thumbs)
  • page-elastic-slider.html  – (Static Page with Thumbs Slideshow)
  • page-with-sidebar.html - (Static page with Sidebar on the right)
  • portfoliopage.html - (Portfolio Page)
  • contact.html – (Contact Page)
  • columns.html – (Static page with Shortcodes: Columns)
  • tabs-other.html - (Static page with Shortcodes: Tabs)
  • buttons.html - (Static page with Shortcodes: Buttons)
  • text-elements.html - (Static page with Shortcodes: Text Elements)

BLOG AND SINGLE POSTS PAGES

  • single.html - (A default single Post with content and sidebar on the left)
  • sorting-blog-page.html - (Category page presented as a portfolio)
  • blog.html - (Category page)
  • fullwidthblog.html (Full Width Category Page)

PORTFOLIO PAGES

  • portfolio.html – (3 column portfolio page)
  • portfolio-4.html - (4 column portfolio page)

GOOGLE WEB FONTS

The template uses Google Web Fonts for the title fonts. Font that is used in the preview is Oswald. Link to the font is done in HTML files in the header part:
[cc lang="html"]

[/cc]
To change the font simply replace Oswald with the font you want. You can see all the fonts that you can use in the Google Web Fonts Library.

SETTING UP THE HOME RECENT POSTS / PORTFOLIO PART

One of the leading features of our HTML template is the part below the slideshow and featured boxes. The recent posts / portfolio items section will allow your visitors to quickly check your latest news and products without leaving the home page. This widget can be found in three files: index.html, elastic-slideshow.html and simple-nivo.html. HTML files used for the presentation of the posts and portfolio items are stored in the directory home. You will find 10 premade templates there to help you out.

ADDING NEW ITEMS TO THE HOME RECENT POSTS / PORTFOLIO PART

You can add either posts or portfolio items to this section. Below is a quide how to add them.

ADDING NEW POSTS

When you are adding new items to this section please note that the name of the ID of the post that you set in index.html has to be the same as the name of the HTML file in the home directory. In case when you are adding posts use the following html code:
[cc lang="html"]

Green Robot

Test Image

,

[/cc]

ADDING NEW PORTFOLIO ITEMS

Everything is done the same apart from the -port postfix. ID of the portfolio item that you set in index.html has to be the same as the name of the HTML file in the home directory. In case when you are adding portfolio items use the following html code:
[cc lang="html"]

[/cc]

WEBSITE NAVIGATION

  • All navigations are created by forming nested lists
  • Navigations can be easily setup by copy/paste from the provided page templates

Example:
[cc lang="html"]

[/cc]

SUPPORT

For support please visit our support portal and register as described above.