Outsider Redraft

About

Outsider Redraft

HTML5 Personal Blog / Magazine Template

Outsider Redraft is responsible HTML5 template usable as a personal blog or personal magazine.

Structure

Files Structure

Once downloaded, unzip the compressed folder to see the structure:

outsider_redraft/
    ├── css/
    │   ├── bootstrap.css, bootstrap.min.css
    │   ├── chocolat.css
    │   ├── main.css
    │   ├── materialdesignicons.min.css
    │   └── slick.css
    ├── fonts/
    │   ├── materialdesignicons-webfont.eot
    │   ├── materialdesignicons-webfont.svg
    │   ├── materialdesignicons-webfont.ttf
    │   ├── materialdesignicons-webfont.woff
    │   └── materialdesignicons-webfont.woff2
    ├── img/
    │   ├── chocolat - controls for chocolat.js lightbox
    │   └── *images - placeholders
    ├── js/
    │   └── vendor/
    │       └── *for detailed list see js section
    │   ├── contact.js
    │   └── main.js
    ├── php/
    │   └── contact-form.php
    ├── 404.html
    ├── about.html
    ├── about-cd.html
    ├── archive.html
    ├── archive-cd.html
    ├── cards-page2.html
    ├── category.html
    ├── category-cd.html
    ├── contact.html
    ├── contact-cd.html
    ├── index.html
    ├── index-cards.html
    ├── index-fc.html
    ├── index-gradient.html
    ├── page2.html
    ├── post.html
    ├── post-cd.html
    ├── post-sidebar.html
    ├── styleguide.html
    ├── tag.html
    └── tag-cd.html

* cd = card design; fc = featured content

Html Structure

This theme is a responsive layout based on Bootstrap 4 Framework. All information within the main content area is nested within a body tag. The general template structure is the same throughout the template.

General structure:

layout

CSS Structure

All css files are located in css folder:

main.css

This file includes css styles for pages. If you want to change style, colors, margin, padding, font settings etc. of the template you should start from this file.

/* Table of Contents
=================================================== */
/*
 * Default
 * Preloader
 * Typography
 * Components
   * Breadcrumb
   * Buttons
   * Card
   * Forms
   * Nav
   * Navbar
   * Overlay Figure
   * Pagination
   * Utility: Backgrounds
 * Layout
   * Header
   * Main
   * Section
   * Sidebar
   * Search-wrap
   * Social List
   * Masonry
   * Post
   * Widgets
   * Comments
   * Google Map
   * Archive
   * Footer
 * Lightbox
 * Scroll Top
 * Navbar brand sprite
*/

bootstrap.css, bootstrap.min.css

Bootstrap 4 (v4.0.0-alpha.6) Framework base stylesheets. Includes all components and elements, typography, lists, buttons, button groups, navigations, navbars, forms, labels, pricing tables and much more. This stylesheet must always be included! We recommend minified version foundation.min.css for use. For development you can use foundation.css.

JavaScript

All JavaScript files are located in js folder.

Installation

Getting the Template Online

Warning! This is not a Wordpress template. Running, uploading or inserting in Wordpress CMS will have no effect.

This is HTML5 template, you don´t need create a database. Just simply upload to the server.

  1. It's important to understand that you must either have your own server space or use someone elses. The server space can be purchased at many different places around the internet. You need somewhere to put the files that you purchased so others can find them online.

  2. The template folder will have several files with the extension labeled .html. This is where all your content will. It's very important to keep the css and js-plugin folders with the HTML or the HTML will not look how the design is meant to look. Along with the HTML files, you will also have four additional folders to upload: css, js, fonts, and images.

  3. Start your FTP client (Total Commander or FileZilla) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.

Development on local environment:

Customization

Layout Settings

Select your layout: Clean design or Card design.

Choose home page heading variant:

Insert your content, write your text, change photos and images links.

Fonts

Google fonts

Free Google fonts: Inconsolata and Merriweather

Inconsolata is default body font. Used for all tags p, address, ul etc. in template (paragraphs, text, letters...)

Merriweather font is used for Headings h1,h2, ... h6.

If you need title with Inconsolata font, use class .monospace


<h1>Default Merriweather Heading</h1>
<h2 class="monospace">Inconsolata Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
<ul>
  <li>lorem</li>
  <li>ipsum</li>
</ul>

Important: Google Fonts are used as hosted libraries.

The recommended way to use all Google Font´s is by linking to the web font hosted on Google Fonts.


<link href="https://fonts.googleapis.com/css?family=Inconsolata|Merriweather" rel="stylesheet">

Material Design Icons

Default Icon font for our template is Material Design Icons

Basic structure: <i class="mdi mdi-facebook"></i>

Replace icon name (icon name = css class), example mdi-facebook, with the actual icon name you wish to display, example mdi-home. Then your new icon is <i class="mdi mdi-home"></i>

Template uses navbar fixed on top. After scroll his background changes from transparent to white and color from white to black.

Navbar brand

Default navbar brand text:


    <!-- Navbar Brand -->
    <a class="navbar-brand align-self-center pt-0" href="index.html">Outsider</a>

Adding images to the navbar brand:


    <!-- Navbar Brand -->
    <a class="navbar-brand align-self-center pt-0" href="index.html">
        <img src="img/otsdr-logo.svg" width="auto" height="30" alt="logo">
    </a>

or use sprite image:


    <!-- Navbar Brand -->
    <a class="navbar-brand align-self-center pt-0 sprite" href="index.html">
        <img src="img/otsdr-sprite.svg" width="auto" height="60" alt="logo">
    </a>

Why sprite?

With sprite and css transforms we can see another image variant on the same place. Basic idea is to create one big image that contains two small images placed one above the other.

sprite

Best formats are .png and .svg. Using css transform we move image verticaly. You can see only one half of the picture. If navbar has class navbar-inverse (is transparent) then you see white title. After scroll if navbar has class navbar-light (is white) you see black (blue or another color) title.

You can edit predefined transformation for sprite in main.css file, find lines at the end:

/* Navbar brand sprite
=================================================== */
.navbar-brand.sprite {
  height: 30px;
  overflow: hidden;
}

.navbar-brand.sprite img {
  height: 60px;
  -webkit-transform: translateY(-3%);
      -ms-transform: translateY(-3%);
          transform: translateY(-3%);
}

.navbar-light .navbar-brand.sprite img {
  -webkit-transform: translateY(-51%);
      -ms-transform: translateY(-51%);
          transform: translateY(-51%);
}

Infinite scrolling

Template uses infinite scrolling for automatic content (posts) loading.

We may use two variants: full automatic loading on scroll or loading after Load more button click.

Automatic loading: Script detect link to next page (example: page2.html). This link is hidden and content is loaded. Last page (example: page22.html) does not have this link.


    <!-- Pagination -->
    <nav class="page-nav" aria-label="...">
        <ul class="pagination justify-content-center">
            <li class="page-item">
                <a class="page-link" href="page2.html">Next</a>
            </li>
        </ul>
    </nav>

Load more button: Link to next page - Load more button - is visible and content is loaded after click.

How to set this option? Use id="load-more" for pagination link.


    <!-- Pagination -->
    <nav class="page-nav" aria-label="...">
        <ul class="pagination justify-content-center">
            <li class="page-item">
                <a id="load-more" class="page-link" href="page2.html">Load More</a>
            </li>
        </ul>
    </nav>

For further documentation and setting information, see: Infinite Scroll jQuery Plugin

Contact Form / Newsletter Form

This template contains fully working contact form and newsletter form. Forms used:

  1. jQuery Validation Plugin form validation library (must be included before end body tag in all html files where you need form, example contact.html or another pages with form)

  2. script contact.js (must be included before end body tag)

    
        ...
        <script src="js/vendor/slick.min.js"></script>
        <script src="js/vendor/jquery.chocolat.min.js"></script>
		
        <script src="js/main.js"></script>
		
        <!-- Contact Form -->
        <script src="js/vendor/jquery.validate.min.js"></script>
        <script src="js/contact.js"></script>
        ...
		
    </body>
</html>

  3. php file: contact-form.php and newsletter-form.php

    Please ensure that form action link to this file:

    
	<form action="php/contact-form.php" ...>
   		...
	</form>

All you need is replace your actual email address.

In order to receive messages you need to edit line 8 of php/contact-form.php file. Just write your own email address:


    <?php
    ...
        // Enter your email address - edit line 8
        $to = "your@mail.com";         < === HERE REPLACE YOUR EMAIL ADDRESS
    ...
    ?>

Location - Google Map

Beware: scripts Google Maps JavaScript API with your API key and mymap.js must be included before end body tag in all html files where map is displayed, example contact.html


        ...
        <script src="js/vendor/slick.min.js"></script>
        <script src="js/vendor/jquery.chocolat.min.js"></script>
		
        <script src="js/main.js"></script>
		
        <!-- Contact Form -->
        <script src="js/vendor/jquery.validate.min.js"></script>
        <script src="js/contact.js"></script>
        
        <!-- Google Map -->
        <script src="https://maps.googleapis.com/maps/api/js?key=YourAPIKey"></script>
        <script src="js/mymap.js"></script>
		
    </body>
</html>

To edit the Google Map style and location marker please open mymap.js in your favorite text editor. Edit the location marker, enter your Address on line 15.

    var map;

    function initMap() {
        "use strict";
        
	// Set address here
	var address = '795 Folsom Ave, San Francisco, CA 94103',
	
	    paper = [
	    ...

Important:

If you put your map online you may need to control if the requests quota is not exceeded and be able to increase it. With an API key you can also set which web domains are allowed to access your maps – this will protect you from any unauthorized usage. To get it visit Google Maps APIs.

For further documentation and setting information, see: Google Developers: Google Maps APIs for Web.

Chocolat.js enables you to display one or several images staying on the same page. The choice is left to the user to group together a series of pictures as a link, or let them appear as thumbnails. The viewer may appears full-page or in a block.

You can see Lightbox in action on post.html, post-sidebar.html pages.

We use ul > li structure and Bootstrap row with columns for sizing. You can also use a structure with div.


<div class="gallery row" data-chocolat-title="Gallery">
  <div class="col-md-4">
    <figure>
      <a href="img/dp1a.jpg" class="chocolat-image">
        <img src="img/dp1a.jpg" alt="img">
      </a>
    </figure>
  </div>
  <div class="col-md-4">
    <figure>
      <a href="img/dp2b.jpg" class="chocolat-image">
        <img src="img/dp2b.jpg" alt="img">
      </a>
    </figure>
  </div>
  <div class="col-md-4">
    <figure>
      <a href="img/wspace.jpg" class="chocolat-image">
        <img src="img/wspace.jpg" alt="img">
      </a>
    </figure>
  </div>
</div>

For further documentation and setting information, see: Chocolat.js website.

Latest Tweets

Plugin is based on jquery.tweet.js-mod plugin by Stan Scates. It is simple to use and configure.

  1. First step: You need to have a twitter App for your usage in order to obtain OAuth credentials. See https://dev.twitter.com/apps for help.

  2. Second step: After obtaining OAuth credentials, put them to php/twiter/index.php. Edit following code:

    
  <?php
  /* Configure your twitter API access params below */
  // Your Twitter App Consumer Key
  $consumer_key = 'YOUR_CONSUMER_KEY';

  // Your Twitter App Consumer Secret
  $consumer_secret = 'YOUR_CONSUMER_SECRET';

  // Your Twitter App Access Token
  $user_token = 'YOUR_ACCESS_TOKEN';

  // Your Twitter App Access Token Secret
  $user_secret = 'YOUR_ACCESS_TOKEN_SECRET';

  ?>

  3. The third step: Open js/main.js (record for twitter script starts on line 216 and edit this code, especially line 219. Use Twitter name without @.
    Example for tweets from Creative Market: Use "CreativeMarket" (Not @CreativeMarket).

    
  // -----------------------------
  // Twitter
  // -----------------------------
  function twitterFeed() {
	var tF = $('.twitter-feed');
	  if (tF.length) {
	    tF.tweet({
	      join_text: "auto",
	      username: ["CreativeMarket"],
	      modpath: "php/twitter/",
	      count: 6,
	      //avatar_size: "42px", //if avatar is used
	      retweets: false,
	      loading_text: "Loading tweets...",
	      //template: "{text}{time}{user}",//{avatar}{join}
	      template: '<p>{text}</p><time class="d-block"{time}</time>{user}',
	      auto_join_text_default: " ", //We said,
	      auto_join_text_ed: " ", //We
	      auto_join_text_ing: " ", //We were
	      auto_join_text_reply: " ", //We replied
	      auto_join_text_url: " " //We were checking out
	    });
	  ...
	}
  }

Credits

Plugins, files, extensions and libraries used in template

Framework

Plugins

Fonts

Photos and Images
Not included in download package

Support

Please feel free to contact us, if you have question or problem about this template.
Guaranteed support for HTML, CSS and Javascript issues.

Your Themekiosk Team