Pretty Press Docs

Pretty Press HTML template

Created: 19.09.2023
By: MWTemplates
Email: support@modernwebtemplates.com

Thank you for purchasing our Template. If you have any questions that are beyond the scope of this help file, please feel free to email us via my user page contact form. Thanks so much!

Download Package Content

You can find the following folders in the download package

"documentation" folder contains this documentation.
"HTML" - folder contains actual template with all of HTML, JS and PHP files. It's content will be displayed below.
"PSD" folder contains all of PSD files.

HTML folder content

"css" folder contains CSS files. You can find out more about CSS files in HTML Structure section of this documentation.
"fonts" folder has all of the custom fonts that are used in this template, such as icon fonts, font awesome, social icons etc.
"images" folder contains all of the images that are used on the template pages. It has several subfolders:
- "events" folder contains images for events page.
- "gallery" folder contains images for isotope carousel galleries and other subpages.
- "parallax" folder contains background images for parallax sections.
- "partners" folder contains images for partners carousel.
- "shop" folder contains images for shop pages.
- "team" folder contains photos of team members.
"img" folder contains all of the images that are used in CSS files for template styling (such as patterns, preloader etc).
"js" folder contains javascript files that are used in this template. It has "vendor" subfolder that containss all of the thirdpart plugins and libs. Go to Sources and Credits section to get the list of the thirdpart libs and plugins.
"mailchimp" folder contains PHP scripts for MailChimp subscribe widget.
"twitter" folder contains JS and PHP scripts for Twitter widget.

HTML Structure

This HTML Template is based on Twitter Bootstrap v3.3. It is compatible with a IE9 browser and all other modern browsers.

It has several main section classes that may or may not be present on the page (depending on certain page). You can use it depending on your needs. They are:

"ls" - light_section - section with white background.
"ls ms" - light_section muted_section - section with light grey background.
"ds ms" dark_section muted_section - section with dark grey background.
"ds" - dark_section - section with dark color background.
"cs" - color_section - section with the main template color background.

Also there are some of predefined unique sections (class and id attributes) that you can use with classes above:

"page_topline" class - contains some contact information, social icons etc.
"page_toplogo" class - contains logo in various header layouts.
"page_header" class - contains site Main Menu.
"intro_section" class - contains homepage main slider.
"page_map" class - contains google map.
"page_breadcrumbs" class section - contains site navigation (breadcrumbs).
"page_content" class section - used for main content section.
"page_footer" class section has footer widgets.
"page_copyright" class section contains copyright information.
"preloader" div element that is located at the bottom of HTML page is a page preloader. Remove it if you do not need a preloader on your pages.

CSS Files and Structure

There are four main CSS files in this HTML Template. The first one is a standard Bootstrap v3 CSS file. The second CSS file is "animation.css" library, which contains various animation classes that are used in this template.

The third file is "main.css" and it contains all of the specific stylings for the pages. The file is separated into the following sections:

bootstrap overrides - Here we override some of the predefined bootstrap styles.
vertical margins and paddings - Here we set up vertical margins and paddings for the main sections of our HTML Temlpate.
general styles - In this section we set up a base template styles, such as links color, general section styles.
icons - styles for icons, inside buttons, headings and paragraphs
buttons - styles for template buttons.
common sections styles - common styles for general template sections:
- light section - .ls
- grey section - .ls.ms
- dark section - .ds
- darkgrey section - .ds.ms
- color section - .cs
Subpages - styles for template subpages.
Boxed layout - styles for boxed version of the template.
Header - styles for template header.
Footer - styles for template footer.
Intro Slider - styles for template header.
main menu (min 768px) styles - styles for desktop version of the main menu.
main menu mobile styles - styles for mobile version of the main menu.
widgets - In this sections we styled all the major widgets.
shortcodes - In this section we styled all of template's shortcodes.
utilities - some helper classes for margins and paddings etc.
plugins - Styles for plugins that we used in our template:
- Owl Carousel
- FlexSlider
- prettyPhoto
- Easy pieChart
- toTop
- Isotope Portfolio

Fourth file is "fonts.css" that has styles for all of our icon fonts that we used in our template.

Changing template layout

<0p>To change template layout from wide to boxed you need to do two things:

add "boxed" class to div with ID "canvas" HTML element
add "container" class to div with ID "box_wrapper"

Example:

<div id="canvas" class="boxed"> 
	<div id="box_wrapper" class="container"> 
		... 
	</div>
</div>

To add pattern in boxed layout just add one of the following predefined CSS classes to div with ID "canvas" HTML element:

pattern1
pattern2
pattern3
pattern*

Example:

<div id="canvas" class="boxed pattern2"> 
	... 
</div>

To add top and bottom margins for boxed version just add class "top-bottom-margins" for div with id "box_wrapper"

Example:

<div id="canvas" class="boxed"> 
	<div id="box_wrapper" class="container top-bottom-margins"> 
		... 
	</div>
</div>

Changing the main color

If you want to change the main color for this template, just replace all instances of main color hex code with hex color value that you want inside the "main.css" file.

Also you can change "main.css" to "main2.css" in your HTML code inside "head" which are the same with the exception of predefined colors within it.

Changing Light and Dark versions

You can change a class for any section inside "#box_wraper" div to change your template version from light to light grey or dark.

Available section classes are:

ls - light background section
ls ms - light section, muted section (light grey background)
ds - dark background section
ds ms - dark muted section (dark grey background section)
cs - background color section

Examples:

<section class="ls" id="content"> 
	... 
</section>

You can change to:

<section class="ds ms" id="content"> 
	... 
</section>

Changing page preloader

To change page preloader just replace preloader.gif file which is in img directory to any other GIF file.

JavaScript Files

Following files are located in "js" subfolder

Plugins:
modernizr-2.6.2.min.js detecting browsers features.
jquery-2.2.4.min.js is a popular JavaScript library.
bootstrap.min.js is a standard Twitter Bootstrap library.
respond.min.js is required for Twitter Bootstrap v3 work in older browsers.
html5shiv.min.js adds HTML5 compatibility for older browsers.
superfish.js is a script that enables a dropdown menu.
hoverIntent.js is a component for superfish menu.
jquery.flexslider-min.js is a jQuery plugin for main and bottom sliders.
jquery.isotope.min.js is a jQuery plugin for filtrable gallery.
jquery.prettyPhoto.js is a jQuery plugin for displaying lightbox content.
jquery.ui.totop.js is a jQuery plugin for toTop button.
jquery.easing.1.3.js is a jQuery plugin for different types of animation
jquery.scrollTo-min.js and jquery.localscroll-min.js needed for smooth single page navigation.
jquery.easypiechart.min.js is a jQuery plugin that uses the canvas element to render simple pie charts for single values.
jquery.jflickrfeed.min.js plugin makes it easy to pull Flickr feeds and display them on your site.
jquery.tweet.min.js plugin enables a twitter widget on your site.
owl.carousel.min.js is a jQuery carousel plugin for “partners” section
jquery.parallax-1.1.3.js is used for parallax backgrounds.
jquery.appear.js is used to determine whether the HTML element is inside the browser's viewport
jquery.countTo.js is used for teasers with counter
jquery.countdown.js is used for "coming soon" counter
Template Scripts:
plugins.js contains some of our custom scripts.
main.js inits all the basic behavior for this template.
switcher.js has a code for style switcher. Just remove this file from HTML code if you do not need style switcher in your production

All of JS files (except "main.js" file and "switcher.js" file) are compressed in a single "compressed.js" file for best perfomance.

Setup Widgets and Shortcodes.

Widgets and Shortcodes that need to be setup are:

Google Map
Flickr
Twitter
Subscribe
Contact form
Search

To setup Google Map do the following:

First of all, you need to get a Google map API key by following this link:

Go to https://developers.google.com/maps/documentation/javascript/get-api-key#key,click button "GET A KEY" and follow instructions from Google.

Then scroll to the bottom of your contact page and find this code:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXX"></script>

and replase existing key with your API key.

To provide a Google map address, title, description and marker image do the following:

Scroll to section with 'id="map"' or class="page_map" attribute and add or replace value of data-address attribute with your address.
Then find inside map section div with class "map_marker_description" and edit following tags:
- Replace "Map title" text in H3 tag to provide map title.
- Replace "Map description text" text in P tag to provide map description.
- Replace "src" attribute of IMG tag with class "map_marker_icon" to change a map marker or remove IMG tag if you do not need a custom map marker.

<section class="page_map" data-address="sydney, australia, Liverpool street">
	<!-- marker description and marker icon goes here -->
	<div class="map_marker_description">
		<h3>Map Title</h3>
		<p>Map description text</p>
		<img class="map_marker_icon" src="images/map_marker_icon.png" alt="">
	</div>
</section>

To setup a Flickr Widget do the following:

Go to http://idgettr.com/ and search for your Flickr ID
Edit your "main.js" file. Just replace ID with your Flickr ID

To setup a Twitter Widget do the follofing:

Go to https://dev.twitter.com/apps and register a new application to receive Consumer Key, Consumer Secret Word, User Token and User Secret Word
Edit lines from 27 to 36 of your "twitter/index.php" file. Place your secret keys and words onto the corresponding placeholders.
Edit "number of tweets" and "username" in your "main.js" file.
Delete cache xxx.json file in "twitter" folder if it exists.

To setup a MailChimp Subscribe form do the following:

Edit the "mailchimp/store-address.php" file:

Line 19: replace "your_apikey" with an API Key retrieved from here:

http://admin.mailchimp.com/account/api/

Line 23: replace "my_list_unique_id" with the List Unique Id obtained by going to: http://admin.mailchimp.com/lists/.

Click the "settings" link for the list - the Unique Id is at the bottom of that page.

To setup a Contact Form do the following:

Edit lines from 7 to 22 of your "contact-form.php" file. Place your email and message text.

To setup a Serch widged do the following:

Edit lines from 1 to 7 of your "search.php" file. Place your message text at appropriate variables.

Setup Animation for any HTML elements

To set up animation for the single element, just add class "to_animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

Available values for "data-animation" attribute:

fadeIn
fadeInLeft
fadeInUp
fadeInRight
fadeInDown
fadeInUpBig
fadeInDownBig
fadeInLeftBig
fadeInRightBig
slideRight
slideUp
slideLeft
slideInDown
slideInLeft
slideInRight

expandUp
slideExpandUp
expandOpen
bigEntrance
hatch
tossing
pulse
floating
bounce
pullUp
pullDown
stretchLeft
stretchRight
moveFromLeft

This template has the following PSD files:

1.1_homepage.psd
2.1_about.psd
2.2_faq.psd
2.3_pricing.psd
2.4_terms.psd
2.5_calendar.psd
2.6_team.psd
2.7_team_member.psd
2.8_typography.psd
3.1_appointment.psd
3.2_calculator.psd
5.1_gallery_regular.psd
5.2_gallery_fullwidth.psd
5.3_gallery_extended.psd
6_contacts.psd

Following images are used in this template:

Credits and Sources

As we mentioned earlier, we used Twitter Bootstrap v3 as CSS framework and HTML5 Boilerplate for this template.

Fonts:

http://www.google.com/fonts/ - Google WebFonts
http://www.socicon.com/ - Social Icons Font
http://fontawesome.io/ - Font Awesome
http://icomoon.io/ - teaser rt-icons font

Template Scripts

modernizr-2.6.2.min.js detecting browser's features.
jquery-2.2.4.min.js is a popular JavaScript library.
bootstrap.min.js is a stantard Twitter Bootstrap library.
respond.min.js is required for working Twitter Bootstrap v3 in older browsers.
html5shiv.min.js adds HTML5 compatibility for older browsers.
superfish.js is a script that enables a dropdown menu.
hoverIntent.js is a component for superfish menu.
jquery.flexslider-min.js is a jQuery plugin for the main and bottom sliders.
jquery.isotope.min.js is a jQuery plugin for filtrable gallery.
jquery.prettyPhoto.js is a jQuery plugin for displaying lightbox content.
jquery.ui.totop.js is a jQuery plugin for toTop button.
jquery.easing.1.3.js is a jQuery plugin for different types of animation
jquery.scrollTo-min.js and jquery.localscroll-min.js needed for smooth single page navigation.
jquery.easypiechart.min.js is a jQuery plugin that uses the canvas element to render simple pie charts for single values.
jquery.jflickrfeed.min.js plugin makes it easy to pull Flickr feeds and display them on your site.
jquery.tweet.min.js plugin enables twitter widget on your site.
owl.carousel.min.js is a jQuery carousel plugin for “partners” section
jquery.bxslider.min.js is a jQuery slider plugin
jquery.nicescroll.min.js is a plugin used to replace browser's standard scroll bar
jquery.fractionslider.min.js is a great slider plugin for the main slider
jquery.parallax-1.1.3.js is used for parallax backgrounds.
jquery.appear.js is used to determine whether the HTML element is inside the browser's viewport
jquery.countTo.js is used for teasers with counter
jquery.cookie.js is used for store cookies information in the template

Pretty Press HTML template

Download Package Content

HTML folder content

HTML Structure

CSS Files and Structure

Changing template layout

Changing the main color

Changing Light and Dark versions

Changing page preloader

JavaScript Files

Setup Widgets and Shortcodes.

Widgets and Shortcodes that need to be setup are:

To setup Google Map do the following:

To setup a Flickr Widget do the following:

To setup a Twitter Widget do the follofing:

To setup a MailChimp Subscribe form do the following:

To setup a Contact Form do the following:

To setup a Serch widged do the following:

Setup Animation for any HTML elements

Available values for "data-animation" attribute:

This template has the following PSD files:

Following images are used in this template:

Credits and Sources

Fonts:

Template Scripts

Images