Brittany Light

Theme installation

The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance > Themes.

Click the Add New button on the top of the page.

add_new

In the next screen type the theme’s name in the search box

[Brittany light search screenshot here]

When the search results appear, hover over the theme and click Install

[Brittany light search results here]

Once the installation finishes click activate and the theme is ready to use.

[Brittany light activation screenshot here]

Importing sample content

Download the sample content.

Extract the zip file you just downloaded and upload the xml file in Tools > Import > WordPress (if not already present, you will be prompted to install the WordPress importer plugin), assing the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the brittanylight_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Setting up your theme

1) Populating your blog

To add new posts to your blog, go to Posts > add new and proceed to:

  1. add a title to your post,
  2. enter the content in the editor,
  3. upload a featured image by clicking “Set featured image” on the Featured Image panel,
  4. add a category and/or tag to the post,
  5. once done click the Publish/Update button.

new_post

 

2) Customizing the appearance

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this

bl_customizer

 

TIP: any changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these changes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

Let’s take a look at the options each tab gives you.

  • Header Options

    Here you can toggle the social icons.

  • Menus

    Here you can create and assign menus to the theme. The theme features one menu location, the main menu one. To learn more about menu creation check out the Codex’s menu user guide here.

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo and site icon.

  • Layout Options

    Here you can modify the length of the automatic excerpt , toggle the excerpt display in listings and select between numbered and older/newer pagination.

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features six sidebars, the blog, the pre-footer Instagram one and four footer sidebars.

  • Social Networks

    Here you can fill in the URLs to your various social network profiles supported by the theme. You can display them in a sidebar by using the Theme – Social Icons widget.

  • Posts Options

    Here you can change the related posts section title.

  • Footer Options

    Here you can toggle the credits text and the Instagram slideshow. Additionally you can modify the slideshow’s speed.

  • Static Front Page

    Use this tab to to set a static front page if you don’t wish to display your posts on the home page.

  • Upgrade to PRO

    In this tab you can see a few of the PRO version’s features and will find links to help you upgrade.

Theme pages

The contact page

To create a contact page similar to the one found on the theme’s demo, you can create a new page, name it Contact and use the Contact Form 7 plugin to help you create a contact form, then paste the shortcode it provides in the page’s text editor, publish and you are done.

Widgets

Along with WordPress’s widgets we have created 3 custom ones.

bl_widgets

You will find a small description in each widget detailing its usage.

How to use the latest posts widget

The Theme – Latest Posts widget will help you display posts on any sidebar, let’s take a look at how to use it.

bl_latest_posts

 

We start by adding a title to the widget, next we select a post category to display on it (leaving the option empty will display posts from all categories), below we can select whether we want our posts to appear at random (default is by date from newest to oldest) and how many posts we want to display on the widget. Save and you are done!

Additional information

Useful Plugins

  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in a page which will serve as your contact page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • WordPress Jetpack: You can use this to create a contact form instead of Contact Form 7, insert sharing buttons, create tiled galleries etc.

Image Sizes

The minimum recommended image sizes for Brittany Light are:

  • Post thumbnail: 750x460px
  • Square thumb: 300x300px
  • About me widget thumb: 360x220px

Hellomouse

About Hellomouse

Hellomouse is a premium WordPress theme designed for creative professionals. With Hellomouse you can display your works and projects in simple, yet beautiful and functional manner. This can be done primarily by using the Projects custom post type, which acts as normal post, but is boosted by additional functionality to help you reach the desired layout on your site.

Theme installation

The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance > Themes. Select the Install Themes tab and click the Upload link located just below the tab’s name. Click on Browse… and select the WordPress theme zip file you just downloaded. Then click the Install Now button, and after a few seconds, your new theme should be installed. Click activate and the theme is ready to use.

In order to install the theme manually, or in case you have trouble installing it through the admin panel, you have to unzip the WordPress theme’s zip file on your computer, and upload via FTP the resulting theme folder into your WordPress installation themes folder (wp-content/themes). Then, from the WordPress admin go to Appearance > Themes. The theme should be available in your themes list. Click activate.

Image Sizes

The recommended image sizes for Hellomouse are:

  • Main Thumbnail: 750×450 px
  • Wide Thumbnail: 1140×450 px.
  • Square Thumbnail: 555×555 px.
  • Tall Thumbnail: 750px in width, not limited in height.

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

  • CSSIgniter Shortcodes you can use our custom made shortcode plugin to help you create a variety of layouts and elements on your site. Instructions 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.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • One Click Import : Use this plugin to help you import your content with just one click.

Importing Sample Content using One Click Import

To automate the process of importing and for a better experience we have natively included support for OneClick Import Plugin. Let install it fist:

From your WordPress dashboard

  1. Visit ‘Plugins > Add New’,
  2. Search for ‘One Click Demo Import’ and install the plugin,
  3. Activate ‘One Click Demo Import’ from your Plugins page.

From WordPress.org

  1. Download ‘One Click Demo Import’.
  2. Upload the ‘one-click-demo-import’ directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, etc…)
  3. Activate ‘One Click Demo Import’ from your Plugins page.

Once the plugin is activated you will find the actual import page in: Appearance > Import Demo Data.

 Click on the Import demo data button and you are done!

This plugin requires PHP version of at least 5.3.x, but we recommend version 5.6.x or better yet 7.x. Please contact your hosting company and ask them to update the PHP version for your site.

Importing sample content manually

To get the sample content file you can click the link in the notice that will appear on your dashboard immediately after activating the theme.

Extract the zip file you downloaded and upload the xml file in Tools > Import > WordPress (if not already present, you will be prompted to install the WordPress importer plugin), assign the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

You can also download the Sample Content for Hellomouse by clicking here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the hellomouse_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Setting up your theme

1) Creating theme pages

Let’s 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 “Homepage Template” from the “Page attributes” panel. Publish the page and set it as your static Front Page as described below.
  2. “Projects Listing”: this page will list all your projects. Apply to it the “Projects Listing” template to it and publish the page.
  3. “Blog”: this will be your posts page. Just create and publish it; no further action needed.
  4. “Contact”: (optional) here you can place your contact form which you will create using the Contact Form 7 plugin. Apply the “Contact Page” template and publish it.

(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 and set the “Home” page to be your static frontpage and the “Blog” page as your posts page, as demonstrated in the image below.

ReadingSettings

2) Populating your blog

To add new posts to your blog, go to Posts > add new, title your post, enter the 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, if you so desire, from the respective panels and publish the post by clicking “Publish”.

TIP: the “more” tag is functional in posts, which means that you can directly control which part of the post will appear on the blog listing page. If, for example, on a video post format you want to display just the embedded video and no text you might have below it, you can add a ‘more’ tag between the video embed URL and your text content.

3) Adding project items

To add a new portfolio item go to Projects > Add New. Set a featured image from the panel on the right, fill in any text you have for the portfolio item and move to the Project Options panel below.  Here you can add project Information, or Images. Each tab contains specific instructions available for quick reference. Following them will provide you with a thorough understanding of how to set up your projects.

TIP: You can toggle the appearance of related project items under Appearance > Customize > Project Options.

4) Creating your menu

Now that your content is in place, you will need a menu. Go to Appearance > Menus, check the pages you want on your menu and add them, give your menu a name and save it. Finally you will need to set your menu as “Main” menu, this can be done either by checking the “Main menu” box in “Menu Settings” just below your menu items in Menu Structure, or by going to the “Manage Locations” tab and selecting the menu you just created.

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

5) Customizing the appearance

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this:

hellomouse-options

TIP: Αny changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these changes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

Let’s take a look at the options each tab gives you.

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo and site icon.

  • Layout Options

    Here you can modify the excerpt size and select the pagination layout.

  • Typography Options

    Here you will find various options regarding the theme’s typography. You can change heading, body text and widget title sizes and toggle the capitalization of various elements.

  • Content Colors

    Are you looking to create your own unique color scheme? This tab will help you do it by allowing you to modify the colors of many elements of the content. To do that click the Select Color button and either use a hex color value in the box or use the palette to select a color.color_change Additionally you can modify the site’s background from this tab.

  • Sidebar Colors

    This tab will allow you to modify the colors of various sidebar elements to complete your custom color scheme.

  • Social Networks

    Here you can fill in the URLs to your various social network profiles supported by the theme. These will appear on the header, footer automatically, you can also display them in the post/page sidebar by adding the Theme – Social Icons widget in the blog or page sidebar.

  • Posts Options

    Here you can toggle various aspects of the single post, like the appearance of categories, tags, date, comments etc.

  • Project Options

    This tab allows you to toggle the appearance of related projects and modify your project layout in project category listings.

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features eight sidebars explained below.

  • Static Front Page

    If you don’t wish to have your latest posts on the front page and wish to display static content using a normal page, or want to use the looks template as your front page, you can do so here. Set the desired page as your static front page and save.

  • Other

    In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs, also you can place your Google analytics tracking ID here.

Hellomouse comes with 8 widgetized areas (sidebars):

  1. Blog: Used to display widgets in your Blog page and all Posts.
  2. Pages: Displayed in all static Pages.
  3. Contact: Displayed in your contact page (i.e. a page that has the “Contact Page” template set).
  4. Homepage Left: First column of widgets on the Homepage. This widget area appears on your Homepage templates.
  5. Homepage Right: Second column of widgets on the Homepage. This widget area appears on your Homepage templates.
  6. Homepage Full Width: Full width area of widgets on the Homepage. This widget area appears on your Homepage templates.
  7. Footer #1: First column of the footer widgets.
  8. Footer #2: Second column of the footer widgets.

How to use the page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

ci_page_builder_template

That’s it. You can now start building your page using the page builder of your choice, once done publish it and check it out.

Additional Information

Creating Galleries

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

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

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

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums

Paperbag

Theme installation

The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance > Themes. Select the Install Themes tab and click the Upload link located just below the tab’s name. Click on Browse… and select the WordPress theme zip file you just downloaded. Then click the Install Now button, and after a few seconds, your new theme should be installed. Click activate and the theme is ready to use.

In order to install the theme manually, or in case you have trouble installing it through the admin panel, you have to unzip the WordPress theme’s zip file on your computer, and upload via FTP the resulting theme folder into your WordPress installation themes folder (wp-content/themes). Then, from the WordPress admin go to Appearance > Themes. The theme should be available in your themes list. Click activate.

TIP: More info on how to download and install a theme here.

Image Sizes

The minimum recommended image sizes for Paperbag are:

  • Post thumbnail: 775x512px
  • Slider images: 1050x550px
  • Author thumbnail: 200x200px
  • Looks template image: 775x1000px

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

  • 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 a page which will serve as your contact page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • WordPress Jetpack: You can use this to create a contact form instead of Contact Form 7, insert sharing buttons etc.
  • One Click Import : Use this plugin to help you import your content with just one click.

Importing Sample Content using One Click Import

To automate the process of importing and for a better experience we have natively included support for OneClick Import Plugin. Let install it fist:

From your WordPress dashboard

  1. Visit ‘Plugins > Add New’,
  2. Search for ‘One Click Demo Import’ and install the plugin,
  3. Activate ‘One Click Demo Import’ from your Plugins page.

From WordPress.org

  1. Download ‘One Click Demo Import’.
  2. Upload the ‘one-click-demo-import’ directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, etc…)
  3. Activate ‘One Click Demo Import’ from your Plugins page.

Once the plugin is activated you will find the actual import page in: Appearance > Import Demo Data.

 Click on the Import demo data button and you are done!

This plugin requires PHP version of at least 5.3.x, but we recommend version 5.6.x or better yet 7.x. Please contact your hosting company and ask them to update the PHP version for your site.

Importing sample content manually

To get the sample content file you can click the link in the notice that will appear on your dashboard immediately after activating the theme.

download_sample

Extract the zip file you downloaded and upload the xml file in Tools > Import > WordPress (if not already present, you will be prompted to install the WordPress importer plugin), assing the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

You can also download the Sample Content for Paperbag by clicking here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the paperbag_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Setting up your theme

1) Populating your blog

To add new posts to your blog, go to Posts > add new and proceed to:

  1. add a title to your post,
  2. enter the content in the editor,
  3. upload a featured image by clicking “Set featured image” on the Featured Image panel,
  4. select the Post Format,
  5. add a category and/or tag to the post,
  6. and move to the Post Utilities metabox.

new_post

 

In the Post Utilities metabox you can select whether the post will feature a sidebar or will be full width. In the Secondary Image tab you can upload another image with portrait orientation which will be displayed in listing pages using the Looks template, more on the template below.

post_utilities

If you select a Gallery post format a new metabox named Gallery Details will appear below Post Utilities.
gallery_details
here you can select a layout for your gallery, it can be a slider or a tiled gallery, and upload your images to it by clicking the Add Images button. Check the Randomize order box to have the images load in random order. You can drag and drop the items to reorder them. Hovering over an image and clicking the “X” button allows you to remove it from the gallery quickly.
TIP: More info about gallery creation you can find in the Additional Information section of this document.

Once you are done click the Publish button to publish your post.

2) Customizing the appearance

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this

customizer

TIP: any changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these changes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

Let’s take a look at the options each tab gives you.

  • Header Bar Options

    Here you can toggle the sticky header, search bar and header social icons. Additionally you can modify the colors of various header elements. To do that click the Select Color button and either use a hex color value in the box or use the palette to select a color.color_change

  • Menus

    Here you can create and assign menus to the theme. The theme features two menu locations, one on the header and one on the footer. The footer menu does not support sub menu items. To learn more about menu creation check out the Codex’s menu user guide here.

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo, footer logo and site icon.

  • Layout Options

    Here you can independently modify the blog layout, the category/tag layout and the layout for the rest of your pages. Additionally you can configure the lenght of the automatic excerpt and choose between numbered and older/newer pagination.

  • Front Page Slider

    This tab allows you to configure the homepage’s slider. You can toggle its apperance and automatic slide functionality. The images displayed on the slider are featured images pulled from your post, you can select a source post category via the drop down or fill in individual post ids in the text box below if you don’t want entire categories to appear on the slider, to learn how to find an individual post’s ID check this article. You can also limit the number of posts on it, change the effect and adjust the slideshow speed.

  • Typography Options

    Here you will find various options regarding the theme’s typography. You can change heading, body text and widget title sizes and toggle the capitalization of various elements.

  • Content Colors

    Are you looking to create your own unique color scheme? This tab will help you do it by allowing you to modify the colors of many elements of the content.

  • Sidebar Colors

    This tab will allow you to modify the colors of various sidebar elements to complete your custom color scheme.

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features two sidebars, the Blog Sidebar which appears on all posts & pages that have a sidebar, and the Footer Sidebar which can only display the widget provided by the WP Instagram Widget plugin.

  • Social Networks

    Here you can fill in the URLs to your various social network profiles supported by the theme. These will appear on the header, footer automatically, you can also display them in the post/page sidebar by adding the Theme – Social Icons widget in the blog or page sidebar.

  • Posts Options

    Here you can toggle various aspects of the single post, like the appearance of categories, tags, date, comments, social sharing etc.

  • Pages Options

    This tab allows you to toggle the appearance of the signature and social sharing buttons on pages.

  • Footer Options

    Customize the theme’s footer by changing its color scheme and toggling the reveal effect.

  • Static Front Page

    If you don’t wish to have your latest posts on the front page and wish to display static content using a normal page, or want to use the looks template as your front page, you can do so here. Set the desired page as your static front page and save.

  • Other

    In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs.

Theme pages

The contact page

For the contact page on the theme’s demo we used a page with the Fullwidth Page template applied to it and pasted in a contact form created with the Contact Form 7 plugin.

The Looks pages

The looks page template was created to give you more flexibility on the images you can use on your listing pages. By default the featured images on post listing pages have the landscape orientation. If you need to use images that have the portrait orientation you can create page with the Looks template applied to it. From the Looks Details metabox you can select the layout of the page, the post category it will display and the number of posts per page.

looks_details

Widgets

Along with WordPress’s widgets we have created 6 custom ones. They are really simple and they let you display various important info around the site.

widgets

You will find a small description in each widget detailing its usage.

How to use the page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

ci_page_builder_template

That’s it. You can now start building your page using the page builder of your choice, once done publish it and check it out.

Additional information

Creating Galleries

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

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

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

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums

Suisen

Theme installation

The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance > Themes. Select the Install Themes tab and click the Upload link located just below the tab’s name. Click on Browse… and select the WordPress theme zip file you just downloaded. Then click the Install Now button, and after a few seconds, your new theme should be installed. Click activate and the theme is ready to use.

TIP: A more visual guide can be found here.

In order to install the theme manually, or in case you have trouble installing it through the admin panel, you have to unzip the WordPress theme’s zip file on your computer, and upload via FTP the resulting theme folder into your WordPress installation themes folder (wp-content/themes). Then, from the WordPress admin go to Appearance > Themes. The theme should be available in your themes list. Click activate.

Image Sizes

The minimum recommended image sizes for Suisen are:

  • Post listing thumbnail: 600x480px
  • Post single featured image: 1140x475px
  • Large thumbnail (single column layouts): 1140x750px
  • Cart thumb: 120x120px

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in a page which will serve as your contact page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • WordPress Jetpack: You can use this to create a contact form instead of Contact Form 7, insert sharing buttons, create tiled galleries etc.
  • One Click Import : Use this plugin to help you import your content with just one click.

Importing Sample Content using One Click Import

To automate the process of importing and for a better experience we have natively included support for OneClick Import Plugin. Let install it fist:

From your WordPress dashboard

  1. Visit ‘Plugins > Add New’,
  2. Search for ‘One Click Demo Import’ and install the plugin,
  3. Activate ‘One Click Demo Import’ from your Plugins page.

From WordPress.org

  1. Download ‘One Click Demo Import’.
  2. Upload the ‘one-click-demo-import’ directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, etc…)
  3. Activate ‘One Click Demo Import’ from your Plugins page.

Once the plugin is activated you will find the actual import page in: Appearance > Import Demo Data.

 Click on the Import demo data button and you are done!

This plugin requires PHP version of at least 5.3.x, but we recommend version 5.6.x or better yet 7.x. Please contact your hosting company and ask them to update the PHP version for your site.

Importing sample content manually

To get the sample content file you can click the link in the notice that will appear on your dashboard immediately after activating the theme.

download_sample

Extract the zip file you downloaded and upload the xml file in Tools > Import > WordPress (if not already present, you will be prompted to install the WordPress importer plugin), assing the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

You can also download the Sample Content by clicking here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the suisen_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

WooCommerce

To enable eCommerce functionality for your website you need to install and activate the WooCommerce plugin by WooThemes. You can download the plugin free of charge from the WordPress Plugin Repository. For installation and usage instructions please refer to the plugin’s documentation.

Once you have installed and activated the WooCommerce plugin please install its pages by clicking on the button that WooCommerce provides on its banner. This will likely create a duplicate of some pages along with the pages installed by the sample content but its a needed step. You can delete the old pages that came with the sample content or use them instead by going to WooCommerce > Settings > Products > Display and assign them anew.

Setting up your theme

1) Populating your blog

To add new posts to your blog, go to Posts > add new and proceed to:

  1. add a title to your post,
  2. enter the content in the editor,
  3. add a category and/or tag to the post,
  4. upload a featured image by clicking “Set featured image” on the Featured Image panel,
  5. once done click the Publish/Update button.

2) Customizing the appearance

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this

suisen_customizer

 

TIP: any changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these changes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

Let’s take a look at the options each tab gives you.

  • Menus

    Here you can create and assign menus to the theme. The theme features one menu location, the main menu one. To learn more about menu creation check out the Codex’s menu user guide here.

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo and site icon.

  • Layout Options

    Here you can select the number of words in the automatic excerpt, select pagination style, toggle product title and layout and enable the masonry effect.

  • Content Colors

    Are you looking to create your own unique color scheme? This tab will help you do it by allowing you to modify the colors of many elements of the content. To do that click the Select Color button and either use a hex color value in the box or use the palette to select a color.color_change

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features three sidebars, the homepage one and two pre-footer sidebars.

  • Social Networks

    Here you can fill in the URLs to your various social network profiles supported by the theme. You can display them in a sidebar by using the Theme – Social Icons widget.

  • Posts Options

    Here you can toggle various aspects of the single post and post listings, like the appearance of categories, tags, date, comments, social sharing etc.

  • Footer Options

    Here you can modify the footer text.

  • Static Front Page

    Use this tab to make the Home page your static front page so you can take advantage of the homepage template we have created for you.

  • Other

    In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs. Also here you can set the Google Analytics ID to get statistics on your site.

Theme pages

The Home page

To create your home page, create a page named Home and apply to it the Homepage Template to it.

The blog page

To create a post listing page, create a new page named Blog and publish it.

Setting the static pages

Once we have created the two pages above  you need to set them as default. To do that go to Settings > Reading and configure them as shown below.

settings_reading

The contact page

To create a contact page similar to the one found on the theme’s demo, you can create a new page, name it Contact and use the Contact Form 7 plugin to help you create a contact form, then paste the shortcode it provides in the page’s text editor, publish and you are done.

Widgets

Along with WordPress’s widgets we have created 4 custom ones. You can see them below.

suisen_widgets

You will find a small description in each widget detailing its usage.

How to use the latest posts widget

The Theme – Latest Posts widget will help you display your posts on the front page. Let’s take a look at how to use it.

latest_posts_suisen

We start by adding a title to the widget, next we select a post category to display on it (leaving the option empty will display posts from all categories), below we can select whether we want our posts to appear at random (default is by date from newest to oldest) and how many posts we want to display on the widget. Finally you can choose to make the first item appear bigger by checking the corresponding box.

Excluding post categories from the widget

As mentioned above, if we don’t select a post category on the widget it will display posts from all categories. We can exclude some of them if we wish. In the example above we created a widget which pulls posts from the style category, now lets create another one, which displays posts from all categories apart from the style one.

latest_posts_exclude_suisen

as you can see it’s very easy, we just tick the box to exclude the category we want and we are done.

Recreating the demo’s homepage layout

If you chose not to import the default widgets, but still want to recreate the homepage layout of the theme’s demo, let’s have a look on how you can achieve it.

The Homepage sidebar

Under Customize > Widgets you can access the homepage sidebar, let’s take a look at the widgets used on the theme’s demo:

  • Text – a text widget with some introductory text.
  • Theme – Post Type Items displaying four WooCommerce products.
  • Text – a text widget with some text.
  • Theme – Product Category Images  displaying the images of two product categories.
  • Theme – Post Type Items displaying five WooCommerce products.

TIP: Info on how to use the latest posts widget can be found in the widgets section here.

How to use the page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

ci_page_builder_template

That’s it. You can now start building your page using the page builder of your choice, once done publish it and check it out.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums

Struct

Theme installation

The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance > Themes. Select the Install Themes tab and click the Upload link located just below the tab’s name. Click on Browse… and select the WordPress theme zip file you just downloaded. Then click the Install Now button, and after a few seconds, your new theme should be installed. Click activate and the theme is ready to use.

TIP: A more visual guide can be found here.

In order to install the theme manually, or in case you have trouble installing it through the admin panel, you have to unzip the WordPress theme’s zip file on your computer, and upload via FTP the resulting theme folder into your WordPress installation themes folder (wp-content/themes). Then, from the WordPress admin go to Appearance > Themes. The theme should be available in your themes list. Click activate.

Image Sizes

The minimum recommended image sizes for Struct are:

  • Post thumbnail: 555x350px
  • Featured image: 848x450px
  • Fullwidth thumbnails: 1140x450px
  • Custom content thumbnails: 720x430px
  • Slider thumbnails: 1920x900px
  • Client logos: 80px in height, not restricted in width.

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in a page which will serve as your contact page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • WordPress Jetpack: You can use this to create a contact form instead of Contact Form 7, insert sharing buttons, create tiled galleries etc.
  • One Click Import : Use this plugin to help you import your content with just one click.

Importing Sample Content using One Click Import

To automate the process of importing and for a better experience we have natively included support for OneClick Import Plugin. Let install it fist:

From your WordPress dashboard

  1. Visit ‘Plugins > Add New’,
  2. Search for ‘One Click Demo Import’ and install the plugin,
  3. Activate ‘One Click Demo Import’ from your Plugins page.

From WordPress.org

  1. Download ‘One Click Demo Import’.
  2. Upload the ‘one-click-demo-import’ directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, etc…)
  3. Activate ‘One Click Demo Import’ from your Plugins page.

Once the plugin is activated you will find the actual import page in: Appearance > Import Demo Data.

 Click on the Import demo data button and you are done!

This plugin requires PHP version of at least 5.3.x, but we recommend version 5.6.x or better yet 7.x. Please contact your hosting company and ask them to update the PHP version for your site.

Importing sample content manually

To get the sample content file you can click the link in the notice that will appear on your dashboard immediately after activating the theme.

download_sample

Extract the zip file you downloaded and upload the xml file in Tools > Import > WordPress (if not already present, you will be prompted to install the WordPress importer plugin), assing the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

You can also download the Sample Content for Struct by clicking here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the struct_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Setting up your theme

1) Populating your blog

To add new posts to your blog, go to Posts > add new, title your post, enter the 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, if you so desire, from the respective panels and publish the post by clicking “Publish”. From the Post Options meta box below the main text editor you can toggle the appearance of the post’s featured image on the single view.

2) Adding Services

To add new Service item go to Service > Add new and fill in the title, content and featured image. Next, in the Service Options metabox set an image for the service by following the on screen instructions, you can also toggle the appearance of the item’s featured image on the single view. Finally publish the item.

3) Adding Project items

To add a new portfolio item go to Projects > Add New. Set a featured image from the panel on the right, fill in any text you have for the portfolio item and move to the Project Options panel below.  Here you can add project Information and toggle the appearance of the featured image in single project view.

4) Adding Team Members

To add a team member go to Team > Add New, set a title for it (the person’s name) and upload a featured image, then in the “Member Options” panel you can fill in the team member’s social profiles by following the on screen instructions, you can also toggle the appearance of the item’s featured image on the single view.

5) Adding DIY Projects

To add a new DIY Project item go to DIY Projects > Add New. Fill in a title for the project, set it’s featured image, add the content and finally publish the item. From the DIY Project Options meta box you can toggle the appearance of the item’s featured image on the single view

6) Adding FAQs

To add a new FAQ item go to FAQs > Add New. Fill in a title for the item, add the content and finally publish it.

7) Customizing the appearance

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this

customizer_struct

 

TIP: any changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these changes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

Let’s take a look at the options each tab gives you.

  • Header Image

    Here you can set a background color or image for the theme’s header.

  • Menus

    Here you can create and assign menus to the theme. The theme features one menu location, the main menu one. To learn more about menu creation check out the Codex’s menu user guide here.

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo and site icon.

  • Layout Options

    Here you can modify the length of the automatic excerpt and select between numbered and older/newer pagination.

  • Typography Options

    Through this tab you can control the font size of key theme elements, such as headings, body and widgets.

  • Content Colors

    Are you looking to create your own unique color scheme? This tab will help you do it by allowing you to modify the colors of many elements of the content. To do that click the Select Color button and either use a hex color value in the box or use the palette to select a color.color_change

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features ten sidebars, the blog, pages, two homepage sidebars, an e-shop sidebar, the pre-footer Instagram one and four footer sidebars.

  • Sidebar Colors

    This tab will allow you to modify the colors of various sidebar elements to complete your custom color scheme.

  • Social Networks

    Here you can fill in the URLs to your various social network profiles supported by the theme. You can display them in a sidebar by using the Theme – Social Icons widget.

  • Posts Options

    Here you can toggle various aspects of the single post and posts listing, like the appearance of categories, date, comments and featured images.

  • DIY Options

    Here you can toggle various aspects of the DIY post and DIY posts listing, like the appearance of categories, date, comments and featured images.

  • Footer Options

    Here you can modify the credits text and toggle the back to top button.

  • Static Front Page

    Use this tab to make the Home page your static front page so you can take advantage of the homepage template we have created for you.

  • Titles

    In this tab you can change the titles for various theme pages, like the blog, DIY, search and 404.

  • Other

    In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs. Also here you can set the Google Analytics ID to get statistics on your site.

Theme pages

The Home page

To set up the homepage create a page named Home and set to it the Homepage Template from the Page Attributes drop down on the right. To add content to your front page go to Customize > Widgets or Appearance > Widgets and use the theme’s widgets to help you display your content.

Custom post type listing pages

In order to display your custom post types you will need to create a listing page fore each one.

DIY Projects

Create a page to list your DIY projects and apply to it the DIY Listing template from the page attributes drop down.

If you want to create a listing page for one particular FAQ category you can select it from the DIY Listing Options metabox below.

diy_listing

FAQs

Create a page to list your FAQs and apply to it the FAQ Listing template from the page attributes drop down.

If you want to create a listing page for one particular FAQ category you can select it from the FAQ Listing Options metabox below.

faq-listing

Projects

Create a new page and apply to it the Projects Listing template from the page attributes drop down.

In the Project Listing Options  metabox you can select a base category if you want to only display a particular one on the listing page, select the Listing & Article layout you like and finally set the number of items that will appear per page.

project-listing

Services

Create a new page and apply to it the Services Listing template from the page attributes drop down.

In the Service Listing Options  metabox you can select a base category if you want to only display a particular one on the listing page, select the Listing & Article layout you like and finally set the number of items that will appear per page.

service-listing

Team Listing

Create a new page and apply to it the Team Listing template from the page attributes drop down.

In the Team Listing Options  metabox you can select a base category if you want to only display a particular one on the listing page, select the Listing layout you like and finally set the number of items that will appear per page.

team-listing

The contact page

To create a contact page similar to the one found on the theme’s demo, you can create a new page, name it Contact and use the Contact Form 7 plugin to help you create a contact form, then paste the shortcode it provides in the page’s text editor, publish and you are done.

Widgets

We have handcrafted twelve custom widgets to help you better display your content. You will find them under Customize > Widgets or Appearance > Widgets

struct_widgets

 

Below each widget you will find a small description regarding its functionality, additionally each widget provides you with some info on each usage, please read the small text found on the widget once it’s added on the sidebar. Widgets that are custom built to be used on the homepage have the Homepage widget marking on the description.

Theme – Slider

This widget will help you create slider items. Add the widget to the Homepage sidebar, select the slideshow speed and toggle the automatic slide functionality and press the Add Item button to add your first slide.

slider_1

Fill in all the required information, like title, subtitle, button text and button URL and click the Select Image button to upload the slider image.

slider_2

Next click the Add Item again to add another slide, continue as needed and once done click the save button.

Theme – Custom Content

This widget is built to help you add content to your front page, whether it is an introductory text, a bio or any other text you might want to include. Its functionality is pretty straight forward, you add the widget to the homepage sidebar, fill in all the info you need, click the Select Image button to upload an image (optional) and save the widget.

custom_content

Theme – Pricing Table

To create a pricing table, add the widget to the homepage sidebar, fill in the title, subtitle and click the Add Item button

Pricing_1

Set up the pricing item by filling all related information. Marking the item as featured will make it appear emphasized with a border surrounding it. You can add up to 8 features for each pricing item, placing a dash or minus sign before the text will display it as not available/included in the package.

Pricing_2

Theme – Technical documentation

technical_doc_widget

Using this widget you can create a list with downloadable files, such as manuals, guides etc. Just fill in the title and use the Add item button to add items. Fill in the required info and save the widget.

Theme – Contact

theme_contact

Using this widget you can create a contact box with a map and any info you desire. Paste in the iframe embed code for the map and then using the Add item button fill in all the required information.

Theme – Opening hours

opening_hours

Display your business’ timetable using this widget. Click the add item button to add a new schedule section, as displayed above.

Theme – Post type items

post_type_items

Using this widget you are able to display your content on any widgetized area, whether it is a standard post, a project, a team member etc. Just select the post type you want to pull info from on the Post type drop down, select the layout you want for these items from the Item appearance drop down (different layouts are available for different post types to help optimally deliver information), set the desired text alignment and add your items using the Add item button. Save your widget and you are done.

Customize the widget’s appearance.

At the bottom of the homepage widgets you will notice a blue button titled Customize. Clicking it will give you access to the widget customization panel.

widget_customize

 

Here you can modify text & background colors, add a background image & set its repeat pattern and add extra padding if you need your widgets more spaced out.

Recreating the demo’s homepage layout

The entire front page template is widgetized to provide you with maximum flexibility. Below we list the widgets used on the demo’s home page.

  • Theme – Slider: This widget creates the slider. Add as many items as you want by pressing the “Add Item” button. Remove any item by selecting “Remove me”. The slider also supports videos from WordPress compatible video hosts.
  • Theme – Custom content: Using this widget you can display custom content on your front page.
  • Theme – Testimonials: This widget will help you display testimonials from your customers. On the demo we have three testimonials visible.
  • Theme – Post type items: Here we display three services with the Image – Title – Text layout.
  • Theme – Clients: Here we display four logos of our clients.
  • Theme – Video: Here we display a YouTube video.
  • Theme – Post type items: Here we display four services with the Icon Centeredlayout.
  • Theme – Pricing table: we used this widget to create a four column pricing table.
  • Theme – Custom content: another bit of custom content.
  • Theme – Video: Here we display another YouTube video.
  • Theme – Post type items: Here we display four more services with the Image – Title – Text – Button layout.

How to use the page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

ci_page_builder_template

That’s it. You can now start building your page using the page builder of your choice, once done publish it and check it out.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums

Doberman

Zip file contents

In the zip file, you will find the following:

  1. DOCUMENTATION Contains a text file with a link to this document.
  2. LICENSE Contains licensing information.
  3. WORDPRESS In this folder you will find the zip file which contains the theme, called “doberman.zip” also you will find the child theme called doberman_child.zip and finally, a subfolder called sample content which contains the sample content files, these are the doberman.xml and doberman_widgets.wie

Theme Installation

Login to your WordPress admin panel. Go to Appearance > Themes. Click on the Add New button.
add_new
Click upload and Choose File. Select the doberman.zip located in the WORDPRESS folder and click Install.
upload_theme
upload_theme_2
Wait for the theme to upload and you will get a message that says “Theme installed successfully”. Click Activate and.. congratulations! You just installed the Doberman theme!

activate_theme

Next, follow the exact same procedure to install the child theme. Upload the doberman_child.zip, install it and activate it. This is very important if you plan on making any changes to the theme’s templates since it will help you keep these changes across updates. More info about child themes you can find here.

Notice: In order to setup the theme as seen on our preview you need to keep reading. Even If you are an experienced WordPress theme user do read this documentation in order to understand our approach on various things around the theme.

 

Image Sizes

The minimum recommended image sizes for Doberman are:

  • Post thumbnail: 750x440px
  • Full width images: 1140x480px
  • Media layout thumbnail: 480x300px

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in a page which will serve as your contact page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • WordPress Jetpack: You can use this to create a contact form instead of Contact Form 7, insert sharing buttons etc.
  • One Click Import : Use this plugin to help you import your content with just one click.

Importing Sample Content using One Click Import

To automate the process of importing and for a better experience we have natively included support for OneClick Import Plugin. Let install it fist:

From your WordPress dashboard

  1. Visit ‘Plugins > Add New’,
  2. Search for ‘One Click Demo Import’ and install the plugin,
  3. Activate ‘One Click Demo Import’ from your Plugins page.

From WordPress.org

  1. Download ‘One Click Demo Import’.
  2. Upload the ‘one-click-demo-import’ directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, etc…)
  3. Activate ‘One Click Demo Import’ from your Plugins page.

Once the plugin is activated you will find the actual import page in: Appearance > Import Demo Data.

 Click on the Import demo data button and you are done!

This plugin requires PHP version of at least 5.3.x, but we recommend version 5.6.x or better yet 7.x. Please contact your hosting company and ask them to update the PHP version for your site.

Importing sample content manually

To get the sample content file go to the /wordpress/sample content/ folder of the zip file. Additionally you can click the link in the notice that will appear on your dashboard immediatelly after activating the theme.
download_sample
or click here.
Extract the zip file you downloaded to get the sample content & widgets files.

Importing the sample content is easy. Go to Tools > Import and select the last option called WordPress.

If the Importer is not installed, a popup window will appear asking you to install it. Click the Install button on the right and click Activate Plugin & Run Importer

Click Browse, select the doberman.xml file you extracted earlier and click Upload file and import. It will ask you to import one or more authors. Just assign the posts from all of them to your existing user account by selecting it from the drop down menu. Check the Download and import file attachments. Click Submit.

NOTE 1: This will take a while. It could even take minutes because of importing all the placeholder images etc. So if you are out of coffee, go for a re-fill :)

NOTE 2: Demo Images are under copyright so you can’t use them.

NOTE 3: You need to set your permalinks at Settings > Options > “Post name”
option.

NOTE 4: If you get a SERVER TIME OUT you need to contact your hosting provider. It’s not a fault with the theme :) more info here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the doberman_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Setting up your theme

1) Populating your blog

To add new posts to your blog, go to Posts > add new and proceed to:

  1. add a title to your post,
  2. enter the content in the editor,
  3. upload a featured image by clicking “Set featured image” on the Featured Image panel,
  4. fill in a subtitle for your article and select whether you want its featured image to appear or not in the Article Details metabox,
  5. and finally, add a category and/or tag to the post.

new_post

 

Once you are done click the Publish button to publish your post.

2) Customizing the appearance

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this
customize_panel

TIP: any changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these chagnes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

Let’s take a look at the options each tab gives you.

  • Header Options

    Here you can toggle the appearance of the Add Post button,
    configure the News Ticker which will appear below the menu bar,
    and modify header colors using the built-in color picker.color_change

  • Menus

    Here you can create and assing menus to the theme. The theme features three menu locations, the main menu, the footer menu and the tags menu which will appear on both the header and the footer. Both the footer and tags menus do not support submenu items. To learn more about menu creation check out the Codex’s menu user guide here.

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo, footer logo and site icon.

  • Layout Options

    Here you can independently modify the blog layout and the layout of the rest of the theme’s archive pages. Additionally you can toggle the excerpt on listing pages, configure the length of the automatic excerpt and choose between numbered and older/newer pagination.

  • Typography Options

    Here you will find various options regarding the theme’s typography. You can change heading, body text and widget title sizes and toggle the capitalization of various elements.

  • Content Colors

    Are you looking to create your own unique color scheme? This tab will help you do it by allowing you to modify the colors of many elements of the content.

  • Sidebar Colors

    This tab will allow you to modify the colors of various sidebar elements to complete your custom color scheme.

  • Social Networks

    Here you can fill in the URLs to your various social network profiles supported by the theme. These will appear on the header, footer automatically, you can also display them in the post/page sidebar by adding the Theme – Social Icons widget in the blog or page sidebar.

  • Posts Options

    Here you can toggle various aspects of the single post, like the appearance of categories, tags, date, comments, social sharing etc. Also you can toggle and configure the trending and related posts sections.

  • Virality Options

    This tabs allows you to fine-tune how post virality is calculated and displayed. For this to work make sure you have installed and activated the WordPress Popular Posts plugin as suggested.
    Here you can select the Trending and Popular posts’ pages, change the icon text, select a post range and modify the order posts are displayed on.

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features three sidebars, the Blog Sidebar which appears on all posts and post listings, the Page Sidebar which will be displayed on your pages and the Homepage sidebar which is available if you decide to use the widgetized homepage template.

  • Static Front Page

    If you don’t wish to have your latest posts on the front page and wish to display static content using a normal page, or want to use the widgetized homepage template as your front page, you can do so here. Set the desired page as your static front page and save.

  • Other

    In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs. Here you can also set your Google analytics ID so you can get stats on your site’s visitors.

Theme pages

Widgetized Homepage

If you don’t want to have your all latest posts on the front page you can use the theme’s widgetized homepage by applying the Homepage Template on a page and setting that page to be your Static Front Page under Customize > Static Front Page.

Now you can use the theme’s Latest Posts to customize what is displayed on your site’s front page.

This page will host your trending posts, set the Trending articles template to it and select it as your trending page under Customize > Virality Options.

This page will host your popular posts, set the Popular articles template to it and select it as your popular page under Customize > Virality Options.

The contact page

For the contact page on the theme’s demo we used a page with the Default template applied to it and pasted in a contact form created with the Contact Form 7 plugin.

Widgets

Along with WordPress’s widgets we have created 2 custom ones.

Theme – Social Icons

This widget allows you to display links to your social profiles. All links can be configured under Customize > Social Networks.

Theme – Latest Posts

This highly configurable widget will help you built a custom front page for your site by allowing you to display your post categories the way you like. You can create widgets that display only a particular category, or one that exclude one or more categories. You can also select to display, latest, popular, trending or random posts, set the number of posts and if used on the homepage, select between different layouts.

latest-posts

Required Plugins

To utilize the theme fully you will need to install and activate some plugins. These are:

  1. The WordPress Popular Posts plugin, this will handle the virality of posts. It will allow you to have popular and trending posts working on your site. Once activated go to Customize > Virality Options to configure it.
  2. The Mashshare plugin. This one will provide the social sharing icons on your posts. Social sharing buttons can be toggled under Customize > Posts Options.
  3. The DW Reactions plugin. This plugin gives you reaction buttons for your posts, similar to the ones found on Facebook. Reactions can be toggled under Customize > Posts Options.

Setting up Mashshare

After installing and activating the plugin you will be redirected to the plugin’s Visual settings tab. Under Location & Position set the Position to manual and tick the IMPORTANT: Load JS and CSS all over box.

mash_1
then click the Save Changes button below.

Next you can go to the Customize tab and check the Round Shares and Animate Shares boxes.

mash_2
then click the Save Changes button below.

Finally you will need to select the networks that will be available for sharing to. To do that go to Mashshare > Settings > Social Networks check the boxes for Facebook and Twitter and save. Here you can also select how many large buttons you want to have visible at once.

mash_3
then click the Save Changes button below.

If you need more social networks you need to install the Mashshare Social Networks Add-on. Information on how to install the add-on can be found here.

The plugin’s documentation can be found here.

Setting up DW Reactions

Once the plugin is installed and activated go to Settings > Reactions. Here you will need to un-check all boxes on Positions so you don’t get duplicates. Once done, save the changes. This is the setup we have on the theme’s demo:

reactions

Post Virality

Popular/Trending posts functionality

Once you install and activate the WordPress popular posts plugin it will start tracking popular and trending posts for you. The only thing you have to do is go to Customize > Virality Options and configure the archive pages and time ranges you want to have.

Once done these icons will appear on the theme’s header:

virality-header

Let’s see what they mean:

  1. Trending: This icon will appear once a valid page with the trending template is selected. Trending icons are calculated based on the number of views they have.
  2. Popular: This icon will appear once a valid page with the popular posts template is selected. Popular posts are calculated based on the number of comments each post has. More comments mean increased popularity.
  3. Fresh: This icon appears once you have set a static front page for your site and have also set a page for your posts under Customize > Static Front page. Essentially this is your blog page displaying your latest posts.

How to use the page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

ci_page_builder_template

That’s it. You can now start building your page using the page builder of your choice, once done publish it and check it out.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums

Scandinavia

Zip file contents

In the zip file, you will find the following:

  1. DOCUMENTATION Contains a text file with a link to this document.
  2. HTML Contains the HTML version of the template. You can integrate it to your favorite CMS.
  3. WORDPRESS In this folder you will find the zip file which contains the theme, called “scandinavia.zip” also you will find the child theme called scandinavia_child.zip and finally, a subfolder called sample content which contains the sample content files, these are the scandinavia.xml and scandinavia_widgets.wie

Theme Installation

Login to your WordPress admin panel. Go to Appearance > Themes. Click on the Add New button.
add_new
Click upload and Choose File. Select the scandinavia.zip located in the WORDPRESS folder and click Install.
upload_theme

upload_theme_2
Wait for the theme to upload and you will get a message that says “Theme installed successfully”. Click Activate and.. congratulations! You just installed the Scandinavia theme!

activate_theme

Next, follow the exact same procedure to install the child theme. Upload the scandinavia_child.zip, install it and activate it. This is very important if you plan on making any changes to the theme’s templates since it will help you keep these changes across updates. More info about child themes you can find here.

Notice: In order to setup the theme as seen on our preview you need to keep reading. Even If you are an experienced WordPress theme user do read this documentation in order to understand our approach on various things around the theme.

Importing sample content

To get the sample content file go to the /wordpress/sample content/ folder of the zip file. Additionally you can click the link in the notice that will appear on your dashboard immediatelly after activating the theme.
download_sample
Extract the zip file you downloaded to get the sample content & widgets files.

Importing the sample content is easy. Go to Tools > Import and select the last option called WordPress.

If the Importer is not installed, a popup window will appear asking you to install it. Click the Install button on the right and click Activate Plugin & Run Importer

Click Browse, select the scandinavia.xml file you extracted earlier and click Upload file and import. It will ask you to import one or more authors. Just assign the posts from all of them to your existing user account by selecting it from the drop down menu. Check the Download and import file attachements. Click Submit.

NOTE 1: This will take a while. It could even take minutes because of importing all the placeholder images etc. So if you are out of coffee, go for a re-fill :)

NOTE 2: Demo Images are under copyright so you can’t use them.

NOTE 3: You need to set your permalinks at Settings > Options > “Post name”
option.

NOTE 4: If you get a SERVER TIME OUT you need to contact your hosting provider. It’s not a fault with the theme :) more info here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the scandinavia_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Setting up your theme

1) Populating your blog

To add new posts to your blog, go to Posts > add new and proceed to:

  1. add a title to your post,
  2. enter the content in the editor,
  3. upload a featured image by clicking “Set featured image” on the Featured Image panel,
  4. select the Post Format,
  5. add a category and/or tag to the post,
  6. and move to the Layout Options metabox.

new_post

 

In the Layout Options metabox you can switch the sidebar position on your post.

post_utilities

If you select a Gallery post format a new metabox named Gallery Details will appear below the editor.

gallery_details

here you can select a layout for your gallery, it can be a slider or a tiled gallery, and upload your images to it by clicking the Add Images button. Check the Randomize order box to have the images load in random order. You can drag and drop the items to reorder them. Hovering over an image and clicking the “X” button allows you to remove it from the gallery quickly.
TIP: More info about gallery creation you can find in the Additional Information section of this document.

Once you are done click the Publish button to publish your post.

2) Customizing the appearance

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this
customize_panel

TIP: any changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these chagnes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

Let’s take a look at the options each tab gives you.

  • Header Options

    Here you can toggle the tagline, search bar and header social icons. Additionally you can modify the colors of various header elements. To do that click the Select Color button and either use a hex color value in the box or use the palette to select a color.
    color_change
    You can also modify the header background image under this tab, click the remove button to delete the image entirely or the change file one to upload your own background imageheader_bg

  • Menus

    Here you can create and assing menus to the theme. The theme features two menu locations, one on the header and one on the footer. The footer menu does not support sub menu items. To learn more about menu creation check out the Codex’s menu user guide here.

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo and site icon.

  • Layout Options

    Here you can independently modify the blog layout, the category/tag layout and the layout for the rest of your pages. Additionally you can configure the lenght of the automatic excerpt and choose between numbered and older/newer pagination.

  • Typography Options

    Here you will find various options regarding the theme’s typography. You can change heading, body text and widget title sizes and toggle the capitalization of various elements.

  • Content Colors

    Are you looking to create your own unique color scheme? This tab will help you do it by allowing you to modify the colors of many elements of the content.

  • Sidebar Colors

    This tab will allow you to modify the colors of various sidebar elements to complete your custom color scheme.

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features two sidebars, the Blog Sidebar which appears on all posts & pages that have a sidebar, and the Inset Sidebar which can only display the widget provided by the WP Instagram Widget plugin.

  • Social Networks

    Here you can fill in the URLs to your various social network profiles supported by the theme. These will appear on the header, footer automatically, you can also display them in the post/page sidebar by adding the Theme – Social Icons widget in the blog or page sidebar.

  • Posts Options

    Here you can toggle various aspects of the single post, like the appearance of categories, tags, date, comments, social sharing etc.

  • Pages Options

    This tab allows you to toggle the appearance of the signature and social sharing buttons on pages.

  • Footer Options

    In this tab you can modify the footer’s background image and the footer copy text.

  • Static Front Page

    If you don’t wish to have your latest posts on the front page and wish to display static content using a normal page, or want to use the looks template as your front page, you can do so here. Set the desired page as your static front page and save.

  • Other

    In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs, additionally you can add a Google analytics tracking ID on the corresponding box to allow you to track visitors on your site.

Widgets

Along with WordPress’s widgets we have created 2 custom ones. They are really simple and they let you display various important info around the site.
widgets
You will find a small description in each widget detailing its usage.

Additional information

Creating Galleries

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

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

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

Useful Plugins

  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in a page which will serve as your contact page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • WordPress Jetpack: You can use this to create a contact form instead of Contact Form 7, insert sharing buttons etc.

Image Sizes

The minimum recommended image sizes for Scandinavia are:

  • Post thumbnail: 750x500px
  • Featured images: 1040x600px

Untold Stories

Zip file contents

In the zip file, you will find the following:

  1. DOCUMENTATION Contains a text file with a link to this document.
  2. HTML Contains the HTML version of the template. You can integrate it to your favorite CMS.
  3. WORDPRESS In this folder you will find the zip file which contains the theme, called “untoldstories.zip” also you will find the child theme called untoldstories_child.zip and finally, a subfolder called sample content which contains the sample content files, these are the untoldstories.xml and untoldstories_widgets.wie

Theme Installation

Login to your WordPress admin panel. Go to Appearance > Themes. Click on the Add New button.
add_new
Click upload and Choose File. Select the untoldstories.zip located in the WORDPRESS folder and click Install.
upload_theme

upload_theme_2
Wait for the theme to upload and you will get a message that says “Theme installed successfully”. Click Activate and.. congratulations! You just installed the Untold Stories theme!

activate_theme

Next, follow the exact same procedure to install the child theme. Upload the untoldstories_child.zip, install it and activate it. This is very important if you plan on making any changes to the theme’s templates since it will help you keep these changes across updates. More info about child themes you can find here.

Notice: In order to setup the theme as seen on our preview you need to keep reading. Even If you are an experienced WordPress theme user do read this documentation in order to understand our approach on various things around the theme.

Image Sizes

The minimum recommended image sizes for Untold Stories are:

  • Post thumbnail: 690x455px
  • Slider images: 1050x550px
  • Author thumbnail: 200x200px
  • Looks template image: 690x1000px

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

  • 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 a page which will serve as your contact page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • WordPress Jetpack: You can use this to create a contact form instead of Contact Form 7, insert sharing buttons etc.

Importing sample content

To get the sample content file go to the /wordpress/sample content/ folder of the zip file. Additionally you can click the link in the notice that will appear on your dashboard immediatelly after activating the theme.
download_sample
Extract the zip file you downloaded to get the sample content & widgets files.

Importing the sample content is easy. Go to Tools > Import and select the last option called WordPress.

If the Importer is not installed, a popup window will appear asking you to install it. Click the Install button on the right and click Activate Plugin & Run Importer

Click Browse, select the untoldstories.xml file you extracted earlier and click Upload file and import. It will ask you to import one or more authors. Just assign the posts from all of them to your existing user account by selecting it from the drop down menu. Check the Download and import file attachements. Click Submit.

NOTE 1: This will take a while. It could even take minutes because of importing all the placeholder images etc. So if you are out of coffee, go for a re-fill :)

NOTE 2: Demo Images are under copyright so you can’t use them.

NOTE 3: You need to set your permalinks at Settings > Options > “Post name”
option.

NOTE 4: If you get a SERVER TIME OUT you need to contact your hosting provider. It’s not a fault with the theme :) more info here

You can also download the Sample Content for the theme by clicking here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the untoldstories_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Setting up your theme

1) Populating your blog

To add new posts to your blog, go to Posts > add new and proceed to:

  1. add a title to your post,
  2. enter the content in the editor,
  3. upload a featured image by clicking “Set featured image” on the Featured Image panel,
  4. select the Post Format,
  5. add a category and/or tag to the post,
  6. and move to the Post Utilities metabox.

new_post

 

In the Post Utilities metabox you can select whether the post will feature a sidebar or will be full width. In the Secondary Image tab you can upload another image with portrait orientation which will be displayed in listing pages using the Looks template, more on the template below.

post_utilities

If you select a Gallery post format a new metabox named Gallery Details will appear below Post Utilities.
gallery_details
here you can select a layout for your gallery, it can be a slider or a tiled gallery, and upload your images to it by clicking the Add Images button. Check the Randomize order box to have the images load in random order. You can drag and drop the items to reorder them. Hovering over an image and clicking the “X” button allows you to remove it from the gallery quickly.
TIP: More info about gallery creation you can find in the Additional Information section of this document.

Once you are done click the Publish button to publish your post.

2) Customizing the appearance

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this
customize_panel

TIP: any changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these chagnes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

Let’s take a look at the options each tab gives you.

  • Header Bar Options

    Here you can toggle the sticky header, search bar and header social icons. Additionally you can modify the colors of various header elements. To do that click the Select Color button and either use a hex color value in the box or use the palette to select a color.color_change

  • Menus

    Here you can create and assign menus to the theme. The theme features two menu locations, one on the header and one on the footer. The footer menu does not support sub menu items. To learn more about menu creation check out the Codex’s menu user guide here.

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo, footer logo and site icon.

  • Layout Options

    Here you can independently modify the blog layout, the category/tag layout and the layout for the rest of your pages. Additionally you can configure the lenght of the automatic excerpt and choose between numbered and older/newer pagination.

  • Front Page Slider

    This tab allows you to configure the homepage’s slider. You can toggle its apperance and automatic slide functionality. The images displayed on the slider are featured images pulled from your post, you can select a source post category via the drop down or fill in individual post ids in the text box below if you don’t want entire categories to appear on the slider, to learn how to find an individual post’s ID check this article. You can also limit the number of posts on it, change the effect and adjust the slideshow speed.

  • Typography Options

    Here you will find various options regarding the theme’s typography. You can change heading, body text and widget title sizes and toggle the capitalization of various elements.

  • Content Colors

    Are you looking to create your own unique color scheme? This tab will help you do it by allowing you to modify the colors of many elements of the content.

  • Sidebar Colors

    This tab will allow you to modify the colors of various sidebar elements to complete your custom color scheme.

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features two sidebars, the Blog Sidebar which appears on all posts & pages that have a sidebar, and the Footer Sidebar which can only display the widget provided by the WP Instagram Widget plugin.

  • Social Networks

    Here you can fill in the URLs to your various social network profiles supported by the theme. These will appear on the header, footer automatically, you can also display them in the post/page sidebar by adding the Theme – Social Icons widget in the blog or page sidebar.

  • Posts Options

    Here you can toggle various aspects of the single post, like the appearance of categories, tags, date, comments, social sharing etc.

  • Pages Options

    This tab allows you to toggle the appearance of the signature and social sharing buttons on pages.

  • Footer Options

    Customize the theme’s footer by changing its color scheme and toggling the reveal effect, tagline, search bar and social icons.

  • Static Front Page

    If you don’t wish to have your latest posts on the front page and wish to display static content using a normal page, or want to use the looks template as your front page, you can do so here. Set the desired page as your static front page and save.

  • Other

    In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs.

Theme pages

The contact page

For the contact page on the theme’s demo we used a page with the Fullwidth Page template applied to it and pasted in a contact form created with the Contact Form 7 plugin.

The Looks pages

The looks page template was created to give you more flexibility on the images you can use on your listing pages. By default the featured images on post listing pages have the landscape orientation. If you need to use images that have the portrait orientation you can create page with the Looks template applied to it. From the Looks Details metabox you can select the layout of the page, the post category it will display and the number of posts per page.

looks_details

Widgets

Along with WordPress’s widgets we have created 4 custom ones. They are really simple and they let you display various important info around the site.
widgets
You will find a small description in each widget detailing its usage.

How to use the page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

ci_page_builder_template

That’s it. You can now start building your page using the page builder of your choice, once done publish it and check it out.

Additional information

Creating Galleries

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

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

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

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums

Technico

Theme installation

The easiest way to install the theme, is by accessing your WordPress admin panel, then go to Appearance > Themes. Select the Install Themes tab and click the Upload link located just below the tab’s name. Click on Browse… and select the WordPress theme zip file you just downloaded. Then click the Install Now button, and after a few seconds, your new theme should be installed. Click activate and the theme is ready to use.

TIP: A more visual guide can be found here.

In order to install the theme manually, or in case you have trouble installing it through the admin panel, you have to unzip the WordPress theme’s zip file on your computer, and upload via FTP the resulting theme folder into your WordPress installation themes folder (wp-content/themes). Then, from the WordPress admin go to Appearance > Themes. The theme should be available in your themes list. Click activate.

Image Sizes

The minimum recommended image sizes for Technico are:

  • Post thumbnail: 555x350px
  • Featured image: 848x450px
  • Fullwidth thumbnails: 1140x450px
  • Testimonial thumbnails: 60x60px
  • Slider thumbnails: 1920x700px
  • Client logos: 80px in height, not restricted in width.

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in a page which will serve as your contact page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • WordPress Jetpack: You can use this to create a contact form instead of Contact Form 7, insert sharing buttons, create tiled galleries etc.
  • One Click Import : Use this plugin to help you import your content with just one click.

Importing Sample Content using One Click Import

To automate the process of importing and for a better experience we have natively included support for OneClick Import Plugin. Let install it fist:

From your WordPress dashboard

  1. Visit ‘Plugins > Add New’,
  2. Search for ‘One Click Demo Import’ and install the plugin,
  3. Activate ‘One Click Demo Import’ from your Plugins page.

From WordPress.org

  1. Download ‘One Click Demo Import’.
  2. Upload the ‘one-click-demo-import’ directory to your ‘/wp-content/plugins/’ directory, using your favorite method (ftp, sftp, scp, etc…)
  3. Activate ‘One Click Demo Import’ from your Plugins page.

Once the plugin is activated you will find the actual import page in: Appearance > Import Demo Data.

 Click on the Import demo data button and you are done!

This plugin requires PHP version of at least 5.3.x, but we recommend version 5.6.x or better yet 7.x. Please contact your hosting company and ask them to update the PHP version for your site.

Importing sample content manually

To get the sample content file you can click the link in the notice that will appear on your dashboard immediately after activating the theme.

download_sample

Extract the zip file you downloaded and upload the xml file in Tools > Import > WordPress (if not already present, you will be prompted to install the WordPress importer plugin), assing the authors to an existing user and make sure you check the “import attachments” box. You can now import the sample content.

You can also download the Sample Content for Technico by clicking here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the technico_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Setting up your theme

1) Populating your blog

To add new posts to your blog, go to Posts > add new, title your post, enter the 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, if you so desire, from the respective panels and publish the post by clicking “Publish”.

2) Adding Services

To add new Service item go to Service > Add new and fill in the title, content and featured image. Next, in the Service Options metabox set an image for the service by following the on screen instructions. Finally publish the item.

3) Adding Project items

To add a new portfolio item go to Projects > Add New. Set a featured image from the panel on the right, fill in any text you have for the portfolio item and move to the Project Options panel below.  Here you can add project Information and toggle the appearance of the featured image in single project view.

4) Adding Team Members

To add a team member go to Team > Add New, set a title for it (the person’s name) and upload a featured image, then in the “Member Options” panel you can fill in the team member’s social profiles by following the on screen instructions.

5) Adding DIY Projects

To add a new DIY Project item go to DIY Projects > Add New. Fill in a title for the project, set it’s featured image, add the content and finally publish the item.

6) Adding FAQs

To add a new FAQ item go to FAQs > Add New. Fill in a title for the item, set it’s featured image, add the content and finally publish it.

7) Customizing the appearance

All theme customization is done via WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this

customizer

 

TIP: any changes you make in the tabs below will be previewed live on the site which appears in right side of the screen, however to save these changes you need to click the Save & Publish button on the top of the bar, if you have made a change but see the button grayed out (for example changed the font size of a heading), move the cursor outside the input box, for example, to the next input box, then the button should be clickable again.

Let’s take a look at the options each tab gives you.

  • Header Options

    Here you can set the business’ address & phone number that will appear on the header and also toggle the appearance of social icons

  • Menus

    Here you can create and assign menus to the theme. The theme features one menu location, the main menu one. To learn more about menu creation check out the Codex’s menu user guide here.

  • Site Identity

    In this tab you can modify the site’s title, tagline, logo and site icon.

  • Layout Options

    Here you can modify the length of the automatic excerpt and select between numbered and older/newer pagination.

  • Typography Options

    Through this tab you can control the font size of key theme elements, such as headings, body and widgets.

  • Content Colors

    Are you looking to create your own unique color scheme? This tab will help you do it by allowing you to modify the colors of many elements of the content. To do that click the Select Color button and either use a hex color value in the box or use the palette to select a color.color_change

  • Widgets

    Through this tab you can add widgets to the theme’s sidebars. The theme features ten sidebars, the blog, pages, two homepage sidebars, an e-shop sidebar, the pre-footer Instagram one and four footer sidebars.

  • Sidebar Colors

    This tab will allow you to modify the colors of various sidebar elements to complete your custom color scheme.

  • Social Networks

    Here you can fill in the URLs to your various social network profiles supported by the theme. You can display them in a sidebar by using the Theme – Social Icons widget.

  • Posts Options

    Here you can toggle various aspects of the single post and posts listing, like the appearance of categories, date, comments and featured images.

  • DIY Options

    Here you can toggle various aspects of the DIY post and DIY posts listing, like the appearance of categories, date, comments and featured images.

  • Footer Options

    Here you can modify the credits text and toggle the back to top button.

  • Static Front Page

    Use this tab to make the Home page your static front page so you can take advantage of the homepage template we have created for you.

  • Titles

    In this tab you can change the titles for various theme pages, like the blog, DIY, search and 404.

  • Other

    In this tab we host the custom CSS panel which you can use to insert styles for elements not covered in the rest of the tabs. Also here you can set the Google Analytics ID to get statistics on your site.

Theme pages

The Home page

To set up the homepage create a page named Home and set to it the Homepage Template from the Page Attributes drop down on the right. To add content to your front page go to Customize > Widgets or Appearance > Widgets and use the theme’s widgets to help you display your content.

Custom post type listing pages

In order to display your custom post types you will need to create a listing page fore each one.

DIY Projects

Create a page to list your DIY projects and apply to it the DIY Listing template from the page attributes drop down.

If you want to create a listing page for one particular FAQ category you can select it from the DIY Listing Options metabox below.

diy_listing

FAQs

Create a page to list your FAQs and apply to it the FAQ Listing template from the page attributes drop down.

If you want to create a listing page for one particular FAQ category you can select it from the FAQ Listing Options metabox below.

faq-listing

Projects

Create a new page and apply to it the Projects Listing template from the page attributes drop down.

In the Project Listing Options  metabox you can select a base category if you want to only display a particular one on the listing page, select the Listing & Article layout you like and finally set the number of items that will appear per page.

project-listing

Services

Create a new page and apply to it the Services Listing template from the page attributes drop down.

In the Service Listing Options  metabox you can select a base category if you want to only display a particular one on the listing page, select the Listing & Article layout you like and finally set the number of items that will appear per page.

service-listing

Team Listing

Create a new page and apply to it the Team Listing template from the page attributes drop down.

In the Team Listing Options  metabox you can select a base category if you want to only display a particular one on the listing page, select the Listing layout you like and finally set the number of items that will appear per page.

team-listing

The contact page

To create a contact page similar to the one found on the theme’s demo, you can create a new page, name it Contact and use the Contact Form 7 plugin to help you create a contact form, then paste the shortcode it provides in the page’s text editor, publish and you are done.

Widgets

We have handcrafted twelve custom widgets to help you better display your content. You will find them under Customize > Widgets or Appearance > Widgets

widgets

Below each widget you will find a small description regarding its functionality, additionally each widget provides you with some info on each usage, please read the small text found on the widget once it’s added on the sidebar. Widgets that are custom built to be used on the homepage have the Homepage widget marking on the description.

Theme – Slider

This widget will help you create slider items. Add the widget to the Homepage sidebar, select the slideshow speed and toggle the automatic slide functionality and press the Add Item button to add your first slide.

slider_1

Fill in all the required information, like title, subtitle, button text and button URL and click the Select Image button to upload the slider image.

slider_2

Next click the Add Item again to add another slide, continue as needed and once done click the save button.

Theme – Custom Content

This widget is built to help you add content to your front page, whether it is an introductory text, a bio or any other text you might want to include. Its functionality is pretty straight forward, you add the widget to the homepage sidebar, fill in all the info you need, click the Select Image button to upload an image (optional) and save the widget.

custom_content

Theme – Pricing Table

To create a pricing table, add the widget to the homepage sidebar, fill in the title, subtitle and click the Add Item button

Pricing_1

Set up the pricing item by filling all related information. Marking the item as featured will make it appear emphasized with a border surrounding it. You can add up to 8 features for each pricing item, placing a dash or minus sign before the text will display it as not available/included in the package.

Pricing_2

Theme – Technical documentation

technical_doc_widget

Using this widget you can create a list with downloadable files, such as manuals, guides etc. Just fill in the title and use the Add item button to add items. Fill in the required info and save the widget.

Theme – Contact

theme_contact

Using this widget you can create a contact box with a map and any info you desire. Paste in the iframe embed code for the map and then using the Add item button fill in all the required information.

Theme – Opening hours

opening_hours

Display your business’ timetable using this widget. Click the add item button to add a new schedule section, as displayed above.

Theme – Post type items

post_type_items

Using this widget you are able to display your content on any widgetized area, whether it is a standard post, a project, a team member etc. Just select the post type you want to pull info from on the Post type drop down, select the layout you want for these items from the Item appearance drop down (different layouts are available for different post types to help optimally deliver information), set the desired text alignment and add your items using the Add item button. Save your widget and you are done.

Recreating the demo’s homepage layout

The entire front page template is widgetized to provide you with maximum flexibility. Below we list the widgets used on the demo’s home page.

  • Theme – Slider: This widget creates the slider. Add as many items as you want by pressing the “Add Item” button. Remove any item by selecting “Remove me”. The slider also supports videos from WordPress compatible video hosts.
  • Theme – Post type items: Here we display four services with the Icon centered – Button layout.
  • Theme – Custom content: Using this widget you can display custom content on your front page.
  • Theme – Post type items: Here we display four team members with the Social layout.
  • Theme – Custom content: another bit of custom content.
  • Theme – Pricing table: we used this widget to create a four column pricing table.
  • Theme – Clients: Here we display four logos of our clients.
  • Theme – Testimonials: This widget will help you display testimonials from your customers. On the demo we have three testimonials visible.
  • Theme – Post type items: Here we display three DIY items with the Image – Title – Date – Text – Button layout.
  • Theme – Custom content: Finally we have yet another bit of custom content.

How to use the page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

ci_page_builder_template

That’s it. You can now start building your page using the page builder of your choice, once done publish it and check it out.

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums

Mykonos

About

Mykonos Resort is a beautiful, responsive WordPress theme specifically designed to showcase your hotel/resort in style.

Zip file contents

In the zip file, you will find the following:

  1. DOCUMENTATION Contains a text file with a link to this document.
  2. HTML Contains the HTML version of the template. You can integrate it to your favorite CMS.
  3. WORDPRESS In this folder you will find the zip file which contains the theme, called “mykonos.zip”

Theme Installation

Login to your WordPress admin panel. Go to Appearance > Themes. Click on the Install Themes tab. Click upload and Browse. Select the mykonos.zip located in the WORDPRESS folder and click OK. Wait for the theme to upload and you will get a message that says “Theme installed successfully”. Click Activate and.. congratulations! You just installed the Mykonos Resort theme!

The CSSIgniter Mykonos plugin

Much of the theme’s functionality, like custom post types and custom fields, depends on the CSSIgniter Mykonos plugin. Installation of the plugin is mandatory if you want to fully utilize the Mykonos Resont theme’s functionality.

Plugin installation

Once you activate the theme you will be redirected to the CSSIgniter Settings panel, where you will see this notice:

install_plugin

click the Begin installing plugin link to proceed. Next you will see this screen

install_plugin_2

click the Install link below the plugin’s name, once done you will be notified that the plugin was installed and activated successfully.

install_plugin_success

NOTE: In order to setup the theme as seen on our preview you need to keep reading. Even If you are an experienced WordPress theme user do read this documentation in order to understand my approach on various things around the theme.

Minimum image sizes

  • Homepage Slider: 1920x650px
  • General thumbnail (used on listing pages and widgets): 750x450px
  • Fullwidth image (used on single room/attraction sliders): 1140x640px

Useful Plugins

These plugins provide functionality and features used directly (or not) by the Theme. So, it is recommended to install and activate them before importing your sample content.

  • CSSIgniter Shortcodes you can use our custom made shortcode plugin to help you create a variety of layouts and elements on your site. Instructions can be found here.
  • Socials Ignited use this plugin to create a widget that links to all your social profiles.
  • Contact Form 7 use this plugin to create a contact form, then copy the shortcode it gives you and paste it in a page which will serve as your contact page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.

Importing sample content

To get the sample content file go to appearance > theme settings > site options and scroll down until you see the download sample content link. Extract the zip file you got and now you have the required xml file to import the sample content.
Importing the sample content is easy. Go to Tools > Import and select the last option called WordPress.

You can also download the Sample Content for Mykonos by clicking here

If the Importer is not installed, a popup window will appear asking you to install it. Click the Install button on the right and click Activate Plugin & Run Importer

Click Browse, select the mykonos.xml file you extracted earlier and click Upload file and import. It will ask you to import one or more authors. Just assign the posts from all of them to your existing user account by selecting it from the drop down menu. Check the Download and import file attachements. Click Submit.

NOTE 1: This will take a while. It could even take minutes because of importing all the images etc. So if you are out of coffee, go for a re-fill :)

NOTE 2: Images are under copyright so you can’t use them.

NOTE 3: You need to set your permalinks at Settings > Options > “Post name”
option.

NOTE 4: If you get a SERVER TIME OUT you need to contact your hosting provider. It’s not a fault with the theme :) more info here

Importing widgets

You can also import the widgets you see on the theme’s demo. To do that, you need the Widget Importer & Exporter plugin. To install it go to Plugins > Add new search for widget importer exporter and install the plugin. Activate it and go to Tools > Widget Importer & Exporter click choose file and upload the mykonos_widgets.wie file which is located in the sample content zip file, click Import widgets and you are good to go.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

Theme settings

To access the theme’s settings panel go to Appearance > CSSIgniter Settings. Let’s go through the various tabs.

Site Options Tab

With the first option you can upload your logo if it’s an image logo, you have the option to add a normal and a high resolution logo (for retina-type devices), also you can customize the footer’s logo. If you want text go to Settings > General and set the Site Title and the Tagline if you wish.

Next you have the option to set a favicon and touch icons for mobile devices.

Finally towards the end of this tab there is a text box which allows to you customize copyright info.

Homepage Options

Here you can toggle the slider’s automatic behavior, modify the slide timing etc.

Display Options

The descriptions for each option are detailed so just follow the instructions for each box and set the settings that you want.
We will see various other options and how we set them as we move along.

Appearance options

Here you can select a predefined color scheme, a header and booking form background. You can also uncheck the checkbox Disable custom background and set your own custom background color and image if you wish.

Contact options

Here you can select your default booking page (this will make the booking bar appear on the slider and the top of the footer area), the email where the booking requests will go and the coordinates for the contact page’s map section.

Newsletter options

Here you can configure your Mailchimp or Campaign monitor account to work with the theme’s newsletter widget.

Weather Options

For info on how to set up the weather display please have a look at this guide

Twitter Options

Here you can connect the theme to your twitter account so you can display your latest tweets via the CI Tweets widget.

Google Options

Copy / paste your Google Analytics code in this box.

FeedBurner Feed URL

Copy / paste your feedburner feed code in this box.

BuySellAds options

Copy / paste your BSA code in this box.

Custom CSS

If you are familiar with CSS and you want to add some extra styles just insert them in this area.

Creating theme pages

Let’s 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 either the “Homepage /w Full Slider” template from the “Page attributes” panel.
  2. “Blog” this will be your posts page. Just create it, no further action needed.
  3. “Contact” here you can place your contact form which you will create using the Contact Form 7 plugin. Assign to it the “Contact” template and then navigate to CSSIgniter settings > Contact options to set your address the coordinates for your map (map can also be disabled from here).
  4. “Booking” your booking form will be placed here, apply the “Booking Page” template. Once you publish the page go to CSSIgniter settings > Contact options select the Booking page, fill in the e-mail you want your booking inquiries sent to and save changes.
  5. “Gallery Listing” this page will display your galleries. Two layouts are available either a three column layout by applying the “Gallery listing 3 Cols” template from the page attributes panel, or a four column layout by applying the “Gallery listing 4 Cols” one.
  6. “Room Listing” this page will display your rooms. Two layouts are available either a three column layout by applying the “Room listing 3 Cols” template from the page attributes panel, or a four column layout by applying the “Room listing 4 Cols” one.
  7. “Services Listing” this page will display your services. Apply to it the “Services Listing” template from the page attributes panel.
  8. “Attractions Listing” this page will display your attractions. Two layouts are available either a three column layout by applying the “Attractions listing 3 Cols” template from the page attributes panel, or a four column layout by applying the “Attractions listing 4 Cols” one.

(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 and set the “Home” page to be your static frontpage and the “Blog” page as your posts page, as demonstrated in the image below.

settings_reading

Populating your blog

To add new posts to your blog, go to Posts > add new, title your post, enter the 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, if you so desire, from the respective panels and publish the post by clicking “Publish”.

blog

Adding Galleries

To create a new gallery item go to Galleries > Add New, set the gallery’s name as a title, enter some text if you wish in the content editor, set a featured image and proceed to upload your images by clicking the “Add Images” button in the “Gallery Details” panel (please read the “Creating Galleries” section below, first) and finally publish the gallery item. Single gallery column numbers can be controlled from the Gallery settings panel below the main text editor.

gallery

Adding Videos

To create a new video item go to Videos > Add New, set the videos’s name as a title and in the “Video Settings” box below paste in the URL to your video.

video

Adding Rooms

To create a new room item go to Rooms > new Room, set the room’s name as a title, enter relevant information in the content editor, and set a featured image. Then move to the “Room Details” panel. Here you can add images to your room’s slider (please read the “Creating Galleries” section below, first), add the room’s amenities, add a price and let visitors know if current price is an offer.

room

Adding Slider items

To add items to your homepage’s slider go to Slider Items > new Slider Item, set a title for the slider item and upload a featured image (which will be the image displayed on the homepage), enter any text you might want to show when the single slider item is viewed (please notice that any text entered here will appear only if you leave the URL box blank in the slider settings below). Next move to the Slider Details panel, give the slider a subtitle, a custom link and change the ‘Read More’ button text if you so desire. Finally, publish the slider item. Homepage slider behavior can be controlled under CSSIgniter settings > Homepage options.

slider

Adding Services

To create a new Service, go to Services > New Service, set a title for your service, add relevant text in the text editor, add a featured image and publish your service.

service

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 widgetized area you like by using the “CI Item” widget and will appear in room listing pages.

testimonial

Adding Attractions

To add an attraction go to Attractions > Add New. Add the attraction’s name as a title, any text necessary and upload a featured image. In the Attraction Details panel you can upload images related to the attraction to create a gallery (please read the “Creating Galleries” section below, first), when finished, publish the item.

attraction

Creating your menu

Now that your content is in place, you need to set up the menu. Go to Appearance > Menus and your menu, name them “Main menu”, add items to it and then go to “Manage Locations”, set the menu to be the site’s main menu and save.

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

Adding content to your Homepage

The homepage on Mykonos features a slider and a widgetized area, the “Homepage” sidebar.

Duplicate the demo’s layout

On the demo’s homepage we have three slider items and the following widgets on the homepage sidebar: one CI Items widget, with a testimonial selected, following is another CI Items widget displaying three rooms, next we have another CI Items with four attractions and finally we have another CI Items displaying two videos.

Custom Widgets

The theme features 10 custom widgets built to help you display your content better. You can access theme under Appearance > Widgets. You will find a small description about each widget’s functionality below its title.

How to use the page builder template

The theme comes bundled with a page builder template which allows you to use your favorite page builder plugin on it and create unique layouts very easily.

To use that template start by going to Pages > Add New. This will create a new page. Add a title to your page and select the Page builder template from the template drop down in the Page Attributes metabox.

ci_page_builder_template

That’s it. You can now start building your page using the page builder of your choice, once done publish it and check it out.

Additional information

Creating Galleries

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

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

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

Next Steps

Still have questions or problems setting up your CSSIgniter Theme? We will be happy to help you out in our support forums