You are on page 1of 36

!

NASA/JPL-Caltech

Contents!
!
Import DEMO Site Metaboxes
Common Page Title Blog Portfolio

4 5
5 5 6 6

Theme Options
Common Logo and Favicon Sidebars Footer Contact Form Custom JS/CSS Import /Export Fonts

7
7 7 7 7 8 8 8 8

Theme Specic Options


Search Button Contact Widget Slider Editor Edit Category Icons Fonts Editor

9
9 9 10 12 13

Shortcodes
[portfolio] [slider] [teammember] [service] [background] [logo] [columns] & [column] [blog] [project] [post] [googlemap]

14
14 15 16 17 19 20 21 22 23 24 25

Contents

[contactform] [alert] [button] [gap] [tooltip] [accordions] [tabs]

26 27 28 29 29 30 31

CSS Classes HTML Elements Javascript , CSS, Credits


Javascript Files CSS Files Fonts Images & Video Files

32 34 35
35 35 35 36

Contents

Import DEMO Site


!

DEMO site contains a set of basic elements introduced in the theme, shows the ways how these elements can be used. Thats a good way to learn how things are working. Theme has a unique and very easy way to import DEMO site, it contains from the following steps: Import DEMO site imports the content of DEMO site together with all necessary settings (widgets, menus). This step should be done via administration Appearance Theme Options Import/Export click the button "Import DEMO site". Note, importing DEMO site may overwrite the current site content. Import Revolution Slider, go to administration Revolution Slider and click Import Slider button. Select the import template le from the theme archive and process it.

Thats all!

! !

Note, DEMO site contains different images and video les than shown on the theme preview.

Contents

Metaboxes
!
Metaboxes allow to customize specic page parameters. Please note, metaboxes are page template sensitive in our theme. Some of them appear only if necessary Page Template is selected in the Page Attributes.

Common
Contains common page settings. Show Footer allows to show or hide the page footer. Check this option to show the footer.

Page Title
Contains settings of the page title area. Background Content type of the data in Page Title. Can be the following:

No Page Title page content will come from the page top without page title; Image an image as a Page Title; Video video as a Page Title (read more below, there are specics); Color just a colored area as a Page Title; HTML any custom HTML and shortcodes as a Page Title.

Background Image select an image to be shown in the Page Title. Works is Background Content is set to Image. Note, this image can be shown as a page title if Background Content is select as Video, but the browser does not support playing of the selected video format;

Background Video select video les to be shown in Page Title. Note, if the browser wont support entered formats of video, than Background Image will be shown in Page Title instead; Background Color select a color as Page Title background; Background HTML thats really any HTML and shortcodes you may use to show in Page Title. For example, Revolution Slider and Google Map can be shown there, the content is fullwidth in this case. Note, parameters like Page Title Size, Pagetitle Title, Pagetitle Text do not work with such option. Page Title Size height of the Page Title, can be small or big. Does not work if Background Content is Background HTML; Pagetitle Title the text that fades from the top when the page is shown. Does not work if Background Content is Background HTML;

Chapter 2: Metaboxes!

"5

Pagetitle Text the text that fades from the bottom when page is shown. Does not work if Background Content is Background HTML.

Blog
Contains settings for Blog pages. Metabox is being shown when Page Template is selected to Blog or Blog Grid in Page Attributes metabox. Columns Layout number of columns in the Blog Grid; Show Categories Box show or hide the categories box that appears at the page top after page title, Grid Blog only. See more Edit Category Icons. Sidebar select a sidebar for the page. Custom sidebars can be created at Theme Options Sidebars page.

Portfolio
Contains settings for Portfolio pages. Metabox is being shown when Page Template is selected to Portfolio in Page Attributes metabox. Columns Layout number of columns in the Portfolio; Number of Portfolio Items per Page number of projects shown on the page; Specify how to Order Portfolio Items ordering of the project in portfolio page, can be the following:

From Newer to Older; From Older to Newer.

Show Categories Box show or hide the box with the categories."

Chapter 2: Metaboxes!

"6

Theme Options
Common

Retina Ready allows to optimize theme for a better support for retina displays. Note, if the feature is enabled, then the images used in on web site will be send to client browser without automatic size optimization that may cause more server loading and increase of trafc bandwidth; Search Button in Menu - hide or show the search button in the Main Menu. Search Button activates a search box that fades from the top of the page; Accent Theme Color - allows to set the accent theme color.

Logo and Favicon


Favicon image set the image to use it as a site favicon (images of small size are recommended); Logo specify the sources of the logo box. Logo box is being shown on the page header and in the page footer (see site DEMO for more information). Could be the following:

Do not show a logo no logo for the site; Logo is a pure text logo is a text, no html/shortcodes are allowed; Logo is HTML logo is a custom HTML, shortcodes are allowed; Logo is an image logo is an image.

Logo text enter the text of the logo, used if Logo value is "Logo is a pure text"; Logo HTML - enter the html of the logo, used if Logo value is "Logo is HTML"; Logo Image select the image for the logo, used if Logo value is "Logo is an image".

Sidebars
Dynamic Sidebars allows to add unlimited number of additional sidebars to the site. Sidebars can be used on the page of Blog and Blog Grid templates only and on the post pages. Note, by default, there are installed 2 sidebars Blog and Post.

Footer
Footer Text the text to be shown in the footer. HTML and shortcodes are allowed; Social Icons the set of the icons with the links to social proles shown in the footer; Footer Copyrights copyrights text shown in the footer;

Chapter 3: Theme Options!

"7

Footer Background Image image transparently shown in the footer.

Contact Form
Send To Email Address the email address to which the contact request will come; Email Subject the subject of the contact request email; Form Title the title of the contact popup window; Form Text the text of the contact popup window.

Custom JS/CSS
Custom JS custom JavaScript code to be added in the page footer; Custom CSS custom CSS code to be added to the page header.

Import /Export
Import Site allows to import site content from xml le made by Exporting Site Content feature; Import DEMO Site imports the demonstration site create by theme developers; Export Site Content exports the content of the site into xml le. This feature is more advanced than the standard Wordpress Tools Export because it also allows to export menus, widgets, sidebars and some Wordpress settings. It is recommended to use this feature to copy/move existing site to new installation.

Fonts
Contains settings that allow to customize the main fonts used in the theme. The core blocks that fonts feature handles are following: BODY element (site text), headers from H1 to H6, text of Page Title and Head Line elements. See more about Font Editor.

Chapter 3: Theme Options!

"8

Theme Specific Options


!
Search Button
Search Button activates a search form that fades from the page top.

To release the search form from the custom html element, add a class="search-bar-btn" to it, theme automatically recognizes it as a caller of search form. For example:

<a href="#" class="search-bar-btn">Search</a>

Search Button is automatically assigned to the site main menu as a last item.

Contact Widget
Contact Widget is a special area on the page that fades from the page top if necessary action is released. In the DEMO implementation we assigned a role of contact information to this widget area, but it does not limit its usage for any other purpose. To edit the Contact Widget area, go to Wordpress administration Appearance Widgets. Put widgets on the Contact Sidebar. Note, we recommend to use only one widget on the contact sidebar. To put more information there, use the text widget instead and combine it with custom html and shortcodes. To release the Contact Widget from the page, add the html element with class="contact-bar-btn", theme automatically recognizes it as a caller of Contact Widget. For example:

<a href="#" class="contact-bar-btn">Contact Us</a>

To release the Contact Widget from main menu, add a Links object to menu with the URL "#contact" (see example below).

Chapter 4: Theme Specic Options!

"9

Slider Editor
Using Slider shortcode generator in the post editor there is an ability to select images for the slider using standard Wordpress 3.5+ gallery editor. There is the following scenario to use the gallery editor: in the Shortcode Generator click Browse button to select images for the slider; in the Media Edit click Create Gallery button:

!
select necessary images and click Create a New Gallery button:

! Chapter 4: Theme Specic Options! 10 "

check if the gallery contains correct images and click Insert Gallery button:

!
then you may set up any additional slider settings and click Insert Shortcode button to generate a shortcode text.

Chapter 4: Theme Specic Options!

"11

Edit Category Icons


The Category Box shown for Blog Grid and Portfolio pages contains a set of categories assigned with the posts or projects. The unique feature of the current theme is that it is possible to assign specic image to each category that will be shown in Category Box. To edit the category icons, go to administration interface, Portfolio (or Posts) Categories, click on necessary category to edit it. Scroll the page down to nd Category Icon feature, use it to associate necessary icon to category.

Chapter 4: Theme Specic Options!

12 "

Fonts Editor
Theme is using smart Fonts Editor that allows to assign many different fonts to the theme, including Google Fonts, change the font parameters like font size and font color. The Font Editor is looking as following:

!
Font Editor allows to select the font from a list of standard fonts, from a list of Google Fonts or keep the font specied by theme developers. To overwrite the size and color of the font specied by theme developers, select necessary size and color parameters in the Overwrite Size/Color elds. Font Editor contains a unique feature that allows to update the list of the Google Fonts which you may use in the theme. This feature is important if you would like to use new Google Fonts which are not included in the DEMO theme pack. To update the list of Google Fonts click on the link "Update the list of Google Fonts", the appeared form will ask to enter personal Google API key. This tutorial describes how to acquire such key https://developers.google.com/fonts/docs/ developer_api#APIKey Once the key is entered, click Update Fonts button. Note, it may take up to a minute to update the fonts, the time depends on the server speed/loading. In case of successful updating, the message with the number of updated Google Fonts appears. To apply the changes just refresh the page in the browser (note, it may discard the changes in the theme options you made before in case they are not saved)."

Chapter 4: Theme Specic Options!

13 "

Shortcodes
!
[portfolio]
Generates a line with the set of projects. Use the administration Portfolio menu to set up projects. Shortcode generator is available in the menu of visual editor. Parameters:!

perline determines the number of projects shown in shortcode. Note, the latest projects are being shown there; categories select the particular categories of projects to show in shortcode. Keep this parameter empty to show projects of any category. Note, the category slug should be entered there. In case of multiple categories, the categories should be comma delimited; count - allows to set the number of projects shown in portfolio.

Example:!

[portfolio perline="3"] displays 3 recent projects per line; [portfolio perline="2" categories="design,sport"] displays 2 recent projects of categories "design" or "sport" per line; [portfolio perline="3" count="6"] - show a blog block with 6 projects, 3 project per line (2 lines).

Sample:!

! FAQ:! Q: I would like to show particular projects in the portfolio line, how to do that? A: This case you may use [columns] shortcode to set up necessary gird of columns and inside each column place a [project] shortcode with the id of particular project.

!
Chapter 5: Shortcodes! 14 "

[slider]
Produces a slider with images. The shortcode generator exists in the post editor. See also Slider Editor. Parameters:!

ids comma delimited ids of the slider images. Take the id of the necessary image from the administration - Media menu, or use the slider shortcode generator in the visual post editor; fullwidth species if the slider should be fullwidth. Note, using this option the slider shortcode should not be included into any HTML tag on the page! class allows to add custom class to the slider element and also set the size of the slider arrows. The following classes for arrows can be used:

slider-small small arrows size; slider-medium medium arrows size; slider-big big arrows size.

Example:!

[slider ids="101, 102" fullwidth] slider with two images, images ids are 101 and 102. Slider is fullwidth;

Sample:!

" FAQ:! Q: Where do I take an image id? A: Go to administration Media menu, the image id is shown in the Id column.

Chapter 5: Shortcodes!

15 "

[teammember]
Draws a box with the team member. To set up the team member use administration Team menu. Parameters:! id id of the team member, take it from administration Team table. Example:!

[teammember id="100"]

Sample:!

" FAQ:! Q: Where do I take a member id? A: Go to administration Team menu, the member id is shown in the Id column.

! !

Chapter 5: Shortcodes!

16 "

[service]
Draws a Service box. To create a service use administration Services menu. Parameters:!

id id of the service, take it from administration Services table; type type of the service, it can be either small or big. The post excerpt is shown in the small service and full post text in the bug service; tag some unique service identier that is used to associate different types of services. This parameter is mainly used in case there are small and big types of services on the one page and by click on the small service the page scrolls to big one. To associate to what big service the small will point, the tag value is used. So if you wish to navigate small service to a particular big, enter same tag value for both of them. For example, if you wish to make a service clickable (user will be navigated to the detailed service ). image species the position of the service image related to the text. Possible values are right, left, center (default); notitle determines if the service title should not be shown; url - enter the url of the page to which the service will point to. Note, if the url attribute is used, then tag attribute becomes useless. Url is used for service of the type Small only.

Examples & Samples:! Combination of two services for clickable functionality:

Semi-transparent small service (do not set featured image for such kind of service):

Chapter 5: Shortcodes!

17 "

Service with no title and with custom image position

[service id="100" type="small"]

! FAQ:! Q: Where do I take a service id? A: Go to administration Services menu, the service id is shown in the Id column. Q: How do I make a clickable service with brief description that will point to detailed description? A: Two service shortcodes with different types and same tag should be used. Place on the page a service with the type=small and tag (could be just any value) = xyz, then, below place a service with the type=big and same tag=xyz. This construction produces expected functionality. Q: How do I make a service semi-transparent? A: You may put the service on the custom background (e.g., use [background] shortcode), and do not set Featured Image for the service.

Chapter 5: Shortcodes!

18 "

[background]
Produces fullwidth block with the custom background content. Background content should be entered between opening and closing shortcode tags. Parameters:!

type type of the background content, either custom color or image; color is used if the background type is color, determines the color of the box; image image url, is used if background is image, box will contain this image as a background content;

Example:! [background type="image" image="http://thegravity.net/myimage.png] " Sample:! Background box with the logo images inside !

! FAQ:! Q: How do I enter the content the content above the background box? A: Content should be entered between opening and closing tags of the background shortcode, like this [background type="color" color="#FF0000"]Content is here[/ background]

! !

Chapter 5: Shortcodes!

19 "

[logo]
Draws a box with the logo image. Parameters:! url urls of the logo image; Example:!

[logo url=" http://thegravity.net/logo.png"]

Sample:! Few logo boxes in the [columns] inside [background] content:

! FAQ:! Q: How can I make a line box with the few logos inside? A: You should combine the logo boxes with the columns shortcode, below example produces a line with two logo images: [columns]! [column type="1/2"][logo url=" http://thegravity.net/logo.png"][/column]! [column type="1/2"][logo url=" http://thegravity.net/logo.png"][/column]! [/columns]

Chapter 5: Shortcodes!

20 "

[columns] & [column]


Makes a row with the columns inside. Parameters for [column] ([columns] shortcode does not have parameters):

type species the size of column as a part of the row. class additional class that can be assigned with the column <div>, please use by theme developers advice only.

Example:! A row with two columns:

[columns]! [column type="1/2"]1st column content here[/column]! [column type="1/2"]2nd column content here[/column]! [/columns]

Sample:!

Chapter 5: Shortcodes!

21 "

[blog]
Generates a line with the recent post. Shortcode generator is available in the menu of visual editor. Parameters:!

perline determines the number of posts shown in shortcode; categories select the particular categories of posts to show in shortcode. Keep this parameter empty to show posts of any category. Note, the category slug should be entered there. In case of multiple categories, the categories should be comma delimited.

Example:!

[blog perline="3"] displays 3 recent posts per line; [blog perline="2" categories="design,sport"] displays 2 recent posts of categories "design" or "sport" per line.

Sample:!

" FAQ:! Q: I would like to show particular posts in the portfolio line, how to do that? A: This case you may use [columns] shortcode to set up necessary gird of columns and inside each column place a [post] shortcode with the id of particular post.

! !

Chapter 5: Shortcodes!

22 "

[project]
Shows a particular project. Set up projects in the administration Portfolio menu. Parameters:! id id of the particular project to show. Take id from the list of projects in administration Portfolio menu. Example:!

[project id="100"] show the project with id = 100;

Sample:!

! FAQ:! Q: How do I show a few projects per line? A: You may use [portfolio] shortcode, or combine few [project] shortcodes with the [columns]

! !

Chapter 5: Shortcodes!

23 "

[post]
Shows a post with the particular id. Set up posts in the administration Posts menu. Parameters:! id id of the post to show. Example:!

[post id="100"] show the post with id = 100;

Sample:!

! FAQ:! Q: How do I show a few posts per line? A: You may use [blog] shortcode, or combine few [posts] shortcodes with the [columns]

! !

Chapter 5: Shortcodes!

24 "

[googlemap]
Shows a Google Map. Parameters:!

lat - latitude of the location shown in google map; lng longitude of the location shown in google map; zoom zoom parameter for the google map; title google map title, text of the map marker;

height height of the google map element shown on the page in pixels. Keep it empty to make height variable, depending on the width of the map (if this case is used the height of the map will be 3/8 of it width). Sample:!

! FAQ:! Q: How do I show a google map fullwidth in header? A: Go to edit the necessary page and nd a Page Title metabox. Set the parameter Background Content to HTML and in the Background HTML eld enter the googlemap shortcode.

! !

Chapter 5: Shortcodes!

25 "

[contactform]
Shows a contact form. Example:!

[contactform]

Sample:!

Chapter 5: Shortcodes!

26 "

[alert]
Produces an alert box. Note, the text to be shown inside the alert box should be entered between opening and closing tags of shortcode. Shortcode is available in the shortcode generator. Parameters:! type denes the type/color of the alert box. Possible values are:

success green color of alert, error red color of alert, info blue color of alert, warning yellow color of alert.

Example:!

[alert type="warning"]Yellow Alert[/alert] produces yellow alert box with text "Yellow Alert" inside; [alert type="success"]Green Alert[/alert] produces green alert box with text "Green Alert" inside. Sample:!

! FAQ:! Q: Can I use other shortcodes and custom HTML inside alert shortcode? A: Yes, sure, you can do that.

! !

Chapter 5: Shortcodes!

27 "

[button]
Produces a button. Shortcode is available in the shortcode generator. Parameters:!

size size of the button, possible values are:


mini determines the mini size of the button; small - determines the small size of the button; normal - determines the normal size of the button; large - determines the large size of the button;

color color of the button, possible values are:


grey button of grey color; white button of white color; red button of red color; blue button of blue color; green button of green color; yellow button of yellow color; black button of black color;

title the text shown on the button; url - enter the url to the web page to which the button will point.

Example:!

[button size="normal" color="red" title="Button"] shows a button with the normal size, red color and text "Button" inside;

Sample:!

! !

Chapter 5: Shortcodes!

28 "

[gap]
Put a separator with the specied height. Parameters:! h height of the separator in pixels; Example:!

[gap h="100"] separator with the height of 100 pixels

[tooltip]
Produces a set of attributes for html element which allow to show a tooltip window when mouse is moving under this element. Parameters:!

pos position of the tooltip window relative to the element. Can be the following:

top tooltip window under the element; left tooltip window at left of element; right tooltip window at right of element; bottom tooltip window under the element;

title text of the tooltip window.

Example:!

<a href="#" [tooltip pos="top" title="Tooltip"]>My Link</a> anchor element with the tooltip window at top with text "Tooltip"

Sample:!

FAQ:! Q: Can I add the tooltip shortcode to any html element? A: Yes, you can.

Chapter 5: Shortcodes!

29 "

[accordions]
Allows to create accordions box. Accordions contains from a combination of two shortcodes [accordions] and [accordion]. [accordions] is a container for accordion items. [accordion] describes each item in the accordion. The text of the particular accordion item should be entered between opening and closing [accordion] tags. Parameters ([accordion] only): title the title of accordion item; active determines if the item is active or no. Example:! [accordions]! [accordion title="Accordion 1" active]! Text of Accordion 1! [/accordion]! [accordion title="Accordion 2"]! Text of Accordion 2! [/accordion]! [/accordions]

Sample:!

! !

Chapter 5: Shortcodes!

30 "

[tabs]
Allows to create tabs box. Tabs contains from a combination of two shortcodes [tabs] and [tab]. [tabs] is a container for tab items. [tab] describes each item in the tabs box. The text of the particular tab item should be entered between opening and closing [tab] tags. Parameters [tabs]:!

pos species position of the tab titles relative to tabs content. Possible values are:

above tab titles above the content; left tab titles from left at content; right - tab titles from right at content; below tab titles below the content;

title the title of tab item; active determines if the item is active or no.

Example:! [tabs]! [tab title="Tab 1" active] ! Text of Tab 1! [/tab]! [tab title="Tab 2"]! Text of Tab 2! [/tab]! [/tabs] Sample:!

!
Chapter 5: Shortcodes! 31 "

CSS Classes
!
class="upper" - Makes the letters of the block uppercase. Example:

There are additional css classes specied by theme developers that can be used in the custom HTML elements or in the shortcodes (if they support "class" attribute). See below the list of available classes.

<h1 class="upper">Heading</h1>

class="bolder" - Makes the text font of the block bolder (its medium value from the styles classication). Note, some fonts do not support such kind of style. Example:

<h1 class="bolder">Heading</h1>

class="headline" - Recommended to apply this style to some heading elements to specify the beginning of the special block or important data. It makes the text font size little bigger than the font of main text. Example:

<p class="headline">Paragraph text</p>

class="no-margine"- Removes the margins from the html object. Example:

<p class="no-margin">Paragraph text</p>, <img class="no-margin">

! class="loose" - Its recommended to apply this class to ul/ol lists. It enlarges the top and bottom paddings. Example:

<ul class="loose"><li></li></ul>

Chapter 6: CSS Classes!

32 "

class="inverse" - Applies to only [backrgound] shortcode. It changes the color of the font inside this block to dark. Example:

[background type="color" color="#ffffff" class="inverse"]

! class="b-img" - Used for images (img) located in [backrground] shortcode. It aligns the image to the block bottom. Example:

Example: [background]<img class="b-img">[/background]

Chapter 6: CSS Classes!

33 "

HTML Elements
!
Anchors with Tooltip!

The feature allows to add tooltip (popup) window to an anchor link which appears once the mouse cursor hovers the link. To enable the tooltip functionality, add the data-toggle attribute to the link with the "tooltip" value. The position of the tooltip window can be dened in the tag data-placement, allowed values are top/left/right/bottom (determines the position of the tooltip window relatively to the link). Title or the text of the tooltip window can be specied in the data-original-title attribute. Example:!

<a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Tooltip on top">Click here to go</a>

Produces the anchor link with tooltip window appeared on the top of the link with the text "Tooltip on top".

Chapter 7: HTML Elements!

34 "

Javascript , CSS, Credits


!
Javascript Files

bootstrap.min.js - http://getbootstrap.com/2.3.2/ jquery.tvids.js - http://tvidsjs.com/ jquery.exslider.min.js - http://www.woothemes.com/exslider/ jquery.imagesloaded.min.js - https://github.com/desandro/imagesloaded jquery.innitescroll.min.js - https://github.com/paulirish/innite-scroll jquery.isotope.min.js - http://isotope.metazzy.co/ jquery.stellar.min.js - http://markdalgleish.com/projects/stellar.js/ jquery.videobackground.js - https://github.com/georgepaterson/jquery-videobackground prettify.js - https://code.google.com/p/google-code-prettify/

CSS Files
bootstrap-responsive.css bootstrap.css custom-responsive.css entypo-social.css exslider.css font-awesome.css isotope.css prettify.css

Fonts
Font Awesome - http://fortawesome.github.io/Font-Awesome/ Entypo - http://www.entypo.com/

! !

Chapter 8: Javascript , CSS, Credits!

35 "

Images & Video Files

!
Following images & videos (not included in demo content) used in theme preview are owned by the authors: Images!

http://oroster.deviantart.com/ http://qauz.deviantart.com/ http://m3-f.deviantart.com/ http://adamburn.deviantart.com/ http://epson361.deviantart.com/ http://hideyoshi.deviantart.com/ http://ladylioness.deviantart.com/ http://tamplierpainter.deviantart.com/ http://thomaswievegg.deviantart.com/ http://foton-3.deviantart.com/ http://korbox.deviantart.com/ http://rahmatozz.deviantart.com/ http://erenarik.deviantart.com/ http://ulricleprovost.deviantart.com/ http://ulricleprovost.deviantart.com/ http://hbdesign.deviantart.com/ http://taenaron.deviantart.com/ http://min-nguen.deviantart.com/ http://tylercreatesworlds.deviantart.com/ http://sundragon83.deviantart.com/ http://phade01.deviantart.com/ http://siamon89.deviantart.com/ http://www.jpl.nasa.gov - NASA/JPL-Caltech

Videos!

http://vimeo.com/25927524 http://videohive.net/user/MacroLogic http://videohive.net/user/beone

Chapter 8: Javascript , CSS, Credits!

36 "

You might also like