Affapress Documentation

This documentation contains a complete tutorial that will make you easier to customize the look of the template as you want.

Thank you very much for purchasing from Affapress.

If you have any issues or questions that this documentation does not cover, you can send us a message to support@affapress.com.
You can get more updates documentation here!


Template Installation


You can view this template in any web browser from your desktop computer. Because the files are written in HTML, you do not need an internet connection in order to display or edit the template from your text editor.

All of the HTML files are given a descriptive name to make it easier to distingish what each file will display.

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. Select /html/ folder, then choose layout which you want, and there will have several files with the extension labeled .html. This is where all your content will. In addition to .html you should see a file labeled .css. The .css files are going to be the files that will tell the .html how to to be styled. CSS is simply a way to take text, images, and other elements and change the look of them. It's very important to keep the .css file with the HTML or the HTML will not look how the design is meant to look. Along with the HTML and CSS files, you will also have five additional folders to upload: css, fonts, images, js and mailchimp.
  3. Start your FTP client (I persoanlly use Filezilla which is free) 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.
  4. Locate the domain folder you wish to upload your template files to on your server. You are going to want to click and drag every file that you have labeled .html, .css, .js into your FTP client.
  5. Once the files are done uploading, you can try access your website via browser.

Change The Template Color

It's easy to change color of this template, you just need to change the a line code below:

  1. Open the .html file (example index.html).
  2. Find this line of code in <head> section:
    					<!-- Custom Colors -->
    					<!--<link rel="stylesheet" href="css/colors/blue/color.css">-->
    					<!--<link rel="stylesheet" href="css/colors/orange/color.css">-->
    					<!--<link rel="stylesheet" href="css/colors/pink/color.css">-->
    					<!--<link rel="stylesheet" href="css/colors/purple/color.css">-->
    					<!--<link rel="stylesheet" href="css/colors/yellow/color.css">-->
                        
  3. Choose your favorite color with remove one of the comment tag like this:
                        <!-- Custom Colors -->
    					<!--<link rel="stylesheet" href="css/colors/blue/color.css">-->
    					<link rel="stylesheet" href="css/colors/orange/color.css">
    					<!--<link rel="stylesheet" href="css/colors/pink/color.css">-->
    					<!--<link rel="stylesheet" href="css/colors/purple/color.css">-->
    					<!--<link rel="stylesheet" href="css/colors/yellow/color.css">-->
                        
  4. Save and see the result!

HTML Structure


This site template has a fixed layout with a variation of column layouts depending on the page. This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here.

The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length. For example, the '#main' element has a class of 'col-sm-8' and the '#side' element has a class of 'col-sm-4'. The total columns equals 12 columns.

                <div class="container">
                    <div class="row">
                        <div id="main" class="col-sm-8"></div>
                        <div id="side" class="col-sm-4"></div>
                    </div>
                </div>
                

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

                .navbar { text-align:center; }
                

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.

                #header .navbar { text-align:center; }
                

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.


Web Elements

You can see all the HTML element examples for this template and you can see the source code to learn how to make it from this link:


Headers

                <!-- #header -->
				<header id="header">
					
					<!-- #nav-mobile-top -->
					<div id="nav-mobile-top">
						
						<!-- .container -->
						<div class="container-fluid">
							<div class="navmenu">
								
								....
								
							</div>
						</div>
						<!-- .container end -->
						
					</div>
					<!-- #nav-mobile-top end -->
					
					<!-- #navigation -->
					<nav id="navigation">
						
						<!-- .navtop -->
						<div class="navtop">
							
							<!-- .container -->
							<div class="container">
								
								....
								
							</div>
							<!-- .container end -->
							
						</div>
						<!-- .navtop end -->
						
						<!-- .navbar -->
						<div class="navbar">
							
							<!-- .container -->
							<div class="container">
								<div class="navbar-wrap">
									
									....
									
								</div>
							</div>
							<!-- .container end -->
							
						</div>
						<!-- .navbar end -->
						
					</nav>
					<!-- #navigation end -->
					
					....
					
				</header>
				<!-- #header end -->
                

For more details and the results output you can click links below:

header-1.html
header-2.html
header-3.html
header-4.html
header-5.html
header-6.html
header-7.html


Footer

				<!-- #bottom -->
				<div id="bottom">
					
					<!-- .container -->
					<div class="container">
						
						<!-- .footer-widgets -->
						<div class="footer-widgets">
							
							....
							
						</div>
						<!-- .footer-widgets end -->
						
					</div>
					<!-- .container end -->
					
				</div>
				<!-- #bottom end -->
				
				<!-- #footer -->
				<footer id="footer">
					
					<!-- .container -->
					<div class="container">
						
						....
						
					</div>
					<!-- .container end -->
					
				</footer>
				<!-- #footer end -->
                

For more details and the results output you can click links below:

footer-1.html
footer-2.html
footer-3.html
footer-4.html
footer-5.html
footer-6.html


Accordion

				<div class="panel-group affa-panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
					
					<div class="panel panel-default">
						<div class="panel-heading" role="tab" id="heading11">
							<h4 class="panel-title">
								....
							</h4>
						</div>
						<div id="collapse11" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading11">
							<div class="panel-body">
								....
							</div>
						</div>
					</div>
					
					....
					
				</div>
                

For more details and the results output you can click this link: element-accordion.html


Alert Messages

				<div class="alert alert-info" role="alert">
					<h4>....</h4>
					<p>....</p>
				</div>
                

For more details and the results output you can click this link: element-alert-messages.html


Boxes

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">....</h3>
					</div>
					<div class="panel-body">....</div>
				</div>
                

For more details and the results output you can click this link: element-boxes.html


Buttons

				<input type="button" name="button" class="btn-rect" value="Rectangle">
				<input type="button" name="button" value="Rounded">
				<input type="button" name="button" class="btn-round" value="Round">
				<input type="button" name="button" class="btn-border btn-rect" value="Rectangle">
				<input type="button" name="button" class="btn-border" value="Rounded">
				<input type="button" name="button" class="btn-border btn-round" value="Round">
                

For more details and the results output you can click this link: element-buttons.html


Callout

				<div class="affa-callout callout-info">
                	<h4>....</h4>
                    <p>....</p>
                </div>
                

For more details and the results output you can click this link: element-callout.html


Carousel

				<div class="carousel-slider carousel-arrows carousel-arrows-6col row">
					<div class="col-sm-2"><img src="images/content/portfolios/square/1.jpg" alt="Thumbnail"></div>
					<div class="col-sm-2"><img src="images/content/portfolios/square/2.jpg" alt="Thumbnail"></div>
					<div class="col-sm-2"><img src="images/content/portfolios/square/3.jpg" alt="Thumbnail"></div>
					....
				</div>
                

For more details and the results output you can click this link: element-carousel.html


Clients Logo

				<div class="affa-client-logo">
					<img src="images/content/clients/1.png" alt="Logo">
				</div>
                

For more details and the results output you can click this link: element-clients.html


Columns

				<div class="row">
					<div class="col-sm-3">
						....
					</div>
					<div class="col-sm-3">
						....
					</div>
					<div class="col-sm-3">
						....
					</div>
					<div class="col-sm-3">
						....
					</div>
				</div>
                

For more details and the results output you can click this link: element-columns.html


Content Backgrounds

				<p class="bg-info bg-padding">....</p>
                

For more details and the results output you can click this link: element-content-backgrounds.html


Countdown

				<div class="affa-countdown">
					<h4>{dn}</h4>
					<p>{dl}</p>
				</div>
                

For more details and the results output you can click this link: element-countdown.html


Counters

				<div class="affa-counter">
					<h4><span>300</span></h4>
					<i class="ion ion-beaker"></i>
					<p>cups of coffee</p>
				</div>
                

For more details and the results output you can click this link: element-counters.html


Dialog Box

				<button type="button" data-toggle="modal" data-target="#modalBox">Modal Box</button>
				
				<div class="modal fade" id="modalBox" role="dialog" tabindex="-1" aria-labelledby="modalBoxLabel">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
								<h4 class="modal-title" id="modalBoxLabel">....</h4>
							</div>
							<div class="modal-body">
								....
							</div>
							<div class="modal-footer">
								<button type="button" class="btn-grey" data-dismiss="modal">Close</button>
								<button type="button">Submit</button>
							</div>
						</div>
					</div>
				</div>
                

For more details and the results output you can click this link: element-dialog-box.html


Divider

				<div class="sep-border"></div>
                

For more details and the results output you can click this link: element-divider.html


Dropcaps

				<p><span class="dropcap dropcap-green">S</span>....</p>
                

For more details and the results output you can click this link: element-dropcaps.html


Forms

				<input type="text" name="text" placeholder="Enter your text here....">
				
				<select>
					<option>....</option>
					....
				</select>
				
				<textarea placeholder="Enter your text here...."></textarea>
				
				<input type="button" name="button" value="Button Text">
                

For more details and the results output you can click this link: element-forms.html


Google Maps

				<div id="map1" class="embed-map"></div>
                

Below is some scripts to change the Google Maps settings (place before </body> tag):

				var map;
				map = new window.GMaps({
					div: '#map1',
					lat: -12.043333,
					lng: -77.028333,
					scrollwheel: false,
					zoomControl: false,
					disableDoubleClickZoom: false,
					disableDefaultUI: true
				});
                

Note: You can see the complete documentation here!

For more details and the results output you can click this link: element-google-maps.html


Heading

				<div class="post-heading-center">
					<h2>....</h2>
					<p>....</p>
				</div>
                

For more details and the results output you can click this link: element-heading.html


Icon Boxes

				<div class="affa-feature-icon">
					<i class="ion ion-android-laptop animation" data-animation="animation-bounce-in-down"></i>
					<h4>....</h4>
					<p>....</p>
					<a href="#">Learn More <i class="ion ion-arrow-right-b"></i></a>
				</div>
                

For more details and the results output you can click this link: element-icon-boxes.html


Icons

				<i class="ion ion-ionic"></i>
				<i class="ion ion-arrow-up-a"></i>
				<i class="ion ion-arrow-right-a"></i>
                

For more details and the results output you can click this link: element-icon-list.html


Lists

				<div class="list-icon">
					<ul>
						<li><i class="ion ion-android-done"></i>....</li>
						....
					</ul>
				</div>
                

For more details and the results output you can click this link: element-lists.html


Image Gallery & Lightbox

				<div class="affa-gallery">
					<div class="row">
						
						<div class="col-xs-6 col-sm-3">
							<figure class="img-hover hover-white">
								<a href="images/content/portfolios/full/1.jpg" class="fancybox" data-fancybox-group="images_gallery">
									<img src="images/content/portfolios/square/1.jpg" alt="Thumbnail">
									<div class="overlay-masked">
										<i class="ion ion-plus"></i>
									</div>
								</a>
							</figure>
						</div>
						
						....
						
					</div>
				</div>
                

For more details and the results output you can click this link: element-media-gallery.html


Image Hover

				<figure class="img-hover">
					<a href="#">
						<img src="images/content/portfolios/thumb/1.jpg" alt="Thumbnail">
						<div class="overlay-masked">
							<i class="ion ion-plus"></i>
						</div>
					</a>
				</figure>
                

For more details and the results output you can click this link: element-media-hover.html


Pricing Tables

				<div class="affa-tbl-pricing tbl-prc-recommended row">
                	<div class="col-sm-4">
                		<div class="tbl-prc-col">
							<div class="tbl-prc-heading">
								<h4>Standard</h4>
								<h5><span>$</span>29</h5>
								<p>per month</p>
							</div>
							<ul class="tbl-prc-list list-icon">
								<li><i class="ion ion-checkmark-round"></i>Responsive Display</li>
								....
							</ul>
                            <div class="tbl-prc-footer">
								<a href="#" class="btn-custom">Sign-up Now</a>
							</div>
						</div>
                	</div>
                	
                	<div class="col-sm-4">
                		<div class="tbl-prc-col tbl-prc-col-recommended">
							<h5 class="tbl-prc-badge">Best Seller</h5>
							<div class="tbl-prc-heading">
								<h4>Professional</h4>
								<h5><span>$</span>49</h5>
								<p>per month</p>
							</div>
							<ul class="tbl-prc-list list-icon">
								<li><i class="ion ion-checkmark-round"></i>Responsive Display</li>
								....
							</ul>
							<div class="tbl-prc-footer">
								<a href="#" class="btn-custom">Sign-up Now</a>
							</div>
						</div>
                	</div>
                	
                	<div class="col-sm-4">
                		<div class="tbl-prc-col">
							<div class="tbl-prc-heading">
								<h4>Ultimate</h4>
								<h5><span>$</span>99</h5>
								<p>per month</p>
							</div>
							<ul class="tbl-prc-list list-icon">
								<li><i class="ion ion-checkmark-round"></i>Responsive Display</li>
								....
							</ul>
							<div class="tbl-prc-footer">
								<a href="#" class="btn-custom">Sign-up Now</a>
							</div>
						</div>
                	</div>
                </div>
                

For more details and the results output you can click this link: element-pricing-tables.html


Progress Bar

				<div class="affa-progress-bar">
					<p>Photoshop Design</p>
					<div class="progress-bar-line in">
						<div class="bar-line-overlay" style="width:90%;">90%</div>
						<span class="bar-line-val" style="left:90%;"><i>90</i>%</span>
					</div>
				</div>
                

For more details and the results output you can click this link: element-progress-bar.html


Quotes

				<p class="affa-quote">....</p>
                

For more details and the results output you can click this link: element-quotes.html


Recent Portfolios

				<div class="affa-portfolio">
					<figure class="post-thumbnail post-item-thumbnail img-hover3">
						<img src="images/content/portfolios/thumb/1.jpg" alt="Olivera Note">
						<div class="overlay-masked">
							<a href="#" class="link-left" title="Live Preview"><i class="ion ion-eye"></i></a>
							<a href="#" class="link-right" title="More Details"><i class="ion ion-android-open"></i></a>
						</div>
					</figure>
					<div class="post-item-txt">
						<h4 class="entry-title post-item-title">
							<a href="#">....</a>
						</h4>
						<div class="entry-meta post-item-meta">
							....
						</div>
					</div>
				</div>
                

For more details and the results output you can click this link: element-recent-portfolios.html


Recent Posts

				<div class="affa-post">
					<figure class="post-thumbnail post-item-thumbnail img-hover2">
						<a href="#">
							<img src="images/content/blog/thumb/1.jpg" alt="Transitions In UX Design">
							<div class="overlay-masked">
								<i class="ion ion-eye"></i>
							</div>
						</a>
					</figure>
					<div class="post-item-txt">
						<h4 class="entry-title post-item-title">
							<a href="#">....</a>
						</h4>
						<div class="entry-content post-item-content">
							<p>....</p>
						</div>
						<div class="entry-meta post-item-meta">
							....
						</div>
					</div>
				</div>
                

For more details and the results output you can click this link: element-recent-posts.html


Recent Products

				<div class="affa-product">
					<figure class="post-thumbnail post-item-thumbnail">
						<a href="#">
							<div class="post-thumbnail-overlay">
								<img src="images/content/products/large/1-back.jpg" alt="Thumbnail">
							</div>
							<img src="images/content/products/large/1-front.jpg" alt="Thumbnail">
						</a>
					</figure>
					<div class="post-item-txt">
						<p class="post-item-cats">....</p>
						<h4 class="entry-title post-item-title">
							<a href="#">....</a>
						</h4>
						<div class="entry-meta post-item-meta">
							<div class="post-meta-rate">
								<span class="post-rate-val" style="width:90%;">4.5</span>
							</div>
							<div class="post-meta-price">
								<p class="price-original">....</p>
								<p class="price-discount">....</p>
							</div>
						</div>
						<a href="#" class="add-cart">
							<span class="current">+</span>
							<span class="hover">+</span>
						</a>
					</div>
				</div>
                

For more details and the results output you can click this link: element-recent-products.html


Recent Tweets

				<div class="carousel-slider carousel-tweets no-content">Loading....</div>
                <div class="carousel-slider carousel-tweets2 no-content">Loading....</div>
                

For more details and the results output you can click this link: element-recent-tweets.html


Sliders

				<div class="carousel-slider general-slider">
					<div><img src="images/content/portfolios/full/1.jpg" alt="Image"></div>
					....
				</div>
                

For more details and the results output you can click this link: element-sliders.html


Social Media

				<div class="affa-socials">
                	<a href="#"><i class="ion ion-social-facebook"></i></a>
                    <a href="#"><i class="ion ion-social-twitter"></i></a>
                    <a href="#"><i class="ion ion-social-googleplus"></i></a>
                    ....
                </div>
                

For more details and the results output you can click this link: element-social-media.html


Styled Tables

				<table class="table table-bordered">
					<thead>
						<tr>
							<th>....</th>
							....
						</tr>
					</thead>
					<tfoot>
						<tr>
							<td>....</td>
							....
						</tr>
					</tfoot>
					<tbody>
						<tr>
							<td>....</td>
							....
						</tr>
						<tr>
							<td>....</td>
							....
						</tr>
						<tr>
							<td>....</td>
							....
						</tr>
					</tbody>
				</table>
                

For more details and the results output you can click this link: element-styled-tables.html


Tabs

				<ul class="nav nav-tabs affa-nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                    	<a href="#tabpanel11" aria-controls="tabpanel11" role="tab" data-toggle="tab">....</a>
                    </li>
                    ....
                </ul>
                
                <div class="tab-content">
					<div role="tabpanel" class="tab-pane fade active in" id="tabpanel11">
                    	....
                    </div>
                    ....
                </div>
                

For more details and the results output you can click this link: element-tabs.html


Teams

				<div class="affa-team">
					<img src="images/content/avatars/1.jpg" alt="Avatar">
					<div class="team-heading">
						<h4>....</h4>
						<p>....</p>
					</div>
					<div class="team-desc">
						<p>....</p>
					</div>
					<div class="team-socials">
						<a href="#"><i class="ion ion-social-facebook"></i></a>
						....
					</div>
				</div>
                

For more details and the results output you can click this link: element-team.html


Testimonials

				<div class="affa-testimonial">
					<p>....</p>
					<h4>....</h4>
				</div>
                

For more details and the results output you can click this link: element-testimonials.html


Toggles

				<div class="panel-group affa-panel-group panel-group-toggle">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h4 class="panel-title">
								<a href="#collapse11" class="collapsed">....</a>
							</h4>
						</div>
						<div id="collapse11" class="panel-collapse collapse">
							<div class="panel-body">
								....
							</div>
						</div>
					</div>
					....
				</div>
                

For more details and the results output you can click this link: element-toggles.html


Tooltips

				<a href="#" class="btn btn-default btn-popover" data-toggle="popover" data-container="body" data-placement="left" title="...." data-content="....">....</a>
                

For more details and the results output you can click this link: element-tooltips.html


Typography

For more details and the results output you can click this link: element-typography.html


Ionicons Icon Packs

You can also use built in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


CSS Structure


I'm using one main CSS file (/css/style.css), in this template which you are free to modify depending on the customization you require. There are also two additional style sheets that I do not recommend changing. Those style sheets reside in the /css/ folder. Below are 3 additional CSS files:

  • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
  • ionicons.min.css - CSS stylesheets for font icon packs.
  • jquery.fancybox.css - This stylesheet used for styling the images gallery popup.
  • jquery.scrollbar.css - This stylesheet used for styling the scroll bar.
  • slick.css - This stylesheet use for styling all the web carousel elements.
  • slick-theme.css - Add additional styling to make Slick Slider look more beautiful.
  • slider-pro.min.css - This stylesheet use for styling secondary slider elements.
  • easyzoom.css - This stylesheet use for styling zooming image on hover.
  • animate.min.css - This stylesheet use for styling the animation effects.
  • no-js.css - This stylesheet will be enabled if your browser don't support javascript.
  • ie-older.css - This stylesheet will be enabled if you use Internet Explorer 7 and below.

The main CSS file (/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

                /* ========================= Site Styles ========================= */
                
                General styles for all web elements
                
                /* ========================= Header ========================= */
                
                CSS styles for the header section
                
                /* ========================= Elements ========================= */
                
                CSS styles for specific web elements
                
                /* ========================= Posts ========================= */
                
                CSS styles for the post elements
                
                /* ========================= Widgets ========================= */
                
                CSS styles for the widgets elements
                
                /* ========================= Sidebar ========================= */
                
                CSS styles for the sidebar section
                
                /* ========================= Bottom ========================= */
                
                CSS styles for the bottom section
                
                /* ========================= Footer ========================= */
                
                CSS styles for the bottom section
                
                /* ========================= Spacing ========================= */
                
                CSS styles for spacing elements
                
                /* ========================= Media Queries ========================= */
                
                CSS styles for support all kinds of different screen sizes
                

  • app.css - This stylesheet used for styling the app landing page.
  • blog.css - This stylesheet used for styling the blog landing page.
  • construction.css - This stylesheet used for styling the construction landing page.
  • education.css - This stylesheet used for styling the education landing page.
  • minimalist.css - This stylesheet used for styling the minimalist landing page.
  • portfolio.css - This stylesheet used for styling the portfolio landing page.
  • product.css - This stylesheet used for styling the product landing page.
  • shop.css - This stylesheet used for styling the shop landing page.
  • startup.css - This stylesheet used for styling the startup landing page.

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.


Scripts


This theme uses several scripts many of which are documented within the theme's code. If you're a developer, you will find this particularly useful.


PHP Integration


Contact & Signup Form

This template use the PHP engine for activate contact & signup proses. Through the contact form a message will direct send to your email address. Then for the signup form a message will send to guest/visitor and your email address. So you can edit your email address in the files below:

/includes/process-contact.php
/includes/process-signup.php
/includes/process-signup2.php
/includes/process-signup3.php

Find this line of code and replace with your email address:

                $my_email = 'support@affapress.com'; // Change with your email address
                

Subscribe Form

This template use the PHP engine for subscribe form that has supported with MailChimp integration. To activate this integration you must make some adjusment to several .php files.

Required: You has already signed in mailchimp.com and was familiar with the features provided by the MailChimp.

To adjust the MailChimp integration, follow this instruction:

  1. Open the /includes/mailchimp/config.inc.php file.
  2. Change $apikey variable with your MailChimp API Key, you can see in http://admin.mailchimp.com/account/api
  3. Also write your MailChimp List ID in $listId variable. To get the List ID, login to your MailChimp account » select one of the list that has been created » go to Settings menu » List name & defaults.

Twitter Feeds

In element-recent-tweets.html page there are some variations of recent tweets elements. To change the feeds data you must replace the Twitter userid with your own in /includes/tweets/get-tweets.php file:

                $userid = 'twitter'; // Change with your twitter
                

Image Files


The following Photoshop files are included with download package file, all the files place in /psd/ folder.

  • blog.psd
  • blog-single.psd
  • index.psd
  • portfolio.psd
  • portfolio-single.psd
  • shop.psd
  • shop-single.psd
  • typography.psd

In addition to several assets you can download it for free through the links below:


Credits




Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. Please contact me via email or social media. I'll do my best to assist!