Pirouette WordPress Theme

Theme Customization

Step 1: Go to Appearance > Customize >  Developer Tools > Custom CSS Code.

Step 2: Use the Custom CSS field to insert your custom CSS code. You can use the Small / Medium / Large / Extra Large Devices CSS fields to insert additional code only for small / medium / large / extra large size screens.

Frequently Asked Questions

Use this shortcode to display a custom button:

[button style=primary size=small link=http://www.curlythemes.com] Button Name [/button]

 

  • style – Choose the style of your button. Available values are: primary, secondary or link.
  • size – Choose the size of your button. Available values are: small or large.
  • outline – If you want a border for the button, use the value yes.
  • display – Use this if you want to display your button as a larger block. Available values: block.
  • link – Enter the URL for your button.
  • target – Enter the URL target for your button. Available values: blank.

Step 1: Go to Visual Composer > Add Element > xtender > Google Map.

Step 2: Edit the Google Map to configure its parameters.

  • Map Pin Latitude / Longitude – Enter the map coordinates for the map pin.
  • Map Center Latitude / Longitude – Enter the map coordinates for the center of the displayed map.
  • Map Type – Use the select box to choose a map type. Available options: Roadmap, Hybrid, Satellite and Terrain.
  • Map Zoom – Use the select box to choose the zoom level, between 1 and 16.
  • Map Theme – Use the select box to choose a graphic theme for the map.
  • Map Height – Add the map height in pixels.
  • Map Image – You can use this option to upload an image for your location, displayed above the map pin.
  • Map Title – You can use this option to add a title for your location, displayed above the map pin.
  • Map Description – You can use this option to add a description for your location, displayed above the map pin.

Step 1: Go to Visual Composer > Add Element > xtender > Mini Carousel.

Step 2: Edit the Mini Carousel to configure its parameters.

  • Timeout – Use this field to type in the timeout speed in milliseconds for the carousel. For example, 5.000 milliseconds is 5 seconds. If you leave the field empty, the carousel autoplay will be disabled.
  • Pause on hover – Check this box to pause the carousel on hover.
  • Loop – Check this box to play the carousel in a loop.
  • Navigation – Check this box to disable the navigation for the carousel.

Step3: Add Single Image elements. The Single Image element is the default VC element with several new parameters.

Step 1: Go to Visual Composer > Add Element > xtender > Filmstrip Carousel.

Step 2: Edit the Filmstrip Carousel to configure its parameters.

  • Speed – Use this field to type in the carousel speed in milliseconds. For example, 5.000 milliseconds is 5 seconds.
  • Grayscale Images – Check this box if you want to disable the grayscale effect.

Step3: Add Single Image elements. The Single Image element is the default VC element with several new parameters.

From your Dashboard, head over to Appearance > Customize and you can start customizing the theme. Our smart options sidebar, on the left, lets you change anything and see the effects in action right away.

The panel elements with a right pointing arrow have their own sub-panel. The elements with a downward arrow open their options in the same panel.

Go to Release Notes, the last section of the Pirouette documentation. You will find the date and release notes for every major Pirouette WP Theme version.

The documentation is included in the download package. Unzip the pack.zip file, open the folder documentation and then Pirouette WordPress Theme Documentation pdf file.

or just follow this link: http://docs.curlythemes.com/pirouette

Use this shortcode to display a nice Themify icon:

[icon=ti-home size=2x boxed=yes color=white background=red]
  • icon – All Themify icon names. You can find the complete icon list available here: https://themify.me/themify-icons
  • size – Choose the size of your icon. Available values are: 2x, 3x, 4x, 5x. Default: none
  • boxed – Choose if you want your icon to be boxed. Available values are: yes / no. Default: none
  • border – Choose if you want your icon to have a border. Available values are: yes / no.
  • border-color – Enter the color name or color hex code for the icon border color.
  • boder-width – Enter the value in pixels for the icon border width.
  • border-style – Choose a style for your border. Available values are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial or inherit.
  • color – Enter the color name or color hex code for the icon color. Default: text color
  • background – Enter the color name or color hex code for the icon background color. Default: none
  • link – Enter the URL address, if you want to add a link to the icon.
  • new_window – Choose the target for the icon link. To open the link in a new window use the value yes, default is no.

You can use this shortcode to display a nice Font Awesome vector, crystal sharp icon:

[icon=fa-home size=2x boxed=yes color=white background=red]
  • icon – All FontAwesome icon names. You can find the complete icon list available here: http://fortawesome.github.io/Font-Awesome/icons/
  • size – Choose the size of your icon. Available values are: 2x, 3x, 4x, 5x. Default: none
  • boxed – Choose if you want your icon to be boxed. Available values are: yes / no. Default: none
  • border – Choose if you want your icon to have a border. Available values are: yes / no.
  • border-color – Enter the color name or color hex code for the icon border color.
  • boder-width – Enter the value in pixels for the icon border width.
  • border-style – Choose a style for your border. Available values are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial or inherit.
  • color – Enter the color name or color hex code for the icon color. Default: text color
  • background – Enter the color name or color hex code for the icon background color. Default: none
  • link – Enter the URL address, if you want to add a link to the icon.
  • new_window – Choose the target for the icon link. To open the link in a new window use the value yes, default is no.

Theme Customization

Step 1: Go to Appearance > Customize > Developer Tools > Custom HTML Code.

Step 2: Check the Show Custom Code Fields box.

Step 3: Use the Custom code before </head> and Custom code before </body> fields to insert your custom HTML code.

Step 1: Go to Appearance > Customize > Developer Tools > Google Services.

Step 2: Use the Google Maps Api Key field to type in your API Key for Google Maps.

Step 1: Go to Appearance > Customize > Developer Tools > Google Services.

Step 2: Use the Google Tag Manager Container field to type in your container for Google Tag Manager.

Step 1: Go to Appearance > Customize > Developer Tools > Google Services.

Step 2: Use the Analytics ID field to type in your Google Analytics ID and you will integrate Google Analytics in your website.

Step 1: Go to Appearance > Customize > Developer Tools > Google Services.

Step 2: Use the Webmaster Tools Verification field to type in the verification code for the Google Webmaster Tools and you will integrate Google Webmaster Tools in your website.

Step 1: Go to Appearance > Customize > Developer Tools > Social Sharing > Sharing Tagline.

Step 2: Type in the text that will appear in the box next to the sharing buttons.

Step 1: Go to Appearance > Customize > Developer Tools > Social Sharing.

Step 2: Check the Sharing on pages box to globally enable the sharing box for pages.

Step 1: Go to Appearance > Customize > Developer Tools > Social Sharing.

Step 2: Check the Sharing on single posts box to globally enable the sharing box for posts.

Step 1: Go to Appearance > Customize > Background Image

Step 2: Press the Select image button to upload a background image for the website from your computer.

Step 1: Go to Appearance > Customize > Static Front Page > Front page displays.

Step 2: Check Your latest posts radio button to set your home page to display the latest blog posts.

Step 1: Go to Appearance > Customize > Static Front Page > Front page displays.

Step 2: Check A static page radio button to set your home page to display a static page.

Step 3: Use the Front page select box to choose your homepage and the Posts page select box to choose your blog page.

Step 1: Go to Appearance > Customize > Menus > Navigation Layout.

Step 2: Use the Navigation Top Margin slide bar to select the margin in pixels between the top of the header and the navigation.

Step 3: Use the Navigation Bottom Margin slide bar to select the margin in pixels between the navigation and the bottom of the header.

Step 1: Go to Appearance > Customize > Menus > Navigation Layout.

Step 2: Use the Navigation Position option to choose a left or right alignment for your menu.

Step 1: Go to Appearance > Customize > Menus > Navigation Layout.

Step 2: Uncheck the Disable Sticky Menu box to make the menu sticky.

Step 1: Go to Appearance > Customize > Menus > Menu Locations.

Step 2: Use the Main Navigation select box to choose your Main Menu. If you did not imported the demo content, you will have to create one at Appearance > Menus.

If you want, you can use the Footer Navigation select box to choose also a footer menu.

Step 1: Go to Appearance > Customize > Colors

Step 2: Use the Global Colors, Navigation, Page Heading, Heading and Footer tabs to change the colors for all website’s major elements.

Step 1: Go to Appearance > Customize > Typography

Step 2: Use the Global Typography, Main Menu, H1-H6 Headings and Blockquote tabs to change all the typography settings of your website.

Step 1: Go to Appearance > Customize > Header > Toolbar.

Step 2: Use the Toolbar Text field to insert content that will be displayed in the right tagline, above the navigation.

Step 1: Go to Appearance > Customize > Header > Page Heading.

Step 2: Use the Heading Top Margin slide bar to select the margin in pixels between the top of the header and the Page Heading.

Step 3: Use the Heading Bottom Margin slide bar to select the margin in pixels between the Page Heading and the bottom of the header.

Step 1: Go to Appearance > Customize > Header > Header Slider.

Step 2: Select the slider from the Header Slider select box.

Before being able to set a header slider, you first need to create / import one from the Revolution Slider menu.

Important: If you set-up a header slider, all header images will be overridden except the Individual Page Settings.

Step 1: Go to Appearance > Customize > Header > Header Image > Header Height.

Step 2: Use the Header Height slide bar to choose the minimum header height.

Yes. Go to Appearance > Customize > Header > Header Image > Current header.

Use the Add new image button to upload several header images from your computer. Click the Randomize uploaded headers button and it will display, each time, a random image.

The minimum recommended size for the header image is 1920 x 1080 pixels.

Step 1: Go to Appearance > Customize > Header > Header Image > Current header

Step 2: Press the Add new image button to upload a header image from your computer.

The minimum recommended size for the header image is 1920 x 1080 pixels.

Step 1: Go to Appearance > Customize > Site Layout > Disable Fixed Grid.

Step 2: Uncheck this box to use a fixed grid.

Step 3: Use the Grid Width slide bar to choose the grid width in pixels.

Step 1: Go to Appearance > Customize > Site Layout > Disable Full Width Layout.

Step 2: Uncheck this box if you want a site with the layout Full Width.

Step 1: Go to Appearance > Customize > Site Layout > Disable Full Width Layout.

Step 2: Check this box if you want a site with the layout Boxed.

Step 3: Use the Boxed Layout Width slide bar to choose the box width in pixels.

Step 1: Go to Appearance > Customize > Site Identity > Site Icon.

Step 2: Use the Select Image button to upload an image from your computer to be used as a favicon.

The Site Icon is used as a browser and app icon for your site. Icons must be square, and at least 512px wide and tall.

Step 1: Go to Appearance > Customize > Site Identity > Retina Logo @2x

Step 2: Use the Retina Logo @2x field to upload an image from your computer as a retina logo. This image has to be EXACTLY double the size of the website logo.

Step 1: Go to Appearance > Customize > Site Identity > Logo

Step 2: Use the Logo field to upload an image from your computer as website logo.

Step 1: Go to Appearance > Customize > Site Identity > Tagline.

Step 2: Use the Tagline field to type in a tagline. This will be displayed only if you are not using a logo, next to your Site Title.

Step 1: Go to Appearance > Customize > Site Identity > Site Title.

Step 2: Use the Site Title field to type in your website title. If you do not upload a logo, this title will replace it.

Step 1: Go to Appearance > Widgets.

Step 2: Drag and drop widgets from the left into the Footer Widget Area sidebar.

Step 3: If you wish, you can use a Footer Menu. Go to Appearance > Customize > Menus > Menu Locations > Footer Navigation to set up your footer menu.

Step 1: Go to Appearance > Widgets.

Step 2: Drag and drop widgets from the left into the Blog Widgets Area sidebar.

Step 3: Add your content in the widgets and it will appear in the blog sidebar, on the right side of the blog.

Theme Install & Update

In the Events Schedule demo folder you can find the Classes XML file that you can use for a quick classes set up. Images are not included in the XML file.

To import the demo XML file, in the WordPress dashboard go to Tools > Import and select to install from the list WordPress Importer. After the installation is complete, select and upload the XML file.

After this, the imported posts will appear in your Classes > All Classes tab.

You can import also the demo schedules. In the Events Schedule demo folder you can find the Schedule JSON file that you can use for a quick schedules set up.

To import the demo JSON file you should go at Classes > Schedule Builder and click on the Backup Options button, to reveal a row of buttons. Click on the Choose File button, to browse for the demo JSON file, select it and click on the Import Backup. If you wish to create a backup of your own schedules, you can use the Download Backup button, that will export your schedules in a JSON file.

To import the slider used in the demo, you need to go to your Dashboard and then to Revolution Slider, click on Import Slider on the right side of the screen and select the demo slider located in the demo content folder, in the revolution slider folder, which contains the slider used in the demo.

Before installing this theme you need to have a WordPress platform already installed on your server. You can download it from WordPress.org if you don’t have it already.

If you do not know how or you have problems with the installation, you can access helpful information at:

Once you have a working WordPress on your server, you have two available ways to install this theme: FTP Upload or WordPress Upload.

You have two available ways to install this theme: FTP Upload or WordPress Upload.

FTP Upload

The .zip file you downloaded from Theme Forest contains a folder named pirouette.

Upload this folder on your server in your WordPress directory to /wp-content/themes/

WordPress Upload

The second way to install the theme is by logging in from your website /wp-admin to the WordPress Dashboard. From there, you should go to Appearance > Themes > Install Themes > Upload and select the file pirouette.zip from your computer. After clicking the Install Now button, the installation process is finished.

The .zip file you downloaded from Theme Forest contains a folder named pirouette.

Upload this folder on your server in your WordPress directory to /wp-content/themes/

Log in from your website /wp-admin to the WordPress Dashboard. From there, you should go to Appearance > Themes > Install Themes > Upload and select the file pirouette.zip from your computer. After clicking the Install Now button, the installation process is finished.

After you have completed the install process, in either of the two ways, you need to activate it.

Log in to the WordPress Dashboard, go to Appearance > Themes and select Pirouette. Click the Activate button and you can start using the theme.

In the Pirouette download package you can find the Demo XML file (located in the demo content folder) that you can use for a quick theme set up. Images, videos and sliders are not included in the XML file. You can also import the WIE file, that contains our demo widgets.

To import the demo XML file, in the WordPress dashboard go to Tools > Import and select to install from the list WordPress Importer. After the installation is complete, select and upload the XML file. You can find the demo XML file in the demo content folder at root level in the Pirouette download package. In the demo content folder you will find four folders: events schedulerevolution slider, wp-widgets and wordpress xml data, each of them with it’s relevant demo content. The process can take up to a few minutes.

To import the demo WIE file, go to Tools > Widget Importer & Exporter and select and upload our WIE file. You can find it inside the folder wp-widgets, inside the demo content folder.

Inside the wordpress xml data folder, you will find the demo.xml file, which contains the demo.

You can auto-update directly from the Themes panel in your WordPress Dashboard. To enable the auto-update:

Step 1: Login to your Theme Forest account and go to Settings > API Keys

Step 2: Enter a label name (ex: theme update) and click on the Generate API Key button.

Step 3: Go to Appearance > Customize > Developer Tools > Automatic Theme Update

Step 4: Type your username and key in the Theme Forest Username and Theme Forest API Key fields.

 

IMPORTANT

Before updating is important to know that theme settings and content are not lost during the update process. You will lose changes to the theme files if you changed any files. In order to prevent losing the file changes we strongly recommend that you use child themes. Also we recommend that you look in the release notes before updating.

Go to 10. Child Theme to learn more about child themes.