jdp
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
parent directory.. | ||||
<!doctype html>
<html lang="en">
<head>
<title>Clean BlogEngine Theme License</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style>
.container{
max-width: 700px;
}
img{
max-width: 100%;
}
</style>
</head>
<body class="p-5">
<div class="container pt-5">
<div class="mb-5">
<h1 class="display-5 mb-5">Clean BlogEngine Theme</h1>
<p class="small m-0">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png" /></a>
<br /><br />
<span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Clean BlogEngine Theme</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://francis.bio" property="cc:attributionName" rel="cc:attributionURL">Francis</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
</p>
</div>
<hr class="mb-5 mt-5">
<h1>Get Started</h1>
<section id="get-started" class="getstarted">
<p>After I sent you the theme, you'll receive a zip file. First, you have to upload it to your BlogEngine, in the <code>/Custom/Themes/</code> folder.</p>
<section class="mb-5 pb-5 mt-5">
<h3 id="activation">Activation</h3>
<p class="mb-3">After you uploaded the theme, Go to your BlogEngine administration, in the Themes tab, you'll see clean theme. Click on the Active button.</p>
<p><img src="https://blogengine.io/files/images/themes/clean/01.jpg" alt="active clean theme" class="bet-img"></p>
</section>
<section class="mb-5 pb-5">
<h3 id="widgets">Widgets</h3>
<p class="mb-3">After you activated the theme, Go to Widgets tab and add your favorites widgets from available widgets to Widget Zones, Clean Theme has 2 Widget Zones:</p>
<p><img src="https://blogengine.io/files/images/themes/clean/02.jpg" alt="widgets configuration clean theme" class="bet-img"></p>
<ol>
<li class="mb-3">
<strong>Widget Zone (Slider)</strong>
<p>This Widget Zone is only available at the homepage and designed to accept "PostList" widget as a slideshow. So by adding "PostList" widget to this Widget Zone, you'll be able to see the slideshow on the homepage. But remember you have to config
that PostList widget to show images and date.</p>
</li>
<li class="mb-3">
<strong>Widget Zone (Sidebar-Post)</strong>
<p>This Widget Zone is available on all Posts and Pages as a sidebar.</p>
</li>
</ol>
</section>
<section>
<h3 id="configtheme">Configuration</h3>
<p class="mb-3">In order to access theme configuration (Custom Fields) go to Themes tab and click on the customize icon.</p>
<p><img src="https://blogengine.io/files/images/themes/clean/03.jpg" alt="theme configuration clean theme" class="bet-img"></p>
<p>Then, a small window with configuration fields will show up:</p>
<p><img src="https://blogengine.io/files/images/themes/clean/04.jpg" alt="theme configuration clean theme" class="bet-img"></p>
<p>List of configurations, click to learn more:</p>
<div id="accordion" role="tablist" class="accordion">
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Logo
</a>
</h5>
</div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
<p>On this field, you can set your Logo address. That it will show up in the header and footer of your theme. You can don't touch it and just replace your logo image on that location.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingFour">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Hamburger button style
</a>
</h5>
</div>
<div id="collapseFour" class="collapse" role="tabpanel" aria-labelledby="headingFour" data-parent="#accordion">
<div class="card-body">
<p>In the mobile version, you'll see the menu will become like a Hamburger icon. which when you click on it, the menu will slide down. and the icon with animation changes to X icon. like this:</p>
<p><img src="https://blogengine.io/files/images/themes/clean/05.jpg" alt="responsive clean theme"></p>
<p>You can change the animation to something else. Thanks to the <a href="https://jonsuh.com/hamburgers/" target="_blank" rel="external nofollow">Jonathan</a> that made this awesome collection.</p>
<p><img src="https://blogengine.io/files/images/themes/clean/06.gif" alt="responsive clean theme"></p>
<p>So choose any style from the top and find it from below list and copy and paste it to the "Hamburger button style" field.</p>
<ul class="list-unstyled row small">
<li class="col-sm-4 col-md-3">hamburger--3dx</li>
<li class="col-sm-4 col-md-3">hamburger--3dx-r</li>
<li class="col-sm-4 col-md-3">hamburger--3dy</li>
<li class="col-sm-4 col-md-3">hamburger--3dy-r</li>
<li class="col-sm-4 col-md-3">hamburger--3dxy</li>
<li class="col-sm-4 col-md-3">hamburger--3dxy-r</li>
<li class="col-sm-4 col-md-3">hamburger--arrow</li>
<li class="col-sm-4 col-md-3">hamburger--arrow-r</li>
<li class="col-sm-4 col-md-3">hamburger--arrowalt</li>
<li class="col-sm-4 col-md-3">hamburger--arrowalt-r</li>
<li class="col-sm-4 col-md-3">hamburger--arrowturn</li>
<li class="col-sm-4 col-md-3">hamburger--arrowturn-r</li>
<li class="col-sm-4 col-md-3">hamburger--boring</li>
<li class="col-sm-4 col-md-3">hamburger--collapse</li>
<li class="col-sm-4 col-md-3">hamburger--collapse-r</li>
<li class="col-sm-4 col-md-3">hamburger--elastic</li>
<li class="col-sm-4 col-md-3">hamburger--elastic-r</li>
<li class="col-sm-4 col-md-3">hamburger--emphatic</li>
<li class="col-sm-4 col-md-3">hamburger--emphatic-r</li>
<li class="col-sm-4 col-md-3">hamburger--minus</li>
<li class="col-sm-4 col-md-3">hamburger--slider</li>
<li class="col-sm-4 col-md-3">hamburger--slider-r</li>
<li class="col-sm-4 col-md-3">hamburger--spin</li>
<li class="col-sm-4 col-md-3">hamburger--spin-r</li>
<li class="col-sm-4 col-md-3">hamburger--spring</li>
<li class="col-sm-4 col-md-3">hamburger--spring-r</li>
<li class="col-sm-4 col-md-3">hamburger--stand</li>
<li class="col-sm-4 col-md-3">hamburger--stand-r</li>
<li class="col-sm-4 col-md-3">hamburger--squeeze</li>
<li class="col-sm-4 col-md-3">hamburger--vortex</li>
<li class="col-sm-4 col-md-3">hamburger--vortex-r</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingFive">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
Social Accounts
</a>
</h5>
</div>
<div id="collapseFive" class="collapse" role="tabpanel" aria-labelledby="headingFive" data-parent="#accordion">
<div class="card-body">
<p>You can set your Facebook, Twitter, Google, Linkedin, Instagram, Youtube, Github and Pinterest accounts links. And it will show up the footer of the theme. If you leave it empty, It will not show up.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingSeven">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
Share (show or hide)
</a>
</h5>
</div>
<div id="collapseSeven" class="collapse" role="tabpanel" aria-labelledby="headingSeven" data-parent="#accordion">
<div class="card-body">
<p>This field will show and hide sharing post buttons.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingSix">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
Publisher Logo
</a>
</h5>
</div>
<div id="collapseSix" class="collapse" role="tabpanel" aria-labelledby="headingSix" data-parent="#accordion">
<div class="card-body">
<p>This field is related to <a href="https://developers.google.com/search/docs/guides/intro-structured-data" target="_blank">Google Structured Data</a>, which in this theme every post has a JSON-LD markup that you have to provide a Publisher
logo. So you can add your logo URL or you can add your profile photo URL. But remember it should be an absolute address like <code>http://exampleblog.com/logo.png</code> and not <code>/logo.png</code></p>
</div>
</div>
</div>
</div>
</section>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>