SnowySoon - Multipurpose Landing Placeholder eCard Crafted with care in 2014 by Premio Themes

Hello everyone and welcome to our flexible and cheery SnowySoon placeholder WP plugin! I’m Octavian Chelaru, the founder of Premio Themes, and I’d like to thank you for purchasing one of our products, your support is much appreciated.

Please drop us a line and let us know what you think of this template, if you have any suggestions for improvements or extra features, if there’s something you don’t like or you just want to say “Hello”.

We count on your help to constantly improve our products and bring more value to you and all of our other customers.

Now, let’s get to the help part.

First of all, customization of this plugin will, of course, require minimal knowledge of WordPress and for heavier customization a bit of HTML and CSS. Chances are you’re already quite familiar with them but in the off chance you’re not, here’s a really good place to get you started: TutsPlus.

File Structure

After purchasing this product and unpacking the zip file you will see the following folders:

  • 1 - WP-Plugin - Here is where the plugin and demo assets can be found.
    • Demo Assets - This holds the demo graphics, videos and music should you want to import them.
    • snowysoon.zip - The plugin archive that you need to add to your WordPress install.
  • 2 - HTML Version - This folder contains the HTML version as a bonus, should you need to use it.
    Note: Help file for HTML version is here : http://pre.la/snowy-help-html
  • 3 - PSD - This folder contains editable Photoshop PSD designs.
    • 01 - SnowySoon Skin 1 - SnowyPromo.psd - Editable design & elements for the first theme (9 slides).
    • 02 - SnowySoon Skin 2 - SnowyCard.psd - Editable design & elements for the second theme (8 slides).
    • 03 - SnowySoon Skin 3 - SnowyParty.psd - Editable design & elements for the third theme (5 slides).
    • 04 - SnowySoon Skin 4 - SnowyHolder.psd - Editable design & elements for the fourth theme (7 slides).
    • 05 - SnowySoon - Mobile.psd - Mobile design (for responsive) using the first skin.
  • 4 - Assets - Editable bundled assets and ready to use extra backgrounds.
    • 01 - Ready to Use Background Images - 50 pre-rendered extra backgrounds if you don't fancy Photoshop much.
    • 02 - Background Builder PSD - Photoshop file you can use to generate any variantion of the included backgrounds.
  • 5 - Help - Help is here when needed :)

In order to get started using this product all you need to do is add snowysoon.zip as a new plugin to your WordPress instalation.
If you are a more advanced user and, like us, like to tinker, here is the file structure of the plugin:

  • snowysoon.zip - This is the plugin zip file you need to upload to your WP instalation in order to start using it.
    • snowysoon - WordPress needs to have the entire plugin placed in a single folder within the archive.
      • inc - Libraries and assets used for the Admin interface
      • template - Template file and assets used to generate the front-end.
      • images
        • patterns - The optional pattern overlay images
        • themes - SnowySoon theme/skin specific images will be found here.
      • scripts - Here you can find all the Javascript files
        • flipclock.min.js - The FlipClock.js library. Used for controlling the countdown
        • jquery.easypiechart.min.js - The Easy Pie Chart library. It’s part of the circular countdown style
        • jquery.placeholder.min.js - jQuery Placeholder. Helps fix form usability in older browsers
        • main.js - This is our custom Javascript code, uncompressed
        • main.min.js - This is our custom Javascript code, compressed
        • modernizr.custom.min.js - Custom build of Modernizr containing only the parts we needed.
        • respond.min.js - Respond.js. Adds responsive capabilities to older browsers
      • styles - Here you can find all the CSS files
        • custom.css - Holds your custom CSS if you need it
        • loader.css - Styles the loader, uncompressed
        • loader.min.css - Styles the loader, compressed
        • main.css - Holds most of the styling code, uncompressed
        • main.min.css - Holds most of the styling code, compressed
      • comingsoon.php - Front-end template file, contains the markup.
      • config.php - Configuration file for mailing and contact form settings.
      • favicon.ico - Default Favicon.
      • mailListHandler.php - Handles user subscriptions.
Quick Tip: You can easily replicate all our bundled live demos simply by choosing the theme you prefer in the SnowySoon admin panel and then (optionally) importing it's content. That's all there is to it!

Installation

To install SnowySoon on your WordPress installation follow these steps:

  1. In the WordPress Admin interface, go to the Plugins section of the left hand side menu.
  2. On top of this section click on Add New, then on Upload and finally click the Choose File button.
  3. A file browser will come up. Find and select snowysoon.zip in the 1-WP-Plugin folder.
  4. After the install process is finished click Activate Plugin.
  5. Set up SnowySoon by going to the SnowySoon Options menu item of the side menu.

If the above steps don’t work for some reason, you can try the following:

  1. Unzip snowysoon.zip from the 1-WP-Plugin folder. Inside there’s a folder, also named snowysoon.
  2. Use an FTP client (such as FileZilla) to upload the snowysoon folder to the wp-content/plugins folder of your WordPress installation.
  3. In the WordPress Admin interface, go to the Plugins section of the left hand side menu.
  4. Find SnowySoon in the list of installed Plugins and click Activate to enable it.
  5. Set up SnowySoon by going to the SnowySoon Options menu item of the side menu.

If you don’t know how to use an FTP client to upload file and change file permissions (usually not needed) refer to your hosting provider’s help section or use this quick guide.

Getting Started

Admin Options

Since this is a WordPress plugin we thought it best to document all the available options straight in the admin panel instead of outlining them here. After installation simply access the admin panel everything will be explained there.

If you haven't purchased SnowySoon yet and are curious as to what features are available to you in the admin, see the screenshots.

Custom CSS

SnowySoon has many visual customisation options withing the admin as well as four bundled custom themes which should be enough for most use cases. Sometimes, however, you need to tinker and take control of the finest details and you do this via Custom CSS rules. Below is a quick guide to get you started.

The plugin has a Custom CSS field that you can find at the bottom of the SnowySoon Options -> Main Settings section of the WordPress Admin. You can enter your CSS code there and it will overwrite any other plugin or theme styles. To find out how you can identify the CSS rules that need changing to achieve what you want, read on and follow the general guide below.

First, we will explore the methods used to customize the styling of the pages via custom CSS.

To change the look of your site, we recommend the following software:

  • The Google Chrome browser. While the steps described in this section will mostly be the same in Mozilla Firefox, this guide uses Chrome.

  • A code editor. You can get away with a simple text editor (like Notepad) but we recommend using a real code editor. Our choice is Sublime Text but there are many to choose from.

Because this is a general guide, as a quick exercise we will be changing the color of the section titles in this help file.

  1. Right click one of the orange titles and select “Inspect Element”

    The Developer Tools panel will open.
    On the left side of the Developer Tools, the HTML tag of the title is selected. On the right side, you will see all the CSS properties assigned this element.

    To change the color of the titles, we’re interested in the color property of the h1 tags.

  2. To change the color, we need to use the same CSS selector used to set the original color. In this example, the selector is h1. Click on the selector in the Developer Tools and copy the text.

  3. Now, go to the Custom CSS field we mentioned earlier and type this (by pasting the previously copied selector):

    h1 {
     color: #ff0000;
    }

    Then, save the your changes and reload the preview.
    The section titles should now be a bright red color with the hex value of #ff0000.

Issues & Answers

MailChimp issues

There are two common mistakes that we noticed people make when using the MailChimp feature:

  1. Using the List Name instead of the List ID which leads to the form submission to fail.
  2. Using an email such as email@test.com to test the form. MailChimp rejects such addresses.

Contact Form issues

If you aren’t receiving email from the form, first check your Spam folder. This is a very common occurence. If the mail isn’t in the Spam folder either, try one of the following:

Change the FROM email address

Sometimes the mail server of the hosting provider only allows email to be sent from addresses that were configured on their server and using one of your registered domains.

Ask for support

You can ask your hosting provider if there is any special configuration that needs to be done in order for PHP to support the mail() function. You can email us with this information if you believe there are changes that need to be done.

Try to configure email using SMTP

If your hosting provider does not support wp_mail and the standard PHP mail() function, you can try to configure email sending from WordPress using SMTP (another type of mail service).

WordPress supports SMTP mail but this needs to be configured separately via the admin area of WordPress.

The following plugin can be used to setup SMTP on your WordPress site: http://wordpress.org/extend/plugins/wp-mail-smtp/

WP Mail SMTP reconfigures the wp_mail() function to use SMTP instead of mail() and creates an options page that allows you to specify various options. You may need to contact your hosting provider to get detailed information on the option settings required.

With SMTP you can also send emails via an external email provider such as Gmail, Outlook or some other online email service, and send outgoing email through their SMTP server rather than from the email service on your WP hosting.

See Install WP Mail SMTP to send all emails through an external SMTP server for some detailed instructions on using SMTP via an external email provider.

Note: When using SMTP you need to authenticate, so there has to be a real email address that the emails are coming from.

Most users on quality WordPress hosting will not need to use SMTP. You should avoid using SMTP if possible as using SMTP can contribute to the following email authentication issues.

More common issues and their solutions can be found in this article. It is about issues with the Contact Form 7 plugin but a lot of it applies.

Install a 3rd party contact plugin

Plugins such as Contact Form 7 can be used if you still can’t send email using the standard form. See the Third Party Plugins section to read more about 3rd party plugins.

Third Party Shortcodes

You can use shortcodes from other plugins if you wish. By default, shortcodes will work in SnowySoon but the 3rd party plugin styles and scripts are not loaded.
To load them, go to the Advanced Settings tab of the SnowySoon admin panel and enable Load Styles and Scripts from other Plugins.

This will allow you to use any shortcodes that other plugins provide but there is a chance they will break SnowySoon’s layout.

Assets Used

Included Assets

We set you up with some cool starter graphics, videos and music you can use out of the box.
They've been hand picked and bought under a commercial license so you may use them for free after purchasing SnowySoon!

Video - Winter Holiday eCard: Christmas (Full HD 1980x1080, $6 value)
Video - Looping Background: Blue Christmas Tree Backdrop - Series of 2 + LOOP (Full HD 1980x1080, $6 value)
Vectors - Customizable Elements: Holiday Christmas Banners with Villages (Vectorial, 3 scenes, 8 elements, $6 value)
Music - Nice and Cheery: Christmas (HQ MP3, 5 versions, $14 value)
iPhone Mockup: 3-4 iPhone 6 Psd Vector Mockup Part 2 (Free resource courtesy of Pixeden)

Note: The original source files for the video backgrounds are quite huge (~600MB) so if you need them to render your own custom video please send us a PM on Envato so that we can verify the purchase and we'll promptly reply with a secure download link.

Other Assets (Not included)

Commercial licenses are quite costly so, as much as we'd want to include everything we used, that's just not viable.
Therefore, due to licensing limitations any components listed here are not included in your package and have been replaced by placeholders.
We did take the time to detail where you can get them from, however, just in case you want to use some of them :)

SnowyPromo - Skin 1
Logo Text Effects: Retro & Vintage Text Styles Vol.1
Logo Snow Effect: Snow Effect Action
Round Counter Background: Christmas Tree Photoshop Creator

SnowyParty - Skin 3
Demo Logo Element (2015 Text): New Year 2015 Party

Other Demo Images
The images used in demo 3 have been purchased from Fotolia. Please get in touch if you need the image id numbers.

Fonts

Google Fonts were used to create this template in order to insure easy implementation with top notch browser compatibility.
The fact that they’re free and gorgeous also helps :)

So here are the fonts we used and their download links:

SnowyPromo - Skin 1
Bevan: http://www.google.com/fonts#UsePlace:use/Collection:Bevan
Merriweather: http://www.google.com/fonts#UsePlace:use/Collection:Merriweather

SnowyCard - Skin 2
Roboto Slab: http://www.google.com/fonts#UsePlace:use/Collection:Roboto+Slab
Roboto: http://www.google.com/fonts#UsePlace:use/Collection:Roboto

SnowyParty - Skin 3
Open Sans: http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
Oswald: http://www.google.com/fonts#UsePlace:use/Collection:Oswald

SnowyHolder - Skin 4
Source Serif Pro: http://www.google.com/fonts#UsePlace:use/Collection:Source+Serif+Pro
Source Sans Pro: http://www.google.com/fonts#UsePlace:use/Collection:Source+Sans+Pro

Icons

We used the lovely Font Awesome font icons for this theme to ensure flexibility, easy color changing, quick loading,
browser compatibility and, most importantly, great look on high density displays (like retina).

You can download Font Awesome font icons here:
http://fontawesome.io/

Javascript Libraries

jQuery - It needs no introduction.

FlipClock.js - Used for controlling the countdown.

Easy Pie Chart - Leightweight plugin to draw simple, animated pie charts.

jQuery Placeholder - Helps fix form usability in older browsers.

Modernizr - JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Respond.js - Adds responsive capabilities to older browsers.

CSS Libraries

normalize.css - Makes browsers render all elements more consistently and in line with modern standards.

inuit.css - A lightweight CSS framework.

PHP Libraries

Redux Framework - A framework that simplifies building WordPress admin interfaces.

Credits

Octavian Chelaru

Octavian Chelaru

VIBE CRAFTER

Website E-mail Linkedin Facebook
Andrei Constantin

Andrei Constantin

CODE JEDI

E-mail Facebook Twitter