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; }
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");
---------------------------
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; }
---------------------------
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"]
---------------------------
You should have this as result:
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>
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>
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>
ver 1.5 (March 1, 2022)
====================
- functions.php
- style.css
- Core Plugin (CocoBasic - Caliris WP) update to 1.5
ver 1.4 (September 23, 2020)
====================
- header.php
- functions.php
- style.css
- 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
- functions.php
- js/main.js
- css/common.css
- admin/js/custom-admin.js
- admin/custom-admin.php
- Removed: admin/js/admin.js
- Added: wpml-config.xml
- Core Plugin (CocoBasic - Caliris WP) update to 1.2
ver 1.1 (May 10, 2018)
====================
- Core Plugin (CocoBasic - Caliris WP) update to 1.1
- functions.php - minimum required ver for plugin 1.1
- PSD files added