Cosmetico v1.0 Documentation
Cosmetico Theme and Cosmetico Framework created by
cb-theme.com
1. Installation and Demo
Content
2. Plugins
3. Cosmetico Settings
4. Widgets
5. Page Templates
6. Post Templates
7. Styles
8. FAQ - Revolution Slider, Images, Page Builder,
Common Questions
9. Responsive Design
10. Demo - Examples
11. Support
12. Credits
13. Icons
1. Installation
Cosmetico has been created on WordPress 3.5, you will need at least
this version to install the theme. But that is only recommended.
1.1 Installing through WordPress Dashboard Go
to the
Appearance -> Themes -> Now click on the Install Themes
on the top -> Choose Upload instead of Search -> Select and upload
the theme. Stylesheet Missing Error? Check
below: http://support.envato.com/index.php?/Knowledgebase/Article/View/269/0/my-wordpress-theme-isnt-working-what-should-i-do
Now, click Activate Theme.
1.1a. Click
Begin Installing plugin. Check them all and select install from bulk
actions and apply it.
1.1b. Go to Plugins->Installed
Plugins. Check your plugins and active them.
1.1c. Go
to Cosmetico->Demo Content and install demo content with widgets.
Dont worry widget importer wont delete your current widgets.
1.2 Installing through FTP Using some FTP client, like
e.g.
FileZilla
or
Total
Commander upload contents of the unzipped package of Cosmetico to
"your
root server directory/wp-content/themes". So it will look like this:
"/your_root/wp-content/themes/cb-Day and Night".
Now go to
Appearance -> Themes and activate Day and Night.
After that you will see Cosmetico welcoming message allowing
you to go directly to the Settings or importing Demo Content so
everything will be like in the demo. We recommend you to install Demo
Content if that is your first time with Cosmetico.
1.3 Setting up Menu Remember to set up Menu in
"Appearance->Menus". Select Your Menu in Theme Locations-> main-menu.
1.4 Demo Content Go to "Cosmetico->Demo
Content" and follow instructions. Check import widgets to yes if you
want to copy them from our demo.
Installing demo content will
make your website the same as our demo but without Revolution Slider
and images. We have provided sample image so you can replace it where
you want to.
To configure widgets just set up menus in wordpress dashboard->appearance->menus. And then go to appearance->widgets and drop Custom Menu widgets where you want.
2. Plugins
We strongly recommend you to install these plugins, they will make
Cosmetico friendlier for your users.
2.1 WP-PageNavi - it provides nice looking
pagination.
http://wordpress.org/extend/plugins/wp-pagenavi/
2.2 Yoast Breadcrumbs. http://wordpress.org/extend/plugins/breadcrumbs/
2.3 Contact Form 7. 2.4 WP
Minfy. 2.5 WP-Retina-2x.
In order to install plugins click install plugins in the
notice at the top.
3. Cosmetico Settings
3.1 Homepage Choose your home page in Wordpress
Settings->Reading.
3.2 Styles Background -
here you can select background or pattern from images provided by
Cosmetico.
Your own background upload - here you can upload your own
background, this option will override normal background option.
3.3 Sidebars Here you can generate
sidebars, assign them to categories and choose to show them or not.
Default column, sidebar in posts and sidebar in pages options won't
affect page or post if you will select your own sidebar or sidebar
position in Custom Cosmetico Template.
3.4
Slider Use Revolution Slider
or
Anything slider - works only on the post categories. It will show
every post from a given category. If you want to show only a image
make sure you set up featured image in Post. Resize content - this
option is to resize contents of a post to fit in a slider area.
You can also create sliders by using Custom Post/Page Template or
Shortcodes.
3.5 Fullscreen Slider
Fullscreen Slider will show images attached to a page. You can attach
images to a page via Media Library or Custom Cosmetico Page Settings
metabox.
Note: Fullscreen Slider should be used
without normal slider because it will slow down the website.
3.6 Shortcodes 
Here
you can see the list of available shortcodes.
To
insert shortcodes in a post or a page click
+ button in Visual
Editor.
4. Page Templates
Cosmetico offers
8 Custom Page Templates + 1 "Sitemap" based
on normal Wordpress template system.
First of all, make sure that while editing a page Cosmetico Custom
Page is checked at the top of the page in Screen Options. It will
show metabox below editor where you can set up your own options and
choose a template for a page.
Header Settings -
You can customize header for every page. Choose between normal
header, background image that will stretch to fit in the browser
window or a slider. Sliders used in pages can be configured in
Cosmetico menu in Slider tab. You cannot configure the same slider
differently for different pages.
General Settings - this group of options affects all templates
besides Sitemap. Here we can upload images the same as in Media
Library, select sidebar position and choose which sidebar to show.
Default Page Template - it is a casual blank page in
Wordpress.
Blog Template - this template will show a list of posts from a
given category based on the settings like number of posts, number of
columns, etc. The blog will show posts based on their templates.
Portfolio Template - here you can locate your portfolio based
on posts from a given category.
Gallery Template - this template will show all images attached
to the page in a gallery format.
Video Template - a simple page showing a YouTube, Vimeo or
your own uploaded video. Supported formats are: mp4, 3gp, mov, fla.
Audio Template - a simple page showing your own uploaded mp3
file or a video from YouTube/Vimeo.
Slider Template - a page containing slider which can show
images attached to the page or posts from a category.
Contact Template - a template containing contact form.
Sidebars are not used in this template.
6. Post Templates
Header Settings - You can customize header for every post.
Choose between normal header, background image that will stretch to
fit in the browser window or a slider. Sliders used in posts can be
configured in Cosmetico menu in Slider tab. You cannot configure the
same slider differently for different posts.
Default Template - a simple blank template.
Portfolio Template - a template showing large image on the top
of the content. It is based on featured image.
Gallery, Video, Audio, Slider Template - the same as in Pages.
7. Styles
Cosmetico provides 17 predefined color styles available to
combine with transparent background images. The list is here:
grey, bright red, blue, cocoa, dark brown, coffee 1, coffee 2,
magenta, bordo, orange, green, green lemon, paradise, violet, purple
pink, raspberry pink, barbie pink. See screenshots
here If you want to choose your
own color use "Master color" changer- it will work like color styles,
or just adjust the elements yourself.
INFO:
Cosmetico color styles will override other settings such as
individual color settings.
If you will disable element
background visibility and combine this setting with disabling borders
or fixed layout Cosmetico width will automatically adjust. It is
intentionally.
8. FAQ - Revolution Slider, Images, Page Builder, Common
Questions
Revolution Slider- Go to Revolution slider on the left
in Wordpress Dashboard.
1. Add New slider.
2. Now go to
Cosmetico->Slider and select revolution slider and your slider name.
3. Go back to Revolution slider and edit it.
Change slider type
to full width.
In appearance change padding to 0.
Shadow
type: no shadow.
Settings for Navigation (going through inputs
from the top):Bullet,Solo,Round,No
Click update slider on the
left.
Now you can go back and click edit slides on your slider
main page.
If you cant add new layer or you want to
add slider caption styles like in our demo:
Edit some slide
and go to the bottom. Inside Layer params click "Edit CSS File"
Click CTRL+A to select the content of this window. Now paste this
code inside:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,300,700);
.tp-caption.vlarge_skin_alt {
font-size:100px;
color:#735741;
font-weight:500;
}
.tp-caption.vlarge_skin {
font-size:100px;
color:#ffbb00;
font-weight:500;
}
.tp-caption.large_skin_alt {
font-size:43px;
color:#735741;
font-weight:500;
}
.tp-caption.large_skin {
font-size:3px;
color:#ffbb00;
font-weight:500;
}
.tp-caption.desc_skin_alt {
font-size:24px;
font-weight:300;
color:#735741;
}
.tp-caption.desc_skin {
font-size:24px;
font-weight:300;
color:#ffbb00;
}
.tp-caption.skin_bttn_alt {
background-color: #735741;
border-radius: 30px;
border: none;
color: #FFFFFF !important;
display: inline-block !important;
font-size: 13px;
font-weight: bold !important;
padding: 10px 20px !important;
text-decoration: none;
text-transform: uppercase;
}
.tp-caption.skin_bttn_alt2 {
background-color: #d6d8cb;
border-radius: 30px;
border: none;
color: #FFFFFF !important;
display: inline-block !important;
font-size: 13px;
font-weight: bold !important;
padding: 10px 20px !important;
text-decoration: none;
text-transform: uppercase;
}
.tp-caption.skin_bttn {
background-color: #ffbb00;
border-radius: 30px;
border: none;
color: #FFFFFF !important;
display: inline-block !important;
font-size: 13px;
font-weight: bold !important;
padding: 10px 20px !important;
text-decoration: none;
text-transform: uppercase;
}
.tp-caption.skin_bttn a,.tp-caption.skin_bttn_alt a,.tp-caption.skin_bttn_alt2 a{
color:#FFF!important;
}
.tp-caption.big_yellow{
position: absolute;
color: #ffd658;
text-shadow: none;
font-weight: 400;
font-size: 100px;
line-height: 36px;
font-family: "Open Sans";
padding: 0px 4px;
padding-top: 1px;
margin: 0px;
border-width: 0px;
border-style: none;
background-color:transparent;
}
.tp-caption.big_bluee{
position: absolute;
color: blue;
text-shadow: none;
font-weight: 400;
font-size: 78px;
line-height: 36px;
font-family: "Open Sans";
padding: 0px 4px;
padding-top: 1px;
margin: 0px;
border-width: 0px;
border-style: none;
background-color:transparent;
}
.tp-caption.big_white{
position: absolute;
color: #fff;
text-shadow: none;
font-weight: 700;
font-size: 36px;
line-height: 36px;
font-family: Arial;
padding: 0px 4px;
padding-top: 1px;
margin: 0px;
border-width: 0px;
border-style: none;
background-color:#000;
letter-spacing: -1.5px;
}
.tp-caption.big_orange{
position: absolute;
color: #ff7302;
text-shadow: none;
font-weight: 700;
font-size: 36px;
line-height: 36px;
font-family: Arial;
padding: 0px 4px;
margin: 0px;
border-width: 0px;
border-style: none;
background-color:#fff;
letter-spacing: -1.5px;
}
.tp-caption.big_black{
position: absolute;
color: #000;
text-shadow: none;
font-weight: 700;
font-size: 36px;
line-height: 36px;
font-family: Arial;
padding: 0px 4px;
margin: 0px;
border-width: 0px;
border-style: none;
background-color:#fff;
letter-spacing: -1.5px;
}
.tp-caption.medium_grey{
position: absolute;
color: #fff;
text-shadow: none;
font-weight: 700;
font-size: 20px;
line-height: 20px;
font-family: Arial;
padding: 2px 4px;
margin: 0px;
border-width: 0px;
border-style: none;
background-color:#888;
white-space:nowrap;
text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}
.tp-caption.small_text{
position: absolute;
color: #fff;
text-shadow: none;
font-weight: 700;
font-size: 14px;
line-height: 20px;
font-family: Arial;
margin: 0px;
border-width: 0px;
border-style: none;
white-space:nowrap;
text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}
.tp-caption.medium_text{
position: absolute;
color: #fff;
text-shadow: none;
font-weight: 700;
font-size: 20px;
line-height: 20px;
font-family: Arial;
margin: 0px;
border-width: 0px;
border-style: none;
white-space:nowrap;
text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}
.tp-caption.large_text{
position: absolute;
color: #fff;
text-shadow: none;
font-weight: 700;
font-size: 40px;
line-height: 40px;
font-family: Arial;
margin: 0px;
border-width: 0px;
border-style: none;
white-space:nowrap;
text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}
.tp-caption.very_large_text{
position: absolute;
color: #fff;
text-shadow: none;
font-weight: 700;
font-size: 60px;
line-height: 60px;
font-family: Arial;
margin: 0px;
border-width: 0px;
border-style: none;
white-space:nowrap;
text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
letter-spacing: -2px;
}
.tp-caption.very_big_white{
position: absolute;
color: #fff;
text-shadow: none;
font-weight: 800;
font-size: 60px;
line-height: 60px;
font-family: Arial;
margin: 0px;
border-width: 0px;
border-style: none;
white-space:nowrap;
padding: 0px 4px;
padding-top: 1px;
background-color:#000;
}
.tp-caption.very_big_black{
position: absolute;
color: #000;
text-shadow: none;
font-weight: 700;
font-size: 60px;
line-height: 60px;
font-family: Arial;
margin: 0px;
border-width: 0px;
border-style: none;
white-space:nowrap;
padding: 0px 4px;
padding-top: 1px;
background-color:#fff;
}
.tp-caption.modern_medium_fat{
position: absolute;
color: #000;
text-shadow: none;
font-weight: 800;
font-size: 24px;
line-height: 20px;
font-family: 'Open Sans', sans-serif;
margin: 0px;
border-width: 0px;
border-style: none;
white-space:nowrap;
}
.tp-caption.modern_medium_fat_white{
position: absolute;
color: #fff;
text-shadow: none;
font-weight: 800;
font-size: 24px;
line-height: 20px;
font-family: 'Open Sans', sans-serif;
margin: 0px;
border-width: 0px;
border-style: none;
white-space:nowrap;
}
.tp-caption.modern_medium_light{
position: absolute;
color: #000;
text-shadow: none;
font-weight: 300;
font-size: 24px;
line-height: 20px;
font-family: 'Open Sans', sans-serif;
margin: 0px;
border-width: 0px;
border-style: none;
white-space:nowrap;
}
.tp-caption.modern_big_bluebg{
position: absolute;
color: #fff;
text-shadow: none;
font-weight: 800;
font-size: 30px;
line-height: 36px;
font-family: 'Open Sans', sans-serif;
padding: 3px 10px;
margin: 0px;
border-width: 0px;
border-style: none;
background-color:#4e5b6c;
letter-spacing: 0;
}
.tp-caption.modern_big_redbg{
position: absolute;
color: #fff;
text-shadow: none;
font-weight: 300;
font-size: 30px;
line-height: 36px;
font-family: 'Open Sans', sans-serif;
padding: 3px 10px;
padding-top: 1px;
margin: 0px;
border-width: 0px;
border-style: none;
background-color:#de543e;
letter-spacing: 0;
}
.tp-caption.modern_small_text_dark{
position: absolute;
color: #555;
text-shadow: none;
font-size: 14px;
line-height: 22px;
font-family: Arial;
margin: 0px;
border-width: 0px;
border-style: none;
white-space:nowrap;
}
.tp-caption.boxshadow{
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
.tp-caption.black{
color: #000;
text-shadow: none;
}
.tp-caption.noshadow {
text-shadow: none;
}
.tp-caption a {
color: #ff7302; text-shadow: none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out;
}
.tp-caption a:hover {
color: #ffa902;
}
Click Update.
If you want to add for
example black, white background for your layer, or you want to change
the color of the button(bttn style):
Click on your layer and
then at the bottom in Layer Params select the style you want.
For example- "light_text".
If you want to add to this text
black background add " b_20" so it will look like this "light_text
b_20".
b_20 - light black background
b_50 - more
visible black background
w_20 - light white background
w_50 - more visible white background
round - rounded border.
For example your style will look like this: "light_text b_20 round".
Buttons:
Select bttn style and add "round" for round
borders. If you want to change button color add
"black","blue","green","orange","magenta". So for example a style for
rounded green button will look like this: "bttn green round"
If you have some issues with the Revolution Slider you can contact
the author
here
That's It!
Images- If
you want to show images in post thumbnails you need to edit your post
or page and set Featured Image for it. The box is on the right
bottom. If you dont see it click Screen Settings at the top and check
it.
Page Builder- Page Builder is
really simple. Just drag and drop elements and edit them - thats it.
If you have any questions contact us on
Themeforest.
Common Questions-
1. Newsletter
Widget in the footer Activation- This was created for demo purposes.
You can find and use some Newsletter plugin and place the code in
this place.
2. Images for Galleries, Full Screen Slider etc.-
These work on images attached to a post or page. So you MUST upload
images to every post or page, you cant just choose them from Media
Library.
Thats because Wordpress allows to attach one image
to only one post or page.
If you want to attach images to a
post click Upload Multiple Images In Cosmetico Custom Page Area,
Choose your images, wait until uploader finishes and then close the
popup window. Go to the top and Click Update on the right.
Now
you can see your images below upload mulitple images button. You can
sort them as simple by drag 'n dropping.
3. Twitter
Widget- you can create it here (if you are logged in):
https://twitter.com/settings/widgets
Then just paste the code into Wordpress text widget.
4. One Page Setting Up: You can load demo content with one page
option to see thing for yourself or you can create one page layout
yourself.
First thing to do will creating new page in
wordpress. then add couple of "Full Width" blocks. Full width block
will be one your page section. Remember to set onepage name in block
settings. You will need to add this name while creating menu. To
create menu go to Appearance->Menus. Make sure that CSS Classes are
set on in top right screen options menu. Now add new menu item-
Custom item. URL is "#"+ your page name that you have set up in full
width block options. For example: #onepagetest. Then On the right
click little triangle right to your menu item and add to CSS Classes:
onepage
Thats it.
5. Grid Posts(like in demo
home): If you want to show your posts in grid style then while
editing post make sure to set up the style in "Cosmetico Custom Post"
that is below wordpress post editor. The option you are looking for
is "Recent Posts Block Style". You will need to test your grid layout
to make it right because it loads item by their post date.
6. Portfolio Single Images: You can set up portfolio single items
like in demo by changing page header type to background image. Then
scroll a little lower and upload your background image.
7. Overlays for Revolution Slider: If you want to add overlays to
your slide you can find them in your theme in img folder. Files you
are looking for are white_overlay.png and black_overlay.png
Upload them by adding new image layer and then click "depth" on the
right and make sure that ovelay is the first layer. That way it will
be always behind your other layers.
8. Heading
Classes: You can control heading font weight by adding 3 classes:
bold,light,normal. In heading block you can add for example
this is normal or bold part this part is in lighter font
9. Deleting images from blocks(page builder): You can
see hidden block options by clicking little triangles on the right of
the block.
10. Contact Form 7 Captcha: In Cosmetico we
use captcha in our contact form template. But in Hidden Widget we use
contact form 7. You can add captcha to this form by adding a plugin.
Search for "contact form 7 captcha"
11. Performance
and speed boosting: Use "w3 total cache" plugin to cache and speed up
your website. Cosmetico is fully compatible with it.
Another
thing you can do is using
cloudflare.com
but thats paid service. Also read about CDN.
Cosmetico is fast
but if you are using multiple large images in one page layout these
things can help.
13. Revolution Slider import- you can do that by import file from your wordpress theme folder - cb-cosmetico/docs/import/slider.txt. You can import the file while being in revolution slider plugin page.
14.Shop Sidebar- you can add widgets to shop sidebar by just dropping your widgets into the "shop" sidebar. Its the last sidebar in Appearance->Widgets page.
15. WooCommerce Thumbnail sizes: 205x205, for products use 300x300.
9. Responsive Design
Cosmetico works on every mobile device. Try it yourself.
10. Demo – Examples
You can install Demo Content after activating Cosmetico to see how
the theme works by yourself.
Builder examples here:
http://cb-theme.com/demo/day and
night/shortcodes/.
11. Support
We offer support for our customers - answer guaranteed on theme page
within 24 hours during working days.
12. Credits
Theme and "Cosmetico Framework" created by
cb-theme.com
Scripts used in Cosmetico:
jscolor,
JavaScript Color Picker, GNU Lesser General Public License, Jan
Odvarko,
http://odvarko.cz,
http://jscolor.com
Black & White Effect, Gianluca Guarini,
http://www.gianlucaguarini.com
AnythingSlider, Chris Coyier,
http://css-tricks.com jQuery UI,
http://docs.jquery.com/UI
Video.js - HTML5 Video Player, LGPL v3 LICENSE INFO, Zencoder,
Inc.
prettyPhoto, Stephane Caron,
http://www.no-margin-for-errors.com
jQuery Masonry, David DeSandro, MIT license,
http://masonry.desandro.com
Supersized - Fullscreen Slideshow jQuery Plugin,
http://www.buildinternet.com/project/supersized
Adipoli jQuery Image Hover Plugin,
http://jobyj.in/adipoli Backstretch,
http://srobbin.com/jquery-plugins/backstretch/
Revolution Slider on Extended License,
http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380
Aqua Page Builder base,
Syamil MJ TGM Plugin Activation,
http://tgmpluginactivation.com/
Jquery Custom Scrollbar - MZubala,
https://github.com/mzubala/jquery-custom-scrollbar
Caroufredsel/,
http://caroufredsel.dev7studios.com
Wordpress Widget Importer/Exporter,
http://wordpress.org/plugins/widget-settings-importexport/
Icons From:
http://findicons.com/pack/2536/soft_media_vol_1,
Pixelden.com
Icons From:
http://findicons.com/pack/2446/free_icons_pack,
smorge.com
Social Icons From:
http://findicons.com/pack/2229/social_media_mini,
Paul Robert Lloyd
Font Awesome:
http://fortawesome.github.io/Font-Awesome/
Images bought for commercial use from
depositphotos.com
13. Font Awesome Icons:
You can use them in code:
Or Page Builder(Headings,Tabs,Callouts) just by clicking.
- icon-expand-alt
- icon-collapse-alt
- icon-smile
- icon-frown
- icon-meh
- icon-gamepad
- icon-keyboard
- icon-flag-alt
- icon-flag-checkered
- icon-terminal
- icon-code
- icon-mail-forward (alias)
- icon-mail-reply (alias)
- icon-reply-all
- icon-mail-reply-all (alias)
- icon-star-half-empty
- icon-star-half-full (alias)
- icon-location-arrow
- icon-rotate-left (alias)
- icon-rotate-right (alias)
- icon-crop
- icon-code-fork
- icon-unlink
- icon-question
- icon-info
- icon-exclamation
- icon-superscript
- icon-subscript
- icon-eraser
- icon-puzzle-piece
- icon-microphone
- icon-microphone-off
- icon-shield
- icon-calendar-empty
-
icon-fire-extinguisher
- icon-rocket
- icon-maxcdn
-
icon-chevron-sign-left
-
icon-chevron-sign-right
- icon-chevron-sign-up
-
icon-chevron-sign-down
- icon-html5
- icon-css3
- icon-anchor
- icon-unlock-alt
- icon-bullseye
-
icon-ellipsis-horizontal
-
icon-ellipsis-vertical
- icon-rss-sign
- icon-play-sign
- icon-ticket
- icon-minus-sign-alt
- icon-check-minus
- icon-level-up
- icon-level-down
- icon-check-sign
- icon-edit-sign
-
icon-external-link-sign
- icon-share-sign