Contents

1. Documentation Park WP

2. Set Up Video

3. Set Up Video

4. Set Up Video

5. Center Widgets in Footer

6. Documentation Blanka WP

7. How To Edit Tutorial

8. Change Font

9. Documentation Ocularus WP

10. Documentation Kapena WP

11. Set Up Video

12. Set Up Video

13. Set Up Video

14. Set Up Video

15. Set Up Video

16. Documentation Caliris WP

17. Change Header and Footer Logo Size

18. Add Posts Thumbnails in Latest Posts shortcode (News Section)

19. Set Up Video

20. Documentation Seppo WP

21. Documentation Cardea WP

22. Update 2.0

23. Documentation Opta WP

24. Set Up Video

25. How to edit Social Icons

26. Add Posts Thumbnails in Latest Posts shortcode (News Section)

27. Documentation Meelo WP

28. Documentation Anotte WP

29. How to edit Social Icons

30. Add Contact Form with Contact Form 7 Plugin

1. Documentation Park WP

Manual for Park WP

2. Set Up Video

3. Set Up Video

4. Set Up Video

5. Center Widgets in Footer

To center the Widgets in Footer add this CSS code in Dashboard > Appearance > Customize > Additional CSS

ul#footer-sidebar li.widget
{
    text-align:center;
}

6. Documentation Blanka WP

Manual for Blanka WP

7. How To Edit Tutorial

8. Change Font

To add new Google Font, lets say "Oswald" - https://fonts.google.com/specimen/Oswald you need to find this line of code in functions.php:

$font_url = add_query_arg('family', urlencode('Playfair Display|Montserrat:400,700|Roboto:300,300i,400,400i,700,700i'), "//fonts.googleapis.com/css");

and replace with this code:

$font_url = add_query_arg('family', urlencode('Oswald|Playfair Display|Montserrat:400,700|Roboto:300,300i,400,400i,700,700i'), "//fonts.googleapis.com/css");

on this way, you will include just Oswald Regular weight. If you want to include Oswald Regular and Bold use code like this:

$font_url = add_query_arg('family', urlencode('Oswald:400,700|Playfair Display|Montserrat:400,700|Roboto:300,300i,400,400i,700,700i'), "//fonts.googleapis.com/css");

Now, your new Google Font is included in theme, but you need to make some CSS changes.

Here is a CSS code which you need to add in Dashboard > Appearance > Customize > Additional CSS to replace all "Playfair" font with "Oswald":

.menu-left-text, .post-num, .blog-item-holder h2.entry-title, 
.page h1.entry-title, .blog h1.entry-title, .single h1.entry-title,
.nav-previous a, .nav-next a, .archive-title h1, .search .search-title h1, 
.grid-item.quote-item, .portfolio-text-holder .portfolio-text,
.taxonomy-title h1, .carousel-slider .slick-slide .item-text a,
.single-gallery h1.entry-title, .big-text, .footer-first-line,
.our-position-holder, h4.widgettitle
{
    font-family: 'Oswald', serif;
}

9. Documentation Ocularus WP

Manual for Ocularus WP

10. Documentation Kapena WP

Manual for Kapena WP

11. Set Up Video

12. Set Up Video

13. Set Up Video

14. Set Up Video

15. Set Up Video

16. Documentation Caliris WP

Manual for Caliris WP

17. Change Header and Footer Logo Size

Our default size for logo in header and footer is 140x140px but using some CSS code it is displayed 70x70px logo. Image is 140x140px but it is displaying 70x70px.

Why?

On this way, our logo is retina ready - it will look perfect on any device with any resolution.

How to change Header and Footer logo size?

To change image size for Header and Footer logo, in: 

Dashboard > Appearance > Customize > Additional CSS

add code like this:

.header-logo img {
width: auto;
height: auto;
}
.footer-logo {
width: auto;
height: auto;
}

This code will use the original sizes for Header and for Footer images. But, after this code, your header logo (maybe) is not center properly with "Menu" lines. You can use some more CSS code to move it Up/Down to make it perfect, like this:

.header-logo img {
width: auto;
height: auto;
margin-top: -20px;
}
.footer-logo {
width: auto;
height: auto;
}

*change value for "margin-top"

But with this code your logo will not be Retina Ready. If is not important for you to be Retina Ready, you are done. Don't read the boring text below.


I want bigger logo than 70x70px and to be Retina Ready!

Lets say, you need a Header logo which will be displayed in 200x150px dimension and Footer logo which will be displayed in 100x100px. That mean, you will need to create a Header logo which is 400x300px and a Footer logo 200x200px and in: 

Dashboard > Appearance > Customize > Additional CSS

add code like this:

.header-logo img {
width: 200px;
height: 150px;
margin-top: -20px;
}
.footer-logo {
width: 100px;
height: 100px;
}

*change value for "margin-top"

Now, your Header (200x150px) and Footer (100x100px) logo are Retina Ready.


Different Logo size on smaller resolutions

In case that you need to use different size for logo for smaller resolutions, you can add code like this in

Dashboard > Appearance > Customize > Additional CSS:

@media screen and (max-width: 1020px){
.header-logo img {
    width: 65px;
    height: 50px;
}
.footer-logo{
    width: 65px;
    height: 50px;
}
}

In "translation" this code say - when the screen width is lower then 1020px, use other dimensions for logo (65x50px) and for footer logo.

You can use some other "break point", let say 768px instant of 1020px and then to make your logo smaller.  

18. Add Posts Thumbnails in Latest Posts shortcode (News Section)

PHP part:

In functions.php add this code:

function cocobasic_latest_posts_thumbnails($atts, $content = null) {
    extract(shortcode_atts(array(
        "class" => '',
        "num" => 5,
        "more" => ''
                    ), $atts));
    global $post;
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => $num
    );
    $loop = new WP_Query($args);
    $return = '<div class="blog-holder-scode latest-posts-scode block center-relative">';
    while ($loop->have_posts()) : $loop->the_post();
        $cat = '';
        foreach ((get_the_category()) as $category) {
            $cat .= '<li><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li> ';
        }
        $return .= '<article id="post-' . $post->ID . '" class="relative blog-item-holder-scode">';
        if (has_post_thumbnail()) {
            $medium_image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');                        
            $return .= '<a href="' . get_permalink($post->ID) . '"><div class="latest-posts-thumbnail" style="background-image: url(' . $medium_image_url[0] . ');"></div></a>';
        }
        $return .= '<h4 class="entry-title"><a href="' . get_permalink($post->ID) . '">' . get_the_title() . '</a></h4>
                    <div class="entry-date published">' . get_the_date('j M Y') . '</div>
                                    <div class="cat-links">
                            <ul>
                            ' . $cat . '                              
                            </ul>
                        </div>';
        $return .= '</article>';
    endwhile;
    if ($more != '') {
        $return .= '<div class="more-posts-link"><a href="' . $more . '"><img src="' . get_template_directory_uri() . '/images/arrow_right@2x.png" alt=""></a></div>';
    }
    $return .= '<div class="clear"></div></div>';
    wp_reset_postdata();
    return $return;
}
add_shortcode("latest_posts_thumbnails", "cocobasic_latest_posts_thumbnails");

---------------------------

CSS part:

In Dashboard > Appearance > Customize > Additional CSS :

.latest-posts-thumbnail {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center center;
    margin-bottom: 20px;
    transition: .3s;
}
.latest-posts-thumbnail:hover {
    opacity: 0.8;
}

---------------------------

Update the content:

On your "News" section, instant of using:

[latest_posts num="5" more="YOUR_LINK_TO_BLOG"]

use the new shortcode, like this:

[latest_posts_thumbnails num="5" more="YOUR_LINK_TO_BLOG"]

---------------------------

The result:

You should have this as result:

 

19. Set Up Video

20. Documentation Seppo WP

Manual for Seppo WP

21. Documentation Cardea WP

Manual for Cardea WP

22. Update 2.0

There was a problem with old slider (used on Home page - index.html) on iOS 9 devices.
It looks like the Home slider was broken on iOS 9 - we have test the site with phone emulator and site works fine on iOS 10 but there was a problem on iOS 9.

Carousel slider is replaced with new one (it looks the same like the old one).

Replaced files:

css/swiper.min.css - with - css/flickity.min.css
js/swiper.min.js - with - js/flickity.pkgd.min.js

Also changed:

- All HTML pages to include new CSS and JS
- js/main.js
- style.css
- index.html - new slider html code

23. Documentation Opta WP

Manual for Opta WP

24. Set Up Video

25. How to edit Social Icons

The default code is in  Dashboard > Appearance > Customize > Footer > Footer Social Content and looks like this:

<a href="#"><span class="fa fa-twitter"></span></a>
<a href="#"><span class="fa fa-facebook"></span></a>
<a href="#"><span class="fa fa-behance"></span></a>
<a href="#"><span class="fa fa-dribbble"></span></a>

You need to change "#" with your links, so you will have, for example for twitter icon, link like this:

<a href="https://twitter.com/CocoBasicThemes"><span class="fa fa-twitter"></span></a>

If you want to open it in new tab, you will use code like this:

<a href="https://twitter.com/CocoBasicThemes" target="_blank"><span class="fa fa-twitter"></span></a>

Remove some of icons

If you need just lets say Twitter and Facebook, you will have code like this:

<a href="https://twitter.com/CocoBasicThemes"><span class="fa fa-twitter"></span></a>
<a href="https://facebook.com/"><span class="fa fa-facebook"></span></a>

Add New Icons

If you need to add some other icons (we are using font awesome 4.7.0 version) you need to find it here:

https://fontawesome.com/v4.7.0/icons/

And for example you need YouTube icon, this one:

https://fontawesome.com/v4.7.0/icon/youtube/

You need to use "fa-youtube" class like this:

<a href="https://www.youtube.com/channel/UC5-ceUIpoTNI_YAOtM0fRhQ"><span class="fa fa-youtube"></span></a>

26. Add Posts Thumbnails in Latest Posts shortcode (News Section)

PHP part:

In functions.php add this code:

function cocobasic_latest_posts_thumbnails($atts, $content = null) {
    extract(shortcode_atts(array(
        "class" => '',
        "num" => 5
                    ), $atts));
    global $post;
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => $num
    );
    $loop = new WP_Query($args);
    $return = '<div class="blog-holder-scode latest-posts-scode block center-relative">';
    while ($loop->have_posts()) : $loop->the_post();
        $cat = '';
        foreach ((get_the_category()) as $category) {
            $cat .= '<li><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li> ';
        }
        $return .= '<article id="post-' . $post->ID . '" class="relative blog-item-holder-scode">';
        
         if (has_post_thumbnail()) {
            $medium_image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');                        
            $return .= '<a href="' . get_permalink($post->ID) . '"><div class="latest-posts-thumbnail" style="background-image: url(' . $medium_image_url[0] . ');"></div></a>';
        }
        
        $return .= '<div class="entry-date published">' . get_the_date() . '</div>
                                    <div class="cat-links">
                            <ul>
                            ' . $cat . '                              
                            </ul>
                        </div>';
        $return .= '<h4 class="entry-title"><a href="' . get_permalink($post->ID) . '">' . get_the_title() . ' <span class="arrow"></span></a></h4>';
        $return .= '<div class="excerpt">' . get_the_excerpt() . '</div>';
        $return .= '</article>';
    endwhile;
    $return .= '<div class="clear"></div></div>';
    wp_reset_postdata();
    return $return;
}
add_shortcode("latest_posts_thumbnails", "cocobasic_latest_posts_thumbnails");

---------------------------

CSS part:

In Dashboard > Appearance > Customize > Additional CSS :

.latest-posts-thumbnail {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center center;
    margin-bottom: 20px;
    transition: .3s;
}
.latest-posts-thumbnail:hover {
    opacity: 0.8;
}

---------------------------

Update the content:

On your "News" section, instant of using:

[latest_posts num="6"]

use the new shortcode, like this:

[latest_posts_thumbnails num="6"]

---------------------------

The result:

You should have this as result:

 

27. Documentation Meelo WP

Manual for Meelo WP

28. Documentation Anotte WP

Manual for Anotte WP

29. How to edit Social Icons

The default code is in  Dashboard > Appearance > Customize > Footer > Footer Social Content and looks like this:

<a href="#"><span class="fa fa-twitter"></span></a>
<a href="#"><span class="fa fa-facebook"></span></a>
<a href="#"><span class="fa fa-behance"></span></a>
<a href="#"><span class="fa fa-dribbble"></span></a>

You need to change "#" with your links, so you will have, for example for twitter icon, link like this:

<a href="https://twitter.com/CocoBasicThemes"><span class="fa fa-twitter"></span></a>

If you want to open it in new tab, you will use code like this:

<a href="https://twitter.com/CocoBasicThemes" target="_blank"><span class="fa fa-twitter"></span></a>

Remove some of icons

If you need just lets say Twitter and Facebook, you will have code like this:

<a href="https://twitter.com/CocoBasicThemes"><span class="fa fa-twitter"></span></a>
<a href="https://facebook.com/"><span class="fa fa-facebook"></span></a>

Add New Icons

If you need to add some other icons (we are using font awesome 4.7.0 version) you need to find it here:

https://fontawesome.com/v4.7.0/icons/

And for example you need YouTube icon, this one:

https://fontawesome.com/v4.7.0/icon/youtube/

You need to use "fa-youtube" class like this:

<a href="https://www.youtube.com/channel/UC5-ceUIpoTNI_YAOtM0fRhQ"><span class="fa fa-youtube"></span></a>

30. Add Contact Form with Contact Form 7 Plugin


Code used for Contact Form:

<p>[text* your-name placeholder "Name"]</p>
<p>[email* your-email placeholder "Email"]</p>
<p>[textarea your-message placeholder "Message..."]</p>
<p class="contact-submit-holder">[submit "Send"]</p>

CSS code:

.wpcf7-form
{
    max-width: 100%;
    width: 770px;
    margin: 0 auto;
    font-size: 22px;
    color: #000;
}
.wpcf7-form p
{
    margin-bottom: 0 !important;
}
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 textarea
{
    border: 0;
    border-bottom: 1px solid;
    padding-bottom: 5px;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    width: 100%;
    line-height: 25px;
    color: #000;
    font-weight: 400;
    margin-bottom: 35px;
}
.wpcf7 textarea
{
    height: 150px;
}
.wpcf7 input[type=text]::-webkit-input-placeholder, .wpcf7 input[type=email]::-webkit-input-placeholder, .wpcf7 textarea::-webkit-input-placeholder
{
    font-family: 'Open Sans', sans-serif;
    color: #000;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
}
.wpcf7 input[type=text]::-moz-placeholder, .wpcf7 input[type=email]::-moz-placeholder, .wpcf7 textarea::-moz-placeholder
{
    font-family: 'Open Sans', sans-serif;
    color: #000;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    opacity: 1;
}
.wpcf7 input[type=text]:-ms-input-placeholder, .wpcf7 input[type=email]:-ms-input-placeholder, .wpcf7 textarea:-ms-input-placeholder
{
    font-family: 'Open Sans', sans-serif;
    color: #000;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
}
.wpcf7 input[type=text]:-moz-placeholder, .wpcf7 input[type=email]:-moz-placeholder, .wpcf7 textarea:-moz-placeholder
{
    font-family: 'Open Sans', sans-serif;
    color: #000;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    opacity: 1;
}
.wpcf7 input[type=text], .wpcf7 input[type=email]
{
    padding-bottom: 5px;
}
.wpcf7 input[name="your-name"]
{
    margin-top: 0;
    padding-top: 0;
}
.contact-submit-holder
{
    position: relative;
    margin-bottom: 25px;
}
.wpcf7 input[type=submit]
{
    display: inline-block;
    border: none;
    text-align: center;
    padding: 20px 40px 20px 45px;
    cursor: pointer;
    margin-bottom: 25px;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    font-family: 'Open Sans', sans-serif;
    color: #fff !important;
    background-color: #f1576b;    
    padding-bottom: 17px;
    padding-top: 17px;
    padding-left: 60px;
    padding-right: 60px;    
    transition: all .2s linear;    
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
}
.wpcf7 input[type=submit]:hover
{
    background-color: #000;
    color: #fff;
}
span.wpcf7-not-valid-tip 
{
    font-size: 12px;
}    
div.wpcf7-response-output 
{
    margin: 0;
    padding: 0.2em 1em;
    font-size: 14px;
}
div.wpcf7 .ajax-loader
{
    display: none !important;
}