Sofa SuppaStore WordPress theme by Sofarider

“Sofa SuppaStore” WP Theme Manuals
V1.0


Created: June 12, 2011
By: Dameer DJ, Sofarider
Email: info@sofarider.com
Skype: dameer29

Thank you for purchasing Sofa SuppaStore WordPress theme! Don't hesitate to contact me anytime if needed.
Sofa SuppaStore demo site can be found HERE
Sofa SuppaStore support (FAQ and how-to) website is HERE


Table of Contents

  1. Introduction
  2. Requirements & Compatibility
  3. Import dummy data?
  4. Quick setup
  5. Custom Templates
  6. Widgets
  7. Product Settings
  8. Basic FAQ
  9. Sofa SuppaStore theme Options
  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. PSD Files
  5. Sources and Credits

1. Introduction - top

Sofa SuppaStore is one of many webshop themes driven by WordPress but probably the only one that includes Stock Inventory and Orders Tracking. Not like many other similar solutions, SuppaStore still provides site owner (Admin) with that good old simplicity of WordPress content management. It is extremely easy-to-understand and work-with. No need to mess up with tons of different custom templates or install additional plugins. Everything is automatically installed for you at theme activation, including Newsletter plugin that only requires one mouse click (in case you like to use it, of course).
Sofa SuppaStore is equipped with powerful theme Options panel which gives you control over the layout, content appearance and all of the vital points of your webshop. On top of that, many built-in Widgets and a lot of widget-ready sections make this theme extremely flexible. Everything is in the reach of your hand, everything makes sense.
It doesn't matter whether you are about to run a Blog, Webshop or both in the same time because Sofa SuppaStore is ready to obey all of your commands. Enjoy it!


2. Requirements & Compatibility - top

This theme has been tested on both PC and Mac. Each and every Browser that has a support for JavaScript will run it at no issue with the exception of Internet Explorer 6. This Browser is no longer supported nor recommended by Sofarider WordPress themes. R.I.P.
On a side note (will be mentioned later too), Sofa SuppaStore will not work without jQuery Colorbox plugin! No worries, it'll be automatically installed by theme activation. For a case something goes wrong - check out "Quick setup" chapter, "4.1. Colorbox plugin".


3. Import dummy data? - top

Do you want to populate your theme copy with all of the content and images used by Sofa SuppaStore demo site? OK, that's easy thanks to the Importer plugin...

  1. Activate Sofa SuppaStore theme first (Dashboard, Appearance > Themes)
  2. Now from Dashboard select :
    Appearance > SofaSuppaStore Options >> Install Required dataBase Tables
  3. If you can read "Required dataBase table has been properly installed!" message – proceed to the next step. Otherwise read Basic FAQ chapter on how to install required database table manually
  4. From Dashboard select :
    Tools > Import >> WordPress
  5. Look up for a folder named "__DUMMY_DATA__", it's in the root of your theme's folder and import "sofa_suppastore_dummy.xml" file
  6. Confirm to import all of the images and files at the end

4. Quick setup - top

OK, let's spend a few minutes and make your WordPress work properly with this theme. Of course, before you start, don't forget to Activate Sofa SuppaStore theme (Dashboard, Appearance > Themes) in case you skipped an import of dummy data.

NOTE: If you already imported dummy data many of the following settings will already be there. Don't just skip this section, go through the steps and Save Changes for each screen. Unfortunately, Importer is not perfect. Some of the Widgets will not be populated with content!

4.1. Colorbox plugin - top

Colorbox is light-weight, customizable, lightbox-like WordPress plugin. With SuppaStore theme it is used as images viewer, shopping basket handler, error messages handler, etc. The point is: this plugin is MANDATORY for theme functionality!
No worries, it'll be installed automatically by Sofa SuppaStore theme activation. So all you need to do after theme activation is to kinda "personalize" the look and feel of Colorbox.
newsletter plugin settings
newsletter plugin settings
Once you set all up, don't forget to Save Changes! Now everything should be all right regarding basic theme functionality. But...

What to do if an error is generated by theme activation?

It means that you don't have permission to create folders and move files on your server! Once again, no need to panic. Your theme package contains a folder named "plugins" ("sofa_suppastore/plugins"). Upload both "jquery-colorbox" and "epicwin-subscribers" folders manually to server. Where exactly? Browse with FTP client (any will do fine) to "yourdomain-wordpress-folder.com/wp-content/themes/plugins" and upload. Once uploaded get back to Dashboard, Plugins > Plugins and Activate. Visit Colorbox official website and learn more!

4.2. Newsletter plugin activation - top

In general, this step is optional. If you want to use Newsletter plugin you'll have to activate it first. It's a slightly modified version of Epicwin plugin (http://wordpress.org/extend/plugins/epicwin-subscribers/) which allows you to add newsletter subscription form to any available widget-ready area (sidebar). You can find the widget under Appearance > Widgets.
newsletter plugin settings

4.3. Media settings - top

From Admin menu select Settings > Media, take a look at illustration below and define new values. (Thumbnail: 128x90, Medium: 288x0, Large: 608x0).
media settings

WordPress default link structure is quite bad, especially for SEO so we are about to make it more search engine and user friendly. OK, from Admin menu select Settings > Permalinks, take a look at illustration below and apply to your own Permalink Settings (/%category%/%postname%/).
permalinks settings
For a case you are unable to modify Default permalink structure, it means that your ".htaccess" file is not writable. This problem is commonly met on Windows IIS server although it's not a rule and may persist on both Unix and Linux. It can be fixed by changing write permission of ".htaccess" file to 755 (know as CHMOD 755) on Unix/Linux. Windows IIS server will probably not allow write permission change which means you'll have to contact your hosting provider.

This theme supports 6 different menus in total. Only the main menu MUST USE exact name "Main Menu" while other five don't. You can assign any name you like to them. There's something you also need to know! Main Menu is the only one that will appear automatically in page header. All other menus must be added manually in form of Widget. It means that you can add them to any widget-ready area of your theme. Check it out under Appearance > Widgets.
menus

5. Custom Templates - top

In WordPress, Custom Templates are usually applied to Page. Custom means that such page is most probably made for certain functionality that is out of WP's default template possibilities. Of course, that's not a rule, for example Full Width custom template is nothing but a common page without sidebar. There are two types of custom templates used by Sofa SuppaStore:
a) Those created automatically because the system can't function without them
Such templates include 4 different home page layouts; "Index page Common Blog", "Index page Full Width Products", "Index page Products Grid", "Index page Products Scroller", 2 custom Admin pages; "Stock Inventory", "Orders Overview" and "Checkout".
b) Optional templates that can be added by user at will. For example, if you need a Contact page for your website you'll start with
Pages > Add New
After you enter the title and maybe some content, from "Page Attributes" panel in sidebar you'd select "Contact" or "Full Width" (Templates drop-down menu).


6. Widgets - top

In order to access Widgets section of WordPress Admin select Appearance > Widgets.
On the right hand side you gonna find the list of 16 different sidebars/footers/header which are widget-ready.
Now, on the Widget list (left hand side, larger area) you can see 11 different Widgets starting with 'SOFA'. These are preferred theme Widgets! Drag and drop from left to any widget-ready sidebar or column on right hand side. That's how you add Widgets. And that's all you gotta know.
Of course, you can use other, default Widgets too or even create your own if you like!

Things you should know about "SOFA Adverts" Widget

This Widget is used to hold a chunk of HTML code which actually represents an array of 180x100px clickable banners. It means that you should add such code on your own. I guess it shouldn't be a problem for anyone and in order to ease your job, here's a sample code. Just copy and paste to widget body.

<a title="ad1" href="http://flashden.net/?ref=feeleep">
<img alt="ActiveDen" src="http://envato.s3.amazonaws.com/referrer_adverts/ad_180x100_v4.gif" />
</a>
<a title="ad2" href="http://themeforest.net/?ref=feeleep">
<img alt="ThemeForest" src="http://envato.s3.amazonaws.com/referrer_adverts/tf_180x100_v2.gif" />
</a>
<a title="ad3" href="http://audiojungle.net/?ref=feeleep">
<img alt="AudioJungle" src="http://envato.s3.amazonaws.com/referrer_adverts/aj_180x100_v1.gif" />
</a>
<a title="ad4" href="http://graphicriver.net/?ref=feeleep">
<img alt="GraphicRiver" src="http://envato.s3.amazonaws.com/referrer_adverts/gr_180x100_v1.gif" />
</a>

NOTE: A "href" and IMG "src" attributes contain URLs which should be replace with your own!


7. Product Settings - top

I guess you already have noticed 2 new panels added to Dashboard. One of them is named "Products" and this one will help you manage all of your products. Feel free to expand it. Basically, if you know how to create category and publish Post in WordPress, you'll know how to work with Products.The principle is exactly the same! ...except the fact there's only a little bit more information that you must enter with each Product. Let's take a look at the following illustration and analyse it...
product details

1. Let's now do "Add New" product. Looks familiar? Sure it does, Product administration page doesn't differ from the one used to add new Post. The truth is it contains a couple of extra control panels but they all will help you define each of your products properly.

2. Good old Post title is replaced with Product title and as you guess, this is where you enter Product name.

3. Now move to WYSIWYG (text) editor and describe your product.

4. Once done, upload product images one after another and insert to product description. Leave the best image (the one that will represent product visually) for the end; don't upload it yet because that very image will be used as Featured Image.

5. Move to "Product Definition Box #1" panel and enter Price and Size. These two values are mandatory for each and every product! Without at least one Product Definition Box being filled with Price and Size WordPress will generate an error.
Stock value must be entered only in case Stock Inventory feature is used. To be sure, from Dashboard select:
Appearance > Sofa SuppaStore Options >> Stock Inventory
...and see what's been selected for "Use Stock Inventory Management?"
If set to yes, Stock Inventory manager will automatically deduct product quantity being purchased from the one currently in stock. It happens only in case of successful/verified transaction. Why? Because only in that case buyer actually becomes the owner of goods being purchased.

Stock Inventory manager will never work for e-mail orders. It's quite logical: as long as one doesn't pay for goods, someone else could be quicker and pay sooner. So if you want to keep stock inventory active with e-mail orders enabled too, you'll have to maintain it manually. You can always do it from your webshop front-end by clicking the link "Stock Inventory" in page header.
Whenever certain product stock quantity gets zero – notification may be sent to site Admin (Vendor). You can enable that option from:
Appearance > SofaSuppaStore Options >> Stock Inventory >>> Send "Inventory Low" notifications

The very last option in Product Definition Box panel is Shipping Price. It's actually optional because you can set one "global" shipping price that will be applied to all products regardless the quantity or size (See Appearance > SofaSuppaStore Options > Payment Settings). If both single product Shipping Price and "global" (shipping/handling) price are set, the system will summarize all. On a side note, product Shipping Price will always be multiplied by its quantity in shopping basket.

6. When used, product tags will make Related Products scroller automatically appear on single product description page (front-end). You can create connections between related products by any tag (word) used redundantly across similar products. It's up to you to find the model that will work best for you and your clients. So don't forget to add product tags if you'd like to use Related products scroller!

7. Catalog represents the container for all the categories used by your webshop. One product must be assigned to at least one category and may be assigned to any number of other available categories. You can create categories of a Catalog "on the fly" by using that "+ Add New Category" button or select Products > Catalgos and pre-populate the list. Products categorization is another great aspect of "supplying" a webshop visitors with useful information so use it smartly in order to be able to create intuitive presentation.

8. Product thumbnail labels will help pay visitor's attention to a certain product(s). I guess there will always be NEW PRODUCTS, DISCOUNTS, SPECIAL EDITIONS, happenings or anything else related to a certain product(s) in your webshop. There are 3 different label types: Reduced, New Model and Limited Edition. They don't necessarily need to reflect the exact purpose but rather are used as different color backgrounds: blue, red and green – respectively for each label type. An actual text can be entered to "Thumbnail Label Value" input field above.

9. Featured products are used by additional home page templates. By default, index page will list all of the products by date in descending order. However, you might want to use some other (custom) templates for your home page and keep only featured products listed. In order to be sure which type of layout you currently use, from Dashboard select:
Appearance > Sofa SuppaStore >> Home Page Layout >>> Available Home Page layouts
Pick the one that fits best for your needs and don't forget to change default tile (Pages > Pages, "Welcome Full Width, Welcome with Sidebar"). And of course, the content of your custom template.

10. If you scroll up a little bit to #4, you'll be able read how to insert images to Product. Plus that, there's a notice about leaving the best shot for the end. And now it's time to upload that featured image too. Use "Set featured image" link or simply upload that special image as you would normally do with any other image. The only difference is a click on "Use as featured image" link instead of "Insert to Post" button.

featured image

11. What exactly "Product Definition Box #N" panel is supposed to be? It's a unit that represents one variation of a single product. For example, you have a product that is called "T-shirt Nerd". This product can be found in 6 different sizes (XS, S, M, L, XL, XXL) each of which has its own price (not necessarily, product price is allowed to be redundant!). So instead of creating 6 new products, you'd rather add them up as product variations. Logically, in order to achieve that goal you will need 6 Product Definition Boxes.
The number of boxes is unlimited. You can easily add as many as you like, any time needed. From Dashboard select:
Appearance > SofaSuppaStore Options >> Products >>> Number of Definition Boxes per product It's not advisable to ever decrease that number unless you are 100% sure none of the products in your webshop is using more than available. Beware, data loss may occur!


8. Basic FAQ - top

How do I localize/translate this theme properly?

This theme takes behalf of WordPress' built-in GNU gettext framework (http://www.gnu.org/software/gettext/gettext.html) and can easily be translated in such manner.

How to start? It's quite simple. First of all go to http://www.poedit.net/ and download this mini application made for the purpose of translation. It's free and cross-platform ready. After installation open 'sofa_suppastore' theme folder and spot another folder inside named 'theme_localization'.
It contains 'sofa_suppastore.po' file which can be opened with Poedit – an app you just have installed.
Translate all the phrases found in 'sofa_suppastore.po' and save new file as locale. What is locale?
A locale is a combination of language and regional dialect. Usually locales correspond to countries. For example, let's say you are translating this theme to French. You will have to save it as 'fr_FR.po'. However, in case you translate it to Brazilian Portuguese, you gonna save it as 'pt_BR.po'. Take a look for more examples here: http://codex.wordpress.org/WordPress_in_Your_Language

After you save translated file, you'll find additional namesake with the different extension - ".mo". That's the one we actually need! You can leave ".po" file in 'theme_localization' folder but ".mo" has to be copied to 'sofa_suppastore' root folder!

In case you already use localized version of WordPress and a locale of Sofa SuppaStore theme corresponds to the locale of WordPress – your job is done. Otherwise you'll have to do the following:

1. open 'wp-config.php'. This file can be found in root of your WordPress installation. Have a look:

wp-config

2. open 'wp-config.php' in some text editor, preferably the one capable to display line numbers
3. go to line #67, it currently reads: define ('WPLANG', '');
4. in case you have saved your translation file as 'fr_FR.po', you gonna change it to:
define ('WPLANG', 'fr_FR');
...in case you have saved your translation file as 'de.po', you gonna change it to:
define ('WPLANG', 'de');
...in case you have saved your translation file as 'pt_BR.po' you gonna change it to:
define ('WPLANG', 'pt_BR');
...etc, etc, etc.
5. save 'wp-config.php' and re-upload if required Once again: In order to make your localization work, ".mo" file needs to be present in 'sofa_suppastore' root folder! If you are stuck with it – don't hesitate to drop me an email!

How do I change theme's default logo?

1) Login to Dashboard first
2) From main Admin menu select Appearance > Header
3) Click on "Remove Header Image" to delete default logo
4) Save Changes
5) Browse to your own 300x70px logo file and upload
6) Save Changes

How do I install additional/required database table manually if anything goes wrong?

Well, you'll have to try manually. All the servers have Control Panel used for domain/hosting administration. Find the link/button that opens phpMyAdmin that is used to manage mySQL databases. After logging in, select database used for running Sofa SuppaStore theme. From available top tabs select 'SQL' (it should be the second tab), then paste and execute the following query:

        
        CREATE TABLE `wp_purchases_history` (
`id` int(11) NOT NULL auto_increment,
`trans_date` datetime NOT NULL,
`unique_code` varchar(150) NOT NULL,
`trans_status` varchar(100) NOT NULL,
`trans_basket` varchar(1500) NOT NULL,
`user_name` varchar(250) NOT NULL,
`user_email` varchar(250) NOT NULL,
`user_phone` varchar(50) NOT NULL,
`user_address` varchar(250) NOT NULL,
`user_zip` varchar(50) NOT NULL,
`user_city` varchar(100) NOT NULL,
`user_country` varchar(50) NOT NULL,
`currency` varchar(20) NOT NULL,
`gross` varchar(20) NOT NULL,
`discount` varchar(20) NOT NULL,
`handling` varchar(20) NOT NULL,
`tax` varchar(20) NOT NULL,
`flag_shipped` varchar(20) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Please note wp_ prefix marked red! Your tables do not necessarily have to share that prefix. In case other tables in database do not start with wp_ you'll have to replace it!

How to add images to jQuery Nivo slider?

That's quite simple. Go to Dashboard and select:
Nivo-slides > Add New One Nivo-slide post may contain one image only! If there's more images in Gallery of a single slide, delete them first then upload new one.

How to use theme Shortcodes?

There's a whole bunch of different shortcodes (text formatting) available with this theme. By using shortcodes you'll be able to arrange text in columns or have certain portion of text/content formatted according to predefined style (css). Full Width custom template page has wider content area and thus require its own shortcode wrappers. Some of the Shortcodes require both open and close "tags" while others don't (for instance text Separator or Icon). Here's an overview of all Shortcodes...

Text columns - normal content width (content + sidebar)

One half

It'll wrap selected chunk of text and make it 50% wide - 50% of available page width!

        
        [one_half_narrow textalign="left"]
...your text goes here...
[/one_half_narrow]
The other half...

If you want to have the other half displayed next to it, you would use the following (note that "_last" at the end):

        
        [one_half_narrow_last textalign="left"]
...your text goes here...
[/one_half_narrow_last]

One third...

It'll wrap selected chunk of text and make it cca 33% wide - 33% of available page width!

        
        [one_third_narrow textalign="left"]
...your text goes here...
[/one_third_narrow]
One third middle

If you want to add another third displayed next to it, you would use the following (note that "_mid" suffix at the end):

        
        [one_third_narrow_mid textalign="left"]
...your text goes here...
[/one_third_narrow_mid]
One third last

And finally, if you need the third column, here's the code (note that "_last" at the end):

        
        [one_third_narrow_last textalign="left"]
...your text goes here...
[/one_third_narrow_last]

One third

It's a regular 1/3 wide column...

        
        [one_third_narrow textalign="justify"]
...your text goes here...
[/one_third_narrow]
Two thirds

2/3 is about to be the last column so note that "_last" at the end!

        
        [two_thirds_narrow_last textalign="justify"]
...your text goes here...
[/two_thirds_narrow_last]

Now two thirds first...

It's a regular 2/3 wide column...

        
        [two_third_narrow textalign="justify"]
...your text goes here...
[/two_third_narrow]
One third at the end...

1/3 is about to be the last column so note that "_last" at the end!

        
        [one_third_narrow_last textalign="justify"]
...your text goes here...
[/one_third_narrow_last]

One fourth...

It'll wrap selected chunk of text and make it cca 25% wide - 25% of available page width!

        
        [one_fourth_narrow textalign="left"]
...your text goes here...
[/one_fourth_narrow]
One fourth middle

If you want to add another column displayed next to it, you would use the following (note that "_mid" at the end):

        
        [one_fourth_narrow_mid textalign="left"]
...your text goes here...
[/one_fourth_narrow_mid]
Another one fourth middle

This one also must use "_mid" suffix!

        
        [one_fourth_narrow_mid textalign="left"]
...your text goes here...
[/one_fourth_narrow_mid]
One fourth last

And finally, if you need the fourth column, here's the code (note that "_last" at the end):

        
        [one_fourth_narrow_last textalign="left"]
...your text goes here...
[/one_fourth_narrow_last]

One fourth at the beginning

It is possible to combine 1/4 and 3/4 too...

        
        [one_fourth_narrow textalign="left"]
...your text goes here...
[/one_fourth_narrow]
3/4 at the end...

In order to fill the right hand side gap simply use 3/4 wide column. Because this is the last column - don't forget to add suffix "_last" at the end!

        
        [three_fourth_narrow_last textalign="left"]
...your text goes here...
[/three_fourth_narrow_last]

Now 3/4 at the beginning

For a case you prefer reverse order - simply switch columns position from the previous example...

        
        [three_fourth_narrow textalign="left"]
...your text goes here...
[/three_fourth_narrow]
One fourth at the end...

Now fill the gap with 1/4 wide column at the end.

        
        [one_fourth_narrow_last textalign="left"]
...your text goes here...
[/one_fourth_narrow_last]

Text columns - full width (no sidebar)

One half

It'll wrap selected chunk of text and make it 50% wide - 50% of available page width!

        
        [one_half_wide textalign="left"]
...your text goes here...
[/one_half_wide]
The other half...

If you want to have the other half displayed next to it, you would use the following (note that "_last" at the end):

        
        [one_half_wide_last textalign="left"]
...your text goes here...
[/one_half_wide_last]

One third...

It'll wrap selected chunk of text and make it cca 33% wide - 33% of available page width!

        
        [one_third_wide textalign="left"]
...your text goes here...
[/one_third_wide]
One third middle

If you want to add another third displayed next to it, you would use the following (note that "_mid" suffix at the end):

        
        [one_third_wide_mid textalign="left"]
...your text goes here...
[/one_third_wide_mid]
One third last

And finally, if you need the third column, here's the code (note that "_last" at the end):

        
        [one_third_wide_last textalign="left"]
...your text goes here...
[/one_third_wide_last]

One third

It's a regular 1/3 wide column...

        
        [one_third_wide textalign="justify"]
...your text goes here...
[/one_third_wide]
Two thirds

2/3 is about to be the last column so note that "_last" at the end!

        
        [two_thirds_wide_last textalign="justify"]
...your text goes here...
[/two_thirds_wide_last]

Now two thirds first...

It's a regular 2/3 wide column...

        
        [two_third_wide textalign="justify"]
...your text goes here...
[/two_third_wide]
One third at the end...

1/3 is about to be the last column so note that "_last" at the end!

        
        [one_third_wide_last textalign="justify"]
...your text goes here...
[/one_third_wide_last]

One fourth...

It'll wrap selected chunk of text and make it cca 25% wide - 25% of available page width!

        
        [one_fourth_wide textalign="left"]
...your text goes here...
[/one_fourth_wide]
One fourth middle

If you want to add another column displayed next to it, you would use the following (note that "_mid" at the end):

        
        [one_fourth_wide_mid textalign="left"]
...your text goes here...
[/one_fourth_wide_mid]
Another one fourth middle

This one also must use "_mid" suffix!

        
        [one_fourth_wide_mid textalign="left"]
...your text goes here...
[/one_fourth_wide_mid]
One fourth last

And finally, if you need the fourth column, here's the code (note that "_last" at the end):

        
        [one_fourth_wide_last textalign="left"]
...your text goes here...
[/one_fourth_wide_last]

One fourth at the beginning

It is possible to combine 1/4 and 3/4 too...

        
        [one_fourth_wide textalign="left"]
...your text goes here...
[/one_fourth_wide]
3/4 at the end...

In order to fill the right hand side gap simply use 3/4 wide column. Because this is the last column - don't forget to add suffix "_last" at the end!

        
        [three_fourth_wide_last textalign="left"]
...your text goes here...
[/three_fourth_wide_last]

Now 3/4 at the beginning

For a case you prefer reverse order - simply switch columns position from the previous example...

        
        [three_fourth_wide textalign="left"]
...your text goes here...
[/three_fourth_wide]
One fourth at the end...

Now fill the gap with 1/4 wide column at the end.

        
        [one_fourth_wide_last textalign="left"]
...your text goes here...
[/one_fourth_wide_last]

Large Blockquotes

It'll create an extra large quoted text that takes entire width of content area. For example... menus So, if you'll ever need to emphasize a chunk of text with such huge font, here's the shortcode:

        
        [big_blockquote textalign="justify"]
...your text goes here...
[/big_blockquote]

Text Highlights

Highlight blue

This shortcode will apply blue background to selected portion of text...

        
        [hl_blue]
...your text goes here...
[/hl_blue]
Highlight red

This shortcode will apply red background to selected portion of text..

        
        [hl_red]
...your text goes here...
[/hl_red]
Highlight inverse

This shortcode will apply black background to selected portion of text..

        
        [hl_inverse]
...your text goes here...
[/hl_inverse]

Alert boxes

There are 4 different alert or notification boxes available with shortcoding: Blue, Green, Yellow and Red. Simply use the following shordcodes to format these boxes:

        
        [alert_blue textalign="left"]
...your text goes here...
[/alert_blue]
        
        [alert_green textalign="left"]
...your text goes here...
[/alert_green]
        
        [alert_yellow textalign="left"]
...your text goes here...
[/alert_yellow]
        
        [alert_red textalign="left"]
...your text goes here...
[/alert_red]
newsletter plugin settings

Separator

There's a shortcode that will insert some sort of fancy horizontal rule. It is supposed to be added AFTER some text block and as such it doesn't require shortcode closing tag!

        
        ...your text goes here...[separator]
        
        
...and here's how I look like when applied...  

Content icons

newsletter plugin settings
9 different icons can be used with any textblock: Advertising, Basket, Check, Communicate, Contact, Issue, Pencil, Special offer and Star. Please note that these shortcodes do not require closing tag! How to add some icon at the beginning of the text block? Simply use the following shortcode:

        
        [icon_advertising]...your text
...or...
[icon_basket]...your text
...or...
[icon_check]...your text
...or...
[icon_communicate]...your text
...or...
[icon_contact]...your text
...or...
[icon_issue]...your text
...or...
[icon_pencil]...your text
...or...
[icon_specialoffer]...your text
...or...
[icon_star]...your text

Did you notice that textalign="right" or textalign="justify" or textalign="left" used with some of supported shortcodes? Well, as you guess, your text can be aligned to whichever position HTML allows you to: left, right, center or justify. The choice is yours!

How to use and configure Newsletter plugin?

This plugin was originally created by Antonio V Mendes De Araujo and is named "EpicwinSubscibers". It means that all the credits go to plugin's author. However, I decided to modify the original code slightly and make it work with Ajax. This plugin allows your webshop visitors to subscribe via e-mail and receive notifications whenever new Product (or Post) is added. There are not too many options found in administration panel tho (see Dashboard > Epicwin Settings), but I guess it'll do the job correctly. For a case you need more advanced solution and more control, you'll have to find another one that fits better to your needs. Epicwin Subscribers official page can be found at http://www.epicwindesigns.com/projects Sofa SuppaStore theme extended FAQ and How-to can be found at http://suppastorefaq.sofarider.com. If you have any questions please visit this website first and search for answer.

What to do with "plugins" folder after theme activation?

This folder can be found in theme's root folder ("sofa_suppastore/plugins") and my friendly advice is to delete it once your theme copy is activated. You'll no longer need it and "Theme Check" plugin could report Warnning about improper usage of WordPress functions. Once removed, everything will be all right.


9. Sofa SuppaStore theme Options - top

From Dashboard select Appearance > SofaSuppaStore Options first. All of the options are well described in-place and there shouldn't be any questions. Read carefully what is each option about and try to remember. That's the whole story. Don't be afraid to test all out upside-down because this is the best way to see how different settings affect your theme's functionality.


A) HTML Structure - top

This theme uses fixed layout with 2 columns. The layout itself relies on 12 columns grid that is 960px wide. Each column in grid is 50px with 30px gutter.

Page sections (header, sidebar, footer, etc.) are commented for each and every template file so tehre shouldn't be any problem with getting lost. For example, when you find a HTML comment line reading:
<!-- wordpress loop start -->
...you'll know WordPress loop section starts immediately after it.
<!-- wordpress loop end -->
...should let you know WordPress loop ends here. The same goes for title section, content, pagination, images cloud, sidebar, etc. Whenever you take a look at the source code of any page rendered in Browser you'll have the complete picture.


B) CSS Files and Structure - top

There are 5 CSS files used by Sofa SuppaStore theme:

All of CSS files are devided into sections while each section has its own title for easier management of section related styles. Tho, that's not a thumb of rule because sometimes is necessary to "merge" two or more element styles.
Basically, if you are about to change the color of links, you would open "screen.css" and seek for a section with title "LINK COLOR". On the other side, if you want to modify navigation, you'd open "style.css" and look up for "NAVIGATION" section.

It's always good idea to use Developer tools. Each and every modern Browser has it. Firefox does require download of Firebug add-on but once you download and install, you'll never want to remove it.
Developer tools will help you swift through any website HTML and CSS! By doing so, you can easily find corresponding styles (the exact line number in CSS file) for every single element on page.

The point is: if you know how to deal with CSS, you'll be able to find something very easy. If you don't, rather ask for my assistance or seek for online tutorials.


C) JavaScript - top

This theme imports 8 JavaScript libraries/plugins. Some of them are used for theme setup (theme Options) only while others help your theme looks cool and modern. The most of them do not require any modification nor method call(s) which means everything is already set for you. However, those plugins that require certain "inputs" (like Nivo slider) can be set up from theme Options panel without messing up with the code. You can always learn more about each jQuery plugin if you like by visiting its official website...

  1. jQuery - loaded from WordPress core
    jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. dropmenu.js - used for main menu drop-downs hierarchy
    Dropmenu will replicate Menus hierarchy (see Dashboard, Appearance > Menus) and take care about cool animation of your menu.
  3. jcookie.js - used by theme Options panel
  4. jquery.nivo.slider.pack.js - home page images slider
    Nivoslider is probably the best images slider plugin. Easy to understand documentation and extremely easy for setup. Everything you'll ever need to know about can be found here!
  5. jquery.tools.min.js - related products scroller
    There are many javascript content scrollers out there but none of them is so easy for implementation. In spite of the fact you don't actually need to modify anything re this plugin, support forum and documentation is avalable at jQueryTools official website.
  6. prototype-effects.js - used by theme Options panel
  7. prototype.js - used by theme Options panel
  8. jquery.suppastore.custom.js - a couple of custom, theme-specific functions
    As you probably already have noticed at Sofa SuppaStore demo site, all of images are supposed to fade-in once loaded and all of them are having that discrete shadow below. Theme specific functions will take care about both.
    Don't try to disable any of these two functions because they rely on each other!

D) PSD Files - top

This theme package does include theme design files and all of them can be found in "__PSD__" folder. Beside 6 different layout files, you'll be able to find 2 extra PSDs; one of them will let you re-design checkout buttons while the other one is used to create images slider slides.

SuppaStore theme relies on minimalistic design and there's only a few graphic elements (beside icons) that are used by HTML:

These files can be found in "images" folder of your theme copy so if you don't like that fading bar on the top and bottom of pages you'll have to change it in any of provided theme design files. Once changed, crop and save required pieces by using existing file name and type. Remember, these names are used by "style.css"! If saved under different name or as a different file type, they won't be displayed across theme pages at all.


E) Sources and Credits - top

Icons used

Icons used with theme Shortcodes are taken from "Dusseldorf" icon set released under Creative Commons Attribution 3.0 License. Credit in form of a back-link is required so please refer to PC.DE and get more cool free icons! All other icons are found via iconfinder.com by using "Allowed for commercial use" filter and belong to different icon sets and authors.

Images and graphics

All of the images used with source files (PSD) are mostly made/composed out of the graphics found via Google Advanced Image Search and filtered out as "labeled for reuse" or "labeled for commercial reuse". You may not use/reuse these compositions commercially and make further distribution! Trademarks that appear in source files are the property of their respective owners!

Fonts

Source files (PSD) use a non-standard web font named "Yanone Kaffeesatz" (by Yanone). Font package can be found in "__PSD__" folder of your theme's root. This font can be downloaded free of charge from Google Webfonts (visit for more free fonts!)


Once again, thank you so much for purchasing this theme. I'd be glad to help you if you have any questions relating to it. No guarantees, but I'll do my best to assist.
Sofa SuppaStore support (FAQ and how-to) website can be found HERE, feel free to participate!

Dameer DJ

Go To Table of Contents