Setting up your theme

1) Creating theme pages

Start by adding pages you are going to need. Go to Pages > Add New and create the following pages:

  1. Home. This will serve as your homepage. Assign to it the Frontpage template from the Page attributes panel. Upload a featured image and publish the page. Have a look at the Setting up your homepage section below for more information on how to use the rest of the homepage template’s features.
  2. Blog. This will be your posts page.
  3. Galleries Listing. This page will display your galleries. Apply the Galleries Listing template to the page and notice the Gallery Listing Details panel that appears. Here you can select the number of columns for your gallery listing page. Also a base photo category (optional, only select if you want to create a listing page that displays one gallery category alone).
    vignette-galleries-listing-details
  4. Contact (optional) Here you can place your contact form that you’ll create using the Contact Form 7 plugin.

(TIP: All page titles serve as examples, you can name your pages according to your needs.)

Once the pages are created, navigate to Settings > Reading. Set the “Home” page to be your static frontpage and the “Blog” page to be your posts page, as demonstrated in the image below:

reading-settings

2) Populating your blog

To add new posts to your blog, go to Posts > Add new. Title your post and enter content in the editor. Upload a featured image by clicking Set featured image on the Featured Image panel. Add a category and/or tag to the post from the respective panels and publish the post.

add-new-post

3) Adding Galleries

To create a new gallery item go to Galleries > Add New. Set the gallery’s name as a title and enter text in the content editor. Set a featured image and proceed to the Gallery Settings section below.

vignette-gallery-settings

Click the Add Images button to upload your photos (check the creating galleries section at the end of the document for more information on this). Once your photos are uploaded you can select either a Grid Layout or a List Layout for them. You can also set a number of columns for the gallery page, three or four columns.
Finally you will notice a third layout option, the Native Layout. This option overrides the styling/functionality of the options above. You need to create a standard WordPress gallery to add your images. Information on creating standard WordPress galleries can be found here. This option can be used along with the WordPress Jetpack plugin so you can use the Tiled Galleries add-on and the Jetpack Carousel.

(TIP: You need a free account on WordPress.com to make Tiled Galleries work)

4) Adding Testimonials

To create a new Testimonial, go to Testimonials > New Testimonial. Set the author’s name as the title and the testimonial’s text in the content box. Finally, publish it. Testimonials can be used in any widget area you like by using the CI Item widget.

lucullan-add-new-testimonial

5) Setting up your Homepage

Set up the homepage header section

The header section of the homepage on Vignette can either feature a single image (the page’s featured image) or a video.
To add a video on the homepage’s section you will need to create three instances of your video. One in each popular web video format (mp4, webm and ogv) .You can use this tool to help you convert your videos (or any other tool capable of outputting video in these formats). Once you have the three required files upload them to your WordPress installation and paste the link to each one in the corresponding box under the Front page Details section.

vignette-video-detailsNOTICE:
All three file formats are necessary to ensure cross-browser compatibility. The video header only works on desktop browsers. On mobile devices it is replaced by the homepage’s featured image, so make sure you add one. The homepage featured image should be at least 1920 x 1100px. In the Front page Details panel you can also set a title for the hero section and a button that links to a URL of your choice. Just fill in the boxes below.

vignette-front-page-details

Duplicate the demo’s layout

On the demo’s homepage you can see a video on the header section, three CI Item widgets (with a gallery selected on each on the Homepage #1 sidebar). Following is a CI Item widget with a testimonial on the Homepage #2 sidebar. Next there are six CI Item widgets, with a gallery selected on each on the Homepage #3 sidebar. A Text widget and the Socials Ignited widget on the Footer Widgets Column #1 and Footer Widgets Column #2 sidebars respectively.

6) Creating your menu

Go to Appearance > Menus create a menu, name it main menu, customize it by adding menu items to it, go to Manage Locations and set it to be your main menu.

vignette-menu

(TIP: for more info on creating and managing menus, please read the WordPress Menu User Guide here)

7) Changing Footer text

The theme’s footer features an area for you to enter your copyright information, privacy policy etc. To change the text you need to go to CSSIgniter settings > Site options (4th box down).

footer-text

Additional Information

Creating Galleries

To create a gallery using the gallery management system follow these steps:

  1. On the Gallery Information panel click the Add Images button.
    gallery-settings-add-images
  2. To upload your images, drag & drop them in the Edit Gallery window that will pop-up, or select Add to Gallery in order to select already uploaded images. Once you are done, click the Update Gallery button on the lower right side.
    gallery-settings-update-gallery
  3. Your Gallery Information panel will look like this:
    gallery-settings-gallery
  4. You can re-arrange the order of images by drag & drop.
    gallery-settings-rearrange
  5. If you wish to remove an image from the gallery, hover your mouse over it and click the X as shown below.
    gallery-settings-remove
  6. By checking the Randomize order box your gallery images will appear in a random order that will change on every page refresh.
  7. When you are done, publish the gallery item.

If you need to add images after the gallery’s creation just follow the same procedure.

Useful Plugins

  • CSSIgniter Shortcodes You can use this shortcode plugin to modify multiple layouts and elements on your website. Instructions can be found here.
  • Socials Ignited Use this plugin to create a widget that links to all your social profiles. You can also customize it with your icons and add new social networks. A guide can be found here.
  • Contact Form 7 Use this plugin to create a contact form, then copy the shortcode it gives you and paste it in an empty page.

Image Sizes

The recommended image sizes for the Vignette theme are:

  • CI Thumb: 730×475px (used on listing pages and widgets)
  • CI Blog Thumb: 730×390px (for thumbnails on your blog listing page)
  • CI Fullwidth: 950×475px (used as a featured image on the fullwidth page template)
  • CI Page Header: 1920×190px (background for your header, can be set under CSSIgniter Settings > Appearance Options)
  • CI Thumb Uncropped: 730px in width, height not limited.