IgnitionDeck Documentation

Stellar Theme Documentation

A theme designed for building a crowdfunding platform with IgnitionDeck. Integrates with the free Theme 500 eCommerce framework.

Before you Install the Stellar Theme

To install this theme you must have a working version of WordPress, the IgnitionDeck 500 Framework parent theme, and the IgnitionDeck Crowdfunding plugin already installed, registered, and set up.

Installation

Download the Stellar Theme from your IgnitionDeck Dashboard.  There are two ways to install a WordPress theme:

WordPress Upload: Navigate to Appearance > Themes > Add New > Upload Theme. Click the Choose File button, select the stellar.zip file from your computer and click the Install Now button.  Once the theme package has been uploaded, WordPress will prompt you to activate the theme.

FTP Upload: Unzip the stellar.zip package. Using your FTP program, upload the resulting theme folder to your website’s /wp-content/themes/ directory.  Then log into your WordPress Dashboard, navigate to Appearance > Themes and activate Stellar.

For more information on using WordPress themes, see WordPress.org’s Documentation.

Create Pages with Correct Page Templates


when creating each new page, set the page template as follows in the’ ‘Page Attributes’ area of the page edit screen as following:

  • Home (Optional): If you wish to create your own custom home page layout and content (i.e. not like the demo home page), create a “Home” page and use the Home Page template.
  • Blog (Recommended): Use the Blog Template.
  • For other pages within your site, we recommend the Fullwidth Page if you aren’t using a sidebar otherwise the Default template is appropriate.

NOTE: We recommend using the popular Contact Form 7 Plugin for your form builder, but there are many other options.  For instructions on how to build a contact form with Contact Form 7, see their documentation.

Set Your Home Page in Settings > Reading

Navigate to Settings > Reading.  To use the default home page layout as per the demo, in the “Front page displays” section check the box for “Your Latest Posts”.  Your site will now use the default widgetized front-page.

500themes_defaulthome

To create a custom home page with your own content and layout, in the “Front page displays” section check the box for “a static page.” For “Front page,” select the page “Home” (created in previous step). For “Posts page,” select “Blog.”

Set the “Blog page shows at most” to 9 for the correct pagination of the /Projects/ archive page.

Stellar_blogPageShows9

Setting Permalinks: to “Post name” under settings -> Permalinks

Customize Your Hero-Image/Slider and Logo

Stellar by default uses the Static Image and an image included with the theme, and the site’s title and description as entered in Settings > General for homepage hero section.

Stellar_HomeFeature_options

You can easily edit/replace it by going to Appearance > 500 settings.  Stellar’s homepage Hero Unit can be set from 500 settings section either by uploading a static image or using a Slider short code, we recommend (Revolution Slider).

  • If using a slider, first create the slider image(s) and any buttons within the Slider plugin settings.  Copy the generated shortcode for the slider, select “Slider Shortcode” from the Home Feature Options menu, and enter the shortcode with brackets [ ].
    Note: the format for the Revolution Slider shortcode should be [ rev_slider slide-name ] and not the default format provided by the slider plugin [ rev_slider alias=”slide-name” ]
  • If using a Static Image, select it from the drop down menu and click on the Add Image button to upload the image you wish to use.  Recommended image size 1920 x 920 px.
  • You can use the Home Hero Section Widget to add one of the 500 Content widgets to this area instead.  Select this option and save your changes.  You can then go to the Appearance > Widgets > Home Hero Section Widget to complete this set up – We recommend using the 500 Content Wide (custom) widget.

For use with Static Images only, there is the option to display text over the image instead of the site’s default title and description. Text can be added in the “Add Header Text” field.

Stellar_HeaderText

Stellar has two additional logo options that can be used instead of the default site title. There is an option for the home page and one for internal pages. Maximum image size is 170px wide and 96px tall.  You can use a JPG, GIF, or PNG (supports transparency) image here.

Stellar_HeaderLogo

Create Two Menus in Appearance > Menus and Assign to Menu Locations

Stellar has two Menu Locations: Main Menu (Top menu) and Footer Menu.

Go to Appearance > Menus. Create your two menus and assign them to the “Main Menu” and “Footer Menu” locations.

For more information on how to use menus in WordPress, please refer to WordPress.org’s documentation.

Customize Your Stellar Crowdfunding Site

We’ve included a number of options in the Appearance > Customize panel of your WordPress installation that will allow you to make your Stellar site unique.

  • Colors: Here you can select colors for your Primary Color, Background Color, Text Color, and Container Background Color
  • IDC Account Links: This is where you can select which of your WordPress menus you’d like the IgnitionDeck Commerce Account links (Login/Logout, My Account, Create Project) to be automatically added to.  For more information on implementing IDC Account Links see IDC’s Documentation on Adding Member Account Links.

Widgetized Home Page Layout

Stellar has 4 widget areas on the default home page provided by the theme: the Home Hero Section Widget, Home Top Content Widgets, Home Content Widgets, and the Top of Footer widget area.

The Home Hero Section Widget can be activated in the previous configuration steps in the 500 Settings.

The Home Top Content Widget area is located below the Hero section and above the project grid.

The Home Content Widget area is located below the project grid and above the Top of Footer section.

The Top of Footer section is below the rest of the page content directly above the Footer and has 4 columns.

Home Hero Section Widget option

The Home Hero Section widget can be used to replace the Slider or Static Image (set in Appeance > 500 Settings > Home Feature Options) with more custom options. For best results use the 500 Content Wide Custom widget with a height of 630px.

home-hero-section

Sections on Home Page

HomePage has multiple sections which are handled through widgets

The widget sections are

  • Home Top Contents Widget – This widget is used for as seen section under the hero section, and uses 500 content wide(custom) widget, you will need to add class “logocontainer” to the optional class section of the widget to get it working like that on demo.
  • Home Content Widget – This widget section is placed below the campaign grid and above footer. The widget is used for creating a Featured section and uses stellar featured widgets and for custom CTA section, it uses Stellar CTA widget

Customize Your Site’s Footer

The Stellar Theme has four columns which can be populated with WordPress “Widgets.” The first and fourth column are bigger width sections and second and third are smaller widths. The first and last columns can be used for Info/contact details and the second and third can be used for the helper menu items such as the Features and Resources custom menus as used in the demo.

If you need help with how widgets in WordPress work, see WordPress.org’s Documentation on Widgets.

Buttons!

You can create a button by adding a class to any <a> link.   For the standard filled in button look, you can add class=”button”.  For the outlined/hollow button you can add class=”button border”.

Compatibility with WC

Stellar theme has built-in compatibility with WC (WooCommerce). You can check out how it looks: Link for WC demo

Updating Stellar

To update Stellar, please see Updating 500 Child Themes.