Back to top
List of items

Start editing

First of all, thank you for your purchase (if you purchased Forte, of course)!

Then, let's start with the documentation... and sorry for my bad English!

Recommendations

The customizations you make in the admin panel provided by Forte, are written as CSS code in the <head> of the site. This happens by default. But a better practice would be to use an external css file. Forte can do this if you activate this feature in Forte admin panel → General → Very general → Put your custom CSS inline (you must switch this field off). In this case Forte tries to create a css file and upload it to your "uploads" directory.

To do that you need to set the file permissions of this directory on your server wp-content / uploads to 777. If you don't know what file permissions (or CHMOD) are or how to change them, you can google about that (click here) or read the Wordpress official documentation. If you prefer, you can set a more safe CHMOD after deciding your theme is ok and you don't want to customize anymore, just remember to set the file permissions to 777 again if you change idea.

Sometimes it happens that the server doesn't allow to create a file via PHP, as Forte does. In this case you must contact your provider and ask them if you have any limitation with the use of the PHP function file_put_contents(). If your server doesn't allow to use this function, you can switch on again the button Forte admin panel → General → Very general → Put your custom CSS inline.

. . . . .

Another important thing is remember to unistall the official Wordpress Importer plugin, since Forte already has its version of this plugin, with some changes I made to make it compatible with my custom posts and the dummy content available in the file you downloaded from ThemeForest. If you leave the official plugin installed it will return an error message.

. . . . .

If you are installing Forte as a restyle of an old Wordpress site, probably you have on your server a lot of images with the sizes set by the theme you are using before restyling. Forte needs images with particular sizes and it creates them when you upload a new image. But for the images already uploaded on your server you must install and run a very useful plugin: Regenerate Thumbnails. It regerates the images on your server following the sizes set by the theme you are using.

Start

The file you downloaded from ThemeForest contains several folders:

Installation

Once you downloaded Forte, you have two options to install it:

  1. by using an FTP client (FileZilla, Dreamweaver, FireFTP or similar) upload the "forte" folder to
    your_root / wp-content / themes
  2. directly from the Wordpress administration, go to "Appearance" and click the "Install Themes" tab. Then click  "Upload", the second link. With the browse button find the aforementioned "forte.zip" file, then click "Install now". That's all!

In both cases, once you activated Forte theme, you will re-direct in the general admin page of Forte, where you can begin to personalize your theme.

Admin panel

Once you activated Forte, you'll be redirected to the Forte custom admin panel. Here you can decide almost everything: here is a tree of its features with some explanations:

General

This section contains:

Very General

Here you can decide the name displayed on the admin menu, the logotype to show on the login page, the logo to display on the admin page itself, so you can brand your installation as you prefer.

Then you can decide to display or hide the link to the changelog file, you can decide if you want to receive the tweets about the theme itself (very useful to know when a new version of Forte is available, but this can conflict with some server rules, especially for the countries where Twitter is banned), or you can decide to use AJAX to save data or reload the page all the times (if you don't have problem, I recommend the first solution).

If the Twitter notifications are active, when a new tweet regarding Forte has published, a red icon will be visible beside the Twitter icon itself.

As already explained, in this section you can also decide to put your custom CSS into the <head> of the site or into an external file, read above.

IMPORT/EXPORt

When you are satisfied of a skin you created you can export it by clicking the button called "Export". A txt file will be generated with all the options you saved on the Forte admin panel. This tool is not referred to the blog content, but it works only with the custom options of the theme panel.

You can also import your saved options you already exported or you can import a default skin I provided on the file you downloaded from ThemeForest, you can find the skins in the folder called Assets → Skins.

You can import them by clicking the button called "Import skin styles", in this way you will replace all the settings regarding the style (colors, images, fonts... but not, for instance, the logo, if you have one, or other customizations regarding the brand) of your admin panel. As more backups as you can are recommended before doing that.

Otherwise you can import a skin by clicking the button called "Import skin contents", so you will replace all the settings regarding the content (titles, subtitles, logos, SEO...) of your admin panel. Also in this case as more backups as you can are recommended.

There is also another folder in Assets called Contents. It contains some default content:

Side icons

The side icons are icons that stay on the right side and on the left side of your site. You can decide to use them as simple links (to link to your Twitter account, for instance), or to open a hidden-sliding sidebar. To associate a sidebar to an icon first of all you must create a sidebar in Forte admin panel → Sidebars. You can decide the color of the icons, their backgrounds (different for each icon), drag and order them up or down, decide the opacity of their background. The icons are taken in part from FontAwesome and in part are original.

Header

In this section you can decide to display a particular animation of the elements of the header (site title or logo, site description and first level menu items). When you visit a page of the site, if you come from another site, these elements descend from the top of the screen with a short animation. If you come from another page of your site, there insn't any animation.

You can also decide the position of the header (fixed or scrollable with the site), the background of the header section, its text color, the opacity of the background color, a background image and a logo too. You can decide the color of the border above the header and its shadow.
The images can be always uploaded by using the upload button, just remember to click the button called "File URL" before clicking "Insert into post" (see the screeshot) because the field called "Link URL" above this button can't be empty.

You can also decide the font-family of the site title and the site description. After clicking the button called "Load the Google fonts" a list of fonts taken from the Google web font repository will be available to be selected. You can select the family, the variant and the subset available. The main list is constantly updated, but by clicking the button you will display only a small list. To add or remove fonts to this list go to Forte admin panel → Typography → Google fonts (pay attention: this page contains a long list of fonts and it takes several seconds to load, the more fonts you switch on the more seconds will take the server to load the list of fonts when you click the button called "Load the Google fonts"). When you select a font you can always get the CSS selector to manipulate via CSS your choice.

You also have two panels to paste some code to prepend or append (it means at the beginning or at the end) of the <head> tag. Very useful, for instance, if you want to use Typekit or similar.

Here you can decide the font and the colors of the first level menu and of the dropdow menus, and you can decide the color of the buttons that replaces the navigation menu when the screen becomes to small to display all the first level labels on the same row.

About the fonts: after clicking the button called "Load the Google fonts" a list of fonts taken from the Google web font repository will be available to be selected. You can select the family, the variant and the subset available. The main list is constantly updated, but by clicking the button you will display only a small list. To add or remove fonts to this list go to Forte admin panel → Typography → Google fonts (pay attention: this page contains a long list of fonts and it takes several seconds to load, the more fonts you switch on the more seconds will take the server to load the list of fonts when you click the button called "Load the Google fonts").

Main section

In this section you can simply decide to display or hide the breadcrumbs and the title section. Screenshots are available directly in the admin panel to understand what these sections are.

On this section you can decide the colors and the images of the footer and the background of the credits area. The images can be always uploaded or selected from the media library by using the upload button, just remember to click the button called "File URL" before clicking "Insert into post" (see the screeshot) because the field called "Link URL" above this button can't be empty.

You can also decide to display or hide the credits area or the widget area. On the widget area you can select up to four sidebars (to create a sidebar you must go to Forte admin panel → Sidebars and add a sideba, then you must add some widgets to the sidebars on Appearance → Widgets). If you decide to leave empty a column that could contain a sidebar, the sidebar before that will fit the space left empty.

On this section you can also paste, at the very bottom of the page, on the text-area called "Append something to the footer (Google Analytics script or anything else)", some code that you want to execute at the end of the document, such as the script for an analytics tool or your own javascript function.

On this section you can decide the position of the sidebar (on the right or on the left side). Then you can decide its colors: text, links, highlighted text, list bullets, secondary color, backgrond color and background image too. The images must be always uploaded or selected by using the upload button, just remember to click the button called "File URL" before clicking "Insert into post" (see the screeshot) because the field called "Link URL" above this button can't be empty.

Sliding sidebars

On this section you can decide the colors of the sliding sidebars, the hidden sidebar you can display by clicking the side icons, if associated: text, links, highlighted text, list bullets, secondary color, colors of the scrollbars and of the "close" button, backgrond color and background image too. The images must be always uploaded or selected by using the upload button, just remember to click the button called "File URL" before clicking "Insert into post" (see the screeshot) because the field called "Link URL" above this button can't be empty.

SEO

On this section you can type the meta title, the meta description and the meta keywords of your site. These are only the default ones, because you can set title, description and keywords of each page, posts, category, gallery etc.

You can also decide to simply deactivate the SEO tool available in Forte to use a third party plugin.

Twitter (if activated)

You can see this tab only if activate the Twitter notification on Forte admin panel → General → Admin panel → Receive tweets. If your server doesn't have any problem to receive notifications from Twitter I recommend to enable this tab, because each time a new tweet regarding Forte has published, a red icon appears on this tab. This is one way to know when a new version of the theme is available on ThemeForest. The other way is subscribing the newsletter. You can subscribe the newsletter here: http://www.pixedelic.com/themes/forte/sign-up-for-updates/ No other communications or spam will be send, only the update notifications and the info about how to update the theme.

News about Forte

On this section you can read the last tweets regarding Forte. Usually they are notifications about a new release.

Tweets by Pixedelic

On this section you can read some tweets from the main account of the developer of Forte (me) regarding other projects (themes, plugins etc.).

Typography

Google fonts

In this section you can find a list of the fonts available on the Google web font repository. The list is regularly updated. By default only a small part of the list is activated to save time when you load the list itself. In facts this tab takes many seconds to be loaded, because of the length of the list. When you want to use a "Google font", only the fonts you activated on this list are loaded, and this allows to you to save time. Just switch on or off the fonts you prefer to make them available on your admin panel

General

On this section you can decide the primary and the secondary fonts to use on your site. To add or remove fonts to this list go to Forte admin panel → Typography → Google fonts (pay attention: this page contains a long list of fonts and it takes several seconds to load, the more fonts you switch on the more seconds will take the server to load the list of fonts when you click the button called "Load the Google fonts"). When you select a font you can always get the CSS selector to manipulate via CSS your choice.

Headings

On this section you can decide the font family, size, color etc. of the headings. After clicking the button called "Load the Google fonts" a list of fonts taken from the Google web font repository will be available to be selected. You can select the family, the variant and the subset available. The main list is constantly updated, but by clicking the button you will display only a small list. To add or remove fonts to this list go to Forte admin panel → Typography → Google fonts (pay attention: this page contains a long list of fonts and it takes several seconds to load, the more fonts you switch on the more seconds will take the server to load the list of fonts when you click the button called "Load the Google fonts"). When you select a font you can always get the CSS selector to manipulate via CSS your choice.

Colors advanced

Layout colors & images

On this section you can upload your favicon, select the color use as background of your site.

You can also set the default title section: the background color, the background image, the behavior of the background image (pattern, cover, portrait), the alignment (background-position), the text color, the background of the text too and its opacity, the borders and the inner shadow of the section itself.

The images must be always uploaded or selected by using the upload button, just remember to click the button called "File URL" before clicking "Insert into post" (see the screeshot) because the field called "Link URL" above this button can't be empty.

Main elements

On this section you can decide:

The images must be always uploaded or selected by using the upload button, just remember to click the button called "File URL" before clicking "Insert into post" (see the screeshot) because the field called "Link URL" above this button can't be empty.

Buttons

With Forte you can select the style of five buttons, they are used in many places of the theme itself. Here you can select the background, the border, the text color and the font family. After clicking the button called "Load the Google fonts" a list of fonts taken from the Google web font repository will be available to be selected. You can select the family, the variant and the subset available. The main list is constantly updated, but by clicking the button you will display only a small list. To add or remove fonts to this list go to Forte admin panel → Typography → Google fonts (pay attention: this page contains a long list of fonts and it takes several seconds to load, the more fonts you switch on the more seconds will take the server to load the list of fonts when you click the button called "Load the Google fonts"). When you select a font you can always get the CSS selector to manipulate via CSS your choice.

Forte allows you to activate different styles for the buttons in the footer, in the sidebars and in the sliding sidebars, you only need to switch off a button (one for each area, of course). In this case you can select the colors (not the font-family) of the buttons when displayed in one of these areas.

Forms

On this section you can edit your forms, both the comment forms and the form you create on Forte admin panel → Contact forms. You can edit:

Tooltips & Colorbox
In this section you can edit your tooltips, the background color, the text color and the opacity.

You can aslo select the skin of the ColorBox plugin (http://www.jacklmoore.com/colorbox) between a range of five skins.

On this section you can edit the page navigation numbers, the color, the background of the current page, and the font. After clicking the button called "Load the Google fonts" a list of fonts taken from the Google web font repository will be available to be selected. You can select the family, the variant and the subset available. The main list is constantly updated, but by clicking the button you will display only a small list. To add or remove fonts to this list go to Forte admin panel → Typography → Google fonts (pay attention: this page contains a long list of fonts and it takes several seconds to load, the more fonts you switch on the more seconds will take the server to load the list of fonts when you click the button called "Load the Google fonts"). When you select a font you can always get the CSS selector to manipulate via CSS your choice.

In this section you can generate your sidebars, manage and delete them. Once you create a sidebar, you must go to Appearance → Widgets to put some widgets in your sidebars. When you create a sidebar be sure to use latin character only, lowercase, no empty space and no special character (however a javascript function will check that too). You can't use the same name twice.

Slideshows

Here you have a useful slideshow generator.

create your slideshows

In this section you can create a slideshow by typing its unique name (better lowercase text without any space or special character) and clicking "CREATE THE SLIDESHOW" button. Once you created a slideshow you'll see it in the section below the generator button. Here you can delete the sidebars or duplicate too (very useful to make the translation of a slideshow, for instance).

If you created some slideshows on the sidebar you'll see the tabs with the names you used for the slideshows themselves. By clicking one of them you can manage the slideshow itself. You can add slides, elements to each slide, sort them with a useful drag&drop tool and compose them with a visual composer. I recommend to you to watch the video tutorial on the demo site.

You can decide to display or hide the commands for each slideshow and at what screen size replace the slideshow with a simple image.

Slideshow colors

In this section you can manage the various colors of the slideshows: the commands, the loader, the caption.

Contact forms

Here you have a useful contact form generator.

create your forms

In this section you can create a form by typing its unique name (better lowercase text without any space or special character) and clicking "CREATE THE FORM" button. Once you created a form you'll see it in the section below and in the sidebar, below this tab.

If you created some forms in the sidebar you'll see the tabs with the names you used for the forms. By clicking one of them you can manage the form itself:

Then you can add the fields you want to have in your form:

These fields (except for email and captcha) can be required or not. You can drag and drop them, remove them and change its label or name. Each of these fields generates a shortcode visible on the box itself, in the field called "Output". You can edit the content of this field, if you prefer, by using HTML, just pay attention to not modifify the shortcodes.

Price tables

Here you have a useful price table generator.

create your tables

In this section you can create a a table by typing its unique name (better lowercase text without any space or special character) and clicking "CREATE THE TABLE" button. Once you created a table you'll see it in the section below.

If you created some tables, you'll see the tabs with the names you used for the tables themselves on the sidebar. By clicking one of them you can manage the table itself.

The table generator displays the column vertically and not horizontally, because of the layout of the admin panel, you can expand or contract a column on the admin panel to better work on the table.

With a useful drag&drop system you can easily manage the position of the elements on a table.

Table colors

In this section you can manage the various colors of the price tables:

Blog

Here you can admin many of the traditional features of a Wordpress blog.

Posts (general)

On this section you can decide to display or hide:

Pages (general)

On this section you can decide to display or hide:

Latest posts page

The latest posts page is your main blog page. You can set your blog page on Settings → Reading. You can decide that your latest posts page is your front page, or set a static page as front page and another static page as posts page.

The first field of this section is called "Select your blog page". It doesn't overwrite the option you set in Settings → Reading, but this field is useful to set, for instance, particular options for your blog page, such as the meta title, the meta description, the template etc. For instance, if you set that your front page is your blog page too, you can always use the settings of a particular static page to determine the template and the meta tags to use, just select the page in this field.

Conversely, if you set a static page as your blog page on Settings → Reading, you must select in this case the same page too.

Then you can select:

404 page

The 404 page is the page displayed when the user attempts to follow a broken link.

On this section you can set:

Archive pages

The archive pages are the pages that display a list of posts. They can display posts by a particular author, of a date, a month, posts with the same tag or of the same category (even if below this tabs you can manage all your category pages).

On this section you can set:

Category pages

This is not a title of a section, because after the "Archive pages" tab you have as many tabs as many the categories are and each tab has the name of a category. So for any category you can set:

search results page

The search results pages are the pages that display a list of posts as a result of some key-words you typed into the search form. Forte provieds a widgets with a search form where you can decide to filter the search results and display only some kind of posts (posts, pages, products etc.).

On this section you can set:

The related posts are posts that have the same tags. In this section you can set:

Portfolio

In this section you can admin the settings of the custom post type called Portfolio and its items.

Portfolio items

In this section you can set:

Portfolio galleries

This is not a title of a section, because after the "Portfolio items" tab you have as many tabs as many the galleries are and each tab has the name of a gallery. The galleries are for the portfolio items the equivalent of the categories for the blog posts, nothing else.

For any gallery you can set:

Portfolio archives

The portfolio archive pages are the pages that display a list of portfolio items. They can display items by a particular author, of a date, a month, portfolio items with the same tag.

On this section you can set:

The related portfolio items are posts that have the same tags. In this section you can set:

 

WooCommerce

This section is available only if you installed WooCommerce plugin.

General

In this section you can set:

Colors

In this section you can set:

Styles

This is a simple textarea where you can add some custom styles and write them in the database, so you won't loose anything when you'll update Delight theme.

Permissions

Here you can decide the permission of any tab of the Forte admin panel, if you want to make them visible to administrator, editor, subscriber etc.

Utilities

If you have many categories or many galleries, the list of category or gallery name can be very long and this makes hard to use the Forte admin panel. In this case, by entering this section, you can decide to hide or show the categories and the galleries you prefer.

Posts

Forte, more than a normal Wordpress installation, provides on the posts backend the following features:

The page builder

The page is an intuitive composer available for posts, pages and portfolio items. I recommed to watch the video tutorial in this case to easily understand how it works: http://www.pixedelic.com/themes/forte/the-page-builder/

Page options BOX

Here you can

SEO

Here you can type the the meta tags useful for the Search Engine Optimization practice: the meta title, the meta description and the meta keywords. For the first and the second ones a counter displays how many charachters are recommended (it's just my personal theory).

Select a sidebar

Here you can select one of the sidebars you generated in the "Sidebar generator" section (read above).

 

Pages

For the pages read the section "Posts" above: the features are the same.

Portfolio

Portfolio is a custom post type created inside Forte that allows you to admin your galleries. It works exactly as a normal post. It has the same custom boxes (read above the "Posts" section).

The only difference is the box called "Featured image properties", where you can decide to display or hide the featured image on the top of the page itself and to enlarge the featured image when you click it

How to translate Forte