IgnitionDeck Documentation

Venus Documentation

Venus-Header

Venus is a Theme 500 Child Theme built to integrate directly with the IgnitionDeck WordPress plugins IgnitionDeck Crowdfunding and IgnitionDeck Commerce.

Geared towards taking pre-orders for your projects and products, Venus sets the focus on the one thing you want – people ordering your products. With a strong emphasis on a highly customizable and modular home page, we’ve put extra care into making sure your products look great from the start.

Welcome to Venus!

Your first step in getting Venus up and running is to install the 500 Framework, and then the Venus theme. Download both of them from your member dashboard and then upload them via the WordPress Admin’s Appearance->Themes->Add New screen. Activate Venus from the themes screen, and then head for Appearance->500 Settings to continue the setup process.

The goal of Venus is to make a single project your home page. While Venus can have multiple projects and offers a very nice project grid design, you’ll need to choose a single project to feature on your home page. If you haven’t already created an IgnitionDeck Project, do that next.  Keep in mind you’re building your project for pre-orders, and you’ll be crafting the majority of your project’s sales copy in the following steps.

Setting a Project as your Home Page

Under 500 Settings, you can choose your Home Page Project with the dropdown titled Home Page Layout. 

home-page-layout

 

 

Choosing Your Colors

Note: If you'd like to stick with the default colors of Venus, skip to the next section.

You can customize your theme colors using the WordPress customize section, which is found in the Appearance->Customize screen.  This is a standard of the 500 Framework, so if you switch child themes the colors will go with you.  IgnitionDeck has devised a simple system in which you select some standard colors for your site, and then the framework does the heavy lifting in making those colors blend in throughout.

The Example colors used here in the screenshots you can see in action at http://theme500.com/venus2

primary-colorsPrimary Color

Our use of Primary Color in Venus is extensive, and is the primary tone set for your whole website.  You select three variations of your Primary color: the default primary, the light primary and the dark primary.  Try and make sure they’re not too close to the same, as the variations are used throughout.  A good rule of thumb for your primary color is to set it in the middle of your color selector.  Then take the exact same color for your Primary Light and move the cursor closer to the top.  Do the same for the Primary Dark, except move your cursor closer to the bottom.  View a good example on the right.

secondary-colorsSecondary Color

Similar to Primary, this color is used much less frequently, but highlights the Featured Items widget and also sets the color of all links on your site.  You may also use it when further customizing the 500 Content Wide widgets. Here we set a Secondary and a Secondary Dark.  Use the same rule of thumb as when you set primary colors.

text-colorsText Colors

Here we’re setting your site-wide colors for most of the text. Here you’ll find the Text Color option, which will color a majority of the text on your site.  The Subtle Text Color is used on the headlines and widget titles.  It may show up in a few more places too.  Next is the Text On Primary color, which is set because a lot of times, we’re placing items on top of a background that is either your Primary or Secondary Color.  Set the Text On Primary to something that will be legible on your Primary Color especially.  Most of the time this is going to be something very close to white or black.

background-colorsBackground Colors

The background colors consist of a Site Background Color that is going to be what most of your other colors sit on top of, and a Container Color.  The Container Color is essentially a backup background color, used to add variation and depth when appropriate.  It would be advisable to keep this color only slightly different from your Site Background Color.  If your Site Background is White (#fff) then you could have your Container Background be light gray (#ddd).

 

Creating your Home Page

Thanks to the help of the 500 content widgets, building a modular  home page is easy.  To build these layouts, visit the WordPress theme customizer again via the Appearance->Customize screen, and select the widgets section.  The two sections you will use on your home page are the Home Top Content Widget and the Home Content Widget. Both of these widget sections are specifically designed for use only with the 500 content widgets.

We’re especially fond of theses widgets when building a home page on the Venus child theme.

  • 500 Content Wide (Custom)
  • Venus Feature Widget
  • 500 Video

The 500 Content Wide (Custom) widget is the one used exclusively on the Venus Variation demo.  With the custom settings of this widget, you’re able to insert images, background images, text color, background color and more.  It’s quite straightforward, but we’ll go into some detail below to make it easy to get going.

500-content-wide-customWidget How-To:

Defaults

Styles: By default, these widgets install using a base style and general set of classes.  These classes are .even and .odd, and will determine the coloring of them to match your site color palette.  You can customize the classes and styling beyond that, or leave it as-is for an easy setup.

Height: Another default is a set height for these widgets.  In order to ensure everything lays out neatly, the wide widgets must have a specific height.  Watch how this lays out in the customize screen as you develop it.  If you need to make the widget taller, insert a new height into the height field.  This would be needed if you see your text start to disappear out the bottom of the widget.

Padding: The final default is that of padding.  The total height of your widget takes into account the padding also, which means that if your padding was 100px at the top and bottom, and a height of 700px, you’d have 500px of space for the actual content itself.  Use the padding if you would like more space above and below your content, as seen on the demo here, with the big green I’ve Got So Many Stories widget.

Images and Layout

Selecting your layout is required. The Image Left and Image Right selection is straightforward. If you place an image into the image box, it will display on the left or right of the text.  If you select Image and Text Center, then everything is centered, with the image displaying above the text.  Even if you don’t have an image here, the text will still be on the right or left, which can be used creatively with just a background image.

Inserting an image will place the image into this widget, and size it according to the space available.  You don’t need to worry about making sure the image is the exact size – but don’t go uploading 5mb images here!

Inserting a Background Image will place the image right into the background of the entire widget.  This image will grow with the width of the browser, and remain centered.  Experiment if you need to, to learn what sort of imagery works best.

Colors

In the event you need to customize either your text color or your background color, you can do so in these sections.  If you’ve placed a background image, it will display over the background color, so think of the background color and background image as an either/or situation.

Content

As you might predict, this section is where you place your text.  This input supports HTML, so in the event you need to place a break in or embolden your text, standard HTML will do the trick.  You can get more creative if you wish.

Custom Class

You can define any extra class you want here, which works well if you are familiar with CSS and wish to do something extra fancy with a specific widget.  Beyond that, you can use some of our premade classes that will give you some variation possibilities while keeping the style of Venus intact.  As you can see, by default, when you place a background image inside one of these widgets, it gets covered by either the Site Background Color, or the Primary Color.  If you wished, you can get more specific and use the below classes to change the color used.

  • primarycolor – semi-transparent overlay of the Primary Color.
  • secondarycolor – semi-transparent overlay of the Secondary Color.
  • containercolor – semi-transparent overlay of the Container Background Color.
  • transparentcolor – removes any semi-transparent overlay and let’s the background image stand on its own.

 

500 Video Widget

Along with the title, here you paste the Embed code you would receive from your video host of choice.

feature-widgetVenus Feature Widget

Using Font Awesome, you can place any icon you want (into 1 of three sections) by selecting from the Font Awesome cheat sheet, and pasting its icon name into the field for it.

You can see the Venus Feature Widget in action on the main Venus Demo.  The Feature Widget automatically adopts the Secondary color as the background color.  You can also change this using one of the custom classes (see above).