Last update: 12.28.2016
Version: V1.0
Created By: Codeboxr Team
Support: Contact us
Thank you for purchasing our Template. If you have any questions that are beyond the
scope of this help file,
please feel free to email via our contact form
HERE.
Thanks so much!
Overview
ViralZ is a modern, clean, and responsive Html Template. It’s especially designed for
magazine, blog and more where your most viral topics keep lurking.
This is built with modern technologies like HTML5, CSS3, jQuery, Bootstrap3.x, Font
Awesome 4.x, Megamenu, LESS, Gulp, Modernizer, CSS3 Animation and more.
It has many Pages: Three Home Pages, One single article page, One Categories page, One
contact us page, login page, Signup page, Recovery page and features like, Social
Comment, Video Player, Social share and much more.
It have many Pages:
Home - Black (Default) (index.html)
Home - Black & White (index-blackandwhite.html)
Home - White (index-whiteheader.html)
Single Page (single.html) - (3 seperate comment style, still we count them as one)
Typography (typography.html)
Login Page (login.html)
Sign Up Page (signup.html)
Reeset password Page (recovery.html)
Category (category.html)
Contact Us (contact.html)
404 Page (404.html)
It is accepted that before you start modifying the HTML for your need at
least you have basic knowledge in html and twitter Bootstrap3.
If you need custom development as well as need to know any thing specific for this
Template that doesn't cover in this documentation, you are always welcome to contact
us.
How to Modify or Customize
This Template has Eleven (11) html files named:
Home - Black (Default) (index.html)
Home - Black & White (index-blackandwhite.html)
Home - White (index-whiteheader.html)
Single Page (single.html)
Typography (typography.html)
Login Page (login.html)
Sign Up Page (signup.html)
Reset password Page Page (recovery.html)
Category (category.html)
Contact Us (contact.html)
404 Page (404.html)
For Home Page (which is dark theme by default) "index.html" File
For Home Page - Black and White, copy "index-blackandwhite.html" File
For Home Page - White, copy "index-whiteheader.html"
For Single Page, copy "single.html"
For Typography Page, copy "typography.html"
For Login Page, copy "login.html"
For Signup Page, copy "signup.html"
For Reset password Page, copy "recovery.html"
For Categories Page, copy "category.html"
For Contact Page, copy "contact.html"
For 404 Page, copy "404.html"
General
Viralz html template contains html, css, js and less files. Css files are compiled from less files. Final js and css files are all minified version added in html head tag but their non minified version is included for further development. The theme includes a gulp.js file which can compile the less file into one css file and compress, same thing for theme.js to minified theme.min.js.
Less: Less files are located in assets/less folder. If you are advance user and know how to compile less then change it as need and compile. gulp.less file in theme root has all instruction. If you don't know what it is then don't touch it and leave it as it is. You can change css file as need (in case you need customization in style)
Html: All html files are located in theme root folder. Total three html files index.html(Home), contact.html() and speaker.html(Single Speaker)
CSS: Css files are stored in assets/css. The default css file is style-default.css and it's minified version of file style-default.min.css. In the css folder, there are other css files for different color variation. We include 5 color variation, by default the default css is linked, but you can change as need. We recommend not to change the default css file style-default.min.css and see there is an extra css file custom.css in css folder and put any extra custom style in that file.
JS Files: Most js libraries are under assets/vendor folder. Theme main js file is under folder assets/js , file name theme.min.js which is minified version of file theme.js. If you change the theme.js then compile it via gulp. We recommend not to change this file and use custom.js for any custom js code.
Top Search
If you would like to edit Top Search bar : you would do the following: (Line No: Near
110 to 120 )
The following code in index.html, forms the top search bar (which is not visible by
default, click the search icon to see the bar)
Logo & Advertising area
If you would like to edit Logo & Advertising area content : you would do the
following: (Line No: Near
127 to 140 )
For Changing Logo edit these codes in index.html
For Changing Advertising area edit these codes in index.html
Navigation and Dropdown menu
If you would like to edit Menu content : you would do the following: (Line No: Near
147 to 268 )
For changing Megamenu Item and submenues edit these codes in index.html
Featured
If you would like to edit the featured (3) articles : you would change the following:
(Line No: Near
274 to 345 )
For Editing single featured articles, edit these codes in index.html
Whenever you click on an article thumb (big or small) you are redirected to the full
page preview of the article (which is the view of 'single.html' file)
If you would like to edit the article in full page preview mode : you would edit the
following codes (in single.html) : (Line No: Near
276 to 372 )
For changing article previews (full page), edit these codes in single.html
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, accusamus atque
cum eum facere incidunt iusto labore neque numquam provident quae quaerat,
reiciendis, tenetur ut vitae. Alias doloremque molestiae ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio eveniet
ex in mollitia nemo non. Corporis deleniti dolor earum illum in laudantium,
magni nulla perspiciatis provident, quaerat soluta tempore vero.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis
debitis facilis illum magni nisi perferendis qui quo repellendus ut.
Assumenda dolore dolores est hic nulla odio omnis placeat quas?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis
debitis facilis illum magni nisi perferendis qui quo repellendus ut.
Assumenda dolore dolores est hic nulla odio omnis placeat quas?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis
debitis facilis illum magni nisi perferendis qui quo repellendus ut.
Assumenda dolore dolores est hic nulla odio omnis placeat quas?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis
debitis facilis illum magni nisi perferendis qui quo repellendus ut.
Assumenda dolore dolores est hic nulla odio omnis placeat quas?
If you would like to edit the content appearing at the right side of the homepage,
you would change the following: (Line No: Near
564 to 574 ) in 'index.html' file.
For changing each (small) thumbs on the sidebar, change these codes in index.html
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dicta dolorem
doloribus esse fugiat iste itaque iure laborum maxime minima nemo nulla,
obcaecati porro qui quibusdam, repellat unde veritatis vero!
Typography
If you would like to modify the typography page : you would do the following: (Line
No: Near
282 to 598) in 'typography.html' page.
This page contains almost all the elements necessary to run this template and you
will have a preview of them here, change these codes to
get your own changes applied:
This is the title h1 for Typography.
This is the title h2 for Typography.
This is the title h3 for Typography.
This is the title h4 for Typography.
This is the title h5 for Typography.
This is the title h6 for Typography.
Paragraph and Blockquote
Cras porttitor convallis ligula, at elementum erat mattis quis. In vitae
vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis
ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas
ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus.
Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu
porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu
eget, bibendum tortor. Vivamus aliquam lacus id leo tristique sagittis.
Pellentesque mattis diam metus, id commodo ex placerat vitae. Curabitur
lobortis justo ante, in varius leo congue id. Etiam a libero elementum,
posuere est at, sodales justo. Proin nec venenatis metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante. vitae vulputate tellus, sed laoreet est. Nam eget dolor non
eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbierst
imperdiet egestas ullamcorperet. Expo neque, congue nec nibh in,
pellentesque fringilla risus. Suspeiss hendrerit et sapien ut pretium.
Aenean nulla ipsum, facilisis eu porta non, rutrum sit amet nibh.
Unordered List Style
Reget nec nunc. Etiam posuere iaculis quam.
Reget nec nunc. Etiam posuere iaculis quam.
Reget nec nunc. Etiam posuere iaculis quam.
Faucibus viverra eget nec nunc. Etiam posuere iaculis
quam.
Etiam nec urna in odio faucibus viverra eget nec nunc.
Etiam posuere iaculis quam.
Cras porttitor convallis ligula, at elementum erat mattis quis. In vitae
vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis
ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas
ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus.
Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu
porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu
eget, bibendum tortor. Vivamus aliquam lacus id leo tristique sagittis.
Pellentesque mattis diam metus, id commodo ex placerat vitae. Curabitur
lobortis justo ante, in varius leo congue id. Etiam a libero elementum,
posuere est at, sodales justo. Proin nec venenatis metus. Cras porttitor
convallis ligula, at elementum erat mattis quis. In vitae vulputate tellus,
sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien.
Aenean sed vehicula massa. Morbi imperdiet egestas ullamcorperet. Expo
neque, congue nec nibh in, pellentesque fringilla risus. Suspendisse
hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu porta non,
rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu eget, bibendum
tortor. Vivamus aliquam lacus id leo tristique sagittis. Pellentesque mattis
diam metus, id commodo ex placerat vitae. Curabitur lobortis justo ante.
Cras porttitor convallis ligula, at elementum erat mattis quis. In vitae
vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis
ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas
ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus.
Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu
porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu
eget, bibendum tortor. Vivamus aliquam lacus id leo tristique sagittis.
Pellentesque mattis diam metus, id commodo ex placerat vitae. Curabitur
lobortis justo ante, in varius leo congue id. Etiam a libero elementum,
posuere est at, sodales justo. Proin nec venenatis metus. Cras porttitor
convallis ligula, at elementum erat mattis quis. In vitae vulputate tellus,
sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien.
Aenean sed vehicula massa. Morbi imperdiet egestas ullamcorperet. Expo
neque, congue nec nibh in, pellentesque fringilla risus. Suspendisse
hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu porta non,
rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu eget, bibendum
tortor. Vivamus aliquam lacus id leo tristique sagittis. Pellentesque mattis
diam metus, id commodo ex placerat vitae.
Cras porttitor convallis ligula, at elementum erat mattis quis. In vitae
vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis
ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas
ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus.
Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu
porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu
eget, bibendum tortor. Vivamus aliquam lacus id leo tristique sagittis.
Pellentesque mattis diam metus, id commodo ex placerat vitae. Curabitur
lobortis justo ante, in varius leo congue id. Etiam a libero elementum,
posuere est at, sodales justo. Proin nec venenatis metus.
Log In form
If you would like to edit Log In form style or it's content : you would change these
codes in the 'login.html' file : (Line No: Near
284 to 306 )
Edit these lines in login.html :
Sign Up form
If you would like to edit Sign Up form style or it's content : you would change these
codes in the 'signup.html' file : (Line No: Near
284 to 329 )
Edit these lines in signup.html :
Reset Password Form
If you would like to edit Reset password form style or it's content : you would
change these codes in the 'passreset.html' file : (Line No: Near
284 to 297 )
Edit these lines in passreset.html :
Contact Page
The total codes of contact us page are within (Line No: Near
270 to 345 ). It is devided into tow parts, (i)map
and (ii)contact form
To edit the map part, change these codes:
Make sure that your map element ( .cbxmapcanvas ) has a height defined,
otherwise it will not be visible:
.cbxmapcanvas {
min-height: 400px;
}
Here is the code portion for the contact form:
To configure email options then open contact.php file which you find from php directory from Template root Template root/php/contact.php. There we try to describe everything by comments.
You can configure to save in a csv file, subscribe in mailchimp and send email. The code is well documentation where to put what. The configuration starts from line 30 and ends to line 52
Email smtp or such configure is from line 161-168 and 218-226
Default Email & Other configuration:
//csv
$save_in_csv = false; // make it true if you want to save in a csv file, the csv file name should be contacts.csv and must be located in same dir of this file
//mailchimp
$save_in_mailchimp = false; //true = save in mailchimp, false = ignore //if true, then list id and key needs to be set
$api_key = null; //mailchimp api key
$list_id = null; //set mailchimp list id api
$status = 'pending'; //pending = user will get email to confirm his subscription, subscribed = force subscribe the email
//general email configuration
$send_email = true; //false = doesn't send email, actually sending email is basic practice fo contact form.
$admin_email_to = 'admin@yourdomain.com'; // admin email who will get the contact email alert
$admin_email_to_name = "Company Name"; // Admin Name/Company name who will get the email alert
$admin_email_from = 'noreply@yourdomain.com'; // admin email from which email address email will be sent
$admin_email_from_name = 'System'; //admin name from which email will be sent
$admin_send_subject = 'Contact form alert'; //email subject what the admin will get as contact email alert
$user_send_subject = 'Thanks for contact, your copy'; //email subject what the user will get if the user agreed or select "copy me"
$site_name = 'Example Site Name'; //change this as need
$header_image = ''; //header image
$footer_text = 'Copyright @example.com'; //change this as need
Footer
If you would like to edit Footer content : you would change the following codes :
(Line No: Near
608 to 667 ) in 'index.html' or wherever you want to change the footer.
Subscribe Form
The functionality of the form is controlled by the 'subscribe.php' file located in
the 'php' folder. However, If you would like to change the subscribe form's content
or it's style, you would change the following codes in 'index.html': (Line No: Near
616 to 631 )
To change the subscribe form or it's content, edit these codes in 'index.html':
Subscribe and Stay updated !
Subscribe is handled from js and php file. After subscribe form is validated request is send to php file located in php/subscribe.php.
To configure Subscribe options then open subscribe.php . The code near 23-27 is for Subscribe configuration.
You can configure for csv as csv and send to mailchimp. Code is well commented to understand
Default Subscribe configuration:
$save_in_csv = false; // make it true if you want to save in a csv file, the csv file name should be subscribe.csv and must be located in same dir of this file
$api_key = null; //mailchimp api key
$list_id = null; //set mailchimp list id api
$status = 'pending'; //pending = user will get email to confirm his subscription, subscribed = force subscribe the email
Subscribe form validation and ajax js code is located in file assets/js/viralz.js near line 82 to 119
var isEmail = function (email) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
$('form.subscribe-form-action').on('submit', function (evnt) {
evnt.preventDefault();
var $form = $(this);
var emailInput = $form.find('input#subscribe');
if (isEmail(emailInput.val())) {
$.ajax({
url: cbx_path + '/php/subscribe.php',
type: 'post',
data: {'email': emailInput.val().toLowerCase()},
beforeSubmit: function (argument) {
// body...
},
success: function (ajaxResponse) {
try {
var ajaxResponse = $.parseJSON(ajaxResponse);
alert(ajaxResponse.message);
} catch (e) {
//e.message;
alert(e.message);
}
},
error: function (argument) {
// body...
}
});
$form[0].reset();
} else {
emailInput.css('color', '#f00');
return false;
}
});
404 content
If you would like to edit the content of 404 page : you would change the following
codes : (Line No: Near
38 to 42 ) in '404.html'
Change these codes in 404.html to get your own changes applied:
Comments