Table of Content

  • Item Name : Blon - Personal Portfolio Template
  • Installation Required : PHP, Apache webserver, FTP tool
  • Author by : CKavArt

Thank you for purchasing my template.

We are happy to help you but before you contact, please make sure that you followed the whole documentation very carefully, because it cover whole information to manage template.

We provide a support within 24 working hours. In order to get help you should contact me via themeforest user contact form or support.

Ticket support Profile contact form

Please note that we will only provide the support if you contact us via themeforest contact form or our support area. This is the only way we can verify you as our customer!

Installation #back to top

Package content

Below is main folder which include all landing page light and dark theme dependency files and all pre-define ready to use landing page files.

							Html
							  |
							  |--form-data/		=> All php wrapper for mail settings
							  |--formicons/		=> All template font icons css
							  |--css/			=> All original normal CSS files 
							  |--js/			=> All original template js files
							  |--vendor/		=> All dependency library files which used in template
							  |--videos/		=> All template background video
							  |--images/		=> All image files which are used in template
							  |--index-01.html
							  |--index-02.html
							  |-- ....
							  |-- ....
							  |
						

Installation requirement

  • PHP
  • Apache webserver (Windows servers will probably work, but are not supported)
  • An FTP tool to upload the files

Pre-define landing pages

  • Copy and upload all files and folders (css, images, form-data, js, vendor, index.html) of your desire pre-define HTML page for example : Html/index-01.html to your hosting server. You can rename "index-01.html" to "index.html"
  • Once all files and folders uploaded than you can access your page via browser.

Layout overview #back to top

All pages developed based on bootstrap framework 4.xx. Below is overview of page structure.

Page meta information

Uncompress CSS list


							
								
								
								
								
								
								CKav | Blon - Personal Portfolio Template
							
								
								
								
								
							
								
								
							
								
								
								
								
								
							
								
								
    							

							
								
								
								
								
								
							
								
								
								
								
								
								
								
								
								
							
								
								
								
								
								
							
								
							
								
							
								
								
							

						

Page body structure

							
							

								
								
logo

Alex Poula

Alex Poula

Lorem ipsum dolor, sit amet consectetur adipi sicing elit. Molestiae alias minus eos nihil est.

Lear More
... ...

CSS structure

Blon use following main CSS files

							Main
							  |
							  |--form-data/
							  |--css/
							  |   |--ckav-main.css
							  |   |--ckav-helper.css
							  |   |--ckav-responsive.css
							  |   |--ckav-elements.css
							  |   |--template-custome.css
							  |--js/
							  |--vendor/
							  |--images/
							  |--minify/
							  |--
							  |--
						
  • ckav-main.css : All core CSS defined into this file
  • ckav-responsive.css : All responsive behavior css code you can find into this file
  • ckav-elements.css : All template elements css code you can find into this file
  • ckav-helper.css : This CSS include all helper CSS classes which are widely used in layout structure to generate design templates. We strongly suggest take full overview to know how we used these classes into layout structure. These classes help you to manipulate design structure very easily.
  • template-custom.css : Add all your custom CSS code into these file to customize template instead of directly modifying core files.

Useful tools to customize HTML and CSS

Customization #back to top

CSS code overview

ckav-main.css : This CSS file include all widgets and main structure related codes. We strongly suggest do not modify directly.


Helper CSS

ckav-helper.css : This CSS include all helper CSS classes which are widely used in layout structure to generate design templates. We strongly suggest take full overview to know how we used these classes into layout structure. These classes help you to manipulate design structure very easily. Best way to get classes overview directly from helper.css file.


COMMON

  • full-wh class used to cover full width x height overlay div or background in any section. full-wh class use position absolute so it alway dependent on parent tag position relative.
  • no-border : For reseting borders
  • position-rel : Apply position relative on tag
  • position-abs : Apply position absolute on tag
  • l0 : Apply left position 0. Generally apply when element use absolute position.
  • r0 : Apply right position 0. Generally apply when element use absolute position.
  • list-reset : Used to reseting ul HTML element.

Z-INDEX

Manage z-index of element when position relative or absolute

zindex-01, zindex-02, zindex-03, zindex-04, zindex-05, zindex-06, zindex-07, zindex-08, zindex-09, zindex-010


OPACITY

Manage opacity of elements

opacity-01, opacity-02, opacity-03, opacity-04, opacity-05, opacity-06, opacity-07, opacity-08, opacity-09


BUTTONS

All button classes which used in template

color-button-default, color-button-primary, color-button-secondary, color-button-white, color-button-dark

				Button text
				Button text
				Button text
				Button text
				Button text
				

Apply class solid along with button classes for solid button

				Button text
				

Apply class large, medium, small, mini, tiny along with button classes to adjust button sizes

				Button text
				

Apply class round along with button classes for round button

				Button text
				

COMMON TYPOGRAPHY

Apply class heading for general titles

				

Title text

Apply class xxxlarge, xxlarge, xlarge, large, medium, small, mini, tiny along with title class to adjust size of title

				

Heading text

Apply class heading-sub for sub heading text

				

Sub title text

Apply class large, medium, small, mini, tiny along with heading-sub class to adjust size

				

Sub heading text

Apply class typo-light on parent of title or other content to quickly change text color white on dark background

				

heading text

Sub heading text


FONTS SIZES

Use below list of classes to adjust font size anywhere in content

fs-11, fs-12, fs-13, fs-14, fs-16, fs-18, fs-20, fs-22, fs-24, fs-26, fs-28, fs-30, fs-32, fs-34, fs-36, fs-38, fs-40, fs-42, fs-44, fs-46, fs-48, fs-50, fs-52, fs-54, fs-56, fs-58, fs-60, fs-62, fs-64, fs-66, fs-68, fs-70, fs-72, fs-74, fs-76, fs-78, fs-80, fs-82, fs-84, fs-86, fs-88, fs-90, fs-100, fs-110, fs-120, fs-130, fs-140, fs-150, fs-160, fs-170, fs-180, fs-190, fs-200

				

Title text

Sub title text


FONT FAMILY

Use below list of classes to change font-family

font-1, font-2


TEXT COLORS

Use below list of classes to change text colors

.color-text-default, .color-text-primary, .color-text-secondary, .color-text-white, .color-text-dark, .color-text-light


ALIGNMENT

Use below listed classes to adjust alignment of content or elements

  • align-left => Text align left
  • align-right => Text align right
  • align-center => Text align center
  • flex-tl => Align inner elements top left
  • flex-tc => Align inner elements top center
  • flex-tr => Align inner elements top right
  • flex-cc => Align inner elements center center
  • flex-cl => Align inner elements center left
  • flex-cr => Align inner elements center right
  • flex-bc => Align inner elements bottom center
  • flex-bl => Align inner elements bottom left
  • flex-br => Align inner elements bottom right

Example of flex alignment - center center inner element

				

heading text

Sub heading text

Lorem ipsum dolor sit amet, consectetur adipisicing elit


Background utilities

  • Background image

    Apply data-bg-image="images/bg1.jpg" attribute on element with your image path to apply background image

    						
    ...

    Use helper classes bg-cc bg-cover to adjust background image on element.

  • Background gradient color

    Apply data-radial-gradient="rgba(0,0,0, 0.1)|rgba(0,0,0, 0.4)" attribute. Apply two background colors with "|" separator.

    						
  • Parallax background image

    Apply attribute to apply parallax image.

    
    						
    						
    						

    Please note parallax image only apply on transparent element.


Grid structure

  • All landing pages use flex based grid structure. Grid structure classes is same as bootstrap grid structure just added prefix flex-. Below example code to create basic grid structure.

    						
    						
    						
    ... GIRD COLUMN CONTENT ...
    ... GIRD COLUMN CONTENT ...
    ... GIRD COLUMN CONTENT ...
  • Use following classes along with flex-row to adjust space between columns
    gt-0, gt-1, gt-2, gt-4, gt-10, gt-12, gt-14, gt-16, gt-18, gt-20, gt-22, gt-24, gt-26, gt-28, gt-30, gt-40, gt-50, gt-60, gt-70, gt-80, gt-90, gt-100
  • Apply class reverse along with row to make it reverse grids.
  • Apply class middle-md along with row to make all children column vertical align middle.
  • Apply class bottom-md along with row to make all children column vertical align bottom.
  • Apply class first-md on column col-md-4 to make it first in row.
  • Apply class last-sm on column col-md-4 to make it last in row.

Forms structure

  • CK use very simple form structure. It's very easy to customize or add new fields according to requirement. Below is example code of basic form.

    						
    						
  • Set your email address on hidden field on which you would like to get mails.

    							
    							
    						

    You can also set these email directly in form-data/formdata.php as well.

    Below is default php code.

    						$to = $_POST['to']['val']; // default code
    						

    Example code to set email in php file directly

    						$to = "abc@xyz.com"; // Your email ID
    						
  • form-data/formdata.php file is main file to sending mail of form data.
  • All validation settings find in js/ckav-template.js file

    						ckav.global_validation = {
    							form: '',
    							rules: { 
    								email            : { required: true, email: true },
    								name             : { required: true },
    								message          : { required: true },
    								phone            : { required: true, number: true },
    								date             : { required: true, date: true },
    								people           : { required: true, number: true },
    								datetime         : { required: true, date: true }
    							},
    							msgpos: 'normal',
    							msg: {
    								email: {email: "Please, enter a valid email"}
    							},
    							subscribe_successMsg : "You are in list. We will inform you as soon as we finish.",
    							form_successMsg : "Thank you for contact us. We will contact you as soon as possible.",
    							
    							successMsg : "",
    							errorMsg   : "Oops! Looks like something went wrong. Please try again later."
    						}
    						

Newsletters

  • Blon included MailChimp, Campaign Monitor, Get response, iContact, Constant Contact Option to save email addresses in text file. Below is example code to set newsletter subscription form

    						
    						
    						
    						
  • Set your newsletter service settings into form-data/config.php file. All basic requirements / steps mention in file.

Support Desk #back to top

Please remember you have purchased a very affordable theme and you have not paid for a full-time web design agency. Occasionally we will help with small tweaks, but these requests will be put on a lower priority due to their nature. We provide support for your connivance, so please be patient, polite and respectful.

Please visit our profile page

Support for my items includes:
  • * Responding to questions or problems regarding the item and its features
  • * Fixing bugs and reported issues
  • * Providing updates to ensure compatibility with new software versions
Item support does not include:
  • * Customization and installation services
  • * Support for third party software and plug-ins
  • Hosting related issue
Before seeking support, please...
  • * Make sure your question is a valid Theme Issue and not a customization request.
  • * Make sure you have read through the documentation and any related guides before asking support on how to accomplish a task.
  • * Almost 80% of the time we find that the solution to people's issues can be solved with a simple "Google Search". You might want to try that before seeking support. You might be able to fix the issue yourself much quicker than we can respond to your request.
  • * Make sure to state the name of the theme you are having issues with when requesting support via ThemeForest.