PostBoard Template Documentation by Theme Junkie v1.0

PostBoard - Dynamic Grid Based HTML5 Template

Created: 03/12/2016
By: Theme Junkie
Email: support@theme-junkie.com

Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to send your questions at our forum here. Thanks so much!

Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. Fonts
  5. Sources and Credits

A) HTML Structure - top

This template is a responsive layout with two columns. All of the information within the main content area is nested within a div with an id of "primary". The sidebar's (column #2) content is within a div with an id of "secondary". The general template structure is the same throughout the template. Here is the general structure.

HTML Structure

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

	.hentry .entry-title a {
		font-size: someSize_px;
	}

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

I.E.

	#featured-content .hentry .entry-title a {
		font-size: someSize_px;
	}

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

B) CSS Files and Structure - top

Below is the list of CSS files that being used in this template.

  1. /css/jquery.bxslider.css - css library for displaying gallery in slideshow/carousel
  2. /css/font-awesome.min.css - font-awesome icons for this template
  3. style.css - The CSS file contains all of the specific stylings for the page. The file is separated into sections using:
	1. Reset
	2. Basic
	3. Structure
	4. Header
	5. Navigation
	    -5.1 Primary Navigation
	    -5.2 Secondary Navigation
	    -5.3 Mega Menu
	6. Content
	    -6.1 Site Content
	    -6.2 Featured Content
	    -6.3 Homepage
	    -6.4 Pagination
	    -6.5 Singular
	    -6.6 Comments
	7. Sidebar
	8. Footer
	9. Members
	10. Layouts
	11. Responsive

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

C) JavaScript - top

This template imports several Javascript files.

  1. /js/jquery.js - jQuery library, the code & base of all Javascript functions in the template
  2. /js/jquery-ui.min.js - jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library
  3. /js/superfish.js - The script base of the superfish dropdown menu / megamenu
  4. /js/hoverIntent.js - Mouse hover effect for the superfish dropdown menu / megamenu
  5. /js/jquery.fitvids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
  6. /js/jquery.slicknav.min.js - Slick Nav menu for responsive layouts
  7. /js/jquery.bxslider.min.js - jQuery plugin for displaying list of items in a carousel/slideshow
  8. /js/masonry.min.js - JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.
  9. /js/jquery.infinitescroll.min.js - jQuery library for enabling infinite scroll, that is pre-fetching content from a subsequent page and adding it directly to the user’s current page
  10. /js/jquery.scrollUp.min.js - jQuery library for adding scroll to top functionality
  11. /js/webfontloader.js - gives added control when using linked fonts via @font-face<
  12. /js/modernizr.js - JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
  13. /js/jquery.custom.js - Most of the animation in this template is carried out from the customs scripts

If you want to modify the Javascript effects and functions, please edit the jquery.custom.js file. For example, if you want to customize the effect of the Dropdown Menu, you may edit the following code:

	/*----------------------------------------------------*/
	/*  Superfish Menu
	/*----------------------------------------------------*/
	(function($){ //create closure so we can safely use $ as alias for jQuery

	    $(document).ready(function(){

	        // initialise plugin
	        var example = $('.sf-menu').superfish({
	            delay:       100,                            // one second delay on mouseout
	            speed:       'fast',                          // faster animation speed
	            autoArrows:  false                            // disable generation of arrow mark-up
	        });
	    });

	})(jQuery);

D) Fonts - top

We used a free webfont "Roboto" for this template as the default fonts. If you want to remove the default fonts, please edit style.css and remove all CSS codes started with the "@font-face" tag

You can integrate Google Fonts in this template easily. Just embed the code provided by Google into this template and it will works.

E) Sources and Credits - top

We've used the following javascript libraries, icons or other files as listed.

All javascript files are license under MIT. All demo images (stock photos) are totally free for commercial and personal use. FontAwesome is licensed under Creative Commons.

Once again, thank you so much for purchasing this template. As we said at the beginning, we'd be glad to help you if you have any questions relating to this template. No guarantees, but we'll do our best to assist. If you have a more general question relating to Theme Junkie site templates, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Theme Junkie

Go To Table of Contents