WELCOME!

Thank you for purchasing my theme. The Arsynoe is a one page portfolio theme, built for the popular Wordpress platform. I did my best to include everything in this documentation that you need to know about building stunning portfolio sites with your purchased theme, but if you have any questions that aren't covered in this helpfile, feel free to contact me via my support system, or email me via the contact form on my userpage here. Thanks so much!


Table of contents


GETTING STARTED

The downloaded package should contains three directories and one .zip file:

1. Fireworks PNG: here are the original layered png files
2. HELP: the documentation file that you actually reading now:)
3. arsynoe-installer.zip: this is the installer package that contains the tamplate files
4. PSD: here you can find the psd files, but they are generated with fireworks ( Because I working with FW )

The only thing what you need to do before installing Arsynoe is to getting WordPress installed on your web server. Unfortunately the wordpress installation process is beyond the scope of this help file, but don't worry you just have to go through some easy steps, furthermore you can find detailed instructions on the WP team's official site:

Installing WordPress

Installing the theme via the Wordpress theme installer ( step by step just for the beginner's sake )

Step 1:  Login to your wordpress admin area. If you can't find your login page, please visit the your site url plus "/wp-login.php" address. For example: if your domain name is "http://your-site.com", the login page will be available on "http://your-site.com/wp-login.php".

Step 2:  After you successfully logged in, click on the Themes menu item, under Appearance.

Step 3:  Now you're on the themes page. At the top you should see two tab options. Click to "Add new". After then you have to click on the Upload link in the small menu right below the tabs.

Step 4:  Now you can select the arsynoe-installer.zip. It is important to select exactly the arsynoe-installer.zip file, not the entire package that you downloaded from the Themeforest. Next click the "Install Now" button and wait a little bit. It may take a several seconds.

Step 5:  After it is installed, you just need to activate it by clicking on the activate menu item under the "Theme succefully installed message". Once the theme is activated you should see the new menu items in your dashboard navigation:



Installing the theme through an ftp client

In this case you need to extract the arsynoe-installer.zip file. Once it is unzipped, you should see a simple folder named arsynoe_v12. Next, using any ftp program, upload the entire 'arsynoe' folder into the themes folder on your webserver ( wp-content/themes ). Once you get the theme uploaded go to the "Appearance --> Themes" page and activate the theme. That's all.


HOMEPAGE

As we know, the wordpress is originally a blog engine, therefore your latest blog posts will be shown on your default blog page, but you would like to see something similar to the demo site, right? To change your homepage, just go through the following steps:

Step 1:  First of all let's delete the sample page, because we don't need that predefined page at all.

Step 2:  After then you have to create a new page. So click on the Pages --> Add new menu item. Now type the name of your future homepage. Just for the sake of simplicity it will be "Homepage" in our example. And the most important is selecting the Homepage template on the right side. And please don't try to add content via the page editor. The content on the homepage will be added via custom post types.


Step 3:  Once the "Homepage" are saved, you just only need to replace the posts on the home with your new page. To do this click on the Setting --> Reading menu item and select the Homepage as a homepage. You can set an alternate page for the blog posts too, but it isn't necessary if you don't want to blogging.


You need to set up the navigation before start to create content. It's a little bit tricky, because there is only one page, so the menu doesn't build links between different pages, unless you split the homesections into different pages, but we will talk about this option later in the multipage chapter. The url fields of the menu items will contain the targets of the page scrolling JQuery script. Let me explain how it works: in default case there are five different sections on the homepage and every section has an identifier. Below are the sections with its identifiers:

1. Home/Slider - #header
2. Portfolio - #portfolio
3. Services - #services
4. About - #about
5. Contact - #contact

The navigation will be based on custom links, where the labels are optional, but the url must be the identifier of the target section. Below you can read the step by step instruction:

Step 1:  Go to the wordpress menu editor by clicking on the Appearance --> Menus menu item in your dashboard navigation.

Step 2:  You are now in the menu editor, and you can crete your first menu by type the selected name into the "Menu Name" text field and hit the Create Menu button.


Step 2:  After then you need to add items to your freshly created menu. As I said above, we are going to use custom links. The labels can be anything, but url must be a valid identifier without any http://

Step 3:  Once the menu items created, just need to select your menu as a primary menu in the theme locations optionbox, and push the save button. Your final result should looks like this screenshot below:


THEME OPTIONS

A) General Options

Site logo - As you can see on the demo page there is no a classic image logo on the site. The design of the home page / section is based on the big bold title on the top. In my opinion that title with a cool font looks way better than a classic image logo. Even though I don't use and prefer an image as logo with this theme, you can add your own logo to the site. You can copy + paste url manually, but I recommend you to use the inbuilt media manager by clicking on the "Select Image" button. After you picked one image as your logo, click the "Inset into Post" to assign the url to the awaiting form field.

Logo width - The width of the logo in pixels

Logo height - The height of the logo in pixels
Note: It is crucial to define the width and height of your logo. Why? Because you need to use a double sized image in order to make its look beautiful on Retina or high res screens. For instance if you want to show a 120x80 logo, you have to upload a 240x160 image then type 120 into the width and 80 into the height field.

Logo alt text - The alternate text of your logo.

Image protection - You can enable a javascript image protection will prevent the vast majority of users from right-clicking over an image and saving it..

Copyright message - A message to the user who tries to download your image. For example: All images are protected by Copyright!

Admin logo - You can upload a custom logo for the login page.

Shortcut icon - You can add a shortcut icon (favicon) to your site.

Tocuh icon 1/2/3/4 - Touch icons for Apple devices. These options are briefly explaned in the options panel.

Admin logo - You can upload a custom logo for the login page.

Preloader effect - You can enable / disable the preloader effect. It can be very useful on media rich websites.

Copyright text - You can control the preloader effect with this option. It can be allowed on every pages, or only on the homepage or you can totally disable it.

404 title - The title of the 404 page. The server will typically generate "404 - Not Found" web page, when a user attempts to follow a broken or dead link.

404 content - You can define a custom text content for your 404 page.

B) Style options

Here you can control the font families, font sizes and the colors of your website. If you would like to see the different colors and fonts in action, just visit the demo site. and try out the customizer on the left. Even though I find all of the options below understandable, I would like to note that patterns always overwrite background colors! If you select a pattern and a background color for the same section, the pattern will overlay the background color! You can restore the background color by selecting the "No Pattern" ( white pattern with red cross ) for that section.

It is also important to know that all of the additional text sections have the same style that you can control in the "Text sections" on the styling page.

I hope you will enjoy the customization! :)

Option name Default value
Text font Open Sans
Text font size 12px
Letter spacing 0px
Heading font Oswald
Section title font Inherited
Section title font size 40px
Menu font Open Sans
Menu font color #FFFFFF
Menu background #000000
Menu font size 16px
Line color #CCCCCC
Link color #000000
Home / slider section
Tagline font Inherited
Tagline font size 50px
Tagline color #000000
Background color #FFFFFF
Background pattern "No Pattern"
Text color #666666
Portfolio section
Background #333333
Background pattern "No Pattern"
Heading color #FFFFFF
Text color #CCCCCC
Quote font Quicksand
Quote font size 24px
Services section
Background #FFFFFF
Background pattern "No Pattern"
Heading color #333333
Text color #666666
Icon background #333333
About section
Background #333333
Background pattern "No Pattern"
Headings / Title color #FFFFFF
Text color #CCCCCC
Testimonials background #000000
Text color #CCCCCC
Contact section
Background #FFFFFF
Background pattern "No Pattern"
Headings / Title color #333333
Text color #666666
Text sections
Background #FFFFFF
Background pattern "No Pattern"
Headings / Title color #333333
Text color #666666
"GO" button background #333333
Blog / inner pages
Post title size 50px
Post / Page headings color #000000
Post / Page content font size 15px
Post / Page content color #333333
Post elements background #000000
Sidebar font size 12px
Post elements background #FFFFFF
Inner pages background #FFFFFF
Background pattern "No Pattern"



C) Home settings

Tagline - The big bold branding slogen that appears at the top of your homepage.

Intro text - You can add an introduction text to your site. The text will be shown under the navigation.

Static video - If you would like to show a static Vimeo / Youtube video instead of the slider, just insert the embed code of the selected motion picture into this textarea then click "Save changes".

Full screen video - The ID of the video that you want to show as a full screen video. It must be a Youtube video! This option does not allow Vimeo videos! If you do not know how to grab the video ID, please view the relevant tutorial video. There is a tutorial video called "show a full screen youtube video".

Section 1 content - Select content for the first section.

Section 2 content - Select content for the second section.

Section 3 content - Select content for the third section.

Section 4 content - Select content for the fourth section.

Section 5 content - Select content for the fifth section.

Section 6 content - Select content for the sixth section.

Section 7 content - Select content for the seventh section.

Section 8 content - Select content for the eighth section.

Note: the homepage generally consist of five active and three inactive sections. Of course the inactive sections are not visible in default. Each section has its default content. You can change the order of the content types ( portfolio, services etc. ) by changing the content of the sections. Please don't select the same value for two sections in the same time ( excpet the "nothing value" that can be selected for multiple sections ). The image below shows the general structure of the scrollable homepage.

Of course you can change the order of the sections. The sequence above is just the default setup that you may change!

Portfolio section title - the title of the portfolio section. For example: OUR WORK.

Services section title - the title of the service section. For example: OUR CAPABILITIES / SERVICES.

About section title - the title of the about section. For example: ABOUT ME / OUR TEAM.

Contact section title - the title of the contact section. For example: CONTACT US / GET IN TOUCH.

Text section 1 title - This is the title on the top of the first optional text section. This section is inactive in default.

Text section 1 content - The content of the first optional text section. Doesn't allow shortcodes!

Text section 2 title - This is the title on the top of the second optional text section. This section is inactive in default.

Text section 2 content - The content of the second optional text section. Doesn't allow shortcodes!

Text section 3 title - This is the title on the top of the third optional text section. This section is inactive in default.

Text section 3 content - The content of the third optional text section. Doesn't allow shortcodes!

Note: If you want to activate a text section you will need to select it as a content of a section. This is the reason why there are three inactive sections without content.


D) Slider settings

Slider width - The width of the slider in pixels. The default value is 700

Slider height - The height of the slider in pixels. The default value is 290

Animation - Select an animation type for the slides, "fade" or "slide"

Sliding direction - You can select the sliding direction, "horizontal" or "vertical". It works only, if the "slide" animation has been selected in the prev option.

Auto play - Play the slide show automatically.

Slideshow speed - Set the speed of the slideshow cycling, in milliseconds.

Animation speed - Set the speed of animations, in milliseconds.

Allow Prev/Next buttons? - Create navigation for previous/next navigation? (true/false).

Allow ControlNav? - Create navigation for paging control of each slide?

Keyboard navigation - Allow slider navigating via keyboard left/right keys?

Mousewheel navigation? - Enable mousewheel navigation.

Randomize - Randomize slide order?

Slide to start - The slide that the slider should start on. 0 = first slide.


E) Portfolio settings

All projects text - You can modify the `All projcets` text in the filter.

Disable filter - You can turn off the filtering effect on the portfolio.

Quote - The quote that will be shown at the bottom of the portfolio section.

Quote author - The author of the quote.

F) Services settings

Intro text - You can write an overall description that can describe the quality of your services, your work ethic or something else... This text will be shown right above your services.

"More info" text - You can replace the default content of the "More info" link.

Border radius - You can change the default border-radius value of the thumbnails. The default value is 10px;


G) Contact info

General information - If you would like write some important information assigned to your visitors, you can do it here. The text will be shown on the right side of the contact section, above of your email address.

Google Map - If you want to show a Google Map at the bottom of your site, please insert its iframe into this textarea.


H) Contact form

You can totally customize the contact form by adding custom error messages and labels to the form elements.

Email address (required) - This address will be destianation of the contact form messages.

Name label (required) - The default value of the name field in the contact form. Required by the validation process.

Email label (required) - The default value of the email field in the contact form. Required by the validation process.

Message label (required) - The default value of the message textarea in the contact form. Required by the validation process.

Send button label - The default label of the contact form button. Short values is recommended for the sake of the circle shape (for example: OK, GO ).

Missing name warning (required) - If the user doesn't fill the name field before submit the form, this message will be shown. Required by the validation process.

Missing email warning (required) - If the user doesn't fill the email field before submit the form, this message will be shown. Required by the validation process.

Invalid email warning (required) - If the user are trying to submit the form with an invalid email address, this message will be shown. Required by the validation process.

Missing message warning (required) - If the user doesn't fill the message textarea before submit the form, this message will be shown. Required by the validation process.

Error message color - You can specify a custom color for the error messages.

Email subject (required) - The subject of the emails sent via your contact form. Required by the contact form script.

Thank you message (required) - If the user sent the message succesfully, the form elements will disappear, and this message will be shown. Required by the contact form script.

Disable PhpMailer - If you do not receive emails via the contact form, try to disable PhpMailer. PhpMailer is a robust, reliable and widely used mail sending php class, but some servers does not support it. If you disable PhpMailer, the theme will use the classic mail() function instead.

ContactForm 7 shortcode - If you want to replace the default form with a contact form 7 form, paste the shortecode of the form here.


I) Social media

You can edit your social media profiles in this settings sections. Every social media icon based on the following logic: there are an url and a tooltip text assigned to the same social icon. If you fill the url, the inbuilt icon will be shown as link. If you leave the url field empty, the social icon stays hidden.


J) Blog settings

Blog page layout - You can enable / disable the sidebar on your blog page.

Read more text - You can define a custom "Read more" text.

Prev label - You can edit the tooltip of the next button.

Next label - You can edit the tooltip of the prev button.

Gallery layout - You can select two layout for the galleries that generated by the gallery shortcode

Comment form settings - The comment form uses the same logic as the contact form!


K) SEO settings

Meta keywords - You can add keywords to your website here ( don't forget separate them by commas ). In fact this is not a very important thing in the modern SEO, this is just an additional option for you :)

Meta description - Define a description for your website. This is an importan tag, because the content of this element tells the search engine what your site is about.


L) Advanced options

Analytics tracking code - Paste your entire analytics tracking code ( including the <script> tags ) into this textarea

Custom css - You can add your custom css code to the <head>. Please don not use the <style> tags, because the theme generates them automatically!

Custom javascript - You can add your custom javascript code to the <head>. Please don not use the <script> html tags, because the theme generates them automatically!


Slider

The theme is using a custom post type to manage the slider. Below are the step by step instructions that help you create and edit slides.

Step 1:  Click on the Slider --> Add Slide menu item.

Step 2:  You have to specify a title for your new slide. This is necessary in order to distinguish different slides in the admin area, but won't be shown as a caption on the frontend.

Step 3:  To add an image to your slide, just click on the "Set featured image" link in the "Featured Image" metabox, and the wordpress media manager/uploader will appears. Now you can upload an image, or pick one from the recently uploaded files. To set the selected image as a slide click on the "Use as featured image" link. If the media manager doesn't close automatically, don't worry and close it yourself. The default size of the slider is 960x400 pixels, but If you care about devices with Retina screen, you need to use 1920x400 images. Of course you can define new dimension for the slider on the "Theme settings --> Slider" page.


Step 4:  You can add a link and caption to your slide by filling out the "Caption" and the "Link" metaboxes. You need to know that these fields are absolutely optianls, the slider works well without them.


Step 5:  Hit the publish button and that's all, your first slide is created. And just for the sake of safety I attached an image to show you how should look an Add New Slide admin page.


PORTFOLIO

I think the portfolio system is the heart of the theme. Based on a custom post type, you can create categories for filtering elements, the item pages are loaded via ajax ( no page reload ), and you can add a slider, or a vimeo, or a youtube video to every single item. In one word: it's cool. And is fun to work with. But there are some important things what you need to know before start to build your portfolio. For example the image resolutions. The size of the thumbnails is 500x500 in order to keep their look sharp on retina devices. Please don't worry about the bandwidth. Bigger resolution doesn't have to mean bigger file size ( useful info here )! An optimized jpeg with 520x520 resolution is lighter than an avarage 260x260 image without optimization. If you don't know how to compress a jpeg file, feel free to visit this link:

Jpeg Optimizer

I recommend you to create the 500x500 thumbnails, then optimize them with a 80 compression level. The "Resize Photo" function is unused in this case, so feel free to uncheck it.

The width of the slider on the item pages is between 620px and 960px ( 1240 & 1920 if Retina counts ). The value is depends on the selected layout:

Layout1 & Layout2 ( media content on the left / right ): the slider is 620px ( Retina: 1240px ) wide.
Layout3 & Layout4 ( media content on the top / bottom ): the sldier is 960px ( Retina: 1920px ) wide.

If you aren't sure which layout will be the best for you, I recommend to use at least 960px wide images in the slider, so the images cannot be undersized.

The height is optional.

And now let's see the steps you have to go through to create your portfolio.

Step 1:   Ok, let's see how to create categories! First of all click on the Portfolio --> Categories menu item in your dashboard. Now you can specify the name of your first category in the "Name" textfield. The name is required, but you don't need to specify a slug name, and please don't write description to your categories, and don't choose a parent category. Once the name is specified push the "Add New Category" button, and create the other categories.



Step 2:  Click on the "Add item" link, then add a title to your portfolio element. The title will be shown when the user mouseover the items.

Step 3:  Upload / select the thumbnail image. This process is almost the same as adding an image to the slider. Click on the set featured image link, then the media manager will appaers, and you can upload/select an image from the recently uploaded items. To set the selected image as a thumbnail click on the "Use as featured image" link, then close the media manager.

Step 4:  Add a rollover image to the item. Custom metaboxes use a different media editor, so you need to click on the "Insert into post" button when you selected / uploaded your image.

Step 5:  Add some written content to your portfolio item. Write your text into the editor, but please be concise if you picked one of the 1/2 layouts, because there aren't to much space near the slider. If you intend to add longer text, please select the layout3 or layout4.

Step 6:  And now the most interesting part: add slides to your portfolio item. Under the editor you will find a custom metabox called "Add more content to the item". The first section in that metabox should be the "Slider images". There you can select the first image by clicking on the "Select image" button. The media manager will opens, and you can upload/select an image, but now you have to push the "Insert into post" button to append the url into the target field. You can add as many custom slider images as you like by clicking the "Add new image" button. And you can remove exsisting images from the slider by clicking the "Remove image" button, but use this button only if there are more then one images in the slider.

Step 6/B:  To add a Vimeo, Youtube, or SoundCloud player to your portfolio item, the only thing what you need to do is pasting the entire embed code into the relevant textarea. But please keep in mind that you can't add a media player and a slider to the same item. You have to make a decision: slider or different media?

Step 6/C:  

Arsynoe offers a third option: lightbox image. If you add a ligthbox image to the item, it will be open in a lightbox instead of loading the entire post when the user clicks on the thumbnail.

Step 7:  Push the publish button, and that's all. I think the screenshot below also might be useful:




SERVICES

In fact the service columns are posts, based on the services post type. If you would like to add a new service to your services section, just create a new post. Let's see in details, how to do this.

Step 1:  Add an intro text to your service by typing a short text into the "Intro text" textarea on the "Theme settings --> Services" page.

Step 2:  Stay a little bit on the options page and think about the your plans with the services section /page. Do you have many services? Do you want to write a longer description to your services, or just want to show their title? Do you want to show icons or bigger images? These are important questions, because you can fit the layout of the services section to your needs on this page.

Step 3:  Ok, now click on the Services --> Add Service menu item in your admin.

Step 4:  Type the title of the actual service. The title will be shown under the circle.

Step 5:  If you want to show icons, you have to add an icon to the big circle or upload a feautered image. The Arsynoe 46 predesigned, high resolution icons. Each icon has a dark / light version. Even though there are some prefabricted icon, you can still upload your own icon. Click on the "Select image" button, upload the selected image then click on the "Insert into Post" button.

If you upload a featured image ( Normal size: 260x260, Retina: 520x520 ), that image will be shown instead of the icon.

Step 6:  Click on the publish button, and your first service will be shown on the services sections.


ABOUT

You can add persons easily to the about section thanks to the about custom post type. Just click on the About --> Add person in your admin navigation. You are now in the New Person admin page, and I presume it doesn't looks too difficult for you after the previous examples, but for the sake of safety below are two screenshots to help you understanding the about post type.




Create a Multipage Site

To be honest this wonderful template is designed for one page portfolio websites, even though you can use it for multi pages sites too. There are several custom page templates in the package to help you divide the home sections into different pages. In the following steps I'll show you how to turn your existing one page website into a multipage site with five pages: 1. Home 2.Works (Portfolio) 3. About 4. Blog 5. Contact.

Step 1:  Because we are going to divide our sections into different pages, we don't need the rest of the sections on our homepage. We need to keep only the slider (header), so let's disable the others.


Step 2:  Once the unused sections are disabled, you just have to create the new pages. To go through this operation click on the Pages --> Add new menu item, select the relevant template in the page attributes on the right side, then push the publish button. Near the Homepage template you have six more custom page templates:

- About page
- Contact page
- FullScreen YouTube video
- Homepage
- Portfolio page
- Services page


Step 3:   Your navigation still based on custom links, but this is not the perfect solution in this case, so create a new menu.

Step 4:   Now you need to add your new items to your navigation. To do this, just select your freshly created pages from the "Pages" metabox in the menu editor, and click on the "Add to Menu" button. And there is only one thing left. The "Me" uses two menu locations for the navigation: one for the homepage (Primary Menu ), and one for the inner pages ( Secondary Menu ). So you have to select your existing menu for the Secondary Menu too in the "Theme Locations" metabox. And it's a wrap, you're now done with your multipage website!



BLOGGING

In fact the Arsynoe is a feature rich portfolio and a powerful blogging theme in the same time! It supports 9 post formats and comes with a bunch amount of easy to use and shiny shortcodes, but before start writing blog entries please enable nested comments in 3 level deep.

Set up your blog page:
You have to create a new page with the "Default" page template, then select it as your blog page on the "Settings ---> Reading" page in your admin.

Flickr widget:
Because this theme built for creative people you can add a Flickr photostream to your sidebar. To use the widget you have to know your own flickr id. You can extract your Flickr id from your Flickr url, if not, you can use the idGettr application.



How to add a blog to your one page portfolio website

In the "CREATE MULTIPAGE SITES" chapter we can see how to divide the homepage into separate page. But what can we do, if wanna keep our home page with its cool scrolling script, and we need a blog page too. Fortunately we can do it easily since version 1.1, thanks to the two menu locations of the theme. Let's see the steps.

NOTE:   I'd like to note that we will use the menu structure what we created in the "C) NAVIGATION" chapter.

Step 1:   If you already have a blog page ( otherwise please create one ), go to the menu editor and add that page to the navigation.


Step 2:   As I said above the theme contains two menu locations: Primary Menu and Secondary Menu. The Secondary Menu is built for the inner pages, therefore you have to create an another menu for your fresh blog page. This additional menu will be very similar to the existing one, but you need to use a page type for the homepage item, and you have to insert the url of your site into the custom links. Once items created, just select your new navigation for the Secondary Menu by checking the relevant checkbox at the bottom. If you don't understand something, feel free to check out the following image:



SHORTCODES

To insert a shortcode into the editor, push the shortocodes button in the TinyMce button bar. After then the shortcodes box will appear, and you can choose one from the codesnippets.

A) Image frames

Before you add an imageframe to your post, you need to know the absoulte path of the selected image. I recommend you to upload your images first to the media lybrary, then copy and paste the urls into a texteditor. I think this is the easyest way to collect the relevant image urls for your post.

[image_frame1 src="The full path to the image"] - a simple image frame.

[image_frame2 src="The full path to the image" title="Image title"] - Image frame with title

[image_frame3 src="The full path to the image" title="Image title"]Image description[/image_frame3] - Image frame with title and description


B) Youtube videos

To use the youtube shortcodes, you have to know the id of the selected video. The video id can be found in the url:


[youtube id="Video id"] - a simple embedded youtube video

[youtube_frame1 id="Video id"] - A youtube video in a frame

[youtube_frame2 id="Video id" title="Video title"] - A youtube video in a frame with title

[youtube_frame3 id="Video id" title="Video title"]Video description[/youtube_frame3] - A youtube video in a frame with title and description


C) Vimeo videos

The vimeo shortcodes are very similar to the youtube snippets. You also need to know the id of the selected video, and the id also can be found in the url:


[vimeo id="Video id"] - a simple vimeo video without any frame

[vimeo_frame1 id="Video id"] - A vimeo video in a frame

[vimeo_frame2 id="Video id" title="Video title"] - A vimeo video in a frame with title

[vimeo_frame3 id="Video id" title="Video title"]Video description[/vimeo_frame3] - A vimeo video in a frame with title and description


E) List styles

The easyest way to use the list shortcodes is using the inbuillt shortcode manager. But for the sake of safety you can view below all of the available list styles.


[check_list]
  • Item #1
  • Item #2
  • Item #3
[/check_list]

[remove_list]
  • Item #1
  • Item #2
  • Item #3
[/remove_list]

[settings_list]
  • Item #1
  • Item #2
  • Item #3
[/settings_list]

[user_list]
  • Item #1
  • Item #2
  • Item #3
[/user_list]
 

[cross_list]
  • Item #1
  • Item #2
  • Item #3
[/cross_list]

[undo_list]
  • Item #1
  • Item #2
  • Item #3
[/undo_list]

[redo_list]
  • Item #1
  • Item #2
  • Item #3
[/redo_list]

[speech_list]
  • Item #1
  • Item #2
  • Item #3
[/speech_list]
 

[attention_list]
  • Item #1
  • Item #2
  • Item #3
[/attention_list]

[telephone_list]
  • Item #1
  • Item #2
  • Item #3
[/telephone_list]

[lock_list]
  • Item #1
  • Item #2
  • Item #3
[/lock_list]

[mail_list]
  • Item #1
  • Item #2
  • Item #3
[/mail_list]


HOW TO UPDATE

How can I get the latest version? Updates are free and it is easy to get the latest version. You need to log in to your Themeforest account, go to the "Downloads" page and download the theme again. You can download the installer file separately, but I recommend to download the entire package, because the documentation and other files may change too.

Installation: You don't have to delete the previous version of the theme to install the latest one, because all of the updated versions have their own directory inside the wp-content/themes folder. Just upload the installer zip and that's all.

Menu locations: The wordpress will handle the new version as a different theme, so you have to select again your menu(s) for the relevant theme location(s).

I modified my theme. Will I lose all of the mods? No, the new installation won't overwrite or delete your previuos developement, but your modifications won't be inherited. As you can read above, this version has its own directory, so it won't use your modified files at all. But if you are satisfied with your website, and the one of the earilier versions runs great, you don't have to update it. It is just a possibility, it is not a must :)

And that's all. All of the other options will be imported automatically.



FAQ / TROUBLESHOOTING

I would like to notice that this is the very first version of theme. My beta testers and me did our best to avoid every issues and I think the theme works without problems, but if you find anything that doesn't work perfectly, please don't contact me instead of underrate the theme. I'll do my best to solve your problems as soon as possible. My email address is info@magna-themes.com.

It seems none of the animations work on the homepage ( slider, portfolio overlay etc... ).

All of the animations are powered by compilicated javascript functions, so the problem should be javascript releated. The theme can work together with well written plugins without any problems, but there are some plugins out there that uses bad practices. If you experience the mentioned issues, please try to deactivate all of your plugins first. If this method doesn't help, please write me a support ticket with the url of your site if possible.

How can I change the order of the portfolio / service / about items?

As we know the wordpress is blog engine in default case. The mentioned content types are powered by custom post types and the Worldpress handles their items as blog posts. WP always shows the latest post first, so you can change the order by changing the post dates of the selected elements. If you find this way uncomfortable, feel free to try out the Post Type Order plugin. It works well for me.

How can I change the order of the portfolio categories?

Unfortunately Wordpress doesn't allow their users to change the categories, but there is a plugin that solves this problem: Category Order. It is a quite old plugin, but still works well.

The ajax driven elements ( portfolio and sevice item ) don't load into the homepage properly.

Change the permalinks to default. In fact the ajax loaded elements should well with all of the available permalinks, but some servers don't support ajax calls with permalinks other than default.

How can I add a new section?

This is the most common question that I receive in email :) In the version versions below 1.2 there were no any chance to add a new section without modify the code. In the version 1.2 there are three text sections that can be edited via a rich text editor on the "Theme settings --> Homepage" page. These section are inactive in default, but you can activate them on the same page. The menu identifiers of the these sections are quite plain:

Text section1: - #text1
Text section2: - #text2
Text section2: - #text3

Please check the navigation chapter of this documentation if the menu "identifier" word doesn't make a sense.

The Contact form doesn't work. What am I suppose to do?

Emailing is one of the most complicated part of webdevelopment. There are several things that may cause the misfunction of the contact form. Fortunately the theme contains two alternative solutions in order to avoid problems with the contact form.

1) If you can't receive emails, go to the "Theme settings --> Contact form" page and check the "Disable PhpMailer" option. Click "Save Changes" , refresh your site and try out the form. Note: the PhpMailer is the script behind the contact form. It is a widely used and very reliable mail sending php class, but some servers don't support it. If you select the mentioned option, the theme will use the wp_mail() function instead of the PhpMailer.

2) The theme is compatible with the Contact Form 7 plugin. It is the most popular and most reliable contact form plugin. Install the plugin, create a form ( or use the form that the plugin offers in default ) and paste its shortcode into the "ContactForm 7 shortcode" field on the "Theme settings --> Contact form" page then save the settings. Now the new form should appear on the contact section.

3) If none of the alternatives above work, try to install the Easy WP SMTP plugin.. This plugin allows you to configure and send all outgoing emails via a SMTP server. This is very helpful, because there are lot of hosting companies that doesn't support mail() function on their server.

The form works, but I receive the messages into the spam folder.

In this case you can try the solution 3) of the previous question, or simply allow emails from the address that sends the contact form messages.


CREDITS

Javascript:

Photos on the demo site

Icons