芝麻web文件管理V1.00
编辑当前文件:/home/prismawe/clients/_syntaxis.fr/wp-content/themes/chimera/documentation/readme.html
<!DOCTYPE html> <html lang="en"> <head> <!-- Basic Meta and Title --> <meta charset="utf-8"> <title>Chimera WordPress Theme | Documentation</title> <meta name="description" content=""> <meta name="author" content="Dan Richardson"> <!-- Mobile Device Meta --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- CSS Files --> <link rel="stylesheet" href="css/style.css" media="all"> <link rel="stylesheet" href="css/media.css" media="all"> <!--[if lt IE 9]><link rel="stylesheet" href="css/ie.css"><![endif]--> </head> <body id="top"> <!-- PAGE HEADER Start --> <div id="header"> <div class="container"> <h1><strong>Chimera - WordPress Theme</strong> Documentation</h1> <img src="images/logo.png" height="28" alt="Subatomic Themes" /> </div> </div> <!-- PAGE HEADER End --> <!-- PAGE INTRO Start --> <div id="intro"> <div class="container"> <div id="meta" class="sixteen columns"> <ul> <li>Created: 03/03/2014</li> <li>Author: Dan Richardson</li> <li><a href="http://themeforest.net/user/SubatomicThemes">Contact Me</a></li> </ul> <p>Thank you for choosing <strong>Chimera</strong> as your new WordPress theme. Below you will find all the information you need to get started, including installation, setup, and customization. However, if you have any more questions that are beyond the scope of this help file, then please feel free to contact me via <a href="http://themeforest.net/user/SubatomicThemes">my profile page</a>. Thank you!</p> </div> <div id="toc" class="sixteen columns"> <h1 class="aligncenter">Table of Contents</h1> <ol> <li><a href="#introduction">Introduction</a></li> <li><a href="#install-wordpress">Installing WordPress</a></li> <li><a href="#install-theme">Installing Chimera</a></li> <li><a href="#child-theme">Creating a Child Theme</a></li> <li><a href="#custom">Custom Header & Background</a></li> <li><a href="#install-plugins">Installing the Plugins</a></li> <li><a href="#import">Importing Demo Data</a></li> <li><a href="#portfolio">Building a Portfolio</a></li> <li><a href="#team">Building your Team</a></li> <li><a href="#shortcodes">Using the Shortcodes</a></li> <li><a href="#options">The Theme Options Panel</a></li> <li><a href="#slider">Using the Slider</a></li> <li><a href="#widgets">Using the Widgets</a></li> <li><a href="#contact">Adding a Contact Form</a></li> <li><a href="#credits">Sources & Credits</a></li> </ol> </div> </div> </div> <!-- PAGE INTRO End --> <!-- MAIN CONTENT Start --> <div id="primary" class="container" role="main"> <div id="introduction" class="section-heading sixteen columns"> <h1>A - Introduction</h1><a href="#top">Back to Top</a> </div> <div class="sixteen columns"> <p>A big Thank You for purchasing Chimera - A Light, Bright WordPress Theme. If you are trying to brighten up your current site, you couldn't have picked a better theme! The following guide will help you to install WordPress and Chimera, as well as setting up your blog and portfolio, and getting to grips with the Plugins, Widgets and Shortcodes.</p> <p>Chimera comes with Three custom widgets and several page templates to help you get the most out of your site. Also included is the Chimera Shortcodes Plugin. This plugin adds extra functionality to allow you to generate content quickly and easily. But to completely get the most out of Chimera, it is compatible with some popular and useful plugins such as Contact Form 7.</p> <p>I hope you enjoy working with Chimera and if you have any questions, requests or find any bugs, please leave a comment in the item's comment page over at <a href="http://themeforest.net" target="_blank">themeforest.net</a>. This is the best place because everyone can benefit. For more intensive customization feel free to <a href="mailto:subatomicdan@gmail.com">send me an email</a>. Enjoy!</p> </div> <hr> <div id="install-wordpress" class="section-heading sixteen columns"> <h1>B - Installing WordPress</h1><a href="#top">Back to Top</a> </div> <div class="sixteen columns"> <p>Installing WordPress on your web server is easy. Each web host is different but when you log in to your dashboard there's usually an option that allows you to install WordPress automatically.</p> <p>In the unlikely event that your web host does not have this option, you can follow this guide from the WordPress codex, which gives more detailed information on how to install WordPress on your web server, or locally on your machine.</p> <p><a href="https://codex.wordpress.org/Installing_WordPress">codex.wordpress.org/Installing_WordPress</a></p> <div class="note"> <p><strong>Important: </strong>Since this theme uses the latest features of WordPress, be sure to upgrade to the latest version once you have installed it. The latest version is 3.8 as of writing.</p> </div> <div class="tip"> <p><strong>Tip:</strong> If you would like to install WordPress locally on your machine, a really simple solution is to use Instant WordPress. you can download it from <a href="http://www.instantwp.com/" target="_blank">www.instantwp.com</a></p> </div> </div> <hr> <div id="install-theme" class="section-heading sixteen columns"> <h1>C - Installing Chimera</h1><a href="#top">Back to Top</a> </div> <div class="sixteen columns"> <p>After you've installed WordPress and upgraded to the latest version (highly recommended), you are now ready to install Chimera. You can do this one of two ways, I'll start with the first which is the easiest;</p> <h2>The Quick and Easy Way</h2> <p>After you have downloaded the ZIP package from Themeforest, you will need to extract all the files first. If your computer does not have any tools to do this, you can use <a href="http://www.winzip.com/win/en/index.htm" target="_blank">WinZip</a>, <a href="http://7-zip.org/" target="_blank">7-Zip</a>, or <a href="http://winace.com/" target="_blank">WinAce</a>.</p> <p>Next, log in to your WordPress dashboard and navigate your way to the <strong>Themes</strong> page:</p> <img src="images/install-01.jpg" alt="Themes Page" /> <p>Now click on "Add New Theme":</p> <img src="images/install-02.jpg" alt="Add New Theme" /> <p>This will take you to the "Install Themes" page. From here, click on Upload:</p> <img src="images/install-03.jpg" alt="Click on Upload" /> <p>You can now browse your computer and find where you extracted the download package. You will need to find and select the file "chimera-theme.zip". (It needs to be the ZIP file and NOT the folder) and then click on "Install Now":</p> <img src="images/install-04.jpg" alt="Upload File" /> <p>From here you will have a choice to either return to the Dashboard, or Preview your site with the new Chimera theme installed. If you choose "preview", you can customize some of the settings such as the background colour or background image. If you choose to do this, make sure you activate the theme by clicking on "save".</p> <p>And that's it! Chimera should now be installed on your WordPress site. If, for some reason, you are having difficulties, there is an alternative way...</p> <h2>The Alternative Way</h2> <p>Along with the ZIP file of the theme, there is also an unzipped version which is a stand alone folder named "chimera-theme". If you have access to your web server via an FTP client such as FileZilla, you can upload the "chimera-theme" folder directly. All you need to do is upload the folder into the "themes" directory. The path to the themes directory is usually as follows:</p> <pre>http://www.yoursite.com/wordpress/wp-content/themes/</pre> <p>Once you have done this, you can proceed through the step below to activate the theme.</p> <img src="images/activate.jpg" alt="Activate Theme" /> </div> <hr> <div id="child-theme" class="section-heading sixteen columns"> <h1>D - Creating a Child Theme</h1><a href="#top">Back to Top</a> </div> <div class="sixteen columns"> <p>If you plan on modifying any of the code for Chimera once you've installed it, it's always good practice to create a "Child Theme" to work with instead. If you work with the theme directly and decide to modify any of its code, then when a newer version of the theme is released, all of your changes will be overwritten. Below is a brief example of how you begin this process</p> <img src="images/child-01.jpg" alt="Child Theme Folder Structure" /> <p>Inside this new folder, create a new file called <strong>style.css</strong>. This is the only file required to make a Child Theme. Within this new CSS file, you will need to have the following code:</p> <img src="images/child-02.jpg" alt="Child CSS File" /> <p>Now all of your changes in this file will override the original stylesheets from the parent theme. The same rule applys to any of the files you need to change. Simply create a new file of the same name and edit away! There are more detailed instructions on how to create a Child Theme over at the <a href="https://codex.wordpress.org/Child_Themes" target="_blank">WordPress codex</a>. </p> </div> <hr> <div id="custom" class="section-heading sixteen columns"> <h1>E - Custom Header & Background</h1><a href="#top">Back to Top</a> </div> <div class="sixteen columns"> <p>As well as a Theme Options panel, Chimera also supports some of WordPress' extra customization features, like the background and header customizer. You can edit these by going into the WordPress dashboard, and navigating to the <strong>Appearance</strong> side menu.</p> <img src="images/customize.jpg" alt="Customize Menu" /> <p>From here you can change the header background image for the inner pages and also choose to have a colour or image for the main body's background.</p> </div> <hr> <div id="install-plugins" class="section-heading sixteen columns"> <h1>F - Installing the Plugins</h1><a href="#top">Back to Top</a> </div> <div class="sixteen columns"> <p>Although the theme will now work just fine, there are some plugins that Chimera makes great use of. You may have noticed one of which came in the download package. It's called Chimera Shortcodes. This plugin is located in the "plugins" folder. Other plugins that Chimera uses include the <strong>Custom Content Portfolio</strong> and <strong>Breadcrumbs</strong> by Justin Tadlock, and the <strong>Woothemes My Team</strong> by Woothemes. The manner in which we install the Chimera Shortcodes differs from the others, so we'll start with that one...</p> <h2>Chimera Shortcodes</h2> <p>Installing a plugin is very similar to installing a theme. You simply need to upload the plugin in a ZIP format. From the WordPress dashboard, navigate your way to the plugins page and click on "add new":</p> <img src="images/plugin-01.jpg" alt="Plugin Add New" /> <p>In the same directory as the theme's ZIP file, you will have noticed the "chimera-shortcodes.zip" file. This is the file you need to upload. Again, this is very similar to the way you installed the theme:</p> <img src="images/plugin-02.jpg" alt="Upload Plugin" /> <img src="images/plugin-03.jpg" alt="Install Plugin" /> <p>Last but not least, we need to activate the plugin if you haven't already done so. Navigate back to the Plugins page, find Chimera Shortcodes in the list, and click "activate":</p> <img src="images/plugin-04.jpg" alt="Activate Plugin" /> <h2>The Other Plugins</h2> <p>Installing the extra plugins is a little different from the above because these particular plugins are found on in the WordPress plugin directory. This guide will take you through installing the <strong>Custom Content Portfolio</strong>. To install the rest, you simply need to repeat the following steps.</p> <p>Navigate to the Plugins page once more, and then click on "Add New" just like you did earlier. This time, instead of uploading, we are going to do a search. Type in "custom content portfolio" (without the quotes) in the search field and click "Search Plugins":</p> <img src="images/plugin-05.jpg" alt="Plugin Search" /> <p>The search results should show the Custom Content Portfolio somewhere at the top of the results page. All you need to do is simply click on "Install Now" and thats it!</p> <img src="images/plugin-06.jpg" alt="Plugin Install" /> <p>Dont't forget to activate the plugin after installing it! You will be prompted if you are sure you want to install each of these plugins, just click "yes".</p> <p>Now the process is exactly the same for the other plugins. The remaining plugins you can install are as follows:</p> <ul> <li><strong>Breadcrumb Trail</strong> - By Justin Tadlock</li> <li><strong>Our Team</strong> - By Woothemes</li> <li><strong>Contact Form 7</strong> - By Takayuki Miyoshi</li> </ul> <p>To find these easily, do a search for "breadcrumb trail", "our team woothemes", and "contact form 7" respectively (without the quotes). After that, your plugin page should now look similar to the following:</p> <img src="images/plugins-list.jpg" alt="Plugin List" /> <p>You should also have a couple of extra menu options too...</p> <img src="images/menu.jpg" alt="WordPress Menu" /> <p>All your plugins are ready to go! And don't forget, if you ever wanted to change themes, you can take all of the plugin content with you. Thats the great thing about using plugins! Don't forget, the above plugins are only meant to enhance your experience, you don't need them for the theme to function properly.</p> <p>More information about how to use these plugins are described further down this document.</p> </div> <hr> <div id="import" class="section-heading sixteen columns"> <h1>G - Importing Demo Data</h1><a href="#top">Back to Top</a> </div> <div class="sixteen columns"> <p>If you liked the demo site for Chimera, then you'll be pleased to know that the data is available as an XML file for you to import into your WordPress site. This can be found in the "demo-data" folder along with a text file that has all the theme options data too. Here's a brief guide on how to import the data. Before we start, it is important to note that you should install all of the recommended plugins in order to get all of the data. Also, the images have been replaced with dummy images for licensing reasons. If you would like these images, they can be purchased from photodune.net</p> <p>First, go to your WordPress dashboard and navigate your way to the <strong>Tools -> Import</strong> page from the side menu. On this page, there is an option for you to import content from another system. Click on the WordPress option:</p> <img src="images/import-01.jpg" alt="Import Page" /> <p>Now all you need to do is click on "Browse" and find the file named "wordpress-demo-data.xml" then click on "Upload File and Import". Be sure to check the box that says "Download Attachments". The process may take a little while, so go and make yourself a cup of tea :)</p> <img src="images/import-02.jpg" alt="Theme Options" /> <p>All of the demo posts and pages should now be available in addition to the content you already have on your site. Now we just need to import the theme options data. To do this, return to your WordPress dashboard and navigate to the Theme Options page and go to the Import and Export menu:</p> <img src="images/import-03.jpg" alt="Theme Options Data" /> <p>As stated in the screenshot above, enter the text from the "chimera-theme-options-data.txt" file (this is in the same folder as the "wordpress-demo-data.xml" file) and click the "Import Options" button.</p> </div> <hr> <div id="portfolio" class="section-heading sixteen columns"> <h1>H - Building a Portfolio</h1><a href="#top">Back to Top</a> </div> <div class="sixteen columns"> <p>Now that we have our Custom Content Portfolio plugin installed and activated (if not, information on how to do this is described above), we can begin building a portfolio of work. Portfolios are useful if you are a Photographer, Artist, Graphic Designer or just have a lot of nice work to show off!</p> <img src="images/portfolio-01.jpg" alt="Portfolio Page" /> <p>First begin by navigating to the Portfolio page. You'll notice that creating Portfolio Items is very similar to creating blog posts. This is because the Portfolio is another type of "post" known as a Custom Post Type. Click on "Add New":</p> <img src="images/portfolio-02.jpg" alt="Portfolio Add New" /> <p>You will now see a familiar screen if you are used to writing regular blog posts. For now, I have created a new title for the project; "Choo-Choo Train" just as an example. This is followed by some dummy text. Instead of dummy text, you will want to put some information about your project.</p> <img src="images/portfolio-03.jpg" alt="Project Details" /> <p>Next, we will add some meta info including a portfolio name and a project URL. The portfolios work similar to post "tags". These will be useful later on when we display portfolios on the front end.</p> <img src="images/portfolio-04.jpg" alt="Portfolio Tags and URL" /> <p>The name I've given here is "Business". You could use something relevant like "Trains". Similarly, you should try and keep your projects in the relevant portfolios just like you do with your posts and tags.</p> <p>Now we just need to upload a featured image to use as the project's thumbnail. This will appear on the front end later on. Again, this is similar to featured images in regular posts.</p> <img src="images/portfolio-05.jpg" alt="Featured Image" /> <p>This is all that you need to create a project. Now you will need to keep adding more projects and give them different portfolios. For the sake of this example I have created a small portfolio of items. You should end up with something similar to this;</p> <img src="images/portfolio-list.jpg" alt="Portfolio List" /> <p>Now we need to create a new page to display our new portfolio. All we need to do is go to our "Pages" screen and add a new page. I'm going to assume you are already somewhat familiar with creating new pages in WordPress since its one of the core features. The only difference is, we're going to be using one of Chimera's portfolio page templates instead of the default one.</p> <img src="images/portfolio-page.jpg" alt="Portfolio Page" /> <p>You can insert content too as you normally would, and the portoflio section will appear after it. You should end up with something like this:</p> <img src="images/portfolio-grid.jpg" alt="Portfolio Grid" /> <p>Notice the filter buttons are the same name you gave to your portfolios. And this is followed by a nice grid layout. There is also a nice hover effect with a link to the project post and a link to a lightbox gallery.</p> <div class="note"> <p><strong>Note: </strong>Due to naming conflicts, name your page something other than "Portfolio" (e.g. use "Our Portfolio" or something similar) or simply change your permalink settings.</p> </div> <p>And thats all there is to creating a simple portfolio with filter controls. The example above shows a layout of four columns, but there are pages for a three and five column grid layout, and its fully responsive!</p> </div> <hr> <div id="team" class="section-heading sixteen columns"> <h1>I - Building your Team</h1><a href="#top">Back to Top</a> </div> <div class="sixteen columns"> <p>Chimera makes use of the <strong>Woothemes My Team</strong> plugin for you to add staff or team members to your site. To begin using this, you will first need to download and install this plugin if you haven't already done so. View the section above for details on how to so this.</p> <p>Adding team members is very similar to adding posts to your site. The first thing we'll do, is add a new team member. Start by navigating to the "Team Members" page and clicking on "Add New":</p> <img src="images/team-01.jpg" alt="Add New Team Member" /> <p>As mentioned before, editing a Team Member is just like editing a regular post. So give the post a title (In this case, it's a team member's name). Follow this with a description for the new team member, for this example I've used dummy text.</p> <img src="images/team-02.jpg" alt="Team Member Title and Description" /> <p>And, just like regular posts, you can also set a Featured Image. For this, you will want to upload a photo of the person. It's highly recommended that the size should be 230x230 pixels.</p> <img src="images/team-03.jpg" alt="Team Member Photo" /> <p>Further down this page, you will also come across additional fields that are specific to this type of post. These include a "Role" and several links to social media profiles and their tooltip text. Fill these out where necessary. The ones you don't need just leave them blank.</p> <img src="images/team-04.jpg" alt="Extra Fields" /> <p>Once all this is done, simply go ahead and publish! You can repeat this process as many times as required. I've created three more team members just as an example. You should have a Team Members page that looks something similar to this:</p> <img src="images/team-list.jpg" alt="List of Team Members" /> <h2>Displaying Team Members on a Page</h2> <p>Its a good idea to create a new page (like an "about" page for example) to display your team members on. There are various ways of displaying them too, including using a widget or a Shortcode that generates them. More information on how to use these Shortcodes can be found further down this page.</p> </div> <hr> <div id="shortcodes" class="section-heading sixteen columns"> <h1>J - Using the Shortcodes</h1><a href="#top">Back to Top</a> </div> <div class="sixteen columns"> <p>When you downloaded this theme, there was a plugin included in the download package called "chimera-shortcodes". You'll need to install this plugin first if you haven't already done so. See the chapter above on how to install plusgins if you're not sure how to do this. With this plugin activated, you will now be able to use the shortcodes when editing posts and pages. Below, you will find a full list of all available shortcodes along with their usage and purpose.</p> <div class="note"> <p>Although you can use these shortcodes in any theme, they may look different due to the theme's styling.</p> </div> <h2>Shortcode Generator</h2> <p>When you start editing posts and pages, you will notice an extra dropdown select menu in the TinyMCE editor. This drop down contains all of the Shortcodes available in Chimera and will generate them for you without typing them out all the time!</p> <img src="images/shortcode-generator.jpg" alt="Shortcode Generator" /> <h2>Column Shortcodes</h2> <p>These will allow you arrange your content into columns. There are many peramters you can use to control the layout not just on desktop, but for Mobile and Tablet displays. Example usage:</p> <pre> [col grid="50"] Your content... [/col] </pre> <p>The example above will create a column that is 50% the width of it's parent container. You can specify the percentage in increments of five (e.g. 25, 30, 35, 75 etc.) or, if you need a column that takes up a third of it's parent, you can use 33, or 66 for two thirds. Here's a more advanced example:</p> <pre> [col grid="25" tgrid="50" mgrid="100"] Your Content... [/col] </pre> <p>This will display the column at twenty five percent on a desktop display, fifty percent (half) on a Tablet display and one hundred percent (full) on a Mobile display. you can also hide columns on specific devices like so:</p> <pre> [col grid="100" thide="true" mhide="true"] Your Content... [/col] </pre> <p>This will simply hide the content when viewed on a Tablet and Mobile device. There are many more ways to display columns including using "Prefix" and "Suffix" which are the equivilant to using empty columns. Here's an example:</p> <pre> [col pre="25" col="50" suf="25"] Your Content... [/col] </pre> <p>This example will create an empty column that is twenty five percent (one quarter) wide, followed by a column that is fifty percent (one half) wide which will have all of your content in, followed by another empty column that is another twenty five percent (one quarter) in width. You may have noticed that this adds up to one hundred percent. This is important to remember when laying out your columns so that everything flows nicely together down the page.</p> <div class="note"> <p><strong>Remember:</strong> <strong>pre</strong> will create empty space before the main column, and <strong>suf</strong> will create empty space after.</p> </div> <p>There are a few more paremeters you can use to give you even more control. <strong>dfirst</strong> will specify the first column in a row when displayed on a desktop, and remove any left padding, keeping the column vertically aligned with the left side of the page. You can also use this method for "nested" columns. Likewise <strong>dlast</strong> will remove the right padding. More control is given for this for Tablet and Mobile displays by using <strong>tfirst</strong> and <strong>mfirst</strong> as well as <strong>tlast</strong> and <strong>mlast</strong> respectively.</p> <div class="note"> <p><strong>Note:</strong> If you are using the page template named "Page - Full Width" then it is unlikely you will need to use these.</p> </div> <p>Here is a complete list of available perameters and their possible values:</p> <ul> <li><strong>grid</strong> - 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 33, 66</li> <li><strong>tgrid</strong> - 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 33, 66</li> <li><strong>mgrid</strong> - 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 33, 66</li> <li><strong>pre</strong> - 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 33, 66</li> <li><strong>suf</strong> - 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 33, 66</li> <li><strong>dfirst</strong> - true, false</li> <li><strong>tfirst</strong> - true, false</li> <li><strong>mfirst</strong> - true, false</li> <li><strong>dlast</strong> - true, false</li> <li><strong>tlast</strong> - true, false</li> <li><strong>mlast</strong> - true, false</li> <li><strong>dhide</strong> - true, false</li> <li><strong>thide</strong> - true, false</li> <li><strong>mhide</strong> - true, false</li> </ul> <h2>Button Shortcodes</h2> <p>There are several button shortcodes available to use should you wish to link to a specific article, page or use for an external link. Here's a basic example:</p> <pre> [button] Your Content... (this is usually the button's label) [/button] </pre> <p>Between the opening and closing tags, you would normally put the button's label (e.g. "View Post"). Here is a more advanced example:</p> <pre> [button style="dark" url="http://www.eaxmapleurl.com"] Your Content... (this is usually the button's label) [/button] </pre> <p>This example will display a button with a "dark" style and link to the URL specified in the <strong>url</strong> peramemter. Here are the complete list of perameters and their possible values:</p> <ul> <li><strong>style</strong> - dark, big</li> <li><strong>url</strong> - URL path (i.e. a web address)</li> </ul> <h2>Pie Chart Shortcode</h2> <p>These shortcodes will allow you to display information in the form of a Pie Chart. These could be used for a multitude of purposes, such as displaying statistics or a set of skills. Example usage:</p> <pre> [pie fill="50" number="1234" title="Clients Reached"] </pre> <p>The above example will display a Pie Chart that is Fifty Percent full (specified in the "fill" perameter), and have the number "1234" displayed in the middle, and finally a title at the bottom that reads "Cleints Reached". Here are the complete list of perameters and their possible values:</p> <ul> <li><strong>fill</strong> - 10, 20, 30, 40, 50, 60, 70, 80, 90, 100</li> <li><strong>number</strong> - Any string (usually numeric)</li> <li><strong>title</strong> - Any string</li> </ul> <div class="tip"> <p><strong>Tip:</strong> You can determin the size of the Pie Chart by "nesting" them inside column shortcodes! See the example below...</p> </div> <pre> [col grid="25"] [pie fill="50" number="25" title="Coffees Drank"] [/col] </pre> <h2>Icon Box Shortcode</h2> <p>This shortcode will output content with an Icon inside. Take a look at this example...</p> <pre> [iconbox icon="user" align="right"] Your Content... [/iconbox] </pre> <p>This example will output your content with an icon aligned to the right. The content you enter can be anything you like. You can also "nest" these inside column shortcodes like so...</p> <pre> [col grid="25"] [iconbox icon="user" align="right"] Your Content... [/iconbox] [/col] </pre> <p>This example will keep your Icon Boxes in columns with a width of Twenty Five Percent. This means you could have four Icon Boxes in a row. There are some examples of this in the <strong>section</strong> shortcodes which are available from the dropdown menu in the TinyMCE editor when editing posts and pages. Here is a list of parameters and their possible values:</p> <ul> <li><strong>icon</strong> - This is a Font Awsome icon reference. For a full list of available icons, you can <a href="http://fortawesome.github.io/Font-Awesome/cheatsheet/" target="_blank">visit the cheatsheet here</a>.</li> <li><strong>align</strong> - left, right</li> </ul> <h2>Special Header Shortcodes</h2> <p>This Shortcode will allow you to display a heading in a certain style that is not usually available normally. There are two types, one that has a repeating background pattern, and one that is centered and includes a subtitle. Here is an example:</p> <pre> [heading type="1" title="Your Title" subtitle="This is your subtitle text"] </pre> <p>The code above will output a centered heading along with a subtitle (this is what the type="1" indicates). If this parameter is left out, it will default to the other style. Here is a list of all the parameters and their available values:</p> <ul> <li><strong>type</strong> - 1</li> <li><strong>title</strong> - Any string</li> <li><strong>subtitle</strong> - Any string</li> </ul> <h2>Pricing Column Shortcode</h2> <p>Pricing columns are a useful way of showing your visitors what different pricing packages you have on offer. This shortcode will generate a list of features a package has, along with a price, title and "Buy Now" button:</p> <pre> [pc title="Standard Package" price="29.99" subtext="per month" button="Buy Now!" buttonurl="http://www.exampleurl.com" star="true"] Your Content Here... Usually a list of items. [/pc] </pre> <p>This example will have a title, a price, some subtext, and a button that links to a custom URL. The "star" parameter will put a star above the column indicating that it could be a special offer or something similar. All parameters and values are listed below:</p> <ul> <li><strong>title</strong> - Any string</li> <li><strong>price</strong> - Any string (usually a numeric value)</li> <li><strong>subtext</strong> - Any string</li> <li><strong>button</strong> - Any string</li> <li><strong>buttonurl</strong> - Button URL (e.g. a web address)</li> <li><strong>star</strong> - true, false</li> </ul> <h2>Accordion Shortcode</h2> <p>This shortcode will allow you to display multiple accordions on one page. There is also the option to make it into a toggle instead. Here's an example:</p> <pre> [acc title="Accordion Title" open="true" type="toggle"] Your Content Here... [/acc] </pre> <p>This example will turn the "toggle" mode on and also make it "open" by default. The parameters and values are as follows:</p> <ul> <li><strong>title</strong> - Any string</li> <li><strong>open</strong> - true, false</li> <li><strong>type</strong> - toggle (leave blank for default behaviour)</li> </ul> <h2>Tabs Shortcodes</h2> <p>Tabs need to be grouped together in order to work properly, so this shortcode is a little more complicated. Take this example:</p> <pre> [tabs names="tab1:tab2:tab3"] [tab name="tab1"] Content for Tab One... [/tab] [tab name="tab2"] Content for Tab Two... [/tab] [tab name="tab3"] Content for Tab Three... [/tab] [/tabs] </pre> <p>The above code will generate three tabbed areas (tab1, tab2 and tab3), the main thing you need to remember here is that the names in the <strong>names</strong> parameter matches those in each "tab" name and that the names are seperated by a semi-colon (:).</p> <h2>Team Member Shortcodes</h2> <p>If you have installed the <strong>Woothemes My Team</strong> plugin, you will be able to use this shortcode to display team members. Here is an example:</p> <pre> [member id="1" align="right"] </pre> <p>The above example will show a team member with the ID of "1" (The post ID can be found in the permalink) with its alignment set to "right". This means that the post thumbnail (the team members photo) will be aligned right.</p> <ul> <li><strong>id</strong> - the ID of the post</li> <li><strong>align</strong> - left, right (defaults to left)</li> </ul> <h2>Team Section Shortcode</h2> <p>This shortcode is similar to the one above, except that it will display your most recent team members. Here's an example:</p> <pre> [team num="4"] </pre> <p>This simple example will display the last four team members from the "team_members" post type.</p> <h2>Blog Listing Shortcode</h2> <p>You can display a small extract from any blog post using this shortcode. Here's an example:</p> <pre> [blog id="1"] </pre> <p>This very simple example will display the post thumbnail image, title and author from the post with an ID of 1.</p> <h2>Blog Section Shortcode</h2> <p>Similar to the above shortcode, but this will display a list of blog posts in a masonry style layout like in the following example:</p> <pre> [latest num="8"] </pre> <p>This will show that last eight blog posts not including any sticky posts.</p> <h2>Page Divider Shortcode</h2> <p>This special shortcode allows you to create a page seperation with a background image. The background images can be configured in the theme options panel. There are different types available which are listed below. Here's an example:</p> <pre> [divider image="1" type="portfolio" num="5"] Your Content Here (depending on the divider "type")... [/divider] </pre> <p>This example will create a page divider with the background image "1" which was saved in the background manager of the theme's options panel. The type is a list of portfolio items and it will display a total of five. There are other types available which are stated in the "type" parameter.</p> <ul> <li><strong>image</strong> - A number (configured in the theme's options panel)</li> <li><strong>type</strong> - map, portfolio, gallery</li> <li><strong>num</strong> - A number (used only on the portfolio type)</li> </ul> <h2>Testimonial Shortcode</h2> <p>The teestimonial shortcode provides you with a way to display quotes on your site. These can also be used within the column shortcode too. Here is an example:</p> <pre> [testimonial thumb="http://exampleurl.com/thumb.jpg" author="John Smith" company="JS Manufacturing Ltd." url="http://authorsurl.com"] Your Testimonial Content Here... [/testimonial] </pre> <p>This example will display a testimonial with a thumbnail URL, the authors name, company and a link to their website. Here's a full list of parameters along with their possible values:</p> <ul> <li><strong>thumb</strong> - URL to the thumbnail. This can be found by viewing the image you wish to use from your media library and looking under "File URL".</li> <li><strong>author</strong> - Any string</li> <li><strong>company</strong> - Any string</li> <li><strong>url</strong> - URL link to the authors site</li> </ul> <h2>Slider Shortcode</h2> <p>This shortcode will allow you to place a slider within your post or page's content. You will need to insert the images in between the shortcode tags yourself by using WordPress' media uploader. The best way to do this, is to upload all of the images at once. Here's an example:</p> <pre> [slider timeout="5000" effect="tileBlind"] Your Content Here... Ususally a row of inline images [/slider] </pre> <p>The example above will display a slider with a timeout delay between slides of 5000 milliseconds (5 seconds) and have a transition effect of "tileBlind". Here are a list of parameters and their values:</p> <ul> <li><strong>timeout</strong> - A number in Milliseconds (e.g. 1000 = 1 second)</li> <li><strong>effect</strong> - tileBlind, tileSlide</li> </ul> <div class="note"> <p><strong>Note: </strong>If the slider appears broken (If you see a column of images), then switch to the "text" view in the visual editor and see if your tags are displaying in the correct order. There should be no stray <p> tags in between the <img> tags.</p> </div> </div> <hr> <div id="options" class="section-heading sixteen columns"> <h1>K - The Theme Options Panel</h1><a href="#top">Back to Top</a> </div> <div class="sixteen columns"> <p>Chimera comes with an easy-to-use, intelligent Theme Options Panel. Its worth taking the time to look through these options so that you can see what modifications you are able to make throughout your site. You can upload favicons, change certain colour settings in the footer, and even choose from over 600 fonts from Googles massive font library!</p> <p>Each of the options has a brief description of what it does and is fairly self explanitory. If, however, you are having any issues then please let us know in the item comments.</p> </div> <hr> <div id="slider" class="section-heading sixteen columns"> <h1>L - Using the Slider</h1><a href="#top">Back to Top</a> </div> <div class="sixteen columns"> <p>We have incorporated the Fraction Slider into Chimera. It's a slider thats more rubust and dynamic than your typical slider and is fully responsive!. There are a total of Four slides available to edit, and each slide is able to have many images grouped together. The way it works is quite simple:</p> <p>Each slide has "elements", these are images that you can upload and assign values to so that you can position it and customize its transition effect. The transition effects available are "Top Left", "Top", "Top Right", "Right", "Bottom Right", "Bottom", "Bottom Left", "Left", "Fade", and "None". These are the directions in which the image will transition in and out from. The other value is "Delay", and it's this value that you will use to determin how long until the transition IN will take. All elements will transition out at the same time. Here's a brief tutorial on how to set up a slide:</p> <img src="images/slider-01.jpg" alt="Slider Menu" /> <p>First, navigate your way to the Slider Settings page in within the Theme Options menu. Then, when you scroll down, you will see the available slides you can edit along with their elements.</p> <img src="images/slider-02.jpg" alt="Slider Elements" /> <p>When you reveal an elements panel, you will have a variety of other settings to configure. Here is a breif rundown of each one and their purpose:</p> <img src="images/slider-03.jpg" alt="Element Options" /> <ul> <li><strong>Title</strong> - This is the title of your element, this is just for you to recognize each one individually</li> <li><strong>Image URL</strong> - Use WordPress' native media uploader to insert an image from your media library</li> <li><strong>Animation In</strong> - This is the transition "in" effect</li> <li><strong>Position from the TOP</strong> - The position of the element from the top in pixels</li> <li><strong>Position from the LEFT</strong> - The postition of the element from the left in pixels. This is relative from the centered container. You can use negative values to place elements outside of the container</li> <li><strong>Delay</strong> - This is how long the delay will be before the element begins to transition "in". Set the number in milliseconds (e.g. 1000 milliseconds = 1 second)</li> <li><strong>Animation Out</strong> - This is the transition "out" effect</li> </ul> </div> <hr> <div id="widgets" class="section-heading sixteen columns"> <h1>M - Using the Widgets</h1><a href="#top">Back to Top</a> </div> <div class="sixteen columns"> <p>There are five Widget areas in Chimera that you can use with the default WordPress widgets, and some exlusive Widgets made especially for the theme. Adding the new Widgets is exaclty the same as adding any other Widget. Simply go to your Widgets page in your WordPress dashboard and drag them over. Chimera comes with three new Widgets: Chimera Contact Details, Chimera Flickr Feed, and Chimera Recent Posts. Here's a brief explanation of each one;</p> <h2>Chimera Contact Details</h2> <p>This Widget will display some introductory text, much like WordPress' text Widget, followed by some contact details including and address, phone number and email address.</p> <h2>Chimera Recent Posts</h2> <p>This Widget is very similar to WordPress' default recent posts widget. The only difference is that you can include the featured images as a thumbnail.</p> <h2>Chimera Flickr Feed</h2> <p>This is a nice Widget that displays a small thumbnail gallery of your latest Flickr images. There are two ways to display images: The first is to enter your unique Flickr ID number. The second way is to enter some tags and seperate each tag with a comma (e.g. snow, christmas, cold). Finally, you can choose how many images you want to show from the feed.</p> </div> <hr> <div id="contact" class="section-heading sixteen columns"> <h1>N - Adding a Contact Form</h1><a href="#top">Back to Top</a> </div> <div class="sixteen columns"> <p>Chimera is compatible with the <strong>Contact Form 7</strong> plugin for when you need to add a functional contact form to your site. In order to use this plugin, you must first install it. There are details on how to do this further up the page in the "Install Plugins" section.</p> <p>You may notice that adding a contact form is again, very similar to adding a normal post. Firstly, navigate your way to the "Contact" page and you'll see that there is a demo contact form already available. You can either modify this, or create an entirely new one. It's completely up to you:</p> <img src="images/contact-01.jpg" alt="Contact Page" /> <p>The following screenshot is a form that I built myself for the Demo site of this theme. As you can see, you can combine a mixture of HTML and the tags that are specific to each of the forms fields. To learn more about the tags and how to configure your contact form, please visit the plugins <a href="http://contactform7.com/getting-started-with-contact-form-7/" target="_blank">documentation page</a>. Once you have configured your form, simply copy and paste the shortcode into a page on your site.</p> <img src="images/contact-02.jpg" alt="Copy Shortcode" /> </div> <hr> <div id="credits" class="section-heading sixteen columns"> <h1>O - Sources & Credits</h1><a href="#top">Back to Top</a> </div> <div class="sixteen columns"> <h2>CSS, Javascript and jQuery Plugins</h2> <ul> <li><strong>Easing</strong> - (<a href="http://www.gsgd.co.uk/sandbox/jquery/easing/" target="_blank">Visit Site</a>)</li> <li><strong>Fitvids</strong> - (<a href="http://fitvidsjs.com/" target="_blank">Visit Site</a>)</li> <li><strong>Formalize</strong> - (<a href="http://formalize.me/" target="_blank">Visit Site</a>)</li> <li><strong>Fraction Slider</strong> - (<a href="http://jacksbox.de/stuff/jquery-fractionslider/" target="_blank">Visit Site</a>)</li> <li><strong>Mixitup</strong> - (<a href="http://mixitup.io/" target="_blank">Visit Site</a>)</li> <li><strong>Poshytip</strong> - (<a href="http://vadikom.com/demos/poshytip/" target="_blank">Visit Site</a>)</li> <li><strong>Slimbox 2</strong> - (<a href="http://www.digitalia.be/software/slimbox2" target="_blank">Visit Site</a>)</li> <li><strong>Superfish</strong> - (<a href="http://users.tpg.com.au/j_birch/plugins/superfish/" target="_blank">Visit Site</a>)</li> <li><strong>TinyNav</strong> - (<a href="http://tinynav.viljamis.com/" target="_blank">Visit Site</a>)</li> <li><strong>zFlickrFeed</strong> - (<a href="http://www.zazar.net/developers/jquery/zflickrfeed/" target="_blank">Visit Site</a>)</li> <li><strong>Font Awesome</strong> - (<a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Visit Site</a>)</li> <li><strong>Unsemantic Grid</strong> - (<a href="http://unsemantic.com/" target="_blank">Visit Site</a>)</li> </ul> <h2>Options Framework</h2> <ul> <li><strong>Slighly Modified Options Framework (SMOF)</strong> - (<a href="https://github.com/syamilmj/Options-Framework" target="_blank">Visit Site</a>)</li> </ul> <h2>WordPress Plugins</h2> <ul> <li><strong>Woothemes Our Team</strong> - by <a href="http://wordpress.org/plugins/our-team-by-woothemes/" target="_blank">Woothemes</a></li> <li><strong>Breadcrumb Trail</strong> - by <a href="http://wordpress.org/plugins/breadcrumb-trail/" target="_blank">Justin Tadlock</a></li> <li><strong>Custom Content Portfolio</strong> - by <a href="http://wordpress.org/plugins/custom-content-portfolio/" target="_blank">Justin Tadlock</a></li> <li><strong>Contact Form 7</strong> - by <a href="http://wordpress.org/plugins/contact-form-7/" target="_blank">Takayuki Miyoshi</a></li> </ul> <h2>Images</h2> <p>Please note that all of the images used in the Demo site are NOT included within the download package. These can be purchased individually from <a href="http://photodune.net/" target="_blank">Photodune</a>.</p> </div> <hr> <!-- FOOTER Start --> <div class="footer sixteen columns"> <p>Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.</p> <p>Kind Regards,</p> <p><strong>Subatomic Themes</strong>.</p> </div> <!-- FOOTER End --> </div> <!-- MAIN CONTENT End --> </body> </html>