Mapache for Ghost by GodoFredo
Minimalist Material Design and Elegant theme for Ghost.
Hello, I created this theme Ghost to see how it works. It is available for free so you can use on your site. It is strictly forbidden commercial use. If you have any suggestions to improve the theme, you can send me tweet to @GodoFredoNinja
You can see a demo in my blog.
Mapache supports the following web browsers
- Responsive layout
- Blog navigation
- Page 404
- Page subscribe
- Pagination Infinite Scroll
- Cover images for blog, tag and author
- Social media links
- Post related
- Post format Video
- Post format Image
- Post (5 articles) Featured in sidebar
- Disqus Comments
- Disqus Comments Count
- Sharing Buttons
- Sharing socila media Count
- YouTube, Vimeo, kickstarter -> Video Responsive
- Code syntax Supported Prismjs
Icons generated by Icomoon and import ./assets/fonts/selection.json
Replace icon with these measures 155px * 155px in ./assets/img/icon.png
- Create Api key Disqus
- You have to enable via a checkbox on the labs page in your Ghost admin panel.
<script>
/* Social Media Links*/
var social_link = {
'google': 'https://...',
'youtube': 'https://...',
'instagram': 'https://...',
'snapchat': 'https://...',
'dribbble': 'https://...',
'github': 'https://...',
'linkedin':'https://...',
'spotify':'https://...',
'codepen':'https://...',
'behance':'https://...',
'flickr':'https://...',
'pinterest':'https://...',
'feed':'https://...',
}
/*Title for home Page*/
var title_home = '... your title ...';
/*Footer menu*/
var footer_menu = {
'...name...': 'https://...',
'...name...': 'https://...',
'...name...': 'https://...',
'...name...': 'https://...',
}
/*Youtube button subscribe for post video format*/
var youtube = {'YOUR_CHANNEL_NAME':'YOUR_CHANNEL_ID'}
/*Disqus for Comments*/
var disqus_shortname = 'YOUR_DISQUS_SHORTCUT_HERE';
var disqusPublicKey = "YOUR_DISQUS_API_KEY";
</script>
<!-- Theme indigo -->
<link rel="stylesheet" href="/assets/css/themes/indigo.css"/>
<!-- Theme dark blue -->
<link rel="stylesheet" href="/assets/css/themes/dark-blue.css"/>
<!-- Theme blue semi dark -->
<link rel="stylesheet" href="/assets/css/themes/blue-semi-dark.css"/>
<!-- Theme blue -->
<link rel="stylesheet" href="/assets/css/themes/blue.css"/>
<!-- Theme Grey -->
<link rel="stylesheet" href="/assets/css/themes/grey.css"/>
<!-- Theme dark cyan -->
<link rel="stylesheet" href="/assets/css/themes/dark-cyan.css"/>
<!-- Theme purple -->
<link rel="stylesheet" href="/assets/css/themes/purple.css"/>
<!-- Theme teal -->
<link rel="stylesheet" href="/assets/css/themes/teal.css"/>
<!-- Theme Green -->
<link rel="stylesheet" href="/assets/css/themes/green.css"/>
<!-- For theme white add two-color logo 230px * 130px -->
<!--
***** 230px *****
* *
***************** 130px
* *
*****************
-->
<link rel="stylesheet" href="/assets/css/themes/white.css"/>
./partials/sidebar.hbs
<div class="widget">
<div class="title-primary">...your title...</div>
... your content ...
</div>
<!-- Add your content here - block fixed -->
<div class="widget">
<div class="fixed">
... your content fixed ...
</div>
</div>... <a class="external" href="http://..." >Your link external</a> ...
<a class="btn external" href="http://..." >link external</a>
<a class="btn btn-download" href="http://..." >download</a>
<a class="btn btn-download-cloud" href="http://..." >download</a>
<p class="warning"> ... your text warning ... </p>
<p class="note"> ... your text note ... </p>
<p class="success"> ... your text success ... </p>
Add the alias according to what you need List language Prismjs
if you want to have a video format, you only have to add a tag #video the first video will move to large size
if you want to have a image format, you only have to add a tag #image the image Featured will move to large size
- Normalize
- Jquery.ghostHunter
- Prismjs It supports the following link
Copyright (c) 2016 GodoFredo - Released under the MIT license.