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.
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