Supreme Theme

This is the theme help documentation file. Please search this before contacting for support. Note: We do not support theme customizations beyond it's original functionality & appearance.

Live Demo Contact Us

1. Getting started

We really appreciate that you bought our template. We hope that it will be serves you well. If your like our template just let us now or you can stay in touch with us through facebook or twitter. It would be great if you recomended us to your friends and colleagues. If you have some questions just send a message we are looking forward to your emails.

Your Pixelized team.

2. Feedback

Like our work? Have some problem? Drop us line. We really like to hear about you. Especially we like to see your websites builded on our theme. Don't be shy and send us link to your branded new websites. The best sites we will posted on our Facebook or twitter if you give us your permission. Nothing is better feel than see our theme on working site.

Facebook Twitter

3. Plugins

3.1 Font Awesome

It’s one of the most powerfull tools. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Let’s take a look. In the index.html you can find few icons in Service section. This is a font awesome so let’s say we want to change them to more suitable for your purposes. Open the index.html in some editor and find following code.

<i class="fa fa-mobile"></i>

Here you can change appearance of this icon just simply remove class „fa-mobile“ and type for instance „fa-money“. Now save the changes and refresh page and icon is different.

For full documentation how to customize this plugin (size, color, rotation etc.) and full list of different types of icons go to fontawesome.io

3.2 Isotope

This plugin allow us really cool effect which you can see in page portfolio.html when you clicked on some of these buttons.

Then you can watch cool shuffle effect. This plugin we bought specially for you.

Full documentation you can check here isotope.metafizzy.co

3.3 Magnific Popup

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.

For full documentation go to www.dimsemenov.com/plugins/magnific-popup/

3.4 Owl Carousel

We decided replace default bootstrap carousel to amazing Owl carousel. This plugin is used for slideshow on index.html page and other homepages.

This carousel has tons of features it’s a powerfull tool.

For full documentation go to www.owlcarousel.owlgraphic.com

3.5 Bootstrap Validation

This plugin checks correctly entered data into the contact form. Until all data are correctly entered into the contact form will not be sent. If you send the form and if any data is not filled or filled incorrectly, contact form displays a warning message.

For full documentation how to customize this plugin go to Bootstrap Validation

3.6 PHP Mailer

We prepared for you send.php file. This is only example how to use php mailer plugin for sending email through contact form. Only thing you have to do is download that phpmailer plugin from here. For full documentation check php mailer.

3.7 Animate

Common use of animate

It is awesome CSS3 plugin which allows us to animated individual parts of our themes. Example is best so in the index page you can seen image with some devices. When you refresh the page this object is slightly slide in down if you want to change this effect simply open in index.html in some editor, go to the line 180 and try to change class „fadeInDown“ to „slideInLeft“. You see what happens when you safe the changes and refresh the index page.

Animate plugin in Owl Carousel

This plugin uses Owl Carousel for effects when carousel sliding to another slide.

For full documentation go to daneden.github.io/animate.css/

3.8 Color Switcher

It is plugin developed by ourselfs. It allows you to change a color in real time. Basically you can change the whole appereance by yourself.

Now let’s take a look how to set your favourite look.

Setup color

  1. At first you have to decided which color is best for you.
  2. Open .html page in some editor.
  3. To change your color find line 40.
color switcher

Now just simply change (underlined word) "red" to the one you choosen on the start of this procedure "blue" now save this change and refres edited page and enjoy.

All colors

Color Hex code Preview
Red CB2027
Blue 3276B1
Orange F8B533
Green 54B132
Purple D138BD
Light Blue 60ACDB
Light Green 87D14B
Brown B18232
Yellow E8D827
Pink E66CE1

Remove ColorSwitcher

When you are done with color changes is no longer necessary to have ColorSwither on your page.

  1. Open .html files and delete everything between lines 62 - 83 including. On the image below are the lines which you delete. Now the icon of ColorSwitcher on the page is gone.
  2. Delete file color-switcher.css
  3. Delete file color-switcher.js

3.9 Creative Brands

It’s css add-on more than plugin. This add-on edits appereance of logos social sites in the footer. For more brands.pixelized.cz

3.10 Counter Up

This plugin allows us visualize counting to some number. You can see this plugin under "WHAT PEOPLE SAY ABOUT US" section.

To customize this open .html file and find "counter" section. Inside this section find element "span" inside this span just type your number. Everything you can see on picture below

In the custom.js you can find initialization of this plugin and setting as a dealy or time.

Full documentation you can check here github.com/bfintal/Counter-Up

3.11 jQuery Countdown

As the name of this plugin says this is just simple countdown. This plugin you can find on homepage-3.html and homepage-5.html

If you want to change date just simply open custom.js and go to line 210 and change '2017/01/01' to any date you want in format 'YYYY/MM/DD'

For mor information how display your tweets check full documentation of this plugin. jQuery Countdown

4. Features

4.1 Owl Carousel with Animations

We created very simple animated carousel. There is used slide effect for headings, paragraphs, lists, etc. Example is used in index.html on every slide.

First you have to add class owl-animation into main element of Owl Carousel.

Now if you want to add some animations to any object. You have add core class animation to the object. Then you have to choose from which side object comes (top-to-bottom). You can also add some delay of slide effect and choose speed of the effect. (default speed is 1000ms)

<h2 class="animation top-to-bottom slow">Supreme</h2>

Owl Animation - Classes

4.2 Homepage with Video Background

One of our home pages supports video background. It means that you will be able to play video, which is uploaded on youtube, on the background on the top of your homepage. Video background is feature of homepage-4.html

If you want to put your own video you have open homepage-4.html file in some editor and in the "jumbotron" section paste your own video link. You will paste your link insted of link which is underlined on the pictures below.

This kind of link you can find on youtube when you click on "share" below the video.

For correct functionality you has to have line, displayed below, on your custom.js. It is plugin initialization.

You can find full documentation on: pupunzi.open-lab.com

4.3 Type Effect

On the homepage-2.html we are using cool plugin, which was created by matt boldt, this plugins creating some kind of "typing" efect. You can see this in the jumbotron section on the top of the page.

Static part

Customizing is very simple if you want to change static part ("we are" on the demo) open homepage-4.html and edit underlined text from image below.

Dynamic part

Dynamic part you can customize if you open custom.js file in some editor and find lines which are displayed below. Now there are strings "Creative." and "Modern." you can replace or add more new strings that are more suitable for you.

Final effect

You can find full documentation on:www.mattboldt.com/demos/typed-js/

5. FAQ

If I buy an Single application license, can I remove your Copyright-Line?

Yes, in any kind of license you definitely can remove copyright. But if you like our work you can place there just "created by pixelized" it is completely up to you.

How do i connect contact form with my email.

This is only html5, css3 & jQuery theme. There isn't any script to do it. You have to use some external script probably PHP or something. We are selling many of copies and everybody has slightly different requirement so we are not able to build single one script.

Nevertheless we have prepared for you little example how can look like PHP script for sending messages. For more informations check PHP mailer.

Can i use, images included in this theme?

In credits section you can find links to every image. So find image you want in credits and check licence on source page.

6. Credits

6. 1 Plugins

6. 2 Images - Galery, Slideshow

6.3 Others