Start

klasik

Retina Responsive Wordpress Theme

Created: 06/06/2013

latest Update: 06/06/2013

By: Umbrella

Email: info@umbrella.al

Klasik is a minimalistic wordpress creative theme.

Build on a clean and classic design, and in a good thought funcionality Klasik can be your best choice for a minimalist blog, portfolio, gallery, presenting your work or photographies. Klasik is a simple to use and it's branding features gives you a great and powerful options to customize colors and fonts so you can simply make your own style. Also four different types of home page templates gives you opportunity to to be more unique.

link to PSD files: here

Features

Responsive Design
Retina Ready
Fully Customable Style
MasonryJS
IsotopeJS Sorting
3 Home Pages
2 Service Page
1 Gallery Page
1 Blog Page
1 Contact Page
1 About Page
3D Slider
Skitter Slide (3 different slider themes and up to 38 different animations)
2 Custom Posts (Galleries & Services)
Font awesome with up to 316 icons
Translation Ready
Shortcodes (up to 38)
Child Theme Ready
Premium Option Panel
500+ Google Fonts
Ajax
Gallery Likes
Social Share Buttons
Comments per Post
Social Network Links
Preset Background Patterns
Background Image Styles
Grayscale Homepage Option
Random Hover and Random Colorize Animation
Google Map
Widget Ready
Right, Left and Bottom Widget Area
2 custom Widgets (twitter, Find Us)

Setup

Just upload klasik.zip via theme uploaded on your wp-admin and you're ready to go.

If you get any error after you installed the theme than this could happen :

1.Because you uploaded the theme as a Folder and you where using FTP Text Mode, use Binary Mode instead
2.Or delete the Theme folder and install .zip file which is in this package

Options

Main Options

Disable all likes
Social Share Raper Button
Disable Social Shares
Social Shares
Right, Left or Bottom Widget
Custom CSS
Custom JS

Branding Options

Costum Font
Lite and Dark Fonts
Background Image
Background Image Position
Preset Background Patters
Transparent Container
Background Color
Content Color
Bucket Color
On Hover Color
Footer Icon Colors

Header Options

Site Favicon
Text Logo
Text Logo Color
Text Logo Font
Text Font Size
Sub Menu Color
Sub Menu Hover Color

Footer Options

Copy Right Text
Social Networks
Enable/Disable Slide Up

Main

Main Options

Disable all likes
Check it if you don't want to show likes on galleries
Social Share Raper Button
Give a text to a button that slides down social share buttons
Disable Social Shares
Check it if you don't want to give right to visitors to share your page
Social Shares
Choose which share buttons to appear
Right, Left or Bottom Widget
Check to make the Main sidebar to appear on the "Right Side "! Unchecked to make the Main sidebar to appear on the "Left Side"!
Custom CSS
Write your custom CSS without touching the existing code
Custom JS
Write your custom JS without touching the existing code

Branding

Branding Options

Custom Font
Choose a custom font for your website!
Light Font
If all of the content colors are dark. You need to use light font.
Background Image
Add a background image to wour website!
Background Image position
Choose a position for the background. Note: Default Value - Left Top
Preset Background patters
Choose some pre-defined patters for your background Note: If you choose a costume image for you background these patters will have no effect!
Transparent Container
Use 0 - 10 for the container to make it transparent
Background Color
Choose your background color.
Content Color
Choose the color for the content (container)
Bucket Color
If no image, Choose a default color to present the galleries
On Hover Color
Choose the Color of the bucket hover
Footer Icon Colors
Choose the color for the icons in the footer

Simply you can pick a color for every color fields above, just like this:

Head

Header Options

Site Favicon
Choose a favicon for your website!
Logo
Add your logo here
Text Logo
Add Text as logo. Note: this text only shows if you do not insert a logo image!
Text Logo Color
Choose a color to the text logo
Text Logo Font
Choose the text logo font (Google fonts)
Text Font Size
Choose the size of the text logo
Sub Menu Color
Choose a color for the sub-menu (Drop down)
Sub Menu Hover Color
Choose a color for the hover on sub-menu (Drop Down)

Setting up the logo is simple by pressing on the logo area and choosing one form media images:

Home 1

Home1 Options

Home Title
Add a title to your Home page!
Home Tagline
Add a Tagline to your Home page.
Gallery on home
Display as many galleries as you want!
Image Grayscale
Make all images in home1 grayscale!
Design
Choose a design pattern for showing projects in home1!
Effect
choose between effect for the home albums. Note: IF gray scale (options->main) is on the Colorize Image will make images turn to their original colors, otherwise it will turn them to gray scale

Homepage1 comes with 2 different styles that you can choose from the Design field. Klasik and Static.

The Klasik Design shows your albums in it's way so it makes your albums in the size that will look better on the "klasik style". If you'll choose this style we will recommend the image sizes for your galleries that will be shown on home page:

First Album - 285 x 341

Second Album - 315 x 217

Third Album - 315 x 217

Forth Album - 651 x 353

Fifth Album - 285 x 227

You can choose a mode to make images Gray scale or not. If you select this option than you can select Colorize Image effect that randomly will make a album image colored.

Note: if you check this effect and you didn't select Image Gray scale thew will turn grayscale randomly.

Or you can prefer Random Hover Effect that will animate your home albums as in mouse hover. This will take effect only when your not moving your cursor.

Static Design will make your home albums in the same size 300 x 200 and show 3 in a row. So for a simplicity and great looking you can choose Static Design.

You can change the views between the Klasik and Static by clicking the 2 button on Home1. This will change the view by Ajax (so no reload is needed).

So to get all the Galleries to display on the home1 just drag them to the position you want them to be.

Home 2

Home2 Options

Home Title
Add a title to your Home page!
Home Tagline
Add a Tagline to your Home page.
Gallery on home
Display as many galleries as you want!

Home Page 2 is good selection for minimalist home page. Just choose your gallery posts that you want to show and your ready to go.

Best picture size for Home 2 will be 720 x 390.

Note: less than 3 posts will not be shown on this page template.

Home 3

Home 3 Options

Slider
Add as many Galleries (Works) To show on the slider
Service Name
Add a text to display for the latest Services
Works Name
Add the text for the Latest Galleries (Works)

Blogs Name
Add the text for the Latest Blogs
Disable Services
Works Name
Disable Latest Works
Disable Latest Blogs

To setup the Home 3 Page just create a Page and select the template as Home 3

To select some works to be displayed in the slider you can just drag and drop them.

Home 3 will also display your latest works, services and blog. So you can change the name of the title.

Also you can disable Latest works, services and blogs.

Gallery - Projects

Gallery Options

Disable Likes
Disable Likes for this post
Slider Images
Add images to the slider.
Disable Url
Disable the url
The Url
Add the url that will redirect to the project (gallery) web page
Disable Similar Project
Disable the similar project slider!

To setup a gallery post, you have to click on the gallery pots in the option panel and then add a new gallery.

You need to add a featured image to present your gallery.

To add an image to the slider you need to go to the slider Images and choose an image that you want to add, there is a field called Description for every image so you can write a short description to that image.

Works - Template

Works Options

Page Title
Add the page title. Note: if this field is empty the Menu Title will be displayed!
Works on page
Display Works on page load. Note: negative numbers will display 12 Works (galleries).
Load More
How many works will be added when the button "Load More" is clicked. Note: Negative Numbers will add 4 Works (Galleries).

This template is created to present the galleries that you made.

You can add also content to it so you may use it to describe your work in a brief.

The 'works on page' filed is a number that you will need add so this field will display the works when the page is loaded.

The "Load More" field is also a number that you will need to add so this field will display how many works will be shown when the user presses the Load More button

Services

To create a Service is easy, is just the same like creating a post. Just go to the admin panel and click Services.

You can create as many services as you like.

You need to add the name of the service, the content and the also you can choose a icon for that services. We support Font awesome so you can choose between 316 icon for you service.

Perhaps you have another website for that specific service so you can add the link in this web that will redirect you to that site.

Service 1 & 2 - Template

Services 1 and 2 template have the same purpose to display you services.

The difference is in the design.

Other difference is that the service 2 has more space to display the content. So in services 1 you have a "view more" button that will redirect you to a page that will be displayed the full content.

There are also a section "Partners".

You can add a image (logo) of you partners and a link that will redirect you to the partner website

Post - Blog Template

Blog Options

Page Title
Add the page title. Note: if this field is empty the Menu Title will be displayed!
Posts on page
Display Posts on page load. Note: negative numbers will display 3 blog posts.
Load More
How many works will be added when the button "Load More" is clicked. Note: Negative Numbers will add 3 Posts.

You will need to add the featured image. This featured image will Present that blog post and also will be shown inside the blog page (single.php)

About - Template

About Options

Page Title
Add the page title. Note: if this field is empty the Menu Title will be displayed!
Paragraphs
Add paragraphs to display your work.
Team
Add as many team members as you want.

Simply add ass many paragraphs as you want in the 'Paragraphs' section. Use add a Paragraphs to add more rows.

Same as the Paragraphs you can add team members in the "Team" Section.

In the Team section you will also need to add there images, full name, description, Social networks.

Contact - Template

Contact Options

Page Title
Add the page title. Note: if this field is empty the Menu Title will be displayed
Contact Form Title
Your Contact Form Title.
Map Title
Add the title for the Map
Map Zoom
Level - zoom between (0 - 19) Note: anything under 0 will be 0, anything bigger than 19 will be 19
Google Map
Search for your location and pick the exact area you want!
Disable Map
If you don't want to use a map and show your location, simply disable it!

Short codes

On every page you can use shortcodes! On WYSIWYG (What You See Is What You Get) area you can an simply pres shortcode buttons on the toolbox and write the content of it.

Heading tags are simply to use, just click on the Heading tag you want and write your text inside [Hn]tags[/Hn]! (n-represents hedings number, like H1 is bigger and H6 is smaller one).

Also Buttons are too simply. Choose one from toolbox (which color and size you want) and just on te link part write your url and between opened and closed brackets write the button title (name).

The same simplicity goes on alerts too.

Videos can be added in the same way for youtube and vimeo.

Here is the sample:

the ID is the last part on the link, like this:

[youtube width="450" height="300" id="8ptfyhBjXj8" ][/youtube]

vimeo example:

Accordions have a construction like this.

[accordion]
[accordion_item title="Title1"]For at least 40,000.[/accordion_item]
[accordion_item title="Title2"]A highly developed[/accordion_item]
[/accordion]

Just replace the “Title1” with your title and the text with your content.
To add more accordions just copy one of the existing and change the tile and conent. Careful with the starting & ending tags [accordion][/accordion]

Tabs has a similar structure with tags too:

[tabgroup]
[tab title="Tab1"]The earliest.[/tab]
[tab title="Tab2"]A highly.[/tab]
[/tabgroup]

Just replace the “Tab1” with your title and “the earliest” with your content and you're done. To add more tabs, just copy one of the lines ex. [tab title="Tab1"]The earliest.[/tab] and edit the data in it.

On Sliders you should choose a theme for it. Available themes are: "Default, Minimalist, Round, Clean, Square".

A size: "Large, Medium, Small".

Note: If you don't choose a size it will be large by default.

An effect and of course an image source. You have to write the source, NOT adding a media. You can get the sources of images by pressing "Add Media" button, selecting an image, and copying the link of the image in your right side on the properties panel.

Note: If you let the effect section blank it will show on "fade" effect by default.

Note: Be careful on the Image Sizes you select!!!

recommended image sizes are:

Large: 800 x 300.

Medium: 500 x 200

Small: 200 x 100

That's all. Here is the list of slider effects:

cube
cubeRandom
block
cubeStop
cubeHide
cubeSize
horizontal
showBars
showBarsRandom
tube
fade
fadeFour
paralell
blind
blindHeight
blindWidth
directionTop
directionBottom
directionRight
directionLeft
cubeStopRandom
cubeSpread
cubeJelly
glassCube
glassBlock
circles
circlesInside
circlesRotate
cubeShow
upBars
downBars
hideBars
swapBars
swapBarsBack
swapBlocks
cut
random
randomSmart

Font Awesome is a shortcode to add icons with up to 316 icons.

It's easy to add an icon anywhere you want, just like this:

[fontAwesome name="icon-name" size="icon-size"] [/fontAwesome]

You can use 3 different sizes, like: icon-large, icon-2x, icon-3x, icon-4x, or leave it blank for normal size.

here they are a list of icons you can use:

icon-glass
icon-music
icon-search
icon-envelope-alt
icon-heart
icon-star
icon-star-empty
icon-user
icon-film
icon-th-large
icon-th
icon-th-list
icon-ok
icon-remove
icon-zoom-in
icon-zoom-out
icon-off
icon-signal
icon-cog
icon-trash
icon-home
icon-file-alt
icon-time
icon-road
icon-download-alt
icon-download
icon-upload
icon-inbox
icon-play-circle
icon-repeat
icon-refresh
icon-list-alt
icon-lock
icon-flag
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag
icon-tags
icon-book
icon-bookmark
icon-print
icon-camera
icon-font
icon-bold
icon-italic
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-list
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture
icon-pencil
icon-map-marker
icon-adjust
icon-tint
icon-edit
icon-share
icon-check
icon-move
icon-step-backward
icon-fast-backward
icon-backward
icon-play
icon-pause
icon-stop
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-share-alt
icon-resize-full
icon-resize-small
icon-plus
icon-minus
icon-asterisk
icon-exclamation-sign
icon-gift
icon-leaf
icon-fire
icon-eye-open
icon-eye-close
icon-warning-sign
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
icon-bar-chart
icon-twitter-sign
icon-facebook-sign
icon-camera-retro
icon-key
icon-cogs
icon-comments
icon-thumbs-up-alt
icon-thumbs-down-alt
icon-star-half
icon-heart-empty
icon-signout
icon-linkedin-sign
icon-pushpin
icon-external-link
icon-signin
icon-trophy
icon-github-sign
icon-upload-alt
icon-lemon
icon-phone
icon-check-empty
icon-bookmark-empty
icon-phone-sign
icon-twitter
icon-facebook
icon-github
icon-unlock
icon-credit-card
icon-rss
icon-hdd
icon-bullhorn
icon-bell
icon-certificate
icon-hand-right
icon-hand-left
icon-hand-up
icon-hand-down
icon-circle-arrow-left
icon-circle-arrow-right
icon-circle-arrow-up
icon-circle-arrow-down
icon-globe
icon-wrench
icon-tasks
icon-filter
icon-briefcase
icon-fullscreen
icon-group
icon-link
icon-cloud
icon-beaker
icon-cut
icon-copy
icon-paper-clip
icon-save
icon-sign-blank
icon-reorder
icon-list-ul
icon-list-ol
icon-strikethrough
icon-underline
icon-table
icon-magic
icon-truck
icon-pinterest
icon-pinterest-sign
icon-google-plus-sign
icon-google-plus
icon-money
icon-caret-down
icon-caret-up
icon-caret-left
icon-caret-right
icon-columns
icon-sort
icon-sort-down
icon-sort-up
icon-envelope
icon-linkedin
icon-undo
icon-legal
icon-dashboard
icon-comment-alt
icon-comments-alt
icon-bolt
icon-sitemap
icon-umbrella
icon-paste
icon-lightbulb
icon-exchange
icon-cloud-download
icon-cloud-upload
icon-user-md
icon-stethoscope
icon-suitcase
icon-bell-alt
icon-coffee
icon-food
icon-file-text-alt
icon-building
icon-hospital
icon-ambulance
icon-medkit
icon-fighter-jet
icon-beer
icon-h-sign
icon-plus-sign-alt
icon-double-angle-left
icon-double-angle-right
icon-double-angle-up
icon-double-angle-down
icon-angle-left
icon-angle-right
icon-angle-up
icon-angle-down
icon-desktop
icon-laptop
icon-tablet
icon-mobile-phone
icon-circle-blank
icon-quote-left
icon-quote-right
icon-spinner
icon-circle
icon-reply
icon-github-alt
icon-folder-close-alt
icon-folder-open-alt
icon-expand-alt
icon-collapse-alt
icon-smile
icon-frown
icon-meh
icon-gamepad
icon-keyboard
icon-flag-alt
icon-flag-checkered
icon-terminal
icon-code
icon-reply-all
icon-mail-reply-all
icon-star-half-empty
icon-location-arrow
icon-crop
icon-code-fork
icon-unlink
icon-question
icon-info
icon-exclamation
icon-superscript
icon-subscript
icon-eraser
icon-puzzle-piece
icon-microphone
icon-microphone-off
icon-shield
icon-calendar-empty
icon-fire-extinguisher
icon-rocket
icon-maxcdn
icon-chevron-sign-left
icon-chevron-sign-right
icon-chevron-sign-up
icon-chevron-sign-down
icon-html5
icon-css3
icon-anchor
icon-unlock-alt
icon-bullseye
icon-ellipsis-horizontal
icon-ellipsis-vertical
icon-rss-sign
icon-play-sign
icon-ticket
icon-minus-sign-alt
icon-check-minus
icon-level-up
icon-level-down
icon-check-sign
icon-edit-sign
icon-external-link-sign
icon-share-sign
icon-compass
icon-collapse
icon-collapse-top
icon-expand
icon-eur
icon-gbp
icon-usd
icon-inr
icon-jpy
icon-cny
icon-krw
icon-btc
icon-file
icon-file-text
icon-sort-by-alphabet
icon-sort-by-alphabet-alt
icon-sort-by-attributes
icon-sort-by-attributes-alt
icon-sort-by-order
icon-sort-by-order-alt
icon-thumbs-up
icon-thumbs-down
icon-youtube-sign
icon-youtube
icon-xing
icon-xing-sign
icon-youtube-play
icon-dropbox
icon-stackexchange
icon-instagram
icon-flickr
icon-adn
icon-bitbucket
icon-bitbucket-sign
icon-tumblr
icon-tumblr-sign
icon-long-arrow-down
icon-long-arrow-up
icon-long-arrow-left
icon-long-arrow-right
icon-apple
icon-windows
icon-android
icon-linux
icon-dribble
icon-skype
icon-foursquare
icon-trello
icon-female
icon-male
icon-gittip
icon-sun
icon-moon
icon-archive
icon-bug
icon-vk
icon-weibo
icon-renren

Widgets (Sidebars)

You have two options for widgets:

To display them on a main sidebar or on the footer sidebar.

Main Sidebar can be displayed in left or right side. (You can change it's side by going to Options > Main).

Main sidebar will be displayed on: blog page, single blog page, default pages and archives.

Or the Footer Sidebar will be displayed on every page you like.

To set them up just go to Appearance > Widget and drag and drop the widgets by your wish.

We offer also 2 custom widgets.

Twitter

Just drag and drop the Twitter widget and add the follow link without an @ ... ex: for @9GAG just add 9GAG

Find us

Just drag and drop the Find us widget and fill the text boxes with the Address, Phone and e-mail

Umbrella - klasik Documentacion