“SCRN” Documentation by “Cristi Macovei” v1.0
+ ++ +
“SCRN”
+ +
+
+ Created: 06/09/2012
+ By: Cristi Macovei
+ Email: cristi@teothemes.com
+
+
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
++ +
Table of Contents
+-
+
- Installation +
- Setting up the homepage +
- Shortcodes +
- Page Templates +
- Custom fields +
- Theme options panel +
- Translating the theme +
- CSS files +
- JavaScript files +
- FAQ +
- Sources and credits +
+ +
A) Installation - top
+In order to use this theme, you must run a stand-alone installation of wordpress and not have a free subdomain at wordpress.com.
+Once you have the zip archive ready, you need to go to your dashboard, which is http://yourwebsite.com/wp-admin and go to + Appearance > Themes > Install Themes and, in the top menu, select Upload. Now, select the zip archive and just install it normally.
+
+
+ If the above solution fails due to any reason, upload the theme manually via FTP and then go to Appearance > Themes to enable it manually. If you don't know how to upload the theme via FTP, check Uploading themes via FTP
+ +For further help, you can also read Using themes
+ ++ +
B) Setting up the homepage - top
+ +The homepage has many elements, we'll analize each one individually.
+ +The homepage text + the icons + the menu:
+ +The homepage menu, text and the icons are fully configurable in the theme options panel.
+ +
+
+ 
+
+ The "Blog" item is optional and will be visible only if you select a blog page in the theme options panel:
+ +
+
+ The top text
+ +
+
+ The text and the icons are very easy to configure in the SCRN Theme options panel:
+ +
+
+ You may use HTML tags in those areas.
+ +The home pages:
+ +The homepage shows a list of pages which you can select in the theme options panel. It will show all the content of them, including html tags, shortcodes, etc.
+ +The same pages tht show up in the top menu will show on the homepage.
+ +
+
+ The contact page:
+ +The contact page is automatically added at the bottom of the website and all you need to do is configure the e-mail address, the location, the social icons url and the phone. All of them are very easy to configure in the theme options panel:
+ +
+
+ 
+
+
+
+ C) Shortcodes - top
+ +This theme has lots of shortcodes, I'll include the syntax for all of them in this section.
+ +1) Social shortcodes
+ +The shortcodes are the ones I used here: Shortcodes
+ +The feedburner shortcode syntax is:
+ ++ [feedburner name="YOUR USERNAME"] ++ +
The twitter shortcode has 3 variations, like you can see on that page. The default variation is 1. The syntax is:
+ ++ [twitter username="YOUR TWITTER USERNAME"] + [twitter username="YOUR TWITTER USERNAME" variation="2"] + [twitter username="YOUR TWITTER USERNAME" variation="3"] ++ +
The digg shortcode has 3 variations as well. The default variation is 1. The syntax is:
+ ++ [digg] + [digg variation="2"] + [digg variation="3"] ++ +
The facebook share shortcode syntax is:
+ ++ [facebook] ++ +
The stumble shortcode has 6 variations and the default one is 5. The syntax is:
+ ++ [stumble] + [stumble variation="1"] + [stumble variation="2"] + [stumble variation="3"] + [stumble variation="4"] + [stumble variation="6"] ++ +
The retweet shortcode syntax is:
+ ++ [retweet] ++ +
The pinterest shortcode has 4 variations and 1 is the default one. The syntax is:
+ ++ [pinterest username="YOUR PINTEREST USERNAME"] + [pinterest variation="2" username="YOUR PINTEREST USERNAME"] + [pinterest variation="3" username="YOUR PINTEREST USERNAME"] + [pinterest variation="4" username="YOUR PINTEREST USERNAME"] ++ +
The addthis shortcode has 4 variations and 1 is the default one. The variation 4 is the floating share box. Syntax is:
+ ++ [addthis] + [addthis variation="2"] + [addthis variation="3"] + [addthis variation="4"] - this is the floating share box ++ +
Some small shortcodes for social icons, syntax is:
+ ++ [twitter_small username="YOUR TWITTER USERNAME HERE"] + [twitter_big username="YOUR TWITTER USERNAME HERE"] + [facebook_small username="YOUR FACEBOOK USERNAME HERE"] + [dribble_small username="DRIBBLE USERNAME HERE"] + [vimeo_small username="VIMEO USERNAME HERE"] + [flickr_small username="FLICKR USERNAME"] ++ +
+ +
2) Image slideshow
+ +The syntax for the image slideshow is:
+ ++[slider] + [slider_img]LINK TO THE IMAGE[/slider_img] + [slider_img]LINK TO THE IMAGE[/slider_img] + [slider_img]LINK TO THE IMAGE[/slider_img] + [slider_img]LINK TO THE IMAGE[/slider_img] + [slider_img]LINK TO THE IMAGE[/slider_img] +[/slider] ++ +
Note: You can use any number of images in the image slideshow and any number of image slideshows per page, there's no limit
+ +
+
+ 3) Quote slider
+ +The syntax for the quote slider is:
+ ++[quote_slider] + [quote author="Michelle - student"]Great touch... felt so wonderful[/quote] + [quote author="Max Mustermann - Business owner"]I feel alive... I mean I feel my feet are part of my body.[/quote] + [quote author="Adam Jones"]Thanks for what you do!! Seriously wouldn’t have made it this far without you[/quote] + [quote author="Brad Williams"]Truly Professional, Today was my first experience[/quote] +[/quote_slider] ++ +
+[quote_slider] + [quote author="Author name"]Feedback or some info here[/quote] + [quote author="Author name"]Feedback or some info here[/quote] + [quote author="Author name"]Feedback or some info here[/quote] + [quote author="Author name"]Feedback or some info here[/quote] + [quote author="Author name"]Feedback or some info here[/quote] + [quote author="Author name"]Feedback or some info here[/quote] +[/quote_slider] ++ +
Note: You can use any number of quote sliders per page and any number of items in the quote slider, there's no limit at all
+ +
+
+ 4) Lightbox images
+ +The lightbox images has multiple options and you can float the image to the right or to the left of the content. The syntax is:
+ ++[lightbox thumbnail="LINK TO THE thumbnail" width="300" height="170" float="left"]LINK TO THE FULL IMAGE[/lightbox] +Content here +[clear] ++ +
+[lightbox thumbnail="LINK TO THE thumbnail" width="350" height="200" float="right"]LINK TO THE FULL IMAGE[/lightbox] +Content here +[clear] ++ +
+[lightbox thumbnail="LINK TO THE thumbnail" width="600" height="470" alt="My nice thumbnail" title="My little thumbnail"] +LINK TO THE FULL IMAGE[/lightbox] ++ +
+[lightbox thumbnail="LINK TO THE thumbnail" width="140" height="120" float="left"]LINK TO THE FULL IMAGE[/lightbox] +[lightbox thumbnail="LINK TO THE thumbnail" width="140" height="120" float="right"]LINK TO THE FULL IMAGE[/lightbox] +Content between the two lightbox thumbnails +[clear] ++ +
WARNING: If you'll use the float option, you must add the [clear] shortcode as well after you add the content near the image, just like I did!
+ +Note: If a thumbnail isn't used, the full image will be used for the thumb. If a full image isn't provided, the shortcode won't work.
+ +Note: You can use the title and the alt attributes as well, they will add the title and the alt to the images and the prettyphoto frame. Default width x height are 250 x 125 pixels.
+ +
+ +
5) Columns:
+ +The syntax for the columns shortcodes is:
+ ++ [one_half]Content here[/one_half] + [one_half]Content here[/one_half] ++ +
+ [one_third]Content here[/one_third] + [one_third]Content here[/one_third] + [one_third]Content here[/one_third] ++ +
+ [two_thirds]Content here[/two_thirds] + [one_third]Content here[/one_third] ++ +
+ [one_fourth]Content here[/one_fourth] + [one_fourth]Content here[/one_fourth] + [one_fourth]Content here[/one_fourth] + [one_fourth]Content here[/one_fourth] ++ +
+
+ 6) Lists:
+ +There are three types of lists you can use, the syntax is:
+ ++[list type="bullet"] + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> +[/list] ++ +
+[list type="check"] + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> +[/list] ++ +
+[list type="float"] + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> +[/list] +[list type="float"] + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> + <li>item 4</li> +[/list] ++ +
+
+ 7) Services page shortcode:
+ +For the services page we used the [service] shortcode with the following options:
+ +-
+
- title +
- image +
- text +
- columns (default is 3) +
+[service title="Design" image="link to the image" text="Some text"] +[service title="Design" image="link to the image" text="Some text"] +[service title="Design" image="link to the image" text="Some text"] ++ +
+[service title="Design" image="link to the image" text="Some text" columns="4"] +[service title="Design" image="link to the image" text="Some text" columns="4"] +[service title="Design" image="link to the image" text="Some text" columns="4"] +[service title="Design" image="link to the image" text="Some text" columns="4"] ++ +
Note: The recommended size for the icon is 129 x 129 pixels.
+ +
+
+ 8) Pricing table:
+ +For the services page we used the [pricing_table] and [feature] shortcodes with the following options(pricing_table):
+ +-
+
- name +
- price (include currency as well) +
- pricetext(add some extra text like /mo) - optional +
- moretext - default is Sign Up +
- morelink - used to add a url to the more text +
- columns - default is 4 +
+[pricing_table name="Basic" price="$5.99" price_text=" / mo" moretext="Sign up" morelink="http://themeforest.net"] +[feature]3 projects[/feature] +[feature]2 Users[/feature] +[feature]1 GB Space[/feature] +[feature]1 Calendar[/feature] +[/pricing-table] + +[pricing_table name="Standard" price="$15.99" price_text=" / mo" moretext="Sign up" morelink="http://codecanyon.net"] +[feature]20 projects[/feature] +[feature]20 Users[/feature] +[feature]10 GB Space[/feature] +[feature]7 Calendars[/feature] +[/pricing_table] + +[pricing_table name="Professional" price="$25.99" price_text=" / mo" moretext="Sign up" morelink="http://photodune.net"] +[feature]Unlimited Projects[/feature] +[feature]Unlimited Users[/feature] +[feature]50 GB Space[/feature] +[feature]15 Calendars[/feature] +[/pricing_table] + +[pricing_table name="Premium" price="$35.99" price_text=" / mo" moretext="Sign up" morelink="http://themeforest.net"] +[feature]Unlimited Projects[/feature] +[feature]Unlimited Users[/feature] +[feature]100 GB Space[/feature] +[feature]Unlimited Calendars[/feature] +[/pricing_table] ++ +
You can customize it in any way once you learn exactly how it works. Unlimited options are available, there's no limit.
+
+ 
+
+
9) Skills:
+ +The skill shortcode accepts two parameters, value and bg, both optional. By default the value is 50 and the bg is set to gray. The [skills] shortcode should be used before you add some skills and be closed after. The syntax is:
+ ++[skills] +[skill value="63" bg="D1D1D1"]PHP[/skill] +[skill value="72" bg="C8C7C7"]Javascript[/skill] +[skill value="77" bg="BDBDBD"]Illustrator[/skill] +[skill value="85" bg="B3B2B2"]HTML/CSS[/skill] +[skill value="90" bg="A9A8A8"]Photoshop[/skill] +[/skills]+ +
+
+ 10) The team shortcode.
+ +The possible options for this shortcode are:
+ +-
+
- image - a little thumbnail of the member +
- name - the name of the member +
- position - the position of the member +
- description - the description of the member +
- twitter - the url of his twitter page +
- skype - skype url or link to call +
- linkedin - the linkedin url of the member +
- dribble - the url of his dribble page +
- facebook - the url of his facebook profile +
- gplus - the url of his google plus profile +
- pinterest - the url of his pinterest profile +
- columns - default is 3 +
+[team image="thumbnail image" +name="John Doe" position="DESIGNER" +description="I want to come with you to Alderaan. There's nothing for me here now." +twitter="http://twitter.com/envato" facebook="http://facebook.com/envato" +dribble="http://dribble.com" gplus="http://google.com"] ++ +
+
+ 11) Portfolio:
+ ++[portfolio"] +[portfolio_item columns="4" thumbnail="THUMB URL" image="FULL IMAGE URL" title="TITLE HERE" text="SOME TEXT."] +[/portfolio_item] +[portfolio_item columns="4" thumbnail="THUMB URL" image="FULL IMAGE URL" title="TITLE HERE" text="SOME TEXT."] +[/portfolio_item] +[portfolio_item columns="4" thumbnail="THUMB URL" image="FULL IMAGE URL" title="TITLE HERE" text="SOME TEXT."] +[/portfolio_item] +[portfolio_item columns="4" thumbnail="THUMB URL" image="FULL IMAGE URL" title="TITLE HERE" text="SOME TEXT."] +[/portfolio_item] +[/portfolio] + ++ +
+
+ 12) Buttons:
+ ++ [button color="F70A69" url="http://themeforest.net"]Awesome button[/button] + [button color="B7BF60" url="http://themeforest.net" newwindow="yes"]Awesome button[/button] + [button]Hire me[/button] + [button url="http://themeforest.net"]Hire me[/button] ++ +
All the attributes are optional, they're: color, newwindow and url
+ +
+
+ 13) Headers + subheaders
+ ++[header]Who are we?[/header] +[subheader]The force is strong with this one[/subheader] ++ +
+
+ + +
D) Page Templates - top
+ +This theme offers a blog page template, used for the blog in the menu:
+ +This is how our blog looks like: Blog
+ +You can choose this page template when you edit/create a new page in the dashboard...In the right menu, Page Attributes > Page Templates.
+ +You can customize it even more by choosing the number of posts and which categories to include
+ +
+ +
+ +
E) Custom fields - top
+ +Even if it's not required to use the custom fields, I added them in order to customize the title and description you see at the top of each page or post.
+ +For the title use the top_title custom field and add the title you want to show at the top of the page in that custom field.
+ +If you don't use them, the title of the page will be used by default, and there will be no description.
+ +For more info on how to use the custom fields, you can check this useful link: Custom fields usage
+ +To set the separator background and text + to change the background of the pages on the homepage, you have some SCRN options when you edit a page, right after the textarea for the content.
+ +
+ 
+
+ + +
F) Theme options panel - top
+ +The theme options panel is a very powerful tool you can use to customize your website. The theme options panel sections are:
+ +-
+
- General Settings +
- Navigation +
- Integration +
- Colorization & Fonts +
- Import / Export +
- Theme information +
The General Settings section handles the general stuff related to the whole site and it gives you the option to hide the theme options panel for the other users and keep it just for you. You can also change the logo letter, the favicon, change the top text on the homepage, change the e-mail address where you'll receive the contact form e-mails and one more very useful thing is the ability to add some custom css directly in the theme panel
+ +The Navigation section handles the the top menu. You can use it to configure the top menu.
+ +The Integration section is used to add custom code to the theme like google analytics code, google webmasters verification code or bing verification meta tag.
+ +The Colorization section can be used to customize the colors of the headings, links and some other areas all over the theme. Included over 200 google web fonts which you can use. For very advanced customization I highly suggest you to use Firebug and edit directly in style.css.
+ +Use the Import / Export section to export your settings if you want to migrate the theme elsewhere.
+ +
+ +
+ +
+ +
+ +
+ +
The above screenshots are just some samples of the options you'll find in the panel
+ ++ +
G) Translating the theme - top
+ +SCRN is translate-ready and has the .po and .mo language files in the /languages/ folder.
+ +To translate the theme in your own language, you need to first go to the wp-config.php file that's located in the root wordpress folder and change the language here:
+ +
+ define('WPLANG', '');
+
+
+ Use the prefix for your own language, like for example ro_RO for romanian. After you change it, you need to create the language mo and po files. You can copy/paste the english files and rename them to the same prefix you used in wp-config.php like ro-RO.po and ro-RO.mo. After that, download PoEdit and open the .po file with it. Click on "Update"
+ +
+
+ After that, you can start translating it. Once you're done, click Save and upload the language files to your host and that's all, you're done
+ +
+
+ + +
H) CSS files - top
+ +The CSS files used in this theme are:
+ +css/base.css which contains the basic reset and typography styling.
+ +/css/layout.css which contains most of the css used by the theme(other than the basic styling)
+ +/css/skeleton.css which contains the code for the 960 skeleton grid and the media queries.
+ +/css/ie.css which contains some code specific for IE. If you want to edit something in IE, this is the place to do it.
+ +/css/prettyPhoto.css which contains some code used by prettyPhoto.
+ +/css/flexslider.css which contains some code specific for flexslider.
+ + ++ +
I) JavaScript files - top
+ +The main js files used in this theme are:
+ +-
+
- jQuery +
- jQuery easing plugin +
- prettyPhoto +
- Cycle slider +
- Smooth Scroll +
- jQuery sticky +
- jQuery inView +
I'll include all of them at the end, in Sources & Credits
+ ++ +
J) FAQ - top
+ +1) When I install the theme via dashboard it says the stylesheet file is broken!
+ +You're probably installing the theme using the wrong zip file, if you're installing it using the zip file you got from envato, you need to first unzip it.
+ +2) When I go to page 2 of my blog page or category I get a 404 error!
+ +In the Theme options panel, make sure you show the same number of posts there as you have in Settings > Reading > Blog pages show at most. If it doesn't work even after that, set Blog pages show at most to 1.
+ +4) Is there any plugin required to run this theme
+ +No, but I recommend some basic ones like Akismet(for SPAM), WP PageNavi.
+ +5) My homepage is messed up and doesn't look like your demo!
+ +You probably set up a static homepage in Settings -> Reading. Make sure your blog shows the latest blog posts and not a static homepage
+ +6) Help! How do I translate the theme options with qTranslate?
+ +Use the qTranslate quicktags
+ ++ +
K) Sources and credits - top
+ +The following files and images were used in this theme, thanks to everyone!
+ +-
+
- jQuery +
- Easing jQuery plugin +
- cycle jQuery plugin +
- jQuery sticky +
- jQuery inView +
- FlexSlider +
- NHP Theme Options Framework +
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. 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.
+ +Cristi Macovei
+ + ++