Afetec_Web/referencia/plantillas/positive-premium-multipurpose-wordpress-theme/documentation/documentation.html
david ca1c2fb259 Cambios
git-svn-id: https://192.168.0.254/svn/Proyectos.Afetec_Web/trunk@2 828b2857-b6d9-ce4d-95e2-bbc4707c23a3
2011-10-21 20:29:19 +00:00

559 lines
36 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CloudFw - Theme Positive Documentation</title>
<link rel="stylesheet" href="assets/reset.css" type="text/css" />
<link rel="stylesheet" href="assets/doc_style.css" type="text/css" />
<link rel="stylesheet" href="assets/js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="assets/js/jq.js"></script>
<script type="text/javascript" src="assets/js/scrollTo.js"></script>
<script type="text/javascript" src="assets/js/custom.js"></script>
<script type="text/javascript" src="assets/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(function(){
//usage w/ smoothscroll
$(document).ready(function() {
//set the link
$('#top-link').topLink({
min: 600,
fadeSpeed: 500
});
});
$('#tableofcontents ol li a, a.go').click(function(){
$.scrollTo( this.hash, 1000);
return false;
});
$("a.lb").fancybox();
});
</script>
</head>
<body>
<div id="document">
<div id="header">
<div id="logo"></div>
<div id="author"><em><strong>by “<a href="http://themeforest.net/user/orqun/" target="_blank">OrkunGURSEL</a> contact@orkungursel.com</strong></em></div>
</div>
<div id="content">
<div id="left">
<div id="tableofcontents">
<div class="back_title text-center">Table Of Contents</div>
<ol>
<li><a href="#requirements">Requirements</a></li>
<li><a href="#getting_started">Getting Started</a>
<ul>
<li><a href="#downloading">Downloading from Themeforest</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="#setup_homepage">Setting up the Homepage</a></li>
<li><a href="#setup_blog">Setting up the Blog</a></li>
<li><a href="#setup_portfolio">Setting up the Portfolio</a></li>
<li><a href="#setting_up_navigation_simple">Setting up the Navigation Menu (Simple)</a></li>
<li><a href="#setting_up_navigation_megamenu">Setting up the Navigation Menu (With Mega Menu)</a></li>
<li><a href="#setting_up_sliders">Creating a slider and inserting into a page</a></li>
<li><a href="#color_skins">Custom Color Skins</a></li>
</ul>
</li>
<li><a href="#how-to">How-to</a>
<ul>
<li><a href="#featured_images">Set Featured Image</a></li>
<li><a href="#login_module">Activate Custom Login Module</a></li>
<li><a href="#setting_up_typo">Setup Typography Options</a></li>
</ul>
</li>
</ol>
</div>
</div>
<div id="right">
<div id="thedocument-border">
<div id="thedocument">
<div id="thanks">
Thank you for purchasing Theme Positive. This theme is easy to use and it has user-friendly admin panel - CloudFw. I hope you like it. If you have any question or problem about the theme please contact us by using <a href="http://support.cloudfw.net/" target="_blank">our support center</a>. However before getting support, please read this documentation and watch video tutorials. They will help you. And also please don't forget to read How-to section. Enjoy it! <span id="thanks-author">Author - Orkun Gursel</span>
</div>
<ol>
<li id="requirements"> <h1>Requirements</h1>
<p class="normal">
<ul class="normal">
<li>PHP version 5 or greater</li>
<li>WordPress 3.0 or greater</li>
</ul>
</p>
</li>
<li id="getting_started"> <h1>Getting Started</h1>
<p class="normal">
<ul>
<li id="downloading"><h2>Downloading from Themeforest</h2>
<p>Download the Positive theme and unzip this download. Any good quality zip program will do. Just follow the unzip instructions of your program carefully. Some give you the option of unzipping only a portion, or all, of the files. You want to select "all". Once unzipped, you will find the following folders will be in the unzipped directory:</p>
<div class="cau normal"> <span class="cau-init">
<ul>
<li><code><strong>positive/</strong></code> - the folder of the theme files that you need upload to <em>/wp-content/themes/</em> folder on your server</li>
<li><code><strong>documentation/</strong></code> - documentation files for current package</li>
<li><code><strong>licensing/</strong></code> - license for the theme</li>
<li><code><strong>resource/</strong></code> -
<ul>
<li><code><strong>sample skins/</strong></code> - importable skin files</li>
<li><code><strong>sample sliders/</strong></code> - importable slider files</li>
<li><code><strong>plug-ins/</strong></code> - optional plug-ins which can be used with the theme</li>
<li><code><strong>psd/</strong></code> - all layered psd sources</li>
</ul>
</li>
<li><code><strong>change log/</strong></code> - Log files for the theme updates</li>
</ul>
</span> </div>
</li>
<li id="installation"><h2>Installation</h2>
<p>To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex - <a href="http://codex.wordpress.org/Installing_WordPress">http://codex.wordpress.org/Installing_WordPress</a></p>
<p>When you are ready to install a theme, you must first upload the theme files and then activate the theme itself. The theme files can be uploaded in two ways:</p>
<p class="normal">
<ul class="normal">
<li><strong>FTP Upload:</strong> Using your FTP program, upload the non-zipped theme folder into the /wp-content/themes/ folder on your server.</li>
<li><strong>WordPress Upload:</strong> Navigate to Appearance > Add New Themes > Upload. Go to browse, and select the zipped theme folder. Hit “Install Now” and the theme will be uploaded and installed.</li>
</ul>
</p>
<p>Once the theme is uploaded, you need to activate it. Go to <code>Appearance</code> > <code>Themes</code> and activate your chosen theme.</p>
</li>
<li id="setup_homepage"> <h2>Setting up the Homepage</h2>
<p>To set up the homepage you must create a new page, you can do so by navigating to <code>Pages</code> > <code>Add New</code>. You can give this page a title yet you do not have to include any content. Select the a template from the Page. Attributes section and click <strong>"Publish"</strong>.</p>
<p>Once you have created your new page, navigate to <code>Settings</code> > <code>Reading</code> and configure the <code>Front Page Displays</code> setting. Select the static page option and choose the page you just created as your front page.</p>
<p>Your homepage is now created and can be viewed by visiting your root URL.</p>
<p>Or you can create a sample homepage with one click. Here is the video tutorial to create sample homepage via <strong>Configuration Wizard</strong>:</p>
<p class="embed"><iframe src="http://www.screenr.com/embed/WBgs" width="600" height="366" frameborder="0"></iframe></p>
</li>
<li id="setup_blog"> <h2>Setting up the Blog</h2>
<p id="creating_blog_page"><strong>A) Creating Main Blog Page</strong></p>
<p>To set up the blog, you must create a new page, you can do so by navigating to <code>Pages</code> > <code>Add New</code>. You can give this page a title of "blog" yet you do not have to include any content. Click <strong>"Publish"</strong>.</p>
<p>Once you have created your new page, navigate to <code>Settings</code> > <code>Reading</code> and configure the <code>Front Page Displays</code> setting. Select the static page option and choose the page you just created as your posts page.</p>
<p>Your blog index is now created and can be viewed by visiting the page you just published.</p>
<p>Or you can create a sample blog page with one click via <strong>Configuration Wizard</strong>:</p>
<p class="embed"><img src="assets/screenshots/setup_blog_1.png" alt=""/></p>
<p id="inserting_blog_post"><strong>B) Inserting A Blog Post and Changing the Layout of the Main Blog Page</strong></p>
<p class="embed"><iframe src="http://www.screenr.com/embed/GtCs" width="600" height="366" frameborder="0"></iframe></p>
</li>
<li id="setup_portfolio"> <h2>Setting up the Portfolio</h2>
<p>There is 2 ways to create a portfolio page with Positive Theme.</p>
<p id="portfolio_by_category"><strong>A) By creating portfolio posts and porfolio category</strong></p>
<p class="embed"><img src="assets/screenshots/setup_portfolio_1.png" alt=""/></p>
<div class="cau normal"> <span class="cau-init">
<ul>
<li>First, you must create some portfolio posts, you can do so by navigating to <code>Portfolio</code> > <code>Add New</code></li>
<li>When creating your portfolio post please be sure to set a <strong>featured image</strong> for each of them. The image will be displayed as the thumbnail when the portfolio post being called via shortcode from any page.
<p class="embed"><img src="assets/screenshots/setup_portfolio_2.png" alt=""/></p>
</li>
<li>And take a look at the porfolio settings for each post from "Portfolio Options" metabox. You can insert a description or set what will happen when clicking the post (go to the post, display this post's featured image or video in the lightbox, call this post's content via ajax) or insert a video url.
<p class="embed"><img src="assets/screenshots/setup_portfolio_4.png" alt=""/></p>
</li>
<li>After creating the porfolio posts, you must create a new page, you can do so by navigating to <code>Pages</code> > <code>Add New</code>. You can give this page a title of "portfolio".</li>
<li>And now you must use our <code>shortcode generator</code>, which is coming with built-in the content editor of WordPress
<p class="embed"><img src="assets/screenshots/setup_portfolio_3.png" alt=""/></p>
</li>
<li>Click to portfolio tab in the shortcode generator, then set the height of the thumbnail images in the portfolio and other options, select a portfolio source:
<ul>
<li>If you create a porfolio post you can select "From a porfolio category" - this source type will get all posts in the porfolio category which you select</li>
<li>You must select "From selected posts" for getting the post, which selected by you, into the page.</li>
</ul>
</li>
<li>And finally click to <code>Generate The Portfolio Code</code> button. You will have a shortcode like this:
<code>[portfolio from="a category" id="5" columns="3" limit="-1"]</code> or <code>[portfolio from="selected posts" id="19,15,17" columns="3" limit="-1"]</code>
</li>
</ul>
</span> </div>
<br/>
<p>Video Tutorial For (A- Setting up the Portfolio by creating portfolio posts and porfolio category)</p>
<p class="embed"><iframe src="http://www.screenr.com/embed/axCs" width="600" height="366" frameborder="0"></iframe></p>
<br/>
<p id="portfolio_by_gallery"><strong>B) By WordPress galleries</strong></p>
<div class="cau normal"> <span class="cau-init">
<ul>
<li>You must create some portfolio posts, you can do so by navigating to <code>Portfolio</code> > <code>Add New</code>You can give this page a title of "The post has a gallery" </li>
<li>And open the media uploader of WordPress. And upload your images via the uploader. Click to <code>Save All Changes</code> button after being finished the uploading. And now you can sort the images. And finally close the uploader and "<strong>Publish</strong>" the post (<em>The post has a gallery</em>).
<p class="embed"><img src="assets/screenshots/setup_portfolio_5.png" alt=""/></p>
<p class="embed"><img src="assets/screenshots/setup_portfolio_6.png" alt=""/></p>
</li>
<li>Then you must create a new page, you can do so by navigating to <code>Pages</code> > <code>Add New</code>. You can give this page a title of "portfolio".</li>
<li>Now you must use our <code>shortcode generator</code>, which is coming with built-in the content editor of WordPress, to generate the portfolio shortcode.
<p class="embed"><img src="assets/screenshots/setup_portfolio_3.png" alt=""/></p>
</li>
<li>Click to portfolio tab in the shortcode generator, then set the height of the thumbnail images in the portfolio and other options, select <strong>From A Post Gallery</strong> option for Portfolio's Source. And select the post, you just created and titled as <em>The post has a gallery</em>, for source page
<p class="embed"><img src="assets/screenshots/setup_portfolio_7.png" alt=""/></p>
</li>
<li>And finally click to <code>Generate The Portfolio Code</code> button. You will have a shortcode like this:
<code>[portfolio from="a post gallery" id="5" columns="3" limit="-1"]</code>
</li>
</ul>
</span> </div>
<br/>
<p>Video Tutorial For (B- Setting up the Portfolio by WordPress galleries)</p>
<p class="embed"><iframe src="http://www.screenr.com/embed/lhCs" width="600" height="366" frameborder="0"></iframe></p>
</li>
<li id="setting_up_navigation_simple"><h2>Setting up the Navigation Menu (Simple)</h2>
<p class="embed"><iframe src="http://www.screenr.com/embed/pgCs" width="600" height="366" frameborder="0"></iframe></p>
</li>
<li id="setting_up_navigation_megamenu"><h2>Setting up the Navigation Menu (With Mega Menu)</h2>
<p class="embed"><iframe src="http://www.screenr.com/embed/pgCs" width="600" height="366" frameborder="0"></iframe></p>
</li>
<li id="setting_up_sliders"><h2>Creating a slider and inserting into a page</h2>
<p id="creating_slider"><strong>A) Creating a new slider</strong></p>
<div class="cau normal"> <span class="cau-init">
<ul>
<li>Navigate to <code>Slider Manager</code> and click to <code>Create New Slider</code> button</li>
<p class="embed"><img src="assets/screenshots/setup_slider_1.png" alt=""/></p>
<p class="embed"><img src="assets/screenshots/setup_slider_2.png" alt=""/></p>
</li>
<li>After giving your slider a title and selecting a slider type, click to <code>create</code> button.</li>
<li>Now you can see all options for the slider. Set your slider options and click to <code>Update The Slider</code> button.</li>
<li>After the options being updated, you must add your slider items to the slider. You can do so by clicking to the slider's title from the root page of <code>Slider Manager</code>
<p class="embed"><img src="assets/screenshots/setup_slider_3.png" alt=""/></p>
</li>
<li>And now click to <code>Add New Item</code> button to add a item to the slider. And upload your image and set the slider item options.</li>
</ul>
</span> </div>
<br/><br/>
<p id="inserting_slider"><strong>B) Inserting a slider into a page (excepts "Header Sliders")</strong></p>
<div class="cau normal"> <span class="cau-init">
<ul>
<li>Navigate to <code>Pages</code> > <code>Add New</code> or open an existing page in <code>editing mode</code>.</li>
<li>Now you must use our <code>shortcode generator</code>, which is coming with built-in the content editor of WordPress, to insert the slider into the page via a shortcode.
<p class="embed"><img src="assets/screenshots/setup_portfolio_3.png" alt=""/></p>
</li>
<li>Click to slider tab in the shortcode generator, select the slider you just created and click to <code>Generate The Code</code> Button. You will have a shortcode like this: <br/>
<code>[slider id="XXXXXXXXXXX"]</code>
</li>
</ul>
</span> </div>
<br/><br/>
<p id="inserting_header_slider"><strong>C) Inserting a "header slider" into a page</strong></p>
<div class="cau normal"> <span class="cau-init">
<ul>
<li>Navigate to <code>Pages</code> > <code>Add New</code> or open an existing page in <code>editing mode</code>.</li>
<li>Now, select the slider from <strong>Header Slider</strong> metabox on the page.
</li>
<li>Important: Header sliders cannot embedded via a shortcode, only you have to select it from the metabox to display on a page's header area.
<p class="embed"><img src="assets/screenshots/setup_slider_4.png" alt=""/></p>
</li>
</ul>
</span> </div>
<br/><br/>
<p><strong>D) Video tutorial: Creating a slider with Slider Manager & Inserting into a page</strong></p>
<p class="embed"><iframe src="http://www.screenr.com/embed/ekCs" width="600" height="366" frameborder="0"></iframe></p>
</li>
<li id="color_skins"><h2>Custom Color Skins</h2>
<p id="creating_color_skin"><strong>A) Creating a new color skin</strong></p>
<p class="embed"><iframe src="http://www.screenr.com/embed/wqCs" width="600" height="366" frameborder="0"></iframe></p>
<div class="cau normal"> <span class="cau-init">
<ul>
<li>Navigate to <code>CloudFw Panel</code> and click to <code>Color Skin</code> button</li>
<p class="embed"><img src="assets/screenshots/setup_skins_1.png" alt=""/></p>
</li>
<li>Click to <code>create</code> button and give a name for your custom color skin.
<p class="embed"><img src="assets/screenshots/setup_skins_2.png" alt=""/></p>
</li>
<li>Now you can see all color and layout options for the theme. Insert your colors and click to <code>Save</code> or <code>Save & Apply</code> button.</li>
<li><strong>Quick Tip:</strong> you can use <code>CTRL + S (win)</code> and <code>CMD + S (mac)</code> shortcut to save the color skin when in editing mode.</li>
</ul>
</span> </div>
<br/><br/>
<p id="importing_color_skin"><strong>B) Importing Predefined Color Skins</strong></p>
<p class="embed"><iframe src="http://www.screenr.com/embed/UtCs" width="600" height="366" frameborder="0"></iframe></p>
<div class="cau normal"> <span class="cau-init">
<ul>
<li>You can find predefined custom skins </li>
</ul>
</span> </div>
<p id="finding_color_skin_element"><strong>C) Finding a customizable element</strong></p>
<p class="embed"><iframe src="http://www.screenr.com/embed/0uCs" width="600" height="366" frameborder="0"></iframe></p>
<div class="cau normal"> <span class="cau-init">
<ul>
<li>When in color skin editing mode, click to <code>Search</code> button. By the way, you can use <code>CTRL + F (win)</code> or <code>CMD + F (mac)</code> shortcut.
<p class="embed"><img src="assets/screenshots/setup_skins_3.png" alt=""/></p>
</li>
<li>You will see the searching form, insert the code or title of an element. Example: <code>Header Background</code> or <code>HBG01</code>
<p class="embed"><img src="assets/screenshots/setup_skins_4.png" alt=""/></p>
<p>Please take a look at element title and codes</p>
</li>
</ul>
</span> </div>
<br/><br/>
<p id="code_list"><strong>D) Code list of the customizable skin elements</strong></p>
<div class="cau normal"> <span class="cau-init">
<ul>
<li><code>BG01</code> : Body Background</li>
<li><code>BG02</code> : Body Head Background</li>
<li><code>LNK</code> : General Link Elements</li>
<li><code>BRADIUS</code> : Global Border Radius Level</li>
<li><code>HBG01</code> : Header Background</li>
<li><code>HLINK</code> : Link Elements in the Header</li>
<li><code>HTEXT</code> : Text colors in the Header</li>
<li><code>NAVSTYLE</code> : Style of the Navigation Menu</li>
<li><code>NAVBG</code> : Navigation Line Background</li>
<li><code>NAVLNK</code> : Navigation Links (for only 1st Level)</li>
<li><code>NAVSHADOW</code> : Navigation Line Shadows</li>
<li><code>NAVARROW</code> : Current Navigation Menu Indicator (Arrow)</li>
<li><code>DDOWNBG</code> : Navigation Menu Drop Down Background</li>
<li><code>DDOWNLINK</code> : Navigation Menu Drop Down Links (for 2nd, 3rd.. Levels)</li>
<li><code>HOMEICON</code> : Home Icon Colors in The Header Line</li>
<li><code>MDBG</code> : Middle Area Background (Between the Navigation Menu and the Content Area)</li>
<li><code>MDHEIGHT</code> : Middle Area Height</li>
<li><code>BLURB</code> : Blurb Text Colors</li>
<li><code>BREADCRUMBLE</code> : BreadCrubmle Text Colors</li>
<li><code>CONTEXT</code> : Content Texts and Heading Colors (h1, h2 .. h6)</li>
<li><code>PORTOVERLAY</code> : Overlay Colors of Portfolio Posts</li>
<li><code>SBWIDGET</code> : Widget Title and Text Colors for the Left and Right Sidebar Areas</li>
<li><code>SBLINK</code> : Link Colors for the Left and Right Sidebar Areas</li>
<li><code>FTWIDGET</code> : Widget Title and Text Colors for the Footer Sidebar Areas</li>
<li><code>FTLINK</code> : Link Colors for the Footer Sidebar Areas</li>
<li><code>CSS</code> : Additional CSS Code</li>
</ul>
</span> </div>
<br/><br/>
</li>
</ul>
</p>
</li>
<li id="how-to"> <h1>How-to</h1>
<p class="normal">
<ul>
<li id="featured_images"> <h2>Set Featured Image</h2>
<div class="cau normal"> <span class="cau-init">
<ul>
<li>Navigate to <code>Pages</code> > <code>Add New</code> or open an existing post in <code>editing mode</code>.</li>
<li>Locate the <code>Featured Image module</code> and click the <strong>Set featured image</strong> link.
<p class="embed"><img src="assets/screenshots/setup_portfolio_2.png" alt=""/></p>
</li>
<li>You will see an uploading screen identical to that used when <a target="_blank" href="http://en.support.wordpress.com/images/#uploading-images">inserting an image</a> into a post or page. Follow the on-screen prompts to choose the image from your computer and upload it or choose it from one of the images already in your Media Library.</li>
<li>Once the image has successfully been uploaded, look underneath the sizing options, and click on the <strong>Use as featured image</strong> link.
<p class="embed"><img src="assets/screenshots/how_to_featured_image.png" alt=""/></p>
</li>
<li>Your Feature image is now set! You can close the Media selector once youve chosen the featured image. The image will then appear wherever a featured image is available.</li>
</ul>
</span> </div>
</li>
<li id="login_module"> <h2>Activate Custom Login Module</h2>
<p class="embed"><iframe src="http://www.screenr.com/embed/VuCs" width="600" height="366" frameborder="0"></iframe></p>
</li>
<li id="setting_up_typo"> <h2>Setup Typography Options</h2>
<p class="embed"><iframe src="http://www.screenr.com/embed/KzCs" width="600" height="366" frameborder="0"></iframe></p>
</li>
</ul>
</p>
</li>
</ol>
<div class="divider"></div>
</div>
</div>
</div>
<div class="fix"></div>
</div>
</div>
<div id="top-link"><a class="go" href="#tableofcontents"><strong>&Xi;</strong> go to the table of contents</a></div>
</body>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20657868-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</html>