645 lines
33 KiB
HTML
645 lines
33 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
||
<head>
|
||
<title>Pressroom - Responsive News and Magazine Template - Documentation</title>
|
||
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
|
||
|
||
<link rel="stylesheet" type="text/css" href="style/jquery-ui/smoothness/jquery-ui.css"/>
|
||
<link rel="stylesheet" type="text/css" href="style/base.css"/>
|
||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Cuprum"/>
|
||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans"/>
|
||
|
||
<script type="text/javascript" src="script/jquery.min.js"></script>
|
||
<script type="text/javascript" src="script/jquery-ui.min.js"></script>
|
||
<script type="text/javascript" src="script/main.js"></script>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="main clear-fix overflow-fix box-center">
|
||
|
||
<div class="header clear-fix overflow-fix">
|
||
|
||
<div class="layout-50-left">
|
||
<a href="https://themeforest.net/user/QuanticaLabs?ref=quanticalabs" class="header-logo"></a>
|
||
</div>
|
||
|
||
<div class="layout-50-right">
|
||
|
||
<ul class="no-list header-menu">
|
||
<li><a href="https://themeforest.net/user/QuanticaLabs?ref=quanticalabs#contact" class="header-menu-contact-us">Contact us</a></li>
|
||
<li><a href="https://twitter.com/QuanticaLabs" class="header-menu-twitter"></a></li>
|
||
<li><a href="https://themeforest.net/user/QuanticaLabs?ref=quanticalabs" class="header-menu-envato"></a></li>
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="content">
|
||
|
||
<div class="tabs">
|
||
|
||
<ul>
|
||
<li><a href="#tab-about">About</a></li>
|
||
<li><a href="#tab-css">CSS Styles</a></li>
|
||
<li><a href="#tab-js">Javascript Files</a></li>
|
||
<li><a href="#tab-plugins">Plugins</a></li>
|
||
<li><a href="#tab-psd">PSD Files</a></li>
|
||
<li><a href="#tab-fonts">Fonts used</a></li>
|
||
<li><a href="#tab-credits">Credits</a></li>
|
||
<li><a href="#tab-changelog">Changelog</a></li>
|
||
<li><a href="#tab-faq">FAQ</a></li>
|
||
<li><a href="#tab-support">Support</a></li>
|
||
</ul>
|
||
|
||
<!-- #### -->
|
||
|
||
<div id="tab-about">
|
||
|
||
<h1>Pressroom - Responsive News and Magazine Template</h1>
|
||
|
||
<p>
|
||
<a href='https://themeforest.net/item/pressroom-responsive-news-and-magazine-template/9066845?ref=quanticalabs'><strong>Pressroom</strong></a> is a responsive HTML Template best suitable for news, newspaper, magazine or review sites. Each and every element of the Template has been tested to ensure it adapts to modern smarthphones and tablets. Pressroom includes wide and boxed layout, 15 predefined header styles, sticky menus, light, dark and high contrast color skin for visually impaired users. The Template comes with 7 different home page layouts, 10 different post type layouts including gallery, review, soundcloud audio or video post types.
|
||
<br><br>
|
||
PSD source files are available to all of our buyers. Please <a href='https://themeforest.net/user/QuanticaLabs#contact'>contact us</a> to get the files. You will receive perfectly organized and layered Template plus all of the icons used within a project in full PSD vector.
|
||
</p>
|
||
|
||
<p><b>Template Features</b></p>
|
||
|
||
<ul class="documentation">
|
||
<li>Responsive Design</li>
|
||
<li>jQuery Powered</li>
|
||
<li>Wide And Boxed Layouts</li>
|
||
<li>Boxed Pattern Or Background Image Support With / Without Overlay Layer</li>
|
||
<li>15 Predefined Header Styles With 60+ Variants Available</li>
|
||
<li>Light, Dark And High Contrast Color Skins</li>
|
||
<li>Sticky Menu</li>
|
||
<li><strong>7 Home Page Layouts Including</strong>
|
||
<ul>
|
||
<li>Wide Slider For Featured Content</li>
|
||
<li>Small Slider For Featured Content</li>
|
||
<li>Block-Based Featured Content</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>10 Post Formats Layouts</strong>
|
||
<ul>
|
||
<li>Featured Image</li>
|
||
<li>Small Featured Image</li>
|
||
<li>Gallery</li>
|
||
<li>YouTube Video</li>
|
||
<li>Vimeo Video</li>
|
||
<li>SoundCloud Audio</li>
|
||
<li>Review Style 1</li>
|
||
<li>Review Style 2</li>
|
||
<li>Quote Style 1</li>
|
||
<li>Quote Style 2</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>7 Blog Layouts</strong>
|
||
<ul>
|
||
<li>Blog With Small Slider</li>
|
||
<li>Blog 1 Column With Right Sidebar</li>
|
||
<li>Blog 1 Column With Left Sidebar</li>
|
||
<li>Blog 2 Columns With Right Sidebar</li>
|
||
<li>Blog 2 Columns With Left Sidebar</li>
|
||
<li>Blog 3 Columns</li>
|
||
<li>Search Page Template</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>Page Templates</strong>
|
||
<ul>
|
||
<li>About Style 1</li>
|
||
<li>About Style 2</li>
|
||
<li>Authors List</li>
|
||
<li>Single Author Page</li>
|
||
<li>Contact Style 1</li>
|
||
<li>Contact Style 2</li>
|
||
<li>Category Page</li>
|
||
<li>Default Page</li>
|
||
<li>404 Not Found</li>
|
||
<li>Search Page Template</li>
|
||
</ul>
|
||
</li>
|
||
<li>Valid HTML5 Code</li>
|
||
<li>Crossbrowser Compatible</li>
|
||
<li>Clean Design</li>
|
||
<li>36 Social Icons To Choose From</li>
|
||
<li>20 Features Icons To Choose From</li>
|
||
<li>Documentation Included</li>
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
<!-- #### -->
|
||
|
||
<div id="tab-css">
|
||
|
||
<h1>CSS Styles</h1>
|
||
|
||
<p>The project uses the following cascade of template styles (in order):</p>
|
||
<ul class="documentation">
|
||
<li><span class="name">animations.css</span> - styles for animated elements,</li>
|
||
<li><span class="name">dark_skin.css</span> - styles for dark skin (by default commented in the <head> section, so you need to uncomment to enable dark skin),</li>
|
||
<li><span class="name">high_contrast_skin.css</span> - styles for high contrast skin (by default commented in the <head> section, so you need to uncomment to enable high contrast skin. As this skin is basing on dark skin, the dark_skin.css is required to enable high contrast skin),</li>
|
||
<li><span class="name">jquery.qtip.css</span> - default styles for tooltips (overwritten in <span class="name">style.css</span>),</li>
|
||
<li><span class="name">superfish.css</span> - default styles for superfish menu,</li>
|
||
<li><span class="name">menu_styles.css</span> - styles for different menu layouts,</li>
|
||
<li><span class="name">odometer-theme-default.css</span> - styles for <a href='http://github.hubspot.com/odometer/'>Odometer</a> smoothly transitioning numbers plugin,</li>
|
||
<li><span class="name">prettyPhoto.css</span> - default styles for prettyPhoto lightbox,</li>
|
||
<li><span class="name">style.css</span> - base styles for the entire project,</li>
|
||
<li><span class="name">responsive.css</span> - styles for responsive design (remove it from header to disable responsive),</li>
|
||
<li><span class="name">reset.css</span> - styles which resets default browsers styles.</li>
|
||
</ul>
|
||
|
||
<p>
|
||
All CSS files are located in <span class="name">/style</span> directory.<br/>
|
||
</p>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- #### -->
|
||
|
||
<div id="tab-js">
|
||
|
||
<h1>Javascript Files</h1>
|
||
<h4>Plugins and library:</h4>
|
||
<ul class="documentation">
|
||
<li><span class="name">jQuery v1.12.4</span> - jQuery JavaScript Library, <a href="http://jquery.com/">http://jquery.com/</a>,</li>
|
||
<li><span class="name">jQuery migrate v1.4.1</span> - APIs and features removed from jQuery core, <a href="https://github.com/jquery/jquery-migrate/">https://github.com/jquery/jquery-migrate/</a>,</li>
|
||
<li><span class="name">jQuery Easing v1.3</span> - <a href="http://gsgd.co.uk/sandbox/jquery/easing/">http://gsgd.co.uk/sandbox/jquery/easing/</a>,</li>
|
||
<li><span class="name">jQuery blockUI v2.66</span> - <a href="http://malsup.com/jquery/block/">http://malsup.com/jquery/block/</a>,</li>
|
||
<li><span class="name">qTip2</span> - Pretty powerful tooltips, <a href="http://craigsworks.com/projects/qtip2/">http://craigsworks.com/projects/qtip2/</a>,</li>
|
||
<li><span class="name">jQuery prettyPhoto v3.1.5</span> - Simple lightbox alternative, <a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/">http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/</a>,</li>
|
||
<li><span class="name">jQuery timeago</span> - Plugin that makes it easy to support automatically updating fuzzy timestamps, <a href="http://timeago.yarp.com/">http://timeago.yarp.com/</a>,</li>
|
||
<li><span class="name">jQuery UI 1.11.1</span> - jQuery User Interface plugin used for tabs and accordions, <a href="http://jqueryui.com/">http://jqueryui.com/</a>,</li>
|
||
<li><span class="name">jQuery BBQ v1.2.1</span>, Plugin which provide support for browser histry, <a href="http://benalman.com/projects/jquery-bbq-plugin/">http://benalman.com/projects/jquery-bbq-plugin/</a>,</li>
|
||
<li><span class="name">Odometer v0.4.6</span>, Plugin for Smoothly transitioning numbers, <a href="http://github.hubspot.com/odometer/">http://github.hubspot.com/odometer/</a>,</li>
|
||
<li><span class="name">jQuery carouFredSel v6.2.1</span> - Carousel plugin, <a href="http://dev7studios.com/plugins/caroufredsel/">http://dev7studios.com/plugins/caroufredsel/</a>,</li>
|
||
<li><span class="name">jquery TouchSwipe</span> - touch and swipe support for carousel plugin, <a href="http://labs.rampinteractive.co.uk/touchSwipe/demos/">http://labs.rampinteractive.co.uk/touchSwipe/demos/</a>,</li>
|
||
<li><span class="name">jquery Transit</span> - CSS transitions & transformations for jQuery, <a href="http://ricostacruz.com/jquery.transit/">http://ricostacruz.com/jquery.transit/</a>.</li>
|
||
</ul>
|
||
|
||
<br/>
|
||
|
||
<h4>Other files:</h4>
|
||
<ul class="documentation">
|
||
<li><span class="name">jquery.sliderControl.js</span> - script which supports slider control for galleries and home slider,</li>
|
||
<li><span class="name">jquery.hint.js</span> - script which supports hints/placeholders for form fields,</li>
|
||
<li><span class="name">main.js</span> - script contains all executable instructions of jquery plugins, events handlers etc.</li>
|
||
</ul>
|
||
|
||
<p>All JS files are located in <span class="name">/js</span> directory.</p>
|
||
|
||
</div>
|
||
|
||
<!-- #### -->
|
||
|
||
<div id="tab-plugins">
|
||
<h1>Plugins</h1>
|
||
<h4>Contact form</h4>
|
||
<p class="mp-top-0">
|
||
This project includes a contact form ready for use.<br/>
|
||
All you need is to configure some constants located in file <span class="name">contact_form/config.php</span>:
|
||
</p>
|
||
<ul class="documentation">
|
||
<li><span class="name">_from_name</span> - name of your e-mail eg. "My Company",</li>
|
||
<li><span class="name">_from_email</span> - sender e-mail eg. "mycompany@gmail.com",</li>
|
||
<li><span class="name">_to_name</span> - name of recipient eg. "My Company",</li>
|
||
<li><span class="name">_to_email</span> - e-mail of recipent eg. "mycompany@gmail.com",</li>
|
||
<li><span class="name">_smtp_host</span> - your SMTP host eg. "gmail.com",</li>
|
||
<li><span class="name">_smtp_username</span> - login to your e-mail account eg. "mycompany",</li>
|
||
<li><span class="name">_smtp_password</span> - password to your e-mail account,</li>
|
||
<li><span class="name">_smtp_port</span> - port number for SMTP connection (optional),</li>
|
||
<li><span class="name">_smtp_secure</span> - authorization method (optional) - ssl or tls.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- #### -->
|
||
|
||
<div id="tab-psd">
|
||
<h1>PSD Files</h1>
|
||
<p>
|
||
PSD source files are available to all of our buyers. Please <a href='https://themeforest.net/user/QuanticaLabs#contact'>contact us</a> to get the files. You will receive perfectly organized and layered Template plus all of the icons used within a project in full PSD vector.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- #### -->
|
||
|
||
<div id="tab-fonts">
|
||
<h1>Fonts used</h1>
|
||
<ul class="documentation">
|
||
<li><span class="name">Roboto</span> By Christian Robertson, Apache License, version 2.0<br/><a href="http://www.google.com/fonts/specimen/Roboto">http://www.google.com/fonts/specimen/Roboto</a>,</li>
|
||
<li><span class="name">Roboto Condensed</span> By Christian Robertson, Apache License, version 2.0<br/><a href="http://www.google.com/fonts/specimen/Roboto+Condensed">http://www.google.com/fonts/specimen/Roboto+Condensed</a>,</li>
|
||
<li><span class="name">Arial</span> - default system font.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- #### -->
|
||
|
||
<div id="tab-credits">
|
||
<h1>Credits</h1>
|
||
<h4>Icons</h4>
|
||
<p>All icons by QuanticaLabs. Icons are an integral part of the Template, please do not use it separately for other purposes.</p>
|
||
<h4>Images</h4>
|
||
<p>Premium images you can use along with this Template without asking permission (included in downloadable package):</p>
|
||
<ul class="documentation">
|
||
<li><span class="name">Gladness</span> By Pressmaster<br/><a href="https://photodune.net/item/gladness/361817">https://photodune.net/item/gladness/361817</a>,</li>
|
||
<li><span class="name">Wireless In The City</span> By Ollyi<br/><a href="https://photodune.net/item/wireless-in-the-city/2360384">https://photodune.net/item/wireless-in-the-city/2360384</a>,</li>
|
||
<li><span class="name">Pediatrician Examine Child Throat Cold Prevention</span> By Candyboximages<br/><a href="https://photodune.net/item/pediatrician-examine-child-throat-cold-prevention/2501412">https://photodune.net/item/pediatrician-examine-child-throat-cold-prevention/2501412</a>,</li>
|
||
<li><span class="name">Grilled Salmon</span> By Fudio<br/><a href="https://photodune.net/item/grilled-salmon/4410510">https://photodune.net/item/grilled-salmon/4410510</a>,</li>
|
||
<li><span class="name">Smiling Portraits</span> By Spaxiax<br/><a href="https://photodune.net/item/smiling-portraits/4933178">https://photodune.net/item/smiling-portraits/4933178</a>,</li>
|
||
<li><span class="name">Young Beautiful Girl In Poppy Field</span> By Ababaka<br/><a href="https://photodune.net/item/young-beautiful-girl-in-poppy-field/5226364">https://photodune.net/item/young-beautiful-girl-in-poppy-field/5226364</a>,</li>
|
||
<li><span class="name">Young Beautiful Hipster Woman Success Aviator Glasses</span> By Peus80<br/><a href="https://photodune.net/item/young-beautiful-hipster-woman-success-aviator-glasses/7326191">https://photodune.net/item/young-beautiful-hipster-woman-success-aviator-glasses/7326191</a>.</li>
|
||
</ul>
|
||
<p>All other images comes with this Template are licensed under Creative Commons Zero CC0 1.0 Universal (CC0 1.0). You can use it along with this Template without asking permission.</p>
|
||
</div>
|
||
|
||
<!-- #### -->
|
||
|
||
<div id="tab-changelog">
|
||
<h1>Changelog</h1>
|
||
<p><b>05 June 2019</b>, ver. 1.9</p>
|
||
<ul class="documentation">
|
||
<li>Minor code fixes.</li>
|
||
</ul>
|
||
<pre>--- html version ---
|
||
contact_form/contact_form.php
|
||
style/superfish.css
|
||
--- php version ---
|
||
footer.php
|
||
contact_form/contact_form.php
|
||
style/superfish.css</pre>
|
||
<p><b>24 August 2017</b>, ver. 1.8</p>
|
||
<ul class="documentation">
|
||
<li>Fix for slider 'jump to top' issue under Chrome.</li>
|
||
</ul>
|
||
<pre>--- html version ---
|
||
blog_small_slider.html
|
||
home.html
|
||
home_2.html
|
||
home_3.html
|
||
home_4.html
|
||
home_5.html
|
||
home_6.html
|
||
home_7.html
|
||
index.html
|
||
js/main.js
|
||
--- php version ---
|
||
blog_small_slider.php
|
||
home.php
|
||
home_2.php
|
||
home_3.php
|
||
home_4.php
|
||
home_5.php
|
||
home_6.php
|
||
home_7.php
|
||
js/main.js</pre>
|
||
<p><b>14 April 2017</b>, ver. 1.7</p>
|
||
<ul class="documentation">
|
||
<li>Fix for email send issue when using SMTP.</li>
|
||
</ul>
|
||
<pre>--- html version ---
|
||
contact_form/config.php
|
||
contact_form/contact_form.php
|
||
--- php version ---
|
||
contact_form/config.php
|
||
contact_form/contact_form.php</pre>
|
||
<p><b>31 March 2017</b>, ver. 1.6</p>
|
||
<ul class="documentation">
|
||
<li>phpMailer script update.</li>
|
||
<li>jQuery update (to version 1.12.4).</li>
|
||
<li>Minor code fixes.</li>
|
||
</ul>
|
||
<pre>--- html version ---
|
||
all html files
|
||
contact_form/contact_form.php
|
||
phpMailer directory
|
||
-- added files ---
|
||
js/jquery-1.12.4.min.js
|
||
js/jquery-migrate-1.4.1.min.js
|
||
--- removed files ---
|
||
js/jquery-1.11.1.min.js
|
||
js/jquery-migrate-1.2.1.min.js
|
||
|
||
--- php version ---
|
||
footer.php
|
||
index.php
|
||
contact_form/contact_form.php
|
||
phpMailer directory
|
||
-- added files ---
|
||
js/jquery-1.12.4.min.js
|
||
js/jquery-migrate-1.4.1.min.js
|
||
--- removed files ---
|
||
js/jquery-1.11.1.min.js
|
||
js/jquery-migrate-1.2.1.min.js</pre>
|
||
<p><b>09 July 2016</b>, ver. 1.5</p>
|
||
<ul class="documentation">
|
||
<li>Fix for Google Maps component - Google API key is now required.</li>
|
||
</ul>
|
||
<pre>--- html version ---
|
||
all html files
|
||
js/main.js
|
||
--- php version ---
|
||
footer.php
|
||
js/main.js</pre>
|
||
<p><b>08 April 2016</b>, ver. 1.4</p>
|
||
<ul class="documentation">
|
||
<li>Left carousel arrow fix.</li>
|
||
<li>Minor code fixes.</li>
|
||
</ul>
|
||
<pre>--- html version ---
|
||
js/jquery.sliderControl.js
|
||
js/main.js
|
||
style/style.css
|
||
--- php version ---
|
||
js/jquery.sliderControl.js
|
||
js/main.js
|
||
style/style.css</pre>
|
||
<p><b>25 June 2015</b>, ver. 1.3</p>
|
||
<ul class="documentation">
|
||
<li>Preloaders improvements</li>
|
||
<li>prettyPhoto update (to version 3.1.6 - fix for XSS vulnerability)</li>
|
||
<li>Fixes in contact form validation rules</li>
|
||
</ul>
|
||
<pre>--- html version ---
|
||
blog_small_slider.html
|
||
home.html
|
||
home_2.html
|
||
home_3.html
|
||
home_4.html
|
||
home_5.html
|
||
home_6.html
|
||
home_7.html
|
||
contact_form/contact_form.php
|
||
contact_form/template.php
|
||
js/jquery.prettyPhoto.js
|
||
js/jquery.sliderControl.js
|
||
js/main.js
|
||
style/style.css
|
||
--- php version ---
|
||
blog_small_slider.php
|
||
home_2.php
|
||
home_3.php
|
||
home_4.php
|
||
home_5.php
|
||
home_6.php
|
||
home_7.php
|
||
contact_form/contact_form.php
|
||
contact_form/template.php
|
||
js/jquery.prettyPhoto.js
|
||
js/jquery.sliderControl.js
|
||
js/main.js
|
||
style/style.css</pre>
|
||
<p><b>16 December 2014</b>, ver. 1.2</p>
|
||
<ul class="documentation">
|
||
<li>Accordion height fix</li>
|
||
<li>Small slider duplicated control list bug fix</li>
|
||
</ul>
|
||
<pre>--- html version ---
|
||
js/main.js
|
||
--- php version ---
|
||
js/main.js</pre>
|
||
<p><b>11 December 2014</b>, ver. 1.1</p>
|
||
<ul class="documentation">
|
||
<li>Small js improvements for multiple mega menu display</li>
|
||
</ul>
|
||
<pre>--- html version ---
|
||
js/main.js
|
||
--- php version ---
|
||
footer.php
|
||
js/main.js</pre>
|
||
<p><b>02 October 2014</b>, ver. 1.0</p>
|
||
<ul class="documentation">
|
||
<li>First release</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- #### -->
|
||
|
||
<div id="tab-support">
|
||
<h1>Support</h1>
|
||
<p>
|
||
Support for all our items is conducted through our <a href="http://support.quanticalabs.com/forum">Support Forum</a>.<br/>
|
||
Please register an account and search the forum or create a new topic, we'll answer as soon as possible.<br/><br/>
|
||
We're in GMT +1 and we aim to answer all questions within <b>24 hours</b> (Monday – Friday). In some cases the waiting time can be extended to <b>48 hours</b>.<br/>
|
||
Support requests sent during weekends or public holidays will be processed on next Monday or the next business day.
|
||
</p>
|
||
<br />
|
||
<h4>Need pure HTML files or PHP version?</h4>
|
||
<p>
|
||
Theme could work without PHP. Pure html files are located in <span class="name">/www/html</span> directory.<br />
|
||
If you would like to use PHP version just use files located under <span class="name">/www/php</span> directory.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- #### -->
|
||
|
||
<div id="tab-faq">
|
||
|
||
<h1>FAQ - Frequently Asked Questions</h1>
|
||
<br>
|
||
<h4>1. How to choose between HTML or PHP version?</h4>
|
||
<p>
|
||
Template contains two versions PHP and HTML. If your server supports PHP please choose PHP version as it's more flexible. For example if you'll make change in header you won't need to duplicate it for each page.<br>
|
||
If you would like to use PHP version use files located under <span class="name">/www/php</span> directory.<br>
|
||
If you would like to use HTML version use files located under <span class="name">/www/html</span> directory.
|
||
</p>
|
||
<br/>
|
||
<br/>
|
||
<h4>2. How to set boxed layout?</h4>
|
||
<br/>
|
||
<h5>PHP version</h5>
|
||
<p>
|
||
Please replace line 56 in <span class="name">header.php</span>:
|
||
</p>
|
||
<pre class="code"><div class="site_container<?php echo ($_COOKIE['pr_layout']=="boxed" ? ' boxed' : ''); ?>"></pre>
|
||
<p>with:</p>
|
||
<pre class="code"><div class="site_container boxed"></pre>
|
||
<br/>
|
||
<h5>HTML version</h5>
|
||
<p>
|
||
For each page please replace:
|
||
</p>
|
||
<pre class="code"><div class="site_container"></pre>
|
||
<p>with:</p>
|
||
<pre class="code"><div class="site_container boxed"></pre>
|
||
<br/>
|
||
<br/>
|
||
<h4>3. How to set a pattern or background image for boxed layout?</h4>
|
||
<br/>
|
||
<h5>PHP version</h5>
|
||
<p>
|
||
Please replace line 55 in <span class="name">header.php</span>:
|
||
</p>
|
||
<pre class="code"><body class="<?php echo (isset($_COOKIE['pr_layout']) && $_COOKIE['pr_layout']=="boxed" ? (isset($_COOKIE['pr_layout_style']) && $_COOKIE['pr_layout_style']!="" ? $_COOKIE['pr_layout_style'] . ' ' . $_COOKIE['pr_image_overlay'] : 'image_1 overlay') : ''); ?>"></pre>
|
||
<p>with for example (image 1 background):</p>
|
||
<pre class="code"><body class="image_1"></pre>
|
||
<p>example with pattern:</p>
|
||
<pre class="code"><body class="pattern_1"></pre>
|
||
<p>example with background and overlay on it:</p>
|
||
<pre class="code"><body class="image_1 overlay"></pre>
|
||
<p>You can find all available options commented in <span class="name">header.php</span> file (lines 35-54).</p>
|
||
<br>
|
||
<h5>HTML version</h5>
|
||
<p>
|
||
For each page please replace:
|
||
</p>
|
||
<pre class="code"><body></pre>
|
||
<p>with for example (image 1 background):</p>
|
||
<pre class="code"><body class="image_1"></pre>
|
||
<p>example with pattern:</p>
|
||
<pre class="code"><body class="pattern_1"></pre>
|
||
<p>example with background and overlay on it:</p>
|
||
<pre class="code"><body class="image_1 overlay"></pre>
|
||
<p>You can find all available options commented above the <body> tag on each page.</p>
|
||
<br/>
|
||
<br/>
|
||
<h4>4. How to change the skin to dark or hight contrast?</h4>
|
||
<br/>
|
||
<h5>PHP version - dark skin</h5>
|
||
<p>
|
||
Please uncomment line 31 in <span class="name">header.php</span> so it will look like below one:
|
||
</p>
|
||
<pre class="code"><link rel="stylesheet" type="text/css" href="style/dark_skin.css"></pre>
|
||
<br/>
|
||
<h5>HTML version - dark skin</h5>
|
||
<p>
|
||
For each page please uncomment below line:
|
||
</p>
|
||
<pre class="code"><link rel="stylesheet" type="text/css" href="style/dark_skin.css"></pre>
|
||
<br/>
|
||
<h5>PHP version - high contrast skin</h5>
|
||
<p>
|
||
Please uncomment lines 31 and 32 in <span class="name">header.php</span> so they will look like below ones:
|
||
</p>
|
||
<pre class="code"><link rel="stylesheet" type="text/css" href="style/dark_skin.css">
|
||
<link rel="stylesheet" type="text/css" href="style/high_contrast_skin.css"></pre>
|
||
<br/>
|
||
<h5>HTML version - high contrast skin</h5>
|
||
<p>
|
||
For each page please uncomment below lines:
|
||
</p>
|
||
<pre class="code"><link rel="stylesheet" type="text/css" href="style/dark_skin.css">
|
||
<link rel="stylesheet" type="text/css" href="style/high_contrast_skin.css"></pre>
|
||
<br/>
|
||
<br/>
|
||
<h4>5. How to set the menu to be sticky or change menu style?</h4>
|
||
<br/>
|
||
<h5>PHP version</h5>
|
||
<p>
|
||
Please replace line 302 in <span class="name">header.php</span>:
|
||
</p>
|
||
<pre class="code"><div class="menu_container clearfix<?php echo (isset($_COOKIE['pr_menu_container']) ? ' ' . $_COOKIE['pr_menu_container'] : ''); echo (isset($_COOKIE['pr_menu_type']) ? ' ' . $_COOKIE['pr_menu_type'] : '');?>"></pre>
|
||
<p>with:</p>
|
||
<pre class="code"><div class="menu_container sticky clearfix"></pre>
|
||
<p>You can find all available options for menu styles commented in <span class="name">header.php</span> file (lines 297-301).</p>
|
||
<p>To set for example style 3 and sticky use below code:</p>
|
||
<pre class="code"><div class="menu_container style_3 sticky clearfix"></pre>
|
||
<br/>
|
||
<h5>HTML version</h5>
|
||
<p>
|
||
For each page please replace:
|
||
</p>
|
||
<pre class="code"><div class="menu_container clearfix"></pre>
|
||
<p>with:</p>
|
||
<pre class="code"><div class="menu_container sticky clearfix"></pre>
|
||
<p>You can find all available options for menu styles commented above <span class="name">menu_container</span> div.</p>
|
||
<p>To set for example style 3 and sticky use below code:</p>
|
||
<pre class="code"><div class="menu_container style_3 sticky clearfix"></pre>
|
||
<br/>
|
||
<br/>
|
||
<h4>6. How to change header style?</h4>
|
||
<br/>
|
||
<h5>PHP version</h5>
|
||
<p>
|
||
The header is split between two containers: <span class="name">header_top_bar_container</span> and <span class="name">header_container</span>. You can change styles for both in the same way in <span class="name">header.php</span> file.
|
||
</p>
|
||
<p>
|
||
To change style for <span class="name">header_top_bar_container</span> please replace line 65 in <span class="name">header.php</span> file:
|
||
</p>
|
||
<pre class="code"><div class="header_top_bar_container clearfix<?php echo (isset($_COOKIE['pr_header_top_bar_container']) ? ' ' . $_COOKIE['pr_header_top_bar_container'] : (isset($_COOKIE['pr_color_skin']) && $_COOKIE['pr_color_skin']=='dark' ? ' style_4' : ($_COOKIE['pr_color_skin']=='high_contrast' ? ' style_5 border' : ''))); ?>"></pre>
|
||
<p>with for example:</p>
|
||
<pre class="code"><div class="header_top_bar_container style_2 border clearfix"></pre>
|
||
<p>You can find all available options for <span class="name">header_top_bar_container</span> styles commented in <span class="name">header.php</span> file (lines 57-64).</p>
|
||
<p>
|
||
To change style for <span class="name">header_container</span> please replace line 288 in <span class="name">header.php</span> file:
|
||
</p>
|
||
<pre class="code"><div class="header_container<?php echo (isset($_COOKIE['pr_header_container']) ? ' ' . $_COOKIE['pr_header_container'] : (isset($_COOKIE['pr_color_skin']) && $_COOKIE['pr_color_skin']=='dark' ? ' style_2' : ($_COOKIE['pr_color_skin']=='high_contrast' ? ' style_3' : ''))); ?>"></pre>
|
||
<p>with for example:</p>
|
||
<pre class="code"><div class="header_container style_2 small"></pre>
|
||
<p>You can find all available options for <span class="name">header_container</span> styles commented in <span class="name">header.php</span> file (lines 283-287).</p>
|
||
<br/>
|
||
<h5>HTML version</h5>
|
||
<p>
|
||
The header is split between two containers: <span class="name">header_top_bar_container</span> and <span class="name">header_container</span>. You can change styles for both in the same way in <span class="name">header.php</span> file.
|
||
</p>
|
||
<p>
|
||
To change style for <span class="name">header_top_bar_container</span> please for each page replace:
|
||
</p>
|
||
<pre class="code"><div class="header_top_bar_container clearfix"></pre>
|
||
<p>with for example:</p>
|
||
<pre class="code"><div class="header_top_bar_container style_2 border clearfix"></pre>
|
||
<p>You can find all available options for <span class="name">header_top_bar_container</span> styles commented above <span class="name">header_top_bar_container</span> div.</p>
|
||
<p>
|
||
To change style for <span class="name">header_container</span> please for each page replace:
|
||
</p>
|
||
<pre class="code"><div class="header_container"></pre>
|
||
<p>with for example:</p>
|
||
<pre class="code"><div class="header_container style_2 small"></pre>
|
||
<p>You can find all available options for <span class="name">header_container</span> styles commented above <span class="name">header_container</span> div.</p>
|
||
<br/>
|
||
<br/>
|
||
<h4>7. How to use different social icons style?</h4>
|
||
<p>
|
||
Social Icons are available in 3 different styles: light, dark and background colored.<br>
|
||
To change the default style of social icons you just need to set appropriate class for social icons ul list. Available options:
|
||
</p>
|
||
<h5>Light version:</h5>
|
||
<pre class="code"><ul class="social_icons clearfix"></pre>
|
||
<br>
|
||
<h5>Light version with dark and high contrast skins:</h5>
|
||
<pre class="code"><ul class="social_icons light clearfix"></pre>
|
||
<br>
|
||
<h5>Dark version:</h5>
|
||
<pre class="code"><ul class="social_icons dark clearfix"></pre>
|
||
<br>
|
||
<h5>Dark version with dark and high contrast skins::</h5>
|
||
<pre class="code"><ul class="social_icons clearfix"></pre>
|
||
<br>
|
||
<h5>Background colored:</h5>
|
||
<pre class="code"><ul class="social_icons colors clearfix"></pre>
|
||
<br/>
|
||
<br/>
|
||
<h4>8. I'm getting "Please define Google Maps API Key" alert. What should I do?</h4>
|
||
<p>You need to generate the Google Maps API Key here - <a href="https://developers.google.com/maps/documentation/javascript/get-api-key" target="_blank">https://developers.google.com/maps/documentation/javascript/get-api-key</a>. Then you'll need to set it in the source code. Please follow the instructions below:
|
||
<h5>PHP version</h5>
|
||
<p>Please open <span class="name">footer.php</span> file and set the API Key by replacing <span class="name">YOUR_API_KEY</span> phrase in line 252:</p>
|
||
<pre class="code"><script type="text/javascript" src="//maps.google.com/maps/api/js?key=<strong>YOUR_API_KEY</strong>"></script></pre>
|
||
<br>
|
||
<h5>HTML version</h5>
|
||
<p>Please open <span class="name">contact.html</span> and <span class="name">contact_2.html</span> files and set the API Key by replacing <span class="name">YOUR_API_KEY</span> phrase in below line before </body> closing tag:</p>
|
||
<pre class="code"><script type="text/javascript" src="//maps.google.com/maps/api/js?key=<strong>YOUR_API_KEY</strong>"></script></pre>
|
||
<br/>
|
||
<br/>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<a href="https://themeforest.net/user/QuanticaLabs?ref=quanticalabs">© 2019 QuanticaLabs</a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div>
|
||
|
||
<input type="hidden" id="open-tabs" value="1" />
|
||
|
||
</div>
|
||
|
||
</body>
|
||
|
||
</html> |