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.
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:
Below is a file structure for different aspects of the HTML site.
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.
<link id="stylesheet" href="css/fadeRed.css" rel="stylesheet" type="text/css" />
- css (This folder holds the CSS for all of the secondary styles)
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.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:
<link id="googleFont-css" href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" media="all" type="text/css" />
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:
<div class="one_fourth itemhome post" data-category="post">
<div class="click" id="single_home.html">
<img alt="Test Image" src="demoImages/image.jpg&h=140&w=207" />
<h3><a href="http://yourlink.com" rel="tag">Company News</a>, <a href="http://yourlink.com" rel="tag">News</a></h3>
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:
<div class="item Audio TV" data-category="Audio TV">
<h3><a href="single_portfolio.html">Green Robot</a></h3>
<img alt="Green Robot" src="demoImages/image.jpg&h=190&w=290" />
<h3><a href="#" rel="tag">Audio</a>, <a href="#" rel="tag">TV</a></h3>
- All navigations are created by forming nested lists
- Navigations can be easily setup by copy/paste from the provided page templates
For support please visit our support portal and register as described above.