supernova user guide

!

NASA/JPL-Caltech

Contents!Import DEMO Site 4

Metaboxes 5 Common 5 Page Title 5 Blog 6 Portfolio 6

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

Theme Specific Options 9 Search Button 9 Contact Widget 9 Slider Editor 10 Edit Category Icons 12 Fonts Editor 13

Shortcodes 14 [portfolio] 14 [slider] 15 [teammember] 16 [service] 17 [background] 19 [logo] 20 [columns] & [column] 21 [blog] 22 [project] 23 [post] 24 [googlemap] 25

Contents

[contactform] 26 [alert] 27 [button] 28 [gap] 29 [tooltip] 29 [accordions] 30 [tabs] 31

CSS Classes 32

HTML Elements 34

Javascript , CSS, Credits 35 Javascript Files 35 CSS Files 35 Fonts 35 Images & Video Files 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. That’s 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 file from the theme archive and process it.

That’s all!

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

!

Contents

1

Metaboxes

!Metaboxes allow to customize specific 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 specifics);

• 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 files to be shown in Page Title. Note, if the browser won’t 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 – that’s 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

2

• 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 traffic 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 profiles shown in the footer;

Footer Copyrights – copyrights text shown in the footer;

Chapter 3: Theme Options! � 7

3

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

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 it’s 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:

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

!

Chapter 4: Theme Specific Options! � 9

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

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

4

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:

!


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.

!


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 specific 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 find Category Icon feature, use it to associate necessary icon to category.

!


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 specified by theme developers.

To overwrite the size and color of the font specified by theme developers, select necessary size and color parameters in the Overwrite Size/Color fields.

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


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:!

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

5

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

[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 – specifies 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:!

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

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

[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:!

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.

!!


[teammember id="100"]

[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 identifier 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 – specifies 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):


Service with no title and with custom image position

!

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.

!


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

[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:!

� !

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]

!!

[background type="image" image="http://thegravity.net/myimage.png”]


[logo] Draws a box with the logo image.

Parameters:!

url – urls of the logo image;

Example:!

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:

!


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

[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]

[columns] & [column] Makes a row with the columns inside.

Parameters for [column] ([columns] shortcode does not have parameters):

• type – specifies 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:

Sample:!

!


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

[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:!

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.

!!


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

[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:!

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]

!!


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

[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:!

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]

!!


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

[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 find a Page Title metabox. Set the parameter Background Content to HTML and in the Background HTML field enter the googlemap shortcode.

!!


[contactform] Shows a contact form.

Example:!

Sample:!

!


[contactform]

[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 – defines 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:!

Sample:!

!

FAQ:!

Q: Can I use other shortcodes and custom HTML inside alert shortcode?

A: Yes, sure, you can do that.

!!


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

[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:!

Sample:!

!

!!


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

[gap] Put a separator with the specified height.

Parameters:!

h – height of the separator in pixels;

Example:!

!

[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:!

Sample:!

FAQ:!

Q: Can I add the tooltip shortcode to any html element?

A: Yes, you can.

!


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

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

[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:!

Sample:!

!

!!


[accordions] [accordion title="Accordion 1" active] Text of Accordion 1 [/accordion] [accordion title="Accordion 2"] Text of Accordion 2 [/accordion][/accordions]

[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 – specifies 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:!

Sample:!

!

!


[tabs] [tab title="Tab 1" active] Text of Tab 1 [/tab] [tab title="Tab 2"] Text of Tab 2 [/tab][/tabs]

CSS Classes !There are additional css classes specified 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.

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

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

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:

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

!

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

!

Chapter 6: CSS Classes! � 32

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

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

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

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

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

6

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

!

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

!

!

Chapter 6: CSS Classes! � 33

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

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

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 defined 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 specified in the data-original-title attribute.

Example:!

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

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

7

Javascript , CSS, Credits !Javascript Files • bootstrap.min.js - http://getbootstrap.com/2.3.2/

• jquery.fitvids.js - http://fitvidsjs.com/

• jquery.flexslider.min.js - http://www.woothemes.com/flexslider/

• jquery.imagesloaded.min.js - https://github.com/desandro/imagesloaded

• jquery.infinitescroll.min.js - https://github.com/paulirish/infinite-scroll

• jquery.isotope.min.js - http://isotope.metafizzy.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

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

8

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

supernova user guide

Documents