### “Blank” Documentation by “WiThemes” v2.2.1

# “Blank”

Created: 07/07/2013
By: WiThemes
Email: Our Themeforest Contact
Support: WiThemes' Support

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to open a ticket at our support desk. Thanks so much!

## Table of Contents

1. Installing Theme
2. Quick Setup
3. Theme Options
4. Post Options and Post Formats
5. Shortcodes
6. Setting Up About and Contact page
7. Setting Up Portfolio
8. Widgets
9. Translation
10. CSS and Javascript
11. Credits

### A) Installing Theme - top

Before using this theme, you have to install Wordpress. To install Wordpress, just follow instructions in the Wordpress Codex: Installing Wordpress

To install Blank theme, there are 2 ways:

- First way: In the Dashboard, navigate to Appearance » Themes. Click Install Themes » Upload and then upload the file blank.zip. After uploading completed, just activate the theme. IMPORTANT NOTE: The package you downloaded from Themeforest is not the really theme. Please unzip that package until you get a file called blank.zip. If you get error "Stylesheet is missing", check this post.
- Second way: Using FTP Upload. Extract the blank.zip file and upload the folder blank to folder /wp-content/themes/ on your server.

IMPORTANT NOTE: If your site content is empty (no posts, no pages), you have nothing to do. But if your site have posts, you have to use plugin Regenerate Thumbnails or Ajax thumbnail rebuild to generate necessary thumbnails for Blank theme. (Install and use this plugin after installing Blank)

### B) Quick Setup - top

For quick setup, we included an XML demo file in the theme package. After unzip the theme package downloaded from Themeforest, please looking for a file named demo.xml. To import demo data, please follow the following steps:

1. In Dashboard, navigate to Tools » Import
2. Select and install Wordpress Importer.
3. Select and upload file demo.xml above.
4. Navigate to Appearance » Menus, select the newly created menu and assign it to "Primary Menu" location.

IMPORTANT NOTE: If you want to get all projects / portfolio in demo data, you must install Wi:Portfolio plugin before importing data.

### C) Theme Options - top

Navigate to Appearance » Theme Options to customize your theme. All options are clear and interpreted very detail in the option panel.

#### Backup Options

This section is used to backup your settings to reuse when you need. After saving data, click the button Backup Options. When you need to restore the last backup, click Restore Options.

### D) Post Options and Post Formats - top

Each Post has a custom option panel named Post Options. If it's not showing, check the Screen Options (on the top right). Post options are designed mainly for post formats. In each post, you need to care about options of the post format you intend to use.

#### 1/ Layout

Layout: There are 2 layouts: fullwidth or medium (halfwidth) for blog displaying purpose. If you ignore this option, layout will be taken from Theme Options.

Display content or excerpt?

Blog Thumbnail Crop: Select Yes if you want to display featured image of this post in fixed width/height on the blog. Select No otherwise.

#### 2/ Featured image crop?

If choose crop, featured image will be fixed in height (770x420px). If choose nocrop, featured image will be auto height (770px in width and height depends on each image proportion).

#### 3/ Audio / Video options

There is only 2 options: Media Code and Seft-hosted Media URL.

Media code is common for both Video and Audio format. Here you can paste YouTube / Vimeo / DailyMotion / Hulu / Soundcloud URL. Note: Do not paste embed code or video ID, just URL.

- False: `<iframe width="560" height="315" src="http://www.youtube.com/embed/CXypB4tOlOc" frameborder="0" allowfullscreen></iframe>`
- False: `CXypB4tOlOc`
- True: `http://www.youtube.com/watch?v=CXypB4tOlOc`

With Seft-hosted media URL, please paste your video/audio file URL here. Example:

- True: `http://yourdomain.com/path/path/filename.flv`
- True: `http://yourdomain.com/path/path/filename.mp3`

NOTE: If your post format ware video and you're using self-hosted video, then your featured image will become video placeholder image. You can remove featured image if you do not want so.

#### 4/ Link format options

This part is very obvious. Link text will be the post title.

#### 5/ Quote format options

Quote author name is obvious. Quote format has 2 versions: light and "dark". In the light version, do not check to Colored Background in the post options.

#### 6/ Gallery format options

If you publish post in gallery format, it'll take all images attached to the post to create gallery (featured image is always the first image). In gallery options, you can decide which element to show / hide, which animation effect to use (slide or fade), auto play slider or not.

The only hard part of gallery options is Smooth height. For example, if you have 2 images of size 600x500 and 600x400. If you set check smooth height, then slider height will be 500 when first image is visible and 400 when the second is visible. Otherwise, the slider height will be fixed 500px (max height of all images in the slider).

### E) Shortcodes - top

Blank has 14 shortcodes: column, progress, gmap, icon, dropcap, button, list, br, clear, hr, spacer, video, soundcloud, highlight.

#### 1/ Column shortcode

Column shortcode is used to layout page. There are 2 parameters:

1. size: (required) 1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5, 4/5, 1/6, 5/6. You need to specify size of the column.
2. last: true or false. Determine last column or not. If you forget this param, your columns won't display correctly.

    [column size="1/2"]CONTENT GOES HERE[/column]
    [column size="1/2" last="true"]CONTENT GOES HERE[/column]

#### 2/ Progress shortcode

Progress shortcode is used to display skills. 5 params:

1. percent: (required) A number between 0 and 100.
2. name: (required) The skill to display. Eg: Design, Art, Music...
3. color: (optional) Color of the bar. If not set, it will take the primary color.
4. thickness: (optional) The thickness of circle. Default 15px.
5. size: (optional) Width and height of circle. Default is 150px.

    [progress percent="90" name="Design Skill" color="#222" thickness="5" size="120"]

#### 3/ Google map shortcode

Google shortcode is used to display maps, of course ;). 5 params:

1. address: (required) Address you want to display.
2. height: Height of the map, default is 400px. (width is always 100%. If you want a smaller map, contain it by a column shortcode)
3. marker: true or false. Show marker or not. Default is false.
4. info: The infobox content you want to display. Eg: 1400 NewYork, USA.
5. open_info: true or false. Show the infobox initially. Default: false

    [gmap address="1400 Newyork" height="320" marker="true" info="My Address: 1400 Newyork" open_info="true"]

#### 4/ Icon shortcode

Intended to display social icons. 5 params:

1. icon: The icon you want to display. Social icons include: facebook, twitter, google-plus, linkedin, tumblr, pinterest, youtube, skype, instagram, delicious, reddit, stumbleupon, wordpress, joomla, blogger, vimeo, yahoo, flickr, picasa, deviantart, github, stackoverflow, xing, flattr, foursquare, paypal, yelp, soundcloud, lastfm, lanyrd, dribbble, forrst, steam, behance, mixi, weibo, renren, evernote, dropbox, bitbucket, trello, vk.
   Other icons you can found at Awesome font
2. link: URL you want to link to. Eg: http://themeforest.net
3. target: _self or _blank. Choose _blank if you want to open link in a new window/tab.
4. title: Title of the icon.
5. tooltip: true or false. Set true if you want to enable tooltip on this icon.

    [icon icon="twitter" link="http://twitter.com/withemes" target="_blank" title="My Twitter" tooltip="true"]

#### 5/ Dropcap

There is no params, just use it. Unfortunately, we have only 24 letters can be used for dropcap. This font does not have letter J and U.

    [dropcap]L[/dropcap]orem ipsum dolor...

#### 6/ Button

There're 5 params:

1. icon: Which icon to use with button. It's optional.
2. link: Which page this button link to.
3. target: As above, _self or _blank. Default is _self.
4. style: 1, 2 or 3. There're 3 styles for button.
5. lightbox: true or false. Use lightbox or not. If true, URL of button should be an image.

    [button icon="music" style="2" link="http://themeforest.net/user/withemes" target="_blank" lightbox="false"]

#### 7/ List

This shortcode is used to style lists. There is only 1 param.

1. type: plus, minus, hash, star.

    [list type="star"]
    YOUR LIST GOES HERE
    [/list]

#### 8/ Highlight

This shortcode is used to emphasize text. There is only 1 param:

1. type: 1 or 2. There are 2 types.

    At vero eos et accusamus et [highlight style="2"]iusto odio dignissimos[/highlight] ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores

#### 9/ Video and Soundcloud

The same as standard embed shortcode but [wivideo] and [soundcloud] shortcodes make your video/audio responsive.

    [wivideo]https://vimeo.com/65629901[/wivideo]
    [soundcloud]https://soundcloud.com/neo-light/network-23-34-03[/soundcloud]

Important Note: With Wordpress 3.6, [video] becomes a native (built in) shortcode. So we have to change [video] shortcode to [wivideo]. Please update your posts if you're using Wordpress 3.6.

#### 10/ Br, clear, hr, spacer

Usage is obvious.

#### 11/ Iconbox

There are 2 params:

1. icon: Choose any icon in this list
2. title: Title of the iconbox. Default: None

#### 12/ Recent work

This shortcode is used to display your portfolio (recent works). There are 6 params:

1. number: Number of item want to show. Default is 9.
2. column: Display portfolio in 2, 3 or 4 columns. Default is 3.
3. crop: Crop thumbnail or not? "true" or "false". Default is "true".
4. excerpt: Display excerpt or not. Default is "true".
5. excerpt length: An integer. Default: 20.
6. filter: Show portfolio filter or not? "true" or "false". Default is "true".
7. categories: category IDs, separated by commas.
8. exclude_categories: IDs of categories you want to exclude, separated by commas.

#### 13/ Recent posts

This shortcode is used to display blog recent posts. There are 2 params:

1. number: Number of posts you want to show. Default is 3.
2. excerpt length: An integer. Default: 14.

### F) Setting Up About and Contact page - top

About and Contact page use a little shortcode: [column], [progress], [gmap]. If you don't know how to use shortcodes, learn about it here

#### 1/ About page

Please paste following code into your HTML Editor, not Visual Editor.

<img class="aligncenter size-full wp-image-454" alt="boy-102832_1920" src="http://withemes.com/blank/wp-content/uploads/2013/07/boy-102832_1920.jpg" width="200" height="200" /> <h1>Hi.</h1> [dropcap]M[/dropcap]y name's [highlight style="1,2"]Cuong[/highlight]. I'm from Vietnam. I love Wordpress and elegant designs. I've joined Themeforest since February, 2013. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <h2>A little about me</h2> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. <h2>What I do?</h2> [column size="1/2"] [iconbox title="Design" icon="magic"] Duis autem vel eum <strong>iriure dolor</strong> in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis [/iconbox] [/column] [column size="1/2" last="true"] [iconbox title="SEO" icon="search"] Luis dolore te feugait nulla facilisi. Nam liber <strong>tempor cum</strong> soluta nobis eleifend option congue nihil imperdiet do. [/iconbox] [/column] [column size="1/2"] [iconbox title="HTML/CSS" icon="html5"] Duis autem vel eum <strong>iriure dolor</strong> in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis [/iconbox] [/column] [column size="1/2" last="true"] [iconbox title="Marketing" icon="rocket"] Luis dolore te feugait nulla facilisi. Nam liber <strong>tempor cum</strong> soluta nobis eleifend option congue nihil imperdiet do. [/iconbox] [/column] <h2>My crazy skills</h2> [column size="1/3"] [progress percent="60" title="Wordpress / CMS" thickness="3" color="#666" size="120"] [/column] [column size="1/3"] [progress percent="90" title="Design Skill" color="#222"] [/column] [column size="1/3" last="true"] [progress percent="80" title="HTML / CSS / JS" color="#666" size="120" thickness="3"] [/column] <h2>Recent work</h2> [recent_work column="2" number="4"] <h2>Recent posts</h2> [recent_posts number="2" excerpt_length="14"] <h2>And the last</h2> Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. [button icon="play" link="http://withemes.com/blank/contact/" target="_self" lightbox="false" style="1"]Feel free to contact me[/button]

#### 2/ Contact Page

Contact Page use Contact form 7 plugin which is included in the theme package. You need to activate this plugin before using it. If you haven't installed yet, navigate to Appearance » Install Plugins and install it. Learn how to use Contact form 7, please to to Plugin page

[gmap address="11 Park Place, New York City, NY 10007, United States" marker="true" info="11 Park Place, New York City, NY 10007, United States" height="300"] <h2>Drop me a line</h2> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. [contact-form-7 id="6" title="Contact form 1"] <h2>Find me social</h2> [icon icon="facebook" title="My Facebook" link="#" target="_blank" tooltip="true"] [icon icon="twitter" title="My Twitter" link="http://twitter.com/withemes" target="_blank" tooltip="true"] [icon icon="google-plus" title="Google+" link="#" target="_blank" tooltip="true"] [icon icon="linkedin" title="Linked In" link="#" target="_blank" tooltip="true"] [icon icon="dribbble" title="Dribble" link="#" target="_blank" tooltip="true"] [icon icon="deviantart" title="Deviantart" link="#" target="_blank" tooltip="true"] [br] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

### G) Setting Up Portfolio - top

You need to install Wi-Portfolio plugin to deal with portfolio. This plugin has been included in your download package.

To create portfolio page, just simple create a new page, then select page template is Portfolio. Publish the page and see all your projects there.

We have several options for Portfolio page

1. Number of projects to show: obvious. Default is 9.
2. Number of columns: 2, 3 or 4 columns. Default is 3.
3. Crop thumbnail? If you choose yes, your portfolio thumbnail image will keep proportion 16 : 10. If you choose no, your portfolio thumbnail image will fixed in width and auto height.
4. Display portfolio excerpt? Obvious
5. Excerpt length: Obvious
6. Include Categories: category IDs, separated by commas
7. Exclude Categories: category IDs, separated by commas

### H) Widgets - top

Blank includes "Display Tweets" widget plugin in the theme package with NEWEST Twitter API v1.1. To use it, check this post. For other widgets, you can use them easily!

### I) Translation - top

Blank includes a `*pot` file in wp-content/themes/blank/languages/ directory. Open it with some Translation software, say POEdit. Translate all words you need and save 2 files `*po` and `*mo` as suitable names. For example, if you want to translate to Germany, save your files as de_DE.po and de_DE.mo. See Wordpress in your language for more details about file name.

Open file wp-config.php in your Wordpress root folder and looking for the line define('WPLANG', ''); Replace '' by the language you want. See Installing WordPress in Your Language for more details.

Example: If your language you want to translate was French. Following these steps:

1. Open file wp-config.php in your Wordpress root folder. You need FTP Software or some file manager to do this. Look for the line define('WPLANG', ''); and rewrite as define('WPLANG', 'fr_FR');. If your language is German, It should be define('WPLANG', 'de_DE');.
2. In to your theme, rename default.po and default.mo to fr_FR.po and fr_FR.mo.
3. Open fr_FR.po with POEdit and start editing. Try to save and see the translating in action.

### J) CSS and Javascript - top

CSS files are included in the following order:

- bootstrap.min.css - Bootstrap Framework
- font-awesome.min.css - Font Awesome Icons
- icomoon.css - Font Icomoon Icons
- normalize.css - Reset
- flexslider.css - CSS for Flexslider
- shortcodes.css - CSS for Shortcodes
- style.css - Main CSS File
- colorbox.css - CSS for Colorbox plugin
- responsive.css - CSS for Responsiveness
- tipsy.css - CSS for Tipsy tooltip
- jquery.mCustomScrollbar.css -CSS for Custom Scrollbar
- ie.css - CSS for old Browsers (IE < 9)

Javascript files include:

- jquery.autosize-min.js - Small plugin to autosize textareas
- jquery.easing.1.3.js - Easing Plugin
- jquery.fitvids.js - Resize Videos. Used for responsiveness purpose
- jquery.flexslider-min.js - Flexslider
- gmaps.js - Plugin to display Google Map.
- html5.js - To style HTML5 tags in old browsers (IE < 9).
- jquery.colorbox-min.js - Colorbox Lightbox.
- jquery.easy-pie-chart.js - To display skills.
- jquery.fittext.js - To fit text when screen width changes. Used for responsiveness.
- jquery.mCustomScrollbar.concat.min.js - Custom Scrollbar.
- jquery.sidr.min.js - Small plugin used to toggle sidebar.
- jquery.tipsy.js - Tooltip plugin.
- jquery.touchSwipe.min.js - To touch and swipe on mobile.
- modernizr.custom.15463.js - Modernizr.
- Placeholders.min.js - Used on old browsers (IE < 8) to support placeholder.
- waypoints.min.js - A small plugin support viewport.
- scrollslide.js - JS file for scroll slide effect.
- main.js - General JS file.

### K) Credits - top

I've used the following images, icons, fonts or other files as listed.

- jQuery
- jQuery easing
- Twitter Bootstrap
- Font Awesome Icons
- Font Icomoon Icons
- Alphabet of Children
- Flexslider Plugin
- SMOF Options Framework
- Meta-Box Script
- TGM Plugin Activation
- Autosize Plugin
- FitVids
- gmaps.js
- Scroll Slide Tutorial
- Colorbox
- EASY PIE CHART by rendro
- Custom Scrollbar
- Sidr
- Tipsy Tooltip
- TouchSwipe
- Modernizr
- Placeholder.js
- Waypoint
- Display Tweets
- Contact Form 7
- Isotope
- Images from Pixabay
- Patterns from Subtle patterns

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Best Regards, WiThemes

Go To Table of Contents