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

DEMO site contains different images and video files than shown on the theme preview. it contains from the following steps: Import DEMO site – imports the content of DEMO site together with all necessary settings (widgets. menus). importing DEMO site may overwrite the current site content. This step should be done via administration – Appearance – Theme Options – Import/Export click the button "Import DEMO site". That’s a good way to learn how things are working. Select the import template file from the theme archive and process it. shows the ways how these elements can be used.Import DEMO Site ! • 1 DEMO site contains a set of basic elements introduced in the theme. • That’s all! ! ! Note. Contents . Import Revolution Slider. Note. Theme has a unique and very easy way to import DEMO site. go to administration – Revolution Slider and click Import Slider button.

2 ! Common Contains common page settings. Revolution Slider and Google Map can be shown there. • Background Video – select video files to be shown in Page Title. Check this option to show the footer. • • • • Chapter 2: Metaboxes! "5 . parameters like Page Title Size. metaboxes are page template sensitive in our theme. Video – video as a Page Title (read more below. there are specifics). Show Footer – allows to show or hide the page footer. the content is fullwidth in this case. if the browser won’t support entered formats of video. Some of them appear only if necessary Page Template is selected in the Page Attributes. Pagetitle Text do not work with such option. Background HTML – that’s really any HTML and shortcodes you may use to show in Page Title. but the browser does not support playing of the selected video format. Pagetitle Title – the text that fades from the top when the page is shown. this image can be shown as a page title if Background Content is select as Video. Can be the following: • • • • • No Page Title – page content will come from the page top without page title. Background Content – type of the data in Page Title. can be small or big.Metaboxes ! Metaboxes allow to customize specific page parameters. Does not work if Background Content is Background HTML. HTML – any custom HTML and shortcodes as a Page Title. Page Title Size – height of the Page Title. ! Page Title Contains settings of the page title area. Pagetitle Title. Works is Background Content is set to Image. Please note. Color – just a colored area as a Page Title. Background Color – select a color as Page Title background. Background Image – select an image to be shown in the Page Title. Does not work if Background Content is Background HTML. Note. Note. Note. For example. than Background Image will be shown in Page Title instead. Image – an image as a Page Title.

Sidebar – select a sidebar for the page. Metabox is being shown when Page Template is selected to Portfolio in Page Attributes metabox. Columns Layout – number of columns in the Portfolio. Grid Blog only. Show Categories Box – show or hide the box with the categories. Metabox is being shown when Page Template is selected to Blog or Blog Grid in Page Attributes metabox. can be the following: • • From Newer to Older.• ! Pagetitle Text – the text that fades from the bottom when page is shown. ! Portfolio Contains settings for Portfolio pages. Show Categories Box – show or hide the categories box that appears at the page top after page title." Chapter 2: Metaboxes! "6 . Number of Portfolio Items per Page – number of projects shown on the page. See more Edit Category Icons. From Older to Newer. Columns Layout – number of columns in the Blog Grid. Specify how to Order Portfolio Items – ordering of the project in portfolio page. Custom sidebars can be created at Theme Options – Sidebars page. Does not work if Background Content is Background HTML. Blog Contains settings for Blog pages.

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.Theme Options Common 3 Retina Ready – allows to optimize theme for a better support for retina displays. Logo is a pure text – logo is a text. Logo is an image – logo is an image. Logo is HTML – logo is a custom HTML. Chapter 3: Theme Options! "7 . Logo HTML . Search Button in Menu .hide or show the search button in the Main Menu.allows to set the accent theme color. Search Button activates a search box that fades from the top of the page. by default. Logo box is being shown on the page header and in the page footer (see site DEMO for more information).enter the html of the logo. ! Footer Footer Text – the text to be shown in the footer. no html/shortcodes are allowed. Accent Theme Color . used if Logo value is "Logo is an image". Sidebars can be used on the page of Blog and Blog Grid templates only and on the post pages. Could be the following: • • • • Do not show a logo – no logo for the site. shortcodes are allowed. ! Sidebars Dynamic Sidebars – allows to add unlimited number of additional sidebars to the site. there are installed 2 sidebars – Blog and Post. used if Logo value is "Logo is a pure text". used if Logo value is "Logo is HTML". Logo – specify the sources of the logo box. if the feature is enabled. Footer Copyrights – copyrights text shown in the footer. Note. Social Icons – the set of the icons with the links to social profiles shown in the footer. Logo Image – select the image for the logo. HTML and shortcodes are allowed. ! Logo and Favicon Favicon image – set the image to use it as a site favicon (images of small size are recommended). Note. Logo text – enter the text of the logo.

Form Title – the title of the contact popup window. Custom CSS – custom CSS code to be added to the page header. Import DEMO Site – imports the demonstration site create by theme developers. ! Custom JS/CSS Custom JS – custom JavaScript code to be added in the page footer.Footer Background Image – image transparently shown in the footer. It is recommended to use this feature to copy/move existing site to new installation. The core blocks that fonts feature handles are following: BODY element (site text). text of Page Title and Head Line elements. See more about Font Editor. Email Subject – the subject of the contact request email. ! Import /Export Import Site – allows to import site content from xml file made by Exporting Site Content feature. sidebars and some Wordpress settings. headers from H1 to H6. ! Fonts Contains settings that allow to customize the main fonts used in the theme. ! Contact Form Send To Email Address – the email address to which the contact request will come. This feature is more advanced than the standard Wordpress – Tools – Export because it also allows to export menus. widgets. Form Text – the text of the contact popup window. Export Site Content – exports the content of the site into xml file. ! Chapter 3: Theme Options! "8 .

add a class="search-bar-btn" to it. add a Links object to menu with the URL "#contact" (see example below). For example: <a href="#" class="contact-bar-btn">Contact Us</a> To release the Contact Widget from main menu. Note. use the text widget instead and combine it with custom html and shortcodes. ! Chapter 4: Theme Specific Options! "9 . ! Contact Widget Contact Widget is a special area on the page that fades from the page top if necessary action is released. theme automatically recognizes it as a caller of search form. To put more information there. To release the Contact Widget from the page. add the html element with class="contact-bar-btn". but it does not limit it’s usage for any other purpose.Theme Specific Options ! Search Button Search Button activates a search form that fades from the page top. 4 To release the search form from the custom html element. theme automatically recognizes it as a caller of Contact Widget. Put widgets on the Contact Sidebar. For example: <a href="#" class="search-bar-btn">Search</a> Search Button is automatically assigned to the site main menu as a last item. go to Wordpress administration – Appearance – Widgets. we recommend to use only one widget on the contact sidebar. In the DEMO implementation we assigned a role of contact information to this widget area. To edit the Contact Widget area.

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 Specific Options! 10 " .Slider Editor Using Slider shortcode generator in the post editor there is an ability to select images for the slider using standard Wordpress 3.

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 Specific Options! "11 .

click on necessary category to edit it. Portfolio (or Posts) – Categories. Scroll the page down to find Category Icon feature.Edit Category Icons The Category Box shown for Blog Grid and Portfolio pages contains a set of categories assigned with the posts or projects. use it to associate necessary icon to category. go to administration interface. To edit the category icons. ! Chapter 4: Theme Specific Options! 12 " . 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 apply the changes just refresh the page in the browser (note. the appeared form will ask to enter personal Google API key. select necessary size and color parameters in the Overwrite Size/Color fields.com/fonts/docs/ developer_api#APIKey Once the key is entered. click Update Fonts button. it may discard the changes in the theme options you made before in case they are not saved). To update the list of Google Fonts click on the link "Update the list of Google Fonts". change the font parameters like font size and font color.Fonts Editor Theme is using smart Fonts Editor that allows to assign many different fonts to the theme." Chapter 4: Theme Specific Options! 13 " . Font Editor contains a unique feature that allows to update the list of the Google Fonts which you may use in the theme. the time depends on the server speed/loading. In case of successful updating. This feature is important if you would like to use new Google Fonts which are not included in the DEMO theme pack. it may take up to a minute to update the fonts.google. 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. the message with the number of updated Google Fonts appears. including Google Fonts. The Font Editor is looking as following: ! ! Font Editor allows to select the font from a list of standard fonts. Note. This tutorial describes how to acquire such key https://developers.

Parameters:! • 5 perline – determines the number of projects shown in shortcode. [portfolio perline="3" count="6"] . ! Chapter 5: Shortcodes! 14 " . Note. the categories should be comma delimited. Sample:! ! FAQ:! Q: I would like to show particular projects in the portfolio line. 3 project per line (2 lines).allows to set the number of projects shown in portfolio.sport"] – displays 2 recent projects of categories "design" or "sport" per line.Shortcodes ! [portfolio] Generates a line with the set of projects. the category slug should be entered there. categories – select the particular categories of projects to show in shortcode. 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.show a blog block with 6 projects. In case of multiple categories. the latest projects are being shown there. Keep this parameter empty to show projects of any category. count . Note. • • Example:! [portfolio perline="3"] – displays 3 recent projects per line. [portfolio perline="2" categories="design. Use the administration – Portfolio menu to set up projects. Shortcode generator is available in the menu of visual editor.

! ! Chapter 5: Shortcodes! 15 " . or use the slider shortcode generator in the visual post editor. slider-medium – medium arrows size. fullwidth – specifies if the slider should be fullwidth. images ids are 101 and 102. the image id is shown in the Id column. Sample:! " FAQ:! Q: Where do I take an image id? A: Go to administration – Media menu. slider-big – big arrows size. The shortcode generator exists in the post editor. 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. Example:! [slider ids="101. Take the id of the necessary image from the administration .Media menu. See also Slider Editor. The following classes for arrows can be used: • • • • • slider-small – small arrows size. Note.[slider] Produces a slider with images. 102" fullwidth] – slider with two images. Parameters:! • ids – comma delimited ids of the slider images. Slider is fullwidth.

Example:! [teammember id="100"] Sample:! " FAQ:! Q: Where do I take a member id? A: Go to administration – Team menu. Parameters:! id – id of the team member. To set up the team member use administration – Team menu.[teammember] Draws a box with the team member. ! ! ! Chapter 5: Shortcodes! 16 " . the member id is shown in the Id column. take it from administration – Team table.

Possible values are right. the tag value is used. To associate to what big service the small will point. Note. notitle – determines if the service title should not be shown. To create a service use administration Services menu. For example. Parameters:! • • id – id of the service. tag – some unique service identifier that is used to associate different types of services. then tag attribute becomes useless.[service] Draws a Service box. it can be either small or big. center (default). • • • • 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 " .enter the url of the page to which the service will point to. enter same tag value for both of them. take it from administration – Services table. type – type of the service. image – specifies the position of the service image related to the text. url . left. The post excerpt is shown in the small service and full post text in the bug service. Url is used for service of the type Small only. 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. So if you wish to navigate small service to a particular big. if the url attribute is used. if you wish to make a service clickable (user will be navigated to the detailed service ).

the service id is shown in the Id column. below place a service with the type=big and same tag=xyz. Place on the page a service with the type=small and tag (could be just any value) = xyz..g. use [background] shortcode). Q: How do I make a service semi-transparent? A: You may put the service on the custom background (e. then. 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. and do not set Featured Image for the service. This construction produces expected functionality. ! Chapter 5: Shortcodes! 18 " .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.

either custom color or image. Parameters:! • • • type – type of the background content.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. image – image url. Example:! [background type="image" image="http://thegravity. Background content should be entered between opening and closing shortcode tags. like this [background type="color" color="#FF0000"]Content is here[/ background] ! ! Chapter 5: Shortcodes! 19 " . color – is used if the background type is color.[background] Produces fullwidth block with the custom background content. determines the color of the box. box will contain this image as a background content. is used if background is image.net/myimage.

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. Example:! [logo url=" http://thegravity. Parameters:! url – urls of the logo image.net/logo.[logo] Draws a box with the logo image.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.png"][/column]! [/columns] ! Chapter 5: Shortcodes! 20 " .

Parameters for [column] ([columns] shortcode does not have parameters): • • type – specifies the size of column as a part of the row. please use by theme developers advice only.[columns] & [column] Makes a row with the columns inside. 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 " . class – additional class that can be assigned with the column <div>.

[blog perline="2" categories="design. 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 " . Shortcode generator is available in the menu of visual editor.sport"] – displays 2 recent posts of categories "design" or "sport" per line. Note. Sample:! " FAQ:! Q: I would like to show particular posts in the portfolio line. the categories should be comma delimited. categories – select the particular categories of posts to show in shortcode. Keep this parameter empty to show posts of any category. Parameters:! • • perline – determines the number of posts shown in shortcode. Example:! [blog perline="3"] – displays 3 recent posts per line. the category slug should be entered there. In case of multiple categories.[blog] Generates a line with the recent post.

Parameters:! id – id of the particular project to show.[project] Shows a particular project. Example:! [project id="100"] – show the project with id = 100. Take id from the list of projects in administration – Portfolio menu. or combine few [project] shortcodes with the [columns] ! ! Chapter 5: Shortcodes! 23 " . Set up projects in the administration – Portfolio menu. Sample:! ! FAQ:! Q: How do I show a few projects per line? A: You may use [portfolio] shortcode.

[post] Shows a post with the particular id. Set up posts in the administration – Posts menu. or combine few [posts] shortcodes with the [columns] ! ! Chapter 5: Shortcodes! 24 " . 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. Parameters:! id – id of the post to show.

Keep it empty to make height variable. Parameters:! • • • • lat . 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.[googlemap] Shows a Google Map. title – google map title. lng – longitude of the location shown in google map. zoom – zoom parameter for the google map. text of the map marker. ! ! Chapter 5: Shortcodes! 25 " .latitude of the location shown in google map. depending on the width of the map (if this case is used the height of the map will be 3/8 of it width). height – height of the google map element shown on the page in pixels.

[contactform] Shows a contact form. Example:! [contactform] Sample:! ! Chapter 5: Shortcodes! 26 " .

! ! Chapter 5: Shortcodes! 27 " . Shortcode is available in the shortcode generator. you can do that. sure. Example:! [alert type="warning"]Yellow Alert[/alert] – produces yellow alert box with text "Yellow Alert" inside. warning – yellow color of alert. Sample:! ! FAQ:! Q: Can I use other shortcodes and custom HTML inside alert shortcode? A: Yes. Parameters:! type – defines the type/color of the alert box. error – red color of alert. [alert type="success"]Green Alert[/alert] – produces green alert box with text "Green Alert" inside. info – blue color of alert.[alert] Produces an alert box. Note. Possible values are: • • • • success – green color of alert. the text to be shown inside the alert box should be entered between opening and closing tags of shortcode.

black – button of black color.enter the url to the web page to which the button will point. yellow – button of yellow color.determines the normal size of the button. normal . • color – color of the button. green – button of green color. Parameters:! • size – size of the button. Shortcode is available in the shortcode generator. blue – button of blue color. url .determines the large size of the button. Example:! [button size="normal" color="red" title="Button"] – shows a button with the normal size. possible values are: • • • • • • • grey – button of grey color. Sample:! ! ! ! Chapter 5: Shortcodes! 28 " . white – button of white color.[button] Produces a button.determines the small size of the button. small . red – button of red color. large . possible values are: • • • • mini – determines the mini size of the button. red color and text "Button" inside. • • title – the text shown on the button.

Parameters:! h – height of the separator in pixels. left – tooltip window at left of element. 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.[gap] Put a separator with the specified height. bottom – tooltip window under the element. ! Chapter 5: Shortcodes! 29 " . Can be the following: • • • • top – tooltip window under the element. • title – text of the tooltip window. you can. right – tooltip window at right of element. Parameters:! • pos – position of the tooltip window relative to the element. 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.

The text of the particular accordion item should be entered between opening and closing [accordion] tags. 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 " .[accordions] Allows to create accordions box. Accordions contains from a combination of two shortcodes – [accordions] and [accordion]. [accordions] is a container for accordion items. Parameters ([accordion] only): title – the title of accordion item. [accordion] – describes each item in the accordion.

Parameters [tabs]:! • pos – specifies position of the tab titles relative to tabs content. Possible values are: • • • • above – tab titles above the content. active – determines if the item is active or no. The text of the particular tab item should be entered between opening and closing [tab] tags. below – tab titles below the content.[tabs] Allows to create tabs box. Tabs contains from a combination of two shortcodes – [tabs] and [tab]. [tabs] is a container for tab items. 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 " .tab titles from right at content. left – tab titles from left at content. • • title – the title of tab item. right . [tab] – describes each item in the tabs box.

CSS Classes ! class="upper" .Makes the letters of the block uppercase. some fonts do not support such kind of style. <h1 class="upper">Heading</h1> class="bolder" . See below the list of available classes. Example: <p class="no-margin">Paragraph text</p>. It enlarges the top and bottom paddings. Example: <h1 class="bolder">Heading</h1> class="headline" . Note. <img class="no-margin"> ! class="loose" . Example: 6 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). Example: <ul class="loose"><li></li></ul> ! Chapter 6: CSS Classes! 32 " . Example: <p class="headline">Paragraph text</p> class="no-margine".Recommended to apply this style to some heading elements to specify the beginning of the special block or important data.It’s recommended to apply this class to ul/ol lists.Makes the text font of the block bolder (it’s medium value from the styles classification). It makes the text font size little bigger than the font of main text.Removes the margins from the html object.

class="inverse" . It changes the color of the font inside this block to dark. Example: Example: [background]<img class="b-img">[/background] ! ! Chapter 6: CSS Classes! 33 " .Used for images (img) located in [backrground] shortcode. It aligns the image to the block bottom.Applies to only [backrgound] shortcode. Example: [background type="color" color="#ffffff" class="inverse"] ! class="b-img" .

add the data-toggle attribute to the link with the "tooltip" value. 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". The position of the tooltip window can be defined in the tag data-placement. Title or the text of the tooltip window can be specified in the data-original-title attribute.HTML Elements ! Anchors with Tooltip! 7 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. allowed values are top/left/right/bottom (determines the position of the tooltip window relatively to the link). ! Chapter 7: HTML Elements! 34 " .

co/ jquery. CSS.js .js .videobackground.css ! • • Fonts Font Awesome .com/projects/stellar. Credits! 35 " .com/p/google-code-prettify/ ! • • • • • • • • CSS Files bootstrap-responsive.css isotope.css font-awesome.css prettify.http://getbootstrap.com/desandro/imagesloaded jquery.css bootstrap.min.css custom-responsive. Credits ! Javascript Files • • • • • • • • • 8 bootstrap.infinitescroll.http://fortawesome.io/Font-Awesome/ Entypo .https://code.github.metafizzy.js .js .stellar.js .min.3.imagesloaded.http://fitvidsjs.http://markdalgleish.com/ jquery.min.google.woothemes.com/2.https://github.min.isotope.com/georgepaterson/jquery-videobackground prettify.https://github.com/ ! ! Chapter 8: Javascript .http://www.Javascript .min.flexslider.js .http://isotope.http://www.css entypo-social.js .js/ jquery.js .com/paulirish/infinite-scroll jquery.2/ jquery.min.js .com/flexslider/ jquery.fitvids.css flexslider. CSS.entypo.https://github.

deviantart.com/25927524 http://videohive.deviantart.com/ http://siamon89.deviantart.com/ http://epson361.deviantart.com/ http://taenaron.com/ http://hideyoshi.com/ http://foton-3.deviantart.jpl.deviantart.com/ http://rahmatozz.deviantart.com/ http://tylercreatesworlds.com/ http://ulricleprovost.deviantart.com/ http://tamplierpainter.deviantart.NASA/JPL-Caltech Videos! • • • http://vimeo. Credits! 36 " .com/ http://m3-f.Images & Video Files ! Following images & videos (not included in demo content) used in theme preview are owned by the authors: Images! • • • • • • • • • • • • • • • • • • • • • • • http://oroster.deviantart.deviantart.com/ http://hbdesign.com/ http://min-nguen.com/ http://korbox.deviantart.com/ http://www.gov .net/user/MacroLogic http://videohive.com/ http://erenarik.deviantart.deviantart.com/ http://ulricleprovost.com/ http://thomaswievegg. CSS.com/ http://ladylioness.deviantart.deviantart.deviantart.com/ http://adamburn.deviantart.net/user/beone Chapter 8: Javascript .deviantart.deviantart.com/ http://qauz.com/ http://phade01.deviantart.deviantart.nasa.com/ http://sundragon83.