1. Intro
  2. Startup
  3. Theme Setup
  4. Blog Setup
  5. Products Setup
  6. Theme Shortcodes
  7. Theme Widgets
  8. Bundled Plugins
  9. Assets
  10. CSS Structure
  11. PSD Files
  12. Sources and Credits

Delimondo Seafresh

Premium Responsive HTML/CSS Template


Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to email via the user page contact form on this page. http://themeforest.net/user/createit-pl/portfolio Thanks so much!

Startup


Installation

The theme can be installed by uploading it to your server via ftp in wp-content/themes folder. Copy themes directory into wp-content/themes of your WordPress installtion.
You can also use archive (zip file) from the theme's folder (after you've unarchived the package you've downloaded from Themeforest) and install it via Appearance > Themes > Install Themes tab. To use the theme you need to activate it.

Remember that you MUST install seafresh theme before any other flavour! Seafresh theme contains all required files, other themes are Child Themes only.

After installation you should see the following folder structure:

1-Click Demo Import

You can easily configure theme to look exactly like on a demo page. Once theme is activated, navigate to Appearance > Theme Options > General > 1-Click Demo Import and click "import" button.

That's it - your site is now ready!

XML import

Please refer to 1-Click Demo Import section to automatically setup Wordpress installation. All steps described below are configured by 1-Click Demo Import.

Before importing data and options you should set the appropriate values for the "Thumbnail size" and "Medium size" in "Image Size" section via Settings > Media.
To gain the same result for products list as on our demo site set the values for "Thumbnail size" to: Width: 74, Height: 65; and for "Medium size" to : Max Width: 600, Max Height: 130

1. Import content

You can import posts, pages, comments, categories and tags from your Wordpress export file via Tools > Import. You can use our demo data for the proper theme from the x_demo_content file in Demo Content folder.

2. Import options

If you have exported some previous Seafresh Theme options, you can load it via General > Import/Export section in Appearance > Theme Options. You can use our demo options for the proper theme from the .txt file in Demo Content folder.

Please remember to activate the main menu via Appearance > Menus

Simple configuration

In this chapter we will show you what you need to do to create a simple site using our theme. Deeper analysis on the functionality of the theme is provided in several next chapters. You can also see the usage showcase of the theme on our demo site

1. Logo setup

Go to Appearance > Theme Options and choose the logo icons via Media Library. Always remember to click the "Save changes" button after providing some changes via Theme Options screen.

2. Setup pages

Create pages for Your site via Pages > Add New menu. For the beginning we recommend to create Homepage and set it as the Wordpress Homepage via Pages section in Appearance > Theme Options.

When creating your pages, remember you can change the template of each of the pages via Page Attributes section in Pages > Add New

3. Setup blog

Activate your blog index and single post pages via Posts section in Appearance > Theme Options menu. In theme options you can also customize the content of these pages.

4. Setup products

Create your products via Products items menu (the full discussion on creating the products items and taxonomy is available here).

5. Setup navigation menu

Our theme provides the main menu functionality available via Appearance > Menus, where you can create and activate the navigation tree available on the top of the site.

6. Setup widgets

We provide 5 widget slots (one sidebar and four footer columns). You can add there any default Wordpress widget and any of our custom theme widgets

7. Customize pages

This theme is built upon Bootstrap framework and is fully responsive.

You can customize the css and javascript via Code section in Appearance > Theme Options menu. Don't forget to explore more advanced options of the theme.

There is a large amount of the powerfull shortcodes provided by our theme, which you can use on every single page on your site.

Theme Setup


Options

You can access custom theme options via Appearance > Theme Options from wordpress admin bar. Most of the options are self-explanatory and also some help information is provided.


1. General

Basic logo and footer configuration.

The Import/Export tab allows you to save your current theme options to the text file or restore them from existing theme options export file.

2. Style

All style setting are available for two modes: Basic color scheme and Distinctive color scheme You can configure global settings for background plus font and color of basic html elements like headers and links.

In this section you can also configure some custom style for Contact, Social, Newsletter and Testimonials widgets.

3. Pages

In this section you can set custom Mainpage on Your site.

4. Posts

You can set which page should be blog index.

We also provide you the mechanizm to customize both blog index page and single post page. You can choose which elements (post information) will be displayed on these pages.

Collection page options: Posts per page (pager - how many posts should be displayed on a single blog index page), Date (show or hide date for every single post in the list), Image (show or hide images), Author (show or hide authors), Summary (show or hide excerpts), Categories (show or hide categories summary)

Single post page options: Date (show or hide date), Image (show or hide image), Author (show or hide author), Summary (show or hide excerpt), Categories (show or hide categories summary), Comments (show or hide comments summary), Comment form (show or hide comment form)

5. Products

Products elements can be configure analogously to posts.

6. Code

You can set account number (UA-XXXXXXXX-X) for the Google Analytics module used for tracking the site.

In this section you can also set any custom CSS or Javascript code, which will be used on Your site with the highest priority.

Templates, sidebar and footer

The theme provides 3 basic templates for site pages - left sidebar, no sidebar (default) and right sidebar:

The footer is built from 3 columns which gives you a flexible way to arrange the content of it.

Blog Setup


Blog pages configuration is described in Options section.

Products Setup


The theme comes with a custom post type for products. Products pages configuration is described in Options section.

Regular blog posts are separated from products items - in the main Wordpress Admin menu you can find section Products items

Add new products item

You can add new products item via Products items > Add New. Beside regular post elements like title, description, excerpt, featured image, you can also define price and location which will be used in products shortcodes.

Products taxonomy

You can organize your products with products categories and tags which are built using Wordpress custom taxonomy functionality (they are separated from regular Wordpress categories and tags and are accessible via Products items > Categories and Products items > Tags).

You can set 2 featured images:

Theme Shortcodes


It's very important to understand the mechanism of building the page structure using shortcodes. Each row of the content should be built with the [row] shortcode and then each row divided into columns with the [x_column] shortcodes (please see bootstrap documentation to see the meaning of the "row" and "spanX" classes). It gives you a very flexible way to arrange the content and makes you sure everything will look exactly as you wish.

You can find full shortcode documentation on our demo site.

We provide the shortcodes generator, which is also available in fullscreen mode:

Theme Widgets


Bundled Plugins


Seafresh comes with plugins. After theme activation, a list of recommended plugins will appear (if not already installed and activated). All plugins are optional but highly recommended.

Assets


CSS Structure


We include 3 css files: bootstrap.min.css, bootstrap-responsive.min.css and app.css.
The first and the second file is just a bootstrap framework, responsive flavour which do all the resets and generic classes.
Keep in mind that you shouldn't edit bootstrap*.css files, to make it possible for you to update it in the future when new bootstrap release is available.

You may freely edit app.css file
(\wp-content\themes\seafresh\assets\css\app.css), add new rules there etc.


app.css file is divided into sections. On top of this file we've put general rules which apply to every page (menu, footer etc), then are rules for specific sites and then at the end - media queries and adjustments for different screens.

Seafresh template has 4 child themes:
- Cupcake
- Amici Pizza
- Blackangus
- Le Canard

Each child theme has his own stylesheet, it's located in :
\wp-content\themes\[theme-name]\style.css
Please edit this file if you want to change child theme styles.

Structure of the app.css file:

  1. Basic WordPress Blog Styles
  2. Font Face declaration
  3. Flexslider styles
  4. General styles
    • main menu
    • social icons
    • boxes
    • headers styles
    • sliders
  5. Specific Pages
    • contact
    • book a table
    • blog
  6. Widgets
  7. Custom Buttons
  8. Media Queries
    • @media (max-width: 959px) { }
    • @media (max-width:729px) { }
  9. Nivo Slider styles

PSD Files


 

We have  included three psd documents for each theme:

This PSD Document is set up by so called layer compositions. To have this smoothly running you need at least Photoshop version CS2. Simply open up the Photoshop Document and find the layer comps palette in the window section from the above main menu. Now you can simply switch on or off the particulat section you would like to edit.

  1. Seafresh
    • seafresh_desktop_allscreens.psd
    • seafresh_ipad_allscreens.psd
    • seafresh_iphone_allscreens.psd
  2. Cupcake
    • cupcake_desktop_allscreens.psd
    • cupcake_ipad_allscreens.psd
    • cupcake_iphone_allscreens.psd
  3. Amici Piza
    • amici_desktop_allscreens.psd
    • amici_ipad_allscreens.psd
    • amici_iphone_allscreens.psd
  4. Blackangus
    • blackangus_desktop_allscreens.psd
    • blackangus_ipad_allscreens.psd
    • blackangus_iphone_allscreens.psd
  5. Le Canard
    • lecanard_desktop_allscreens.psd
    • lecanard_ipad_allscreens.psd
    • lecanard_iphone_allscreens.psd

If you'd like to change the elements for pages, just open necessary psd file in Photoshop, make the adjustments, and then save slices in their format (i.e. .gif, .jpg, .png) into folder with images of this theme.(only chose 'File'->'Save For Web' option in Photoshop) Do the same for all .psd files if needed.

Sources & Credits


The following sources and files have been used to build up this theme


Once again, thank you so much for purchasing this theme. As we sat the beginning, I'd be glad to help you if you have any questions relating to this theme.  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.

createIT