Contents 1. Changelog 2. How To Edit Tutorial 3. Changelog 4. Set Up Video 5. Changelog 6. Add Posts Thumbnails in Latest Posts shortcode (News Section) 7. Documentation Kaven WP 8. Changelog 9. Documentation Romea WP 10. Changelog 11. Changelog 12. Documentation Cardea WP 13. Changelog 14. Changelog 15. Documentation Pekko WP 16. Documentation Volos WP 17. Changelog 18. Documentation Meelo WP 19. Changelog 20. Changelog 21. Set Up Video 22. Set Up Video 23. Changelog 24. Add Posts Thumbnails in Latest Posts shortcode (News Section) 25. Changelog 26. Center Widgets in Footer 27. Changelog 28. Add Contact Form with Contact Form 7 Plugin 29. Changelog 30. Documentation Fabius WP 31. Set Up Video 32. Set Up Video 33. Set Up Video 34. Changelog 35. Return CocoBasic shortcode generator Icon 36. Changelog 37. Changelog 38. Set Up Video 39. Documentation Neresa WP 40. Documentation Caliris WP 41. Changelog 42. Set Up Video 43. Documentation Anotte WP 44. Documentation Park WP 45. Documentation Blanka WP 46. Documentation Kapena WP 47. Changelog 48. Set Up Video 49. Documentation Ocularus WP 50. Set Up Video 51. Set Up Video 52. How to edit Social Icons 53. Changelog 54. Set Up Video 55. Set Up Video 56. Changelog 57. Changelog 58. Set Up Video 59. Set Up Video 60. How to edit Social Icons 61. Changelog 62. Documentation Opta WP 63. Set Up Video 64. Changelog 65. Set Up Video 66. Changelog 67. Changelog 68. Change Header and Footer Logo Size 69. Documentation Ukko WP 70. Set Up Video 71. Changelog 72. Changelog 73. Changelog 74. Changelog 75. Changelog 76. Portfolio Category/Filter in ver 2.0 77. Change Font 78. Documentation Seppo WP 79. Documentation Teoro WP 1. Changelog ver 2.1 ( November 21, 2022)
- js/jquery.js
- On all .html files added security "https " connection to Google font instead of "http "
ver 2.0 ( May 11, 2017)
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
2. How To Edit Tutorial 3. Changelog ver 1.1 ( November 21, 2022)
- js/jquery.js
4. Set Up Video 5. Changelog ver 1.1 (April 29, 2022)
===================
- style.css
- CocoBasic - Neresa Elementor Widgets plugin update to 1.1
6. 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:
7. Documentation Kaven WP 8. Changelog ver 1.3 (November 21, 2022)
- js/jquery.prettyPhoto.js
ver 1.2 (November 21, 2022)
- js/jquery.js
- On all .html files added security "https " connection to Google font instead of "http "
ver 1.1 (November 5, 2020)
====================
- style.css
9. Documentation Romea WP 10. Changelog ver 1.2 (April 29, 2022)
- style.css
- CocoBasic - Teoro Elementor Widgets plugin update to 1.2
ver 1.1 (March 1, 2022)
==============================
- functions.php
- CocoBasic - Teoro Elementor Widgets plugin update to 1.1
11. Changelog ver 1.3 (February 12, 2024) ===================
- style.css
ver 1.2 (April 29, 2022) ===================
- style.css
- CocoBasic - Kaven Elementor Widgets plugin update to 1.2
ver 1.1 (March 1, 2022)
- functions.php
- CocoBasic - Kaven Elementor Widgets plugin update to 1.1
ver 1.0 (September 23, 2020) ==============================
- the DEMO CONTENT file is updated
12. Documentation Cardea WP 13. Changelog ver 1.1 ( November 21, 2022)
- js/jquery.js
14. Changelog ver 1.7 (March 21, 2023)
- functions.php
- header.php
ver 1.5 (September 23, 2020)
====================
- header.php
ver 1.4 (June 28, 2019)
- style.css
ver 1.3.1 (January 9, 2019) ====================
- style.css
ver 1.3 (January 9, 2019)
- style.css
- Added: wpml-config.xml
- Core Plugin (CocoBasic - Ocularus WP) update to 1.3
ver 1.2 (Jul 5, 2017)
Fixed:
ver 1.1 (Jun 22, 2017)
Fixed:
Added:
15. Documentation Pekko WP 16. Documentation Volos WP 17. Changelog ver 1.5 (January 31, 2023)
- style.css
- CocoBasic - Romea Elementor Widgets plugin update to 1.4
ver 1.4 (April 29, 2022) ===================
- style.css
- CocoBasic - Romea Elementor Widgets plugin update to 1.3
ver 1.3 ( March 1, 2022) ==============================
- style.css
- CocoBasic - Romea WP plugin update to 1.2
ver 1.2 ( November 13, 2020) ==============================
- style.css
- CocoBasic - Romea WP plugin update to 1.1
ver 1.1 ( October 16, 2020) ==============================
- admin/class-tgm-plugin-activation.php
18. Documentation Meelo WP 19. Changelog ver 1.4 (April 29, 2022)
===================
- style.css
- CocoBasic - Meelo Elementor Widgets plugin update to 1.1
ver 1.3 (March 1, 2022)
- style.css
- CocoBasic - Meelo plugin update to 1.3ver 1.2 (April 26, 2019)
- style.css
- Added: CocoBasic - Meelo Elementor Widgets plugin v1.0
ver 1.1 (December 12, 2018)
- style.css
20. Changelog ver 1.4 (April 4, 2023) ==============================
- Demo 2 updated to 1.1
==============================
ver 1.2 ( November 21, 2022) ==============================
- js/jquery.js
21. Set Up Video 22. Set Up Video 23. Changelog ver 1.1 ( November 21, 2022)
- js/jquery.js
- On all .html files added security "https " connection to Google font instead of "http "
24. 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/[email protected] " 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:
25. Changelog ver 2.3 (February 1, 2023)
- style.css
- CocoBasic - Cardea Elementor Widgets plugin update to 2.2
ver 2.2 (April 29, 2022) ===================
- style.css
- CocoBasic - Cardea Elementor Widgets plugin update to 2.1
ver 2.1 (March 1, 2022)
- functions.php
ver 2.0 (February 1, 2021)
- functions.php
- Portfolio category / filter is added - https://cocobasic.ticksy.com/article/16758
ver 1.8 (September 23, 2020)
- functions.php
ver 1.7 (August 20, 2019)
- style.css
- Added: Demo 8
ver 1.6 (July 23, 2019)
- Added: Demo 7
ver 1.5 (July 8, 2019) ==============================
- style.css
- CocoBasic - Cardea plugin update to 1.5
- Added: Demo 6
ver 1.4 (May 13, 2019)
- style.css
- CocoBasic - Cardea plugin update to 1.4
- Added: Demo 5
ver 1.3 (May 5, 2019)
ver 1.2 (February 8, 2019)
ver 1.1 (December 24, 2018)
26. 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;
}
27. Changelog ver 1.2 ( November 21, 2022)
- js/jquery.js
- On all .html files added security "https " connection to Google font instead of "http "
ver 1.1 (April 04, 2017)
28. 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;
} 29. Changelog ver 1.1 ( November 21, 2022)
- js/jquery.js
30. Documentation Fabius WP 31. Set Up Video 32. Set Up Video 33. Set Up Video https://www.youtube.com/watch?v=otzDrK2u_Us
34. Changelog ver 1.7 (March 21, 2023)
- functions.php
ver 1.6 (December 22, 2020) ====================
- header.php
ver 1.5 (September 23, 2020) ====================
- header.php
ver 1.4 (June 13, 2019) ====================
- CocoBasic - Opta plugin updated to 1.4
ver 1.3 (January 12, 2019) ====================
- style.css
- Removed: admin/js/admin.js
- CocoBasic - Opta plugin updated to 1.3
ver 1.2 (Nov 30, 2017) ====================
Fixed:
- style.css
ver 1.1 (Jul 6, 2017) ====================
Fixed:
- loop-portfolio.php
Added: - child theme
35. Return CocoBasic shortcode generator Icon With WordPress 5.X we have disabled the shortcode generator icon - this icon (add-on) was created for the old editor. To return again this icon, you need to install the Classic Editor plugin - https://wordpress.org/plugins/classic-editor/
*Note - For Opta ver 1.4 and up - you don't need to do any changes bellow, just install the Classic Editor and Shortcode Generator Icon will be back.
Now, follow the steps 1-5 from this image:
And add "//" on lines 19 and 21.
Will my theme work without this changes (without shortcode generator icon)?
Yes, your theme will work and all shortcodes will work fine. The shortcode generator just "write" shortcodes (text) for you in the editor and has nothing to do with shortcode functionality.
36. Changelog ver 1.2 ( November 21, 2022)
- js/jquery.js
- On all .html files added security "https " connection to Google font instead of "http "
ver 1.1 (Aug 22, 2018)
37. Changelog ver 1.2 (November 21, 2022)
- js/jquery.js
- On all .html files added security "https " connection to Google font instead of "http "
ver 1.1 (November 5, 2020)
- style.css
38. Set Up Video 39. Documentation Neresa WP 40. Documentation Caliris WP 41. Changelog ver 1.4 (March 1, 2022)
- style.css
ver 1.3 (June 28, 2019)
- Revolution Slider plugin update to 5.4.8.3
ver 1.2 (December 11, 2018) ==============================
- CocoBasic - Seppo plugin update to 1.2
ver 1.1 (December 11, 2018)
- style.css
42. Set Up Video 43. Documentation Anotte WP 44. Documentation Park WP 45. Documentation Blanka WP 46. Documentation Kapena WP 47. Changelog ver 1.6 (February 12, 2024)
- style.css
- CocoBasic - Volos Elementor Widgets plugin update to 1.5
ver 1.5 (February 9, 2023) ===================
- style.css
- CocoBasic - Volos Elementor Widgets plugin update to 1.4
- style.css
- CocoBasic - Volos Elementor Widgets plugin update to 1.3
ver 1.3 (March 1, 2022) ==============================
- functions.php
- CocoBasic - Volos WP plugin update to 1.2
ver 1.2 (December 2, 2020) ==============================
- functions.php
- CocoBasic - Volos WP plugin update to 1.1
ver 1.1 (March 16, 2020) ==============================
- header.php
48. Set Up Video 49. Documentation Ocularus WP 50. Set Up Video 51. Set Up Video https://www.youtube.com/watch?v=aq0GDBJgJSo
52. 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>
53. Changelog ver 1.2 (September 23, 2020) ====================
- header.php
ver 1.1 (December 24, 2018)
====================
- style.css
- Core Plugin (CocoBasic - Kapena WP) update to 1.1
54. Set Up Video 55. Set Up Video 56. Changelog ver 1.1 ( November 20, 2022)
- js/jquery.js
- On all .html files added security "https" connection to Google font instead of "http"
57. Changelog
ver 1.5 (March 1, 2022)
- functions.php
- Core Plugin (CocoBasic - Caliris WP) update to 1.5
ver 1.4 (September 23, 2020)
====================
- header.php
- Core Plugin (CocoBasic - Caliris WP) update to 1.4
ver 1.3 (June 28, 2019)
- Core Plugin (CocoBasic - Caliris WP) update to 1.3
ver 1.2 (December 25, 2018)
- style.css
- Removed: admin/js/admin.js
- Core Plugin (CocoBasic - Caliris WP) update to 1.2
ver 1.1 (May 10, 2018)
- Core Plugin (CocoBasic - Caliris WP) update to 1.1
58. Set Up Video 59. Set Up Video 60. 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>
61. Changelog ver 1.6 (March 21, 2023)
- functions.php
ver 1.5 (February 4, 2021)
====================
- style.css
- CocoBasic - Park plugin updated to 1.4
ver 1.4 (September 23, 2020)
- header.php
ver 1.3 (June 28, 2019)
- CocoBasic - Park plugin updated to 1.3
ver 1.2.1 (December 14, 2018)
- style.css
ver 1.2 (December 14, 2018)
- style.css
- Removed: admin/js/admin.js
- CocoBasic - Park plugin updated to 1.2
ver 1.1 (Jul 5, 2017)
Fixed:
62. Documentation Opta WP 63. Set Up Video 64. Changelog ver 1.1 ( November 19, 2022)
- js/jquery.js
- On all .html files added security "https " connection to Google font instead of "http "
65. Set Up Video 66. Changelog ver 1.3 (April 29, 2022)
===================
- style.css
- CocoBasic - Fabius Elementor Widgets plugin update to 1.2
ver 1.2 ( March 1, 2022)
- style.css
- CocoBasic - Fabius WP plugin update to 1.1
==============================
- style.css
67. Changelog ver 1.1 ( November 21, 2022)
- js/jquery.js
68. 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 200x150 px 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.
69. Documentation Ukko WP 70. Set Up Video 71. Changelog ver 2.0 ( November 20, 2022)
- style.css
Files removed:
- css/bootstrap.css
ver 1.1 ( March 12, 2021)
==============================
- js/jquery.min.js
72. Changelog ver 1.7 (February 16, 2021)
- funcitions.php
- Core Plugin (CocoBasic - Anotte WP) update to 1.6
ver 1.6 (October 1, 2020) ====================
- header.php
ver 1.5 (June 28, 2019) ====================
- Core Plugin (CocoBasic - Anotte WP) update to 1.5
ver 1.4 (December 23, 2018)
- style.css
- Core Plugin (CocoBasic - Anotte WP) update to 1.4
ver 1.3 (December 13, 2018)
- style.css
- Core Plugin (CocoBasic - Anotte WP) update to 1.3
ver 1.2 (December 13, 2018)
- style.css
- Core Plugin (CocoBasic - Anotte WP) update to 1.2
ver 1.1 (July 10, 2018)
- header.php
- Core Plugin (CocoBasic - Anotte WP) update to 1.1
73. Changelog ver 1.4 (April 29, 2022)
- style.css
- CocoBasic - Ukko Elementor Widgets plugin update to 1.4
ver 1.3 (March 1, 2022) ==============================
- functions.php
- CocoBasic - Ukko Elementor Widgets plugin update to 1.3
ver 1.2 (November 12, 2021) ==============================
- functions.php
- CocoBasic - Ukko Elementor Widgets plugin update to 1.2
ver 1.1 (March 16, 2020) ==============================
- header.php
- CocoBasic - Ukko Elementor Widgets plugin update to 1.1
74. Changelog ver 1.4 (September 23, 2020) ====================
- header.php
- Core Plugin (CocoBasic - Blanka WP) update to 1.4
ver 1.3 (June 28, 2019) ====================
- Core Plugin (CocoBasic - Blanka WP) update to 1.3
ver 1.2 (January 8, 2019)
- style.css
- Removed: admin/js/admin.js
- Core Plugin (CocoBasic - Blanka WP) update to 1.2
ver 1.1 (March 16, 2018)
- style.css
- cocobasic-shortcode.zip is updated to v1.1
75. Changelog ver 1.3 (April 29, 2022)
===================
- style.css
- CocoBasic - Pekko Elementor Widgets plugin updated to 1.2
ver 1.2 (June 28, 2021)
===================
- style.css
- CocoBasic - Pekko WP plugin updated to 1.1
ver 1.1 (March 16, 2020)
==============================
- header.php
76. Portfolio Category/Filter in ver 2.0 In ver 2.0 the Portfolio Category / Filter is added. If you want to use this option, you need to set for each portfolio item the category like on the image below:
After you have set Portfolio categories for each item, you need to enable the category filter on Portfolio page. Take a look on image below:
77. 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.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;
} 78. Documentation Seppo WP 79. Documentation Teoro WP 
