1.0 | 2023

Thank you for purchasing Colcave. If you have any questions that are beyond the scope of this documentation, please feel free to email us.

Thank you so much!

Note: For free users, some of the widgets and settings discussed in this documentation will not work.

Welcome!

Thanks for purchasing/downloading our template. We appriciate!. This documentation will help you to setup the template and its various elements. Visit our website for more professional and modern blogger templates.Templatescave

Colcave - Introduction

Hi, Thanks for purchasing Colcave Blogger template. We appriciate!

Colcave is suitable for magazine, news, multipurpose and personal blog.

The template is designed using the latest coding approach and flexible layout structure. It allows you to easily change the colors, fonts, backgrounds and other elements within the template to personalize it according to your own design approach. It has also a settings section which lets you to easily change some of the important settings of the template. This documentation explains evrything you need to setup the template.

Features

  • PowerFull Admin Panel
  • Responsive layout
  • RTL Support
  • 4 Unique Layouts
  • 10+ Content Blocks
  • Search Engine Optimized (SEO)
  • Multiple layout widgets styles
  • Theme Options for various elements
  • Unlimited Colors
  • Unlimited Fonts
  • Customizable Design
  • HTML, CSS and Jquery Minification for fast loading
  • Back to Top Button
  • Blogger Theme Customize Support
  • Multiple widgets styles
  • Support System
  • Social Sharing and Profile
  • Multi Level Dropdown Menu
  • Mobile Ready Accordion Menu
  • Cross Browser Compatibility
  • Latest Font Awesome Icons Integration
  • Posts Pagination
  • Related Posts Widget
  • 3 Column Footer Area
  • Grid System for Widgets design
  • Facebook Open Graph & Twitter Cards
  • Ads Ready
  • Retina Ready
  • Drag and Drop Widgets
  • jQuery and CSS3 Effects
  • Ticker posts with carousel
  • Slider Support for Recent Posts
  • and Many More..

What's Included

In the package you have downloaded you will find:

  • Colcave template .xml file (except the images)
  • Documentation To help you set up your website.
  • Images including some background images and necessary icons etc.

License note: All Third-party resources that come with this theme such as jQuery plugins are under the MIT license. Moreover, the images used into the demo are for display purpose and the property of their respective owners (see credits).

Getting Started!

Before uploading the theme you have to consider the follwing settings in your blogger dasgaboard.

Blogger Profile Setup

To Setup Blogger Profile follow the below screenshots.

Reader Access

Make your reader access to public in order to function the recent posts widgets

Blog Feed

Allow Blog feed to full.

Upload Template

Upload Theme - Method 1 (Recomended)

After downloading the template, open the XML file in notepad.

Select all the template code by pressing CTRL+A and copy it.

Now, go to theme tab and press the arrow.

Click Edit HTML

Select all the template code by clicking anywhere in the template and pressing CTRL+A.

Now, paste the copied code in it and click Save icon.

NOTE: In this method, you may loose your custom widgets you added in layout. Therefore, backup the important widgets and then add them in new template via layout.

Upload Theme - Method 2

Upload theme by following the below screenshots.

Header Setup

Header area consists of 5 widgets.

Blog-Pages

In widget 1 named Blog-Pages click edit pencil and setup your blog pages.

Social-Links

In widget 2 named Social-Links click edit pencil and add the following code in HTML/JavaScript Widget.

Note: The social media icons you enter in this widget will also appear in the Author Widget and Footer Section . 

<ul class="nav-soc">
<li class="facebook"><a aria-label="facebook" rel="noopener noreferrer" href="#" target="_blank"></a></li>
<li class="twitter"><a aria-label="twitter" rel="noopener noreferrer" href="#" target="_blank"></a></li>
<li class="instagram"><a aria-label="instagram" rel="noopener noreferrer" href="#" target="_blank"></a></li>
<li class="youtube"><a aria-label="youtube" rel="noopener noreferrer" href="#" target="_blank"></a></li>
<li class="pinterest"><a aria-label="pinterest" rel="noopener noreferrer" href="#" target="_blank"></a></li>
<li class="dribble"><a aria-label="dribble" rel="noopener noreferrer" href="#" target="_blank"></a></li>
<li class="rss"><a aria-label="rss" rel="noopener noreferrer" href="#" target="_blank"></a></li>
<li class="linkedin"><a aria-label="linkedin" rel="noopener noreferrer" href="#" target="_blank"></a></li>
<li class="whatsapp"><a aria-label="whatsapp" rel="noopener noreferrer" href="#" target="_blank"></a></li>
<li class="email"><a aria-label="email" rel="noopener noreferrer" href="#" target="_blank"></a></li>
<li class="behance"><a aria-label="behance" rel="noopener noreferrer" href="#" target="_blank"></a></li>
<li class="github"><a aria-label="github" rel="noopener noreferrer" href="#" target="_blank"></a></li>
<li class="telegram "><a aria-label="rss" rel="noopener noreferrer" href="#" target="_blank"></a></li>
</ul>

Replace # with your link.

Note: Remove the extra <li> that you do not want to show.

you can show social icons in colored background or transparent background by adding or removing the colored class. Such as:

1. Social Icons with transparent background

<ul class="nav-soc">

Transparent background is by default.

2. Social Icons with colored background

<ul class="nav-soc colored">

Here, we added the colored class. The icons will be colored.

This theme supprts the following social media icons.
facebook, twitter, instagram youtube, pinterest, dribble, rss, linkedin, whatsapp, email, behance, github, telegram.

Header-Logo

In widget 3 named Header-Logo click edit pencil and setup your logo.

Note: The recomended size of logo is 185px width, 55px height.

MenuBar-Mobile-Logo

In widget 5 named MenuBar-Mobile-Logo click edit pencil and upload your logo. This logo will appear only in mobile menu.

Main-Menu-Bar

In widget 6 named Main-menu-bar click edit pencil and set up your menu with follwoing code.

<!--Dropdown menu start-->
        <ul class='tc-menuitems menu'>
      <li class='home' ><a href='/'><i class="fa-solid fa-house-user"></i></a></li>
      <li><a href='#'>Simple</a></li>
          
          <!--One Level Drop down menu start-->
            <li class='tc-mobmenu level-1'>
            <a href='#'>One Level</a>
            <ul class='items level1 sub-menu'>
              <li><a href='#'>Dropdown 1</a></li>
              <li><a href='#'>Dropdown 2</a></li>
              <li><a href='#'>Dropdown 3</a></li>
              <li><a href='#'>Dropdown 4</a></li>
            </ul>
          </li>
          <!--One Level Drop down menu End-->

          <!--Two Level Drop down menu start-->
          <li class='tc-mobmenu level-1'>
            <a href='#'>Two Level</a>
            <ul class='items level1 sub-menu'>
              <li><a href='#'>Dropdown 1</a></li>
              <li><a href='#'>Dropdown 2</a></li>
              <li><a href='#'>Dropdown 3</a></li>
              <li class='tc-mobmenu level-2'>
               <a href='#'>Dropdown 4</a>
                <ul class='items sub-sub-menu level2 sub-menu'>
                  <li><a href='#'>Dropdown 5</a></li>
                  <li><a href='#'>Dropdown 6</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <!--Two Level Drop down menu End-->

          <li class='nav-post' post-label='Label'><a href='#'>Mega 1</a></li>
           <li><a href='#'>Simple</a></li>
           <li class='nav-post' post-label='Label'><a href='#'>Mega 2 </a></li>
          <li><a href='#'>Simple</a></li>

        </ul>
         <!--Drop down menu end-->

Change # with your link.

Please note: In the above menu post-label='Label' change Label with your own label name. Case Sensitive.

You can remove the extra menu such as two level drop down if your blog does not require it.

Main section

Main section Comprises of content section and sidebar section along with Full-width-Top and Full-width-Bottom widget section.

You can put the follwoing widgets Anywhere in any HTML/JavaScript widgets in Main section.

1. Grid Post 

<div class='grid-post' 
post-label='Label'>
</div>

2. Simple Recent Post Default 

<div class='recent-post-default' 
post-count='5'>
</div>

Change Label With your blog label in each widget you add.

Sidebar

You can add rcent or default widgets insidebar section.

Sidebar Social

To add Sidebar Social Widget in your blog sidebar or footer add the following code in HTML/Javascript Widget and Save.

<ul class="side-soc">
<li class="facebook"><a aria-label="facebook" rel="noopener noreferrer" href="#" target="_blank">1K</a></li>
<li class="twitter"><a aria-label="twitter" rel="noopener noreferrer" href="#" target="_blank">1K</a></li>
<li class="instagram"><a aria-label="instagram" rel="noopener noreferrer" href="#" target="_blank">1K</a></li>
<li class="youtube"><a aria-label="youtube" rel="noopener noreferrer" href="#" target="_blank">1K</a></li>
<li class="pinterest"><a aria-label="pinterest" rel="noopener noreferrer" href="#" target="_blank">1K</a></li>
<li class="dribble"><a aria-label="dribble" rel="noopener noreferrer" href="#" target="_blank">1K</a></li>
<li class="rss"><a aria-label="rss" rel="noopener noreferrer" href="#" target="_blank">1K</a></li>
<li class="linkedin"><a aria-label="linkedin" rel="noopener noreferrer" href="#" target="_blank">1K</a></li>
<li class="whatsapp"><a aria-label="whatsapp" rel="noopener noreferrer" href="#" target="_blank">1K</a></li>
<li class="email"><a aria-label="email" rel="noopener noreferrer" href="#" target="_blank">1K</a></li>
<li class="behance"><a aria-label="behance" rel="noopener noreferrer" href="#" target="_blank">1K</a></li>
<li class="github"><a aria-label="github" rel="noopener noreferrer" href="#" target="_blank">1K</a></li>
<li class="telegram "><a aria-label="rss" rel="noopener noreferrer" href="#" target="_blank">1K</a></li>
</ul>

Replace # with your link.

Note: Remove the extra <li> that you do not want to show.

This theme supprts the following social media icons.
facebook, twitter, instagram youtube, pinterest, dribble, rss, linkedin, whatsapp, email, behance, github, telegram.

Recent Comments

To add recent comments in your blog sidebar or footer add the following code in HTML/Javascript Widget and Save.

<div class="latest-comments" comment-count="4"></div>

You can change the comment count number comment-count="4" to the number of comments you want to show.

Popular Scrollar

The follwoing widget shows the popular posts.

This widget scrolls the popular posts. Do not remove it! you can specify the number of posts, enable or disable snippets and drag it to other place in sidebar.

Sidebar Contact Form

Do not remove this widget or hide it, because it will help you to setup contact form in seprate page.

To add contact form in seprate page read the below section.

Contact Form

To add sitemap, copy the below code, create new page in your dashboard and paste the code in HTML view.

<div class='tempcave-contact-form'>
  <div class='tempcave-contact-meta'>
  <div class='tempcave-cm-inner'>
  <div class='cm-heading'>
  <h3>Get in Touch</h3>
      <p>If you have any query please feel free to contact us.</p>
  </div>
  <div class='cm-email cf-meta'>
    <p><span>Email: </span> info@yoursite.com</p>
  </div>
    <div class='cm-web cf-meta'>
      <p><span>Website: </span> www.google.com</p>
  </div>
      <div class='cm-address cf-meta'>
      <p><span>Address: </span> info@yoursite.com</p>
  </div>
        <div class='cm-Phone cf-meta'>
      <p><span>Phone: </span> + 123456789</p>
  </div>
  </div>
</div>


<div class="contact-form-widget">
    <div class="cform-wrap">
      <h3>Contact Us</h3>
        <form name="contact-form">
    <div class='cfnm-wrap'>
          <div class='cf-namewrap'>
          <div class='contact-meta cf-name'>Name</div>
            <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" placeholder="Name" value=""/>
      </div>
      <div class='cf-emailwrap'>
          <div class='contact-meta cf-mail'>Email <span>*</span></div>
            <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" placeholder="Email" value="" />
      </div>
          </div>
          <div class='contact-meta cf-message'>Message <span>*</span></div>
            <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" placeholder="Message" name="email-message" rows="5"></textarea>
            <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
            <div class='cf-message'>
                <p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
                <p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
            </div>
        </form>
    </div>
</div>
</div>

Change the information according to your own website.

Footer Section

Footer section consists of three columns Widget area.

In footer section in addition to default blogger widgets you can also put the above mentioned Main section recent posts widgets easily.

Copyright

In copyright widget you can update your copyright information.

<a href='/'>Your Blog Title</a> © 2023-2024. All Rights Reserved.

Shortcodes

Following are the shortcodes supported by this theme.

Sitemap

To add sitemap in your blog.

Go to page tab and click New Page

Give it a name and click Pencil button

Select Edit HTML.

Paste the below code (as in below image) and publish the page.

<div class="sitemap"></div>

Table of Contents

To add Table of Contents, copy the below code, add it in your post where you want to display table of contents. 

<div id="templatescaveTOC"></div>


Please Note: This table of contents will target h2, h3 and h4 in your post, and list these headings in table of contents.

Post Pagination

To add Post Pagination, copy the below code, and paste it in your post HTML view. where you want to show pagination. 

<div class="post-page">
<p>Page content</p>
</div>

<div class="post-page">
<p>Page content</p>
</div>

<div class="post-page">
<p>Page content</p>
</div>


Please Note: You can repeat the above block according to the number of pages you want to create in your post. The above sample code will create three pages.

Post Cards

To add Post Cards, copy the below code, and paste the code in HTML view. where you want to show the card.

Horizontal card

<div class="post-card horizontal">
<div class="card-inner">
<div class="card-description">
<h3>Axact Blogger Template</h3>
<p>Exact is a cool blogger template</p>
</div>
<div class="card-action">
<a class='button red' href="#">Download Now</a>
<p>Size: 4 MB <span>(.zip File)</span></p>
</div>
</div>
</div>

Vertical card

<div class="post-card vertical">
<div class="card-inner">
<div class="card-description">
<h3>Axact Blogger Template</h3>
<p>Exact is a cool blogger template</p>
</div>
<div class="card-action">
<a class='button blue' href="#">Download Now</a>
<p>Size: 4 MB <span>(.zip File)</span></p>
</div>
</div>
</div>

Change the information accordingly.

Columns

To add Columns, copy the below code, and paste the code in HTML view. where you want to show the column.

<div class="columns">
  
<div class="col">
<p>Content 1</p>
</div>
  
<div class="col">
<p>Content 2</p>
</div>
  
<div class="col">
<p>Content 3</p>
</div>
  
</div>

Please Note: You can add more column by repeating the 

<div class="col">
<p>Content 2</p>
</div>
in the block

DropCap

To add Columns, copy the below code, and paste the code in HTML view. where you want to show the dropcap.

Dropcap style 1

<span class="post-dropcap with-bg-color" style='background-color:#09C'>M</span>

Dropcap style 2

<span class="post-dropcap">M</span>

Alert Boxes

To add Alert Boxes, copy the below code, and paste the code in HTML view. where you want to show the Alert Boxes.

<div class="info-box success"> <span>success message : Creeping bring morning in the sunset.</span>  </div>    
<div class="info-box alert"><span>Alert message : Creeping bring morning in the sunset.</span></div> 
<div class="info-box warning"><span>Warning message : Creeping bring morning in the sunset.</span></div>     
<div class="info-box error"><span>Error message : Creeping bring morning in the sunset.</span></div> 
<div class="info-box light"><span>Direction message : Creeping bring morning in the sunset.</span></div> 
<div class="info-box dark"><span>Info message : Oh snap! Creeping bring morning in the sunset.</span></div>

Code Boxes

To add Code Boxes, copy the below code, and paste the code in HTML view. where you want to show the code Boxes.

<pre data-codetype="HTML"><code>Write your code here</code></pre>
<pre data-codetype="CSS"><code>Write your code here</code></pre>
<pre data-codetype="JavaScript"><code>Write your code here</code></pre>
<pre data-codetype="Jquery"><code>Write your code here</code></pre>

Accordion

To add Accordion, copy the below code, and paste the code in HTML view. where you want to show the accordion.

<div class="tempcave-accordion">
    
    <div class="accordion-heading">
      <h3>Accordion Heading 1</h3>
    </div>
    <div class="accordion-content">
      <p>Accordion content 1</p>
    </div>
    
    <div class="accordion-heading">
      <h3>Accordion Heading 2</h3>
    </div>
    <div class="accordion-content">
      <p>Accordion content 2</p>
    </div>
    
  </div>

Table

To add Table, copy the below code, and paste the code in HTML view. where you want to show the Table.

<table>
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

Please Note: above table is only for sample purpose, you can add table with different number of rows or columns as per your requirements.

Buttons

You can add buttons with two designs and multiple colors in your blog.

Button style 1 (Solid Background)

<a class="button" href="#">Button</a>
<a class="button red" href="#">red Button</a>
<a class="button orange" href="#">orange Button</a>
<a class="button yellow" href="#">yellow Button</a>
<a class="button mint" href="#">mint Button</a>
<a class="button aqua" href="#">aqua Button</a>
<a class="button pink" href="#">pink Button</a>
<a class="button white" href="#">white Button</a>
<a class="button grey" href="#">grey Button</a>
<a class="button dark-grey" href="#">dark-grey Button</a>
<a class="button green" href="#">green Button</a>
<a class="button blue" href="#">blue Button</a>
<a class="button purple" href="#">purple Button</a>

Button style 2 (Transparent Background)

<a class="button transparent" href="#">Button</a>
<a class="button transparent red" href="#">red Button</a>
<a class="button transparent orange" href="#">orange Button</a>
<a class="button transparent yellow" href="#">yellow Button</a>
<a class="button transparent mint" href="#">mint Button</a>
<a class="button transparent aqua" href="#">aqua Button</a>
<a class="button transparent pink" href="#">pink Button</a>
<a class="button transparent grey" href="#">grey Button</a>
<a class="button transparent dark-grey" href="#">dark-grey Button</a>
<a class="button transparent green" href="#">green Button</a>
<a class="button transparent blue" href="#">blue Button</a>
<a class="button transparent purple" href="#">purple Button</a>

Replace # with your link.

Theme Settings

You can change the following settings by Edit HTML of theme.

  1. Go to theme
  2. Click Edit HTML
  3. Click anywhere in the code
  4. Press CTRL+F
  5. Type Theme Settings in search field
  6. Press enter
  7. The follwoing code will appear, change settings according to your own taste
// Theme Settings 

var Recent_Posts_Default_Image='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMCOsT79oloicXUobpUYihkFtcnFVDf_gPhFF4r2HlBhV6N_66ZSToruwtJ-1dqjZ7Kmul3EXEc5upFDvcllh4-nGrMDR_fZqxahq4n3Mk8J60f0ebZDGamG1mtmJPo2YZVsBaq2x2o0rLabIexabNMQXrlh3LKG1HTNSRXptPqMrmg055BIcoINGc/s16000/noimage-templatescave.png';

var Author_Widget_Profile_Image = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKHwk-OeV_sWq5nmSSsEhagN2CxEpBt-bu1Sa2IW7QzcunnlUiZ3Z_YOZKGsafkMNMoV3-mhzXUKZ2bUFIpb5A0Dhh9jmGAZIlc_Hh9reuI5i28C46SZdLE59TkURLB27BtYJWuFL6z0oXClgwqTfcRWn6BttiZNYHQTWX__kjWwU8uCO23Fl6KABvSQ/s1600/user-avatar.png';

var disqus_short_name='YourDisqusShortName';
var default_post_summary_count = 200;
var related_post_count=5;

// Stick or Unstick Navigation and Sidebar
var sticky_navigation=true;
var sticky_sidebar=true;

// Show or Hide Various Elements (To Display Element Set It to True, To Hide Set it to False)
var footer_section=true;
var next_prev_post=true;
var social_share_icons=true;
var author_box=true;
var related_posts=true;
var comment_system={
    blogger:true,
    disqus:false
}

// Text Change of Various Elements
var Recent_Posts_Heading='Recent Posts';
var Related_Posts_Heading= 'Related Posts';
var View_More_Text='View More';
var Breadcrumbs_Home_Text='Home';
var Comment_Post_Text='Post A Comment';
var Total_Comments_Heading='Total Comments: ';

// Post Pagination Text Change
    var perPage=7;
    var numPages=5;
    var firstText ='First';
    var lastText ='Last';
    var nextText ='Next »';
    var prevText ='« Previous';

// Post Sitemap Text Change
var Sitemap_Title_Text= 'Post Title';
var Sitemap_Label_Text= 'Label';
var Sitemap_Date_Text= 'Date';
var Sitemap_TotalPosts_Text= 'Total Posts: ';

Here you can change the various elements with different settings.

Theme Customization

This theme fully supports the blogger theme customization option.

You can change the Colors, Backgrounds, Fonts and other customization easily.

Go to Theme tab in your dashboard and click on Customize.

Note: We created the dark theme by changing the backgrounds and colors of various elements .

Click on Advanced.

Select different elements to customize.

After Customization is completed, click Save icon.

Source and Credits

I've used the following frameworks, fonts, icons, images and scripts as listed. My thanks goes to all the authors!

Resources
Google Fonts
FontAwesome
Jquery
Owl Carousel
Colorbox
Pexles

Once again, thank you so much for purchasing our theme. We'd be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our best to assist. If you have a more general question relating to the themes on ThemeForest.