Ice Theme Documentation by e404 Themes v1.4

Ice Theme

Created: 14 June 2012
By: e404 Themes
e404themes.com
twitter.com/e404themes

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via the contact form available on our ThemeForest profile page.
If you like this theme please don't forget to rate it on ThemeForest. Thank you!

Table of Contents

  1. Installation
  2. Configuration
  3. Setting up the home page and the blog page
  4. Setting up the portfolio page
  5. Slideshows and sliders
  6. Shortcodes
  7. Widgets
  8. Custom Sidebars
  9. Sources and Credits

1. Installation - top

Upload the theme

Upload the theme folder (ice) via FTP to your wp-content/themes folder.

You can also install the theme via WordPress admin. Go to the Appearance -> Themes panel, choose Install Themes, click Upload and choose the ice.zip file.

Activate the theme

Once you have uploaded the theme, you have to activate it in Appearance -> Themes panel. After theme activation you have to change permissions to the 'wp-content/themes/ice/cache' folder - set permissions to 755 or 777.

If you have any troubles with the theme installation, try to read the WordPress documentation.

Install recommended plugins (optional)

Ice Theme comes with custom styles for these plugins:

We strongly recommend to install them all.

If you want to use WP-PageNavi plugin you have to disable its own stylesheet. To do this go to the plugin settings (Settings -> PageNavi) and uncheck 'Use pagenavi-css.css' option.

The sample Contact Form 7 form (Contact -> Edit):

	<p>[text* your-name watermark "Name (required)"]</p>
	<p>[email* your-email watermark "Email (required)"]</p>
	<p>[textarea your-message watermark "Quick Message"]</p>
	<p>[submit "Send"]</p>

Load the sample content (optional)

You can load our sample content into your new website, which will help you to learn how to do certain things with Ice Theme. The sample content file resides in the 'sample content' folder. To load it into your WordPress installation you have to install the WordPress Importer plugin. You can do this by going to the Tools -> Import WordPress panel and clicking WordPress. Once you have this plugin installed, go again to the Tools -> Import panel, click WordPress, choose the sample content file and click Upload file and import.

Once you have imported the content file, you have to set some options which can't be imported into the WordPress. Go to the Appearance -> Menus panel, pick the Top Menu from the Header Menu dropdown list and click Save Menu button. If you want to activate sliders, go to the Appearance -> Theme Options and pick one of the slider types for the home page (Home Page Options) and the blog page (Blog Options).

It's also recommended to turn on the font replacement (Appearance -> Theme Options -> Font Options). If you want to use the same fonts as we did on our demo site, select the "Droid Sans" font for body, H1, H2, H3, H4, H5 and H6.

If you don't want to import all the content you can use our sample pages code, located in 'home_page.txt', 'contact_page.txt', 'contact_page_2.txt', 'about_us_page.txt', 'services_page.txt' and 'testimonials_page.txt' files. Please remember to replace images URLs with your own.
You can also check 'contact_form.txt' file, which contains the sample contact form you can find in the footer on our demo page (requires Contact Form 7 plugin installed).

On our demo site we have used the Awkward Showcase slider.

Remove the "News from e404 Themes" dashboard widget (optional)

If you are creating a website for your client and don't want to leave the dashboard widget with our Twitter feed, you can easily remove it from the theme. Edit the 'themes/ice/functions.php' file and remove the following line:
require_once(OF_FILEPATH.'/inc/dashboard-widget.php');

Upgrading the theme

Occasionally we release theme updates, which contain new features and bugfixes. It's strongly recommended to upgrade your theme installation when the new theme version is released. We are posting informations about new versions of our themes on our Twitter feed.

When the new theme version is released you should redownload the theme from the ThemeForest. The easiest way to upgrade your theme installation is to upload all theme files (located in the 'ice.zip' file inside the theme package) to your webserver using FTP. If you have made some modifications in theme files and don't want to overwrite them, you can upload the changed files only. You can find the modified files list for each theme version in the 'documentation/changelog.txt' file.

2. Configuration - top

Ice Theme includes a powerful admin panel. You can find it in Appearance -> Theme Options.

General Settings section

Background Settings section

Styling Options section

Fonts Options section

Ice Theme allows for font replacement with Google Web Fonts. This is in our opinion much better way to do this than using Cufon.
You can preview all available fonts in the Google Font Directory.

Intro Text Box section

Intro Text Box is a section between menu and main page section. It can contains four content types: your own text, your last tweet (Twitter username is taken from Social Networks settings), current page title and current page title and excerpt (if available). You can also disable this section entirely. You can use different settings for home page, blog pages, portfolio pages and gallery pages. Page type is determined by used template - for example a page which uses the "Gallery with right sidebar" template will be detected as Gallery page, and a page which uses the "Single page without sidebar" template will be detected as "other" page (so main Intro Text Box settings will be applied).

Footer Options section

Home Page Options section

Blog Options section

Portfolio Options section

To learn more about setting up a portfolio page go here.

Nivo Slider Options

Here you can set Nivo Slider options. If you have troubles with any of them, please refer to the official documentation.

Accordion Slider Options

Here you can set Accordion Slider options. If you have troubles with any of them, please refer to the official documentation of Kwicks, on which this slider is build.

Anything Slider Options

Here you can set Anything Slider options. If you have troubles with any of them, please refer to the official documentation. This slider has the ability of displaying varius content types - you can find more informations here.

Awkward Showcase Options

Here you can set Awkward Showcase slider options. If you have troubles with any of them, please refer to the official documentation. This slider has the ability of displaying varius content types - you can find more informations here.

Social Networks & RSS

Here you can enter URLs of your profile pages in various social websites. When a profile field is filled, an appropriate icon will be shown above your website header. Here you can also set a cache expiration time for Twitter and Flickr (caching is necessary to stay within the API usage limits).

Tweaks

This section contains some tweaks, which could cause troubles. Don't play with these settings unless you really know what you're doing.

3. Setting up the home page and the blog page - top

By default the Ice Theme home page contains the latest blog posts. If you want to set up the custom home page and the separate blog page, read the Creating a Static Front Page article in the official WordPress documentation.

Please remember that for the home page you have to use "Home Page" template and for the blog page you have to use "Default template" template.

4. Setting up the portfolio page - top

Ice Theme uses a custom post type for portfolio items. Each portfolio item can be assigned to many custom portfolio categories and can be tagged with custom portfolio tags. Users can filter your portfolio items by a category or a tag.

To create a portfolio page go to the Pages -> Add New panel and enter your portfolio page title. Then from the Template dropdown list pick one of nine available portfolio templates. Click Publish to save your new page. Note that you can have only one portfolio page with as many items as you want.

Go to the Appearance -> Theme Options -> Portfolio Settings panel and pick your new portfolio page from the Portfolio Page dropdown list. Click Save All Changes.

Go to the Portfolio -> Add New panel. Portfolio items are very similar to ordinary WordPress pages. You can design the look of each portfolio item page using shortcodes. See the sample content file and our demo site for examples.

Additionally you can set a video preview for each of portfolio items. By default clicking the "Preview" button opens a new Lightbox window with the full version of the portfolio featured image. If you set a video preview, the Lightbox window will show the video. To set a preview video edit your portfolio item, pick the Video preview type in the "Portfolio Preview Options" box (below the portfolio item content) and paste a video URL in the Video field. You can use YouTube or Vimeo videos.

5. Slideshows and sliders - top

Ice Theme uses a custom post type for sliders elements. Slides are groupped into slideshows. You can pick a specific slideshow to display in the home page slider.

To create your first slide go to the Slides -> Add New panel. Enter your new slide title. You can optionally enter a slide target URL in the Slide options box. Pick a slideshow you want to assign your new slide to or create a new slideshow by clicking Add New Slideshow. Add a slide picture by clicking Set featured image in the Slide Image box, then click Publish to save your new slide.

The Anything Slider and the Awkward Showcase have the ability to display any type of content, not only images. If a slide doesn't have a featured image, the slider will display its content. See the sample content file and our demo site for examples.

The Awkward Showcase slider has some special options, which allow you to create on-image tooltips and add custom thumbnails to slides. You can find these options right above the slide content field.

Awkward Showcase Options

In the Slide Thumbnail field you can set the custom slide thumbnail. It's useful for video slides, which can't have automatic thumbnails. You can paste the image URL or click the "Add Thumbnail" button to upload your image or pick it from the Media Library.
Please note that pasted image should be located on your server, because it will be automatically scalled by the TimThumb script, which doesn't allow external images to be used.

Tooltips are a great addition to your slides. Each tooltip is representing by a small icon on a slider image. When you move a mouse cursor over this icon, the tooltip window will be displayed. Tooltips can be also linking to any URL.
To add a tooltip you have to provide its coordinates (X and Y fields). You can do this on your own or click the "Set coords" button and select a tooltip localization on the slide image preview. In the "Tooltip content" field you should paste the tooltip content. It can be a plain text or a HTML code. You can also provide the tooltip target URL.

To add a new tooltip just click the "Add Tooltip" button. To remove a tooltip click the "Remove Tooltip" button next to a tooltip you want to remove. Don't forget to click the "Update" button (for an existing slide) or the "Publish" button (for a new slide) to save your changes.

6. Shortcodes - top

Ice Theme includes 30+ shortcodes. Some of them have a lot of variants and customization possibilities. Here is the complete shortcodes list. See the sample content file and our demo site for examples.

Ice Theme comes with a powerful Shortcode Generator, which allows to insert shortcodes directly from the WordPress editor. Our Shortcode Generator works in both HTML and visual editor.

Columns

Examples

[full_page]
[one_half]
[one_third] [two_third]
[one_fourth] [three_fourth]
[one_fifth] [two_fifth] [three_fifth] [four_fifth]
[one_sixth] [five_sixth]
[one_eighth] [three_eighth] [five_eighth] [seven_eighth]
Options:
align - left, right, center (default: left)

Typography

Examples

Headers

[h1] [h2] [h3] [h4] [h5] [h6]

Blockquote

[blockquote] [/blockquote]
Options:
align - left, right (default: center)
author - a quote author

Text highlights

[highlight1] [/highlight1]
[highlight2] [highlight2]

Tips

[tip] [/tip]

Slogan

[slogan] [/slogan]
This shortcode just changes styles for its content. Sample usage:

[slogan]
[h1]Nemo enim ipsam voluptatem[/h1]
[b]Lorem ipsum dolor sit amet,[/b] consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/slogan]

Lines

[line] [line_top] [line_dotted]

Code

[code] [/code]

Others

[b] [/b] [i] [/i]
[span type="icon-type"] [/span]
[link type="icon-type" target="_blank" href="http://your-domain.com"] [/link]
(see the List shortcode for available icon types)

Buttons

Examples

[button] [/button]
Options:
style - normal, light, glass, gradient (default: normal)
color - darkgray, black, red, orange, brown, darkcoffee, lemon, pear, grass, turquoise, aquamarine, ice, denim, indigo, violet, fuschia, carnationpink, frenchrose (default: gray); you can also use the color variant number
size - small, medium, big (default: small)
width - button width; can be provided in pixels (for example "100") or in percents (for example "50%")
icon - access-denied, alert, alert2, info, arrow-right, arrow-left, arrow-down, arrow-up, arrow, arrow2, checkmark, glass, plus, minus, user, help, bubble, bubbles, tag, download, calendar, clock, chart, cog, cd, document, folder, home, film, image, sound, link, key, locked, paperclip, marker, mail, rss (default: none)
href - an URL this button will be linking to
target - an URL target; you can use it to open links in a new browser window (_blank) stroke - true, false (default: false)
bgcolor - button background color
textcolor - button text color
bordercolor - button border color

Dropcaps, Boxes & Icon Boxes

Examples

Dropcap

[dropcap] [/dropcap]
Options:
style - 1, 2, 3, 4, 5, 6 (default: 1)

Box

[box] [/box]
Options:
style - light, medium, dark (default: light)
big - true, false (default: false)
rounded - true, false (default: false)
bgcolor - background color
color - text color
header - header text color
header_bgcolor - header background color
header_bordercolor - header border color

Icon Box

[icon_box] [/icon_box]
Options:
url - an URL this icon box header will be linking to
title - icon box title
caption - icon box capion
more_text - "read more" button text (leave empty to disable the button)
icon - agenda, arrow-down, arrow-left-down, arrow-left-up, arrow-left, arrow-right-down, arrow-right-up, arrow-right, arrow-up, badge, bag, bass-speaker, battery-1, battery-2, battery-3, battery-4, beer-mug, binoculars, book, bookmark, bug, bulb, buoy, calculator, calendar, car, cart, cassette, cd-dvd, champion-cup, chip, clip, clipboard, clock, closed-lock, cloud, cocktail, coffee-cup, coffee-mug, collapse, comment, credit-card, cronometer, document, drop, empty-clipboard, envelope, expand, eye, facebook, first-aid-kit, flag, floppy-disc, flower, folder, game-boy, gas, gear, gift, glass, globe-1, globe-2, hard-disk, headphones, heart, id, industry, info, iphone, ipod, joystick, key, keyboard, lab, laptop, leaf, lollipop, magnifying-glass, man-user, memory-card, microphone, mobile-phone, monitor, moon, mouse, movie-film, music-note, network-socket, news, opened-envelope, opened-lock, pen, pencil, phone-1, phone-2, photography-camera, photography-film, photography, planet, plug, podcast, pointing-down, pointing-left, pointing-right, pointing-up, print, projector, pushpin-1, pushpin-2, puzzle, quote, radio, refresh, restaurant, router, rss, satelite, scissors, server, share, shield, sign-post, skull, snow-flake, speaker, star, suitcase, sun, surveillance-camera, tag, thumbs-down, thumbs-up, thunder, tools, traffic-cone, trash, tree, truck, tv, twitter-bird, twitter, umbrella, usb, user, video-camera, virus, wall-socket-1, wall-socket-2, wallet, webcam, window, woman-user, zoom-in, zoom-out (default: none)

Icon Button

[icon_button]
This shortcode is similar to [icon_box], but it doesn't have the content and the "more" button.
Options:
url - an URL this icon box header will be linking to
title - icon box title
caption - icon box capion
icon - agenda, arrow-down, arrow-left-down, arrow-left-up, arrow-left, arrow-right-down, arrow-right-up, arrow-right, arrow-up, badge, bag, bass-speaker, battery-1, battery-2, battery-3, battery-4, beer-mug, binoculars, book, bookmark, bug, bulb, buoy, calculator, calendar, car, cart, cassette, cd-dvd, champion-cup, chip, clip, clipboard, clock, closed-lock, cloud, cocktail, coffee-cup, coffee-mug, collapse, comment, credit-card, cronometer, document, drop, empty-clipboard, envelope, expand, eye, facebook, first-aid-kit, flag, floppy-disc, flower, folder, game-boy, gas, gear, gift, glass, globe-1, globe-2, hard-disk, headphones, heart, id, industry, info, iphone, ipod, joystick, key, keyboard, lab, laptop, leaf, lollipop, magnifying-glass, man-user, memory-card, microphone, mobile-phone, monitor, moon, mouse, movie-film, music-note, network-socket, news, opened-envelope, opened-lock, pen, pencil, phone-1, phone-2, photography-camera, photography-film, photography, planet, plug, podcast, pointing-down, pointing-left, pointing-right, pointing-up, print, projector, pushpin-1, pushpin-2, puzzle, quote, radio, refresh, restaurant, router, rss, satelite, scissors, server, share, shield, sign-post, skull, snow-flake, speaker, star, suitcase, sun, surveillance-camera, tag, thumbs-down, thumbs-up, thunder, tools, traffic-cone, trash, tree, truck, tv, twitter-bird, twitter, umbrella, usb, user, video-camera, virus, wall-socket-1, wall-socket-2, wallet, webcam, window, woman-user, zoom-in, zoom-out (default: none)

Message Box

[message] [/message]
Options:
type - info, tip, note, error (default: info)

Images

Examples

[image] [/image]
Options:
align - left, right, center, none (default: center)
size - predefined image sizes: vtiny (width: 90 px; fits to one_eight), tiny (130 px; one_sixth), vsmall (162 px; one_fifth), small (210 px; one_fourth), medium (290 px; one_third), large (440 px; one_half), huge (610 px; two_third), full (930 px; full_page)
shadow - adds a shadow to images; works only with predefined image sizes
title - image title
caption - image caption
href - an URL this image will be linking to
width and height - image width and height
lightbox - enable PrettyPhoto (Lightbox clone); true, false (default: false)
group - a group image belongs to (for PrettyPhoto)
border - true, false (default: false)

[galleria]
[galleria_images] (images list) [/galleria_images]
Options:
width and height - gallery size (default: 930 x 580 px)
bgcolor - background color (default: #efefef)
thumbnails - true, false (default: false)
slideshow - true, false (default: false)
speed - slideshow speed (default: 3000)
id - post ID (default: current post); only for [galleria] shortcode

[scrollable] (images list) [/scrollable] (only for full width pages without sidebar)

Nivo Slider

Examples

[nivo_images] (images list) [/nivo_images]
Options:
width - slider width (default: 610)
height - slider height (default: 373)
pause - pause between slides (in miliseconds; default: 2000)
effect - a transition effect (default: fade); available effects: 'random', 'sliceDown', 'sliceDownLeft', 'sliceUp', 'sliceUpLeft', 'sliceUpDown', 'sliceUpDownLeft', 'fold', 'fade', 'slideInRight', 'slideInLeft', 'boxRandom', 'boxRain', 'boxRainReverse'
buttons - true, false (default: true)
bubbles - true, false (default: true)

[nivo]
slideshow - a slideshow slug (default: all slideshows)
width - slider width (default: 610)
height - slider height (default: 373)
pause - pause between slides (in miliseconds; default: 2000)
effect - a transition effect (default: fade); available effects: 'random', 'sliceDown', 'sliceDownLeft', 'sliceUp', 'sliceUpLeft', 'sliceUpDown', 'sliceUpDownLeft', 'fold', 'fade', 'slideInRight', 'slideInLeft', 'boxRandom', 'boxRain', 'boxRainReverse'
buttons - true, false (default: true)
bubbles - true, false (default: true)

PrettyPhoto (Lightbox clone)

Examples

[lightbox] [/lightbox]
Options:
title - PrettyPhoto window title
group - a group this item belongs to
iframe - true, false (default: false)
width and height - iframe size
href - an URL of target element (image, website, HTML file, YouTube URL, Vimeo URL)

Video

Examples

[video]
Options:
source - video source file
poster - video thumbnail
width and height - video size (default: 604 x 368 px)
controls - true, false (default: true)

[youtube]
Options:
id - YouTube video ID
width and height - video size (default: 604 x 368 px)

[vimeo]
Options:
id - Vimeo video ID
width and height - video size (default: 604 x 368 px)

[dailymotion]
Options:
id - DailyMotion video ID
width and height - video size (default: 604 x 368 px)

Lists

Examples

[list]
Options:
type - access-denied, alert, alert2, info, arrow-right, arrow-left, arrow-down, arrow-up, arrow, arrow2, checkmark, glass, plus, minus, user, help, bubble, bubbles, tag, download, calendar, clock, chart, cog, cd, document, folder, home, film, image, sound, link, key, locked, paperclip, marker, mail, rss, small-arrow, small-checkmark, small-plus, small-minus, small-dot, small-star, small-arrow-left, small-arrow-right, small-add, small-go, small-toggle-plus, small-toggle-minus (default: arrow)

Toggles, Accordion & Tabs

Examples

[toggle] [/toggle]
Options:
title - toggle title
style - dark, medium, light
bgcolor - background color
color - text color
header_color - header text color
header_bgcolor - header background color
header_bordercolor - header border color

[accordions] [accordion] [/accordion] [accordion] [/accordion] [/accordions]
Options:
style - dark, medium, light (default: light); only for [accordions] shortcode
title - item title; only for [accordion] shortcode
bgcolor - background color; only for [accordion] shortcode
color - text color; only for [accordion] shortcode
header_color - header text color; only for [accordion] shortcode
header_bgcolor - header background color; only for [accordion] shortcode
header_bordercolor - header border color; only for [accordion] shortcode

[tabs] [tab] [/tab] [tab] [/tab] [/tabs]
Options:
tabs - tabs titles, comma separated; only for [tabs] shortcode

Tables & Pricebox

Examples

[table]
	[thead]
		[tr]
			[th] [/th]
			[th] [/th]
			[th] [/th]
		[/tr]
	[/thead]
	[tbody]
		[tr]
			[td] [/td]
			[td] [/td]
			[td] [/td]
		[/tr]
		[tr]
			[td] [/td]
			[td] [/td]
			[td] [/td]
		[/tr]
		[tr]
			[td] [/td]
			[td] [/td]
			[td] [/td]
		[/tr]
	[/tbody]
[/table]

Options:
style - light, medium, dark (default: light); only for [table] shortcode
width - table width in pixels; only for [table] shortcode
highlight - true, false (default: false)
align - left, right, center (default: center)

[pricebox title="Box title" featured="false"]
[pricebox_price price="$10" period="1 month"]
[pricebox_body]
	feature number one
	feature number two
[/pricebox_body]
[pricebox_footer]
	[button]Buy now[/button]
[/pricebox_footer]

Blog content

Examples

[recent_posts]
Options:
thumbs - true, false (default: true)
number - posts number (default: 5)
title - box title (default: Recent Posts)
categories - list of category slugs, separated by commas (default: all)
limit - excerpt length limit (default: 80)

[popular_posts]
Options:
thumbs - true, false (default: true)
number - posts number (default: 5)
title - box title (default: Popular Posts)
categories - list of category slugs, separated by commas (default: all)
limit - excerpt length limit (default: 80)

[recent_posts_images]
Options:
title - default: 'Recent Blog Posts'
url - a URL address to the blog (default: none)
number - posts number (default: 2)
categories - list of category slugs, separated by commas (default: all)
more_text - a text for the blog link (default: 'Read more')

[popular_posts_images]
Options:
title - default: 'Popular Blog Posts'
url - a URL address to the blog (default: none)
number - posts number (default: 2)
categories - list of category slugs, separated by commas (default: all)
more_text - a text for the blog link (default: 'Read more')

[recent_posts_images_full]
Options:
title - default: 'Recent Posts'
url - a URL address to the blog (default: none)
categories - list of category slugs, separated by commas (default: all)
more_text - a text for the blog link (default: 'view all')
description - description (default: none)

Other

Examples

[recent_works_images_full]
Options:
title - default: 'Recent Works'
url - a URL address to the portfolio (default: none)
more_text - a text for the portfolio link (default: 'view all')
description - description (default: none)

[tweets]
Options:
number - tweets number (default: 5)
time - true, false (default: false)
username - Twitter username (default: from Social Networks settings)
title - box title (default: Last Tweets)

[map] (Google Maps URL) [/map]
Options:
height and width - map size (default: 100% x 368 px)

[person] [/person]
Options:
name - a person name (default: none)
info - a short info about a person (default: none)
image - an URL of avatar image to display (it should have size of 40 x 40 px; default: default avatar)
url - a website URL (default: none)
twitter - Twitter username (default: none)
facebook - a full URL of the Facebook profile or page (default: none)

[testimonial] [/testimonial]
Options:
name - an author name (default: none)
info - a short info about an author (default: none)
image - an URL of avatar image to display (it should have size of 40 x 40 px; default: default avatar)
url - a website URL (default: none)

7. Widgets - top

Ice Theme includes 9 custom widgets. See them in action on our demo site.

Ice Theme allows you to create as many sidebars as you need. You can attach any of your custom sidebars to a blog category, blog post or single page.

To manage sidebars go to the Appearance -> Sidebars panel. Here you can create and delete sidebars.

To attach a sidebar to a blog category go to the Posts -> Categories panel and click Edit link. On the edit page you can find a sidebar dropdown list - you can choose any of custom sidebars or the "(default)" sidebar.

To attach a sidebar to a blog post go to the Posts -> Posts panel and click Edit link. On the edit page you can find a sidebar meta box (right top corner), where you can choose any of custom sidebars or the "(default)" sidebar. Attaching a sidebar to a single page works in the same way.

On the Appearance -> Widgets panel you can add or remove sidebar widgets. Notice there are several default sidebars: Blog Sidebar, Page Sidebar, Portfolio Sidebar, Gallery Sidebar and Footer Sidebar. They can't be removed, because they're default sidebars for different content types. For example, if you choose "(default)" sidebar for the "News" blog category, the Blog Sidebar will be used.

10. Credits - top

We've used following scripts:

Icons::

Images used on the demo site:

Background textures:

e404 Themes

Go To Table of Contents