“Nebula” Documentation by “AtticThemes” v1.1


“Nebula - WordPress Theme”

Created: 03/04/2015
By: atticthemes

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to post a comment or contact us via our profile page contact form here. Thank you!


Table of Contents

  1. Getting Started
  2. Plugins
  3. Page Templates
  4. CSS Files and Structure
  5. JavaScript Files

Theme Installation - top

This is the first part of the documentation of Nebula WordPress Theme. In this part we're going to install the theme. Go to your ThemeForest profile page and download the theme form the Downloads section. Unzip it. Go to Appearance -> Themes and click the Add New button on top of the page and then click the Upload Theme button. Choose the installable .zip file of the theme and click the Install Now button. As soon as theme is installed, activate it. After the activation you'll see the message saying that some of the default image sizes set in the Settings -> Media do not match the theme recommendation. All you have to do is to click Yes, please button and the sizes will be fixed automatically. If you already uploaded images into Media section, then you need to activate the Regenerate Thumbnails plugin, which will change the sizes of your images to the new ones. If there is no images in the Media section yet, then there is no need of activation the plugin.

Creating Menu - top

Let's create a menu. Go to Appeareance -> Menus, give your menu a name, for example, My Main Menu, click the Save Menu button. On the left you'll see the Pages section, in View All section check the both Home and Sample Page boxes and click the Add to Menu button. Your menu is ready, now check the box for Menu will appear in the header of the theme and click the Save Menu button. Refresh your page and you'll see the menu you have just created.

Customizer - top

Basics - top

In this part we're going to take a look at the theme customizer, which is located in Appearance -> Customize. On the left side you'll see our customizer with lots of sections for customizing the theme, on the right side you'll see how the theme looks on a clean WordPress install. So let's dig in our customization sections.

Site Title and Tagline, Navigation, Widgets and Static Front Page

The first section controls the site title and the tagline. In the Navigation Section you can select which menu appears in each location. The Widgets section gives you the opportunity of adding, removing and reordering the widgets in your footer area. The Static Front Page section controls the static front page. If you want to have a page as your home page, you can choose it by clicking A static page radio button. Or you can leave your home page set to the main archive page.

Header - top

Layout and Navigation Style

In the Layout and Navigation Style subsection you can choose one of three header layouts: Large, Small and Minimal. With the Minimal Header Layout chosen you can choose one of the Navigation Styles: Lightbox, Sidebar Left and Sidebar Right. Large and Small Layouts have their navigation already visible, so this setting applies only to Minimal Header Layout. The Sticky Navigation setting applies only to the Large Header Layout. Also in this subsection you can choose settings for Navigation Styling: text color, background color, overlay opacity, text style.

Header Image

In the Header Image subsection you can set the settings for Project or Page header image. Here are the settings for header image overlay color, header image overlay opacity, header image height style and custom height. Also you can set the heading position and header image content color.

Logo Settings

In the Logo Settings subsection you can set the General Settings: sticky navigation logo scale, logo left and right offsets. In the Image Logo Settings you can choose two versions of image logo: the dark and the light versions. Pay attention that Image Logo will override Text Logo by removing it completely and replacing with the image set as the logo image. Also you can set the typography settings here.

Description

In the description subsection you can write the site description and it will override the tagline.

Colors - top

The Colors section of the Customizer contains several subsections: Typography, Backgrounds, Other and BoxBuilder. In each of these subsections you can change the colors of main text, headings, links, hover colors, the color of the main background, border and separator colors, colors of dropcaps, skills and message boxes.

Blog and Typography - top

Blog

Blog Extender Settings

The Blog Extender Settings subsection appears when you activate The Blog Extender plugin. In this subsection you can choose whether to show or not the Like Button. Also you can set the Like Button Color and Like Button Background Color settings. With the Sharing Settings you can choose social networks for sharing your content.

Colors

In this subsection you can set the colors for Link Post Format Background and Chat Post Format Background.

General

In the General subsection you can write the Sticky Post Label, choose the Blog Layout, default or masonry, choose the Date Format, relative or absolute, choose to show or not the Related Posts, set the Archive Posts Limit, force to shorten the content of the post and choose the words limit of the short content.

Typography

In the Typography section you can set font family and font size of body and font family for headings.

Footer, 404 and General Settings - top

Footer

Content Settings

In this subsection you can choose the footer content. You can set the content to be Widgetized Area, which means that all the widgets you have selected in the Appearance -> Widgets will appear in footer. You can choose the content of the footer to be Page Content, which speaks for itself. Or you can set the content to be None of the above. With Page as Content setting you can choose any of your pages content to be the content of the footer. Of course you should set the Footer Content setting to be Page Content first. With the Widgets Layout setting you can select the layout, just click on it and you'll see the set of different widgets layouts.

Copyright Area Settings

In this subsection you can set the background color of Copyright Area and write the Copyright Text.

404 Page

In this section you can write the 404 Page Title and 404 Page Text.

General Settings

In this section you can enable the smooth scrolling for Google in Chrome Browser.

Plugins - top

There are several plugins that come with this theme. They are completely free, one of them you can even download form WordPress Plugins repository. They are equipped with updating system, so you can stay up to date and receive bug fixes and new features right away.

We also support Contact Form 7 plugin, WP Google Map Plugin, so now you can display Google Map in your theme, and Disqus Comment System plugin.

Box Builder - top

In this part we are going to build a page and fill its content with Box Builder plugin. So let's begin. Pages -> Add New, give your page some title, for example, Box Builder Page. On the right side you'll see Page Settings -> Page Heading, let's choose No Heading. Publish the page and let's view how it looks. Our created page has no title, even we've written it. Set back the Page Heading setting to the Default Heading, Update and refresh your page. With Bottom Spacing set to the No Spacing the content of the page will be flushed with the footer.

Let' add some content using Box Builder. Go to the Box Builder area and click on the Add Section button. Each section contains a row by default and its own unique settings. Above the settings you can find a description for them. You can have as many sections as you want, all you need to do is to Add Section and, if you want to delete a section, just click on Remove Section button.

Section Settings

You can set an image or a video as a background media for any section, set the opacity of the chosen media, background color and text color for the section, choose the background alignment, image size and background type. With the General Settings you can set the Section Width to Full Width, so the section will fill the window width. You can also choose the width of the row inside of the section. Also in the General Settings you can add additional CSS class to the section.

Rows and Widgets

Let's select a three column layout for our row and widgets for columns. To do that you need to click on plus button on the bottom of the column. The widget selection window will open up. Here you can see all the available widgets: text block, media gallery, tabs, toggles and much more. The widgets can be cloned, edited and deleted. If you have done changes only to Box Builder content instead of updating the page, you can just click the Save button of Box Builder. Each widget has Additional CSS Class for custom styling.

Text Block

This widget is meant to be used as text blog, but it can carry any content that can be put in the default WordPress editor.

Media Gallery

With this widget you can create galleries, select their type, number of columns and use masonry effect.

Tabs and Toggles

These widgets help you to create tabs and toggles, clone them and set the content for them. You can have as many tabs and toggles as you want.

Service Block

With this widget you can create service blocks, which can have their own icon and content. You can select the alignment for the icon and the text.

Message Box

This widget creates box with message text. You can have several types of message boxes: notification, warning, success and error. Each of types has its own icon with the background color. You can use these message boxes to notify or warn your users about something.

Separator

With this widget you can have an separator line with its own title. You can set different alignment and format for the title.

Dropcap

This widget makes the first letter of the text uppercase. You can also set different styles for the dropcap.

Break

This widget adds a break/white space below the widgets. You can use it in empty row to make an additional space between the rows.

Skills

Using this widget you can show the users your skills and proficiency level of the skills.

Team Members

It's very easy to show your team members with this widget. Each member can have its thumbnail, name, job title and description. You can show your team members as a slider/carousel or in a grid with several columns.

Search

Adds a search form and doesn't have any settings.



Portfolio - top

This plugin is an extension of the Box Builder plugin, so before activating it, you must activate the Box Builder plugin first. After the activation you'll notice the Projects section in your Admin Menu and Portfolio widget in the widgets list of the Box Builder. Process of adding a new project is the same as adding a new post, so go to Projects -> Add New. In the right sidebar you'll see Project Thumbnail Settings and Project Page Settings. In the Project Thumbnail Settings you can select a thumbnail image for the portfolio page and set the size for it. If the thumbnail is not selected featured image will be used instead. In the Project Page Settings you can remove the project heading in the single project page, remove the spacing below project content, so it sits flush with the footer and disable the featured image in the single project page.

After creating and saving some projects, Add a new Page and go to Box Builder tab, add a new section, choose the layout and add a Portfolio widget. You'll see the Portfolio Widget Settings window with several sections. The Available Projects section shows the list of available projects that you can add into your widget. In the Selected Projects section you can reorder or remove the projects. The Categories section shows the categories that are assigned to the selected projects. The Portfolio Settings section contains all the necessary settings for setting up you portfolio. Go to the front end to view your created project. If the page doesn't exist, in the Admin Menu go to Settings -> Permalinks and just click the Save Changes button. Refresh the page and you'll see that the issue has been fixed.



Blog Extender - top

Now we're going to talk about Accomplishments Widget, Likes and Sharing Systems, all added by Blog Extender Plugin. So, first of all you need to activate the plugin and we can begin. Go to Admin Panel -> Plugins, find Blog Extender plugin and activate it.

Accomplishments Widget

In the Appearance -> Widgets you'll see the custom widget AtticThemes:Accomplishments Widget. Drag the widget and drop it into Footer Area. The first setting is the Title of the widget, with the second setting you can choose Total Post Views, Total Post Likes, Total number of Posts and Total Amount Words. Let's choose the last one and write the title for it, for example, Words and click the Save button. Drag and drop another widget. This time let's choose Total Posts and write the title for it, Posts. Click the Save button. Drag and drop two more times this widget and choose other two settings with their titles. Don't forget to Save them. You can of course change the order of the widgets as you can do it with any other widget. Now go to the front end, refresh the page and you'll see our widgets. Don't forget to check the Footer Section in Customizer and make sure that the Footer Content is set to Widgetized Area, which is the default setting.

Likes System

The next feature that Blog Extender adds is the Likes System, which you can activate after going to Blog Section -> Blog Extender Settings in the Customizer and checking the box Show Like Button. After the Likes System is activated all you need to do is to click on the like button. Only logged out visitors liked post will be counted as liked, but no matter if you are logged or not, you can still like the post. By clicking again on the like button you can dislike the post. Both logged in and logged out users can do that.

Sharing System

The third feature of Blog Extender Plugin is the Sharing System. Go to the Customizer, Blog Section -> Blog Extender Settings and check the boxes of those social networks which you would like to share your posts with.



Social Icons - top

In this part we'll talk about how the Social Icons Plugin works, so go to the Plugins -> AtticThemes: Social Icons and activate it. After the activation you'll see the new section in the Admin Panel - Social Icons. In this section you'll see the available social icons.

Building Icon Sets

It is very straightforward, just drag an icon from the stack located on top of the page into an empty "Icon Set" box (the gray box) this will automatically create an "Icon Set" shortcode that can be used in any shortcode enabled area, like pages and posts for example. Each time a new set is created an empty one will appear, so more sets can be built if needed. To remove icons just drag and drop icons from within the set into the trash box. If a set has its icons removed, it will be deleted.

Every newly created set has its unique ID but it may be changed to any other ID that does not contain special characters or spaces. In order to change a set ID, just double click on the generated shortcode next to the "size selector".

Setting a custom ID is recommended, this will prevent issues with removed sets and unused shortcodes. If a set is removed, but the shortcode is still in use, the set will be rendered empty. By having the custom set ID in the shortcode you may restore it anythime without going through all the places the shortcode was used, in order to change it to a new one.

Setting Up The Icons

None of the icons have their links set when they are used to create new sets. These icons are marked with an * (asterisk) to indicate the lack of a link. To set a link, just double click on the icon and type in or past a link in the input box of the popup window. Click "Done" or hit ENTER on your keyboard, to save the changes.

You can also find this guideline in the Social Icons section, on the top right side of it you'll see the Help button. Click on it and you'll find all the information you need.

You can also download this plugin from WordPress Plugins repository.








Page Templates - top

Archives Page Template

This page template shows the archive of most recent posts, most commented posts, posts by categories, most liked posts, most viewed posts and posts by month. So let's create a page for this template. Pages -> Add New, write the title for the page, Archives Page, in the Page Attributes section (in the right sidebar) set Template to the Archives Page, click the Publish button. Your page is ready. Click View Page button to view the page in front end. Both liked and viewed posts are generated by Blog Extender. The limit for archive posts you can set in the Customizer -> Blog -> General -> Archive Posts Limit.

Archives Sidebar Right Page and Archives Sidebar Left Page Templates

These page templates also shows the archive of most recent posts, most commented posts, posts by categories, most liked posts, most viewed posts and posts by month. To create pages for these templates you should do the exact same steps as for the previous page template, but you should set Template to the Archives Sidebar Right Page and Archives Sidebar Left Page accordingly to the page titles. These two page templates contain sidebars for widgets. To choose widgets for these sidebars go to Appearance -> Widgets, drag and drop your chosen widgets into sidebars areas accordingly.








CSS Files and Structure - top

Font Awesome: font-awesome.css

This theme uses Font Awesome icons, version 4.2.0

Theme Style: style.css
			/* has no css rules, only contains the header part */
		


Main Style: /resources/css/main-style.css
			/* === RESET OF BROWESER SETTINGS === */

			/* === TYPOGRAPHY === */

			/* HEADER */

			/* FOOTER */

			/* CONTENT */

			/* BLOG DEFAULT LAYOUT */

			/* BLOG MASONRY LAYOUT */

			/* ATTACHMENTS */

			/* PAGES */

			/* WIDGETS */

			/* WORDPRESS CORE STYLING */

			/* BOXBUILDER STYLING */

			/* CONTACT FORM 7 */
		






JavaScript Files - top

There are several javascript files. Let's see the list.

jQuery: jQuery library is being loaded from the WordPress instalation.

Main Script - /resources/js/script.js: Contains the main functionality.

libraries.js: This script file contains several script files. Here they are:

1. hammer.js - is being used for touch gestures.

2. jquery.flexslider.js - This is the popular "Flex Slider jQuery Plugin" that is used by the "Box Builder" plugin for creating the slider galleries. www.woothemes.com/flexslider/

3. jquery.isotope.js - Handles the masonry effect of the portfolios and the filtering functionality.www.isotope.metafizzy.co

4. jquery.mediabox.js - MediaBox is a custom build light box plugin for jQuery.

5. jquery.transit.js - Adds CSS transitions into jQuery.






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

AtticThemes

Go To Table of Contents