Pressroom - Responsive News and Magazine Template

Pressroom 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.

PSD source files are available to all of our buyers. Please contact us 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.

Template Features

  • Responsive Design
  • jQuery Powered
  • Wide And Boxed Layouts
  • Boxed Pattern Or Background Image Support With / Without Overlay Layer
  • 15 Predefined Header Styles With 60+ Variants Available
  • Light, Dark And High Contrast Color Skins
  • Sticky Menu
  • 7 Home Page Layouts Including
    • Wide Slider For Featured Content
    • Small Slider For Featured Content
    • Block-Based Featured Content
  • 10 Post Formats Layouts
    • Featured Image
    • Small Featured Image
    • Gallery
    • YouTube Video
    • Vimeo Video
    • SoundCloud Audio
    • Review Style 1
    • Review Style 2
    • Quote Style 1
    • Quote Style 2
  • 7 Blog Layouts
    • Blog With Small Slider
    • Blog 1 Column With Right Sidebar
    • Blog 1 Column With Left Sidebar
    • Blog 2 Columns With Right Sidebar
    • Blog 2 Columns With Left Sidebar
    • Blog 3 Columns
    • Search Page Template
  • Page Templates
    • About Style 1
    • About Style 2
    • Authors List
    • Single Author Page
    • Contact Style 1
    • Contact Style 2
    • Category Page
    • Default Page
    • 404 Not Found
    • Search Page Template
  • Valid HTML5 Code
  • Crossbrowser Compatible
  • Clean Design
  • 36 Social Icons To Choose From
  • 20 Features Icons To Choose From
  • Documentation Included

CSS Styles

The project uses the following cascade of template styles (in order):

  • animations.css - styles for animated elements,
  • dark_skin.css - styles for dark skin (by default commented in the <head> section, so you need to uncomment to enable dark skin),
  • high_contrast_skin.css - 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),
  • jquery.qtip.css - default styles for tooltips (overwritten in style.css),
  • superfish.css - default styles for superfish menu,
  • menu_styles.css - styles for different menu layouts,
  • odometer-theme-default.css - styles for Odometer smoothly transitioning numbers plugin,
  • prettyPhoto.css - default styles for prettyPhoto lightbox,
  • style.css - base styles for the entire project,
  • responsive.css - styles for responsive design (remove it from header to disable responsive),
  • reset.css - styles which resets default browsers styles.

All CSS files are located in /style directory.

Javascript Files

Plugins and library:


Other files:

  • jquery.sliderControl.js - script which supports slider control for galleries and home slider,
  • jquery.hint.js - script which supports hints/placeholders for form fields,
  • main.js - script contains all executable instructions of jquery plugins, events handlers etc.

All JS files are located in /js directory.

Plugins

Contact form

This project includes a contact form ready for use.
All you need is to configure some constants located in file contact_form/config.php:

  • _from_name - name of your e-mail eg. "My Company",
  • _from_email - sender e-mail eg. "mycompany@gmail.com",
  • _to_name - name of recipient eg. "My Company",
  • _to_email - e-mail of recipent eg. "mycompany@gmail.com",
  • _smtp_host - your SMTP host eg. "gmail.com",
  • _smtp_username - login to your e-mail account eg. "mycompany",
  • _smtp_password - password to your e-mail account,
  • _smtp_port - port number for SMTP connection (optional),
  • _smtp_secure - authorization method (optional) - ssl or tls.

PSD Files

PSD source files are available to all of our buyers. Please contact us 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.

Fonts used

Credits

Icons

All icons by QuanticaLabs. Icons are an integral part of the Template, please do not use it separately for other purposes.

Images

Premium images you can use along with this Template without asking permission (included in downloadable package):

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.

Changelog

05 June 2019, ver. 1.9

  • Minor code fixes.
--- html version ---
contact_form/contact_form.php
style/superfish.css
--- php version ---
footer.php
contact_form/contact_form.php
style/superfish.css

24 August 2017, ver. 1.8

  • Fix for slider 'jump to top' issue under Chrome.
--- 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

14 April 2017, ver. 1.7

  • Fix for email send issue when using SMTP.
--- html version ---
contact_form/config.php
contact_form/contact_form.php
--- php version ---
contact_form/config.php
contact_form/contact_form.php

31 March 2017, ver. 1.6

  • phpMailer script update.
  • jQuery update (to version 1.12.4).
  • Minor code fixes.
--- 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

09 July 2016, ver. 1.5

  • Fix for Google Maps component - Google API key is now required.
--- html version ---
all html files
js/main.js
--- php version ---
footer.php
js/main.js

08 April 2016, ver. 1.4

  • Left carousel arrow fix.
  • Minor code fixes.
--- html version ---
js/jquery.sliderControl.js
js/main.js
style/style.css
--- php version ---
js/jquery.sliderControl.js
js/main.js
style/style.css

25 June 2015, ver. 1.3

  • Preloaders improvements
  • prettyPhoto update (to version 3.1.6 - fix for XSS vulnerability)
  • Fixes in contact form validation rules
--- 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

16 December 2014, ver. 1.2

  • Accordion height fix
  • Small slider duplicated control list bug fix
--- html version ---
js/main.js
--- php version ---
js/main.js

11 December 2014, ver. 1.1

  • Small js improvements for multiple mega menu display
--- html version ---
js/main.js
--- php version ---
footer.php
js/main.js

02 October 2014, ver. 1.0

  • First release

Support

Support for all our items is conducted through our Support Forum.
Please register an account and search the forum or create a new topic, we'll answer as soon as possible.

We're in GMT +1 and we aim to answer all questions within 24 hours (Monday – Friday). In some cases the waiting time can be extended to 48 hours.
Support requests sent during weekends or public holidays will be processed on next Monday or the next business day.


Need pure HTML files or PHP version?

Theme could work without PHP. Pure html files are located in /www/html directory.
If you would like to use PHP version just use files located under /www/php directory.

FAQ - Frequently Asked Questions


1. How to choose between HTML or PHP version?

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.
If you would like to use PHP version use files located under /www/php directory.
If you would like to use HTML version use files located under /www/html directory.



2. How to set boxed layout?


PHP version

Please replace line 56 in header.php: 

<div class="site_container<?php echo ($_COOKIE['pr_layout']=="boxed" ? ' boxed' : ''); ?>">

with:

<div class="site_container boxed">

HTML version

For each page please replace: 

<div class="site_container">

with:

<div class="site_container boxed">


3. How to set a pattern or background image for boxed layout?


PHP version

Please replace line 55 in header.php: 

<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') : ''); ?>">

with for example (image 1 background):

<body class="image_1">

example with pattern:

<body class="pattern_1">

example with background and overlay on it:

<body class="image_1 overlay">

You can find all available options commented in header.php file (lines 35-54).


HTML version

For each page please replace: 

<body>

with for example (image 1 background):

<body class="image_1">

example with pattern:

<body class="pattern_1">

example with background and overlay on it:

<body class="image_1 overlay">

You can find all available options commented above the <body> tag on each page.



4. How to change the skin to dark or hight contrast?


PHP version - dark skin

Please uncomment line 31 in header.php so it will look like below one: 

<link rel="stylesheet" type="text/css" href="style/dark_skin.css">

HTML version - dark skin

For each page please uncomment below line: 

<link rel="stylesheet" type="text/css" href="style/dark_skin.css">

PHP version - high contrast skin

Please uncomment lines 31 and 32 in header.php so they will look like below ones: 

<link rel="stylesheet" type="text/css" href="style/dark_skin.css">
<link rel="stylesheet" type="text/css" href="style/high_contrast_skin.css">

HTML version - high contrast skin

For each page please uncomment below lines: 

<link rel="stylesheet" type="text/css" href="style/dark_skin.css">
<link rel="stylesheet" type="text/css" href="style/high_contrast_skin.css">


5. How to set the menu to be sticky or change menu style?


PHP version

Please replace line 302 in header.php: 

<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'] : '');?>">

with:

<div class="menu_container sticky clearfix">

You can find all available options for menu styles commented in header.php file (lines 297-301).

To set for example style 3 and sticky use below code:

<div class="menu_container style_3 sticky clearfix">

HTML version

For each page please replace: 

<div class="menu_container clearfix">

with:

<div class="menu_container sticky clearfix">

You can find all available options for menu styles commented above menu_container div.

To set for example style 3 and sticky use below code:

<div class="menu_container style_3 sticky clearfix">


6. How to change header style?


PHP version

The header is split between two containers: header_top_bar_container and header_container. You can change styles for both in the same way in header.php file.

To change style for header_top_bar_container please replace line 65 in header.php file: 

<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' : ''))); ?>">

with for example:

<div class="header_top_bar_container style_2 border clearfix">

You can find all available options for header_top_bar_container styles commented in header.php file (lines 57-64).

To change style for header_container please replace line 288 in header.php file: 

<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' : ''))); ?>">

with for example:

<div class="header_container style_2 small">

You can find all available options for header_container styles commented in header.php file (lines 283-287).


HTML version

The header is split between two containers: header_top_bar_container and header_container. You can change styles for both in the same way in header.php file.

To change style for header_top_bar_container please for each page replace: 

<div class="header_top_bar_container clearfix">

with for example:

<div class="header_top_bar_container style_2 border clearfix">

You can find all available options for header_top_bar_container styles commented above header_top_bar_container div.

To change style for header_container please for each page replace: 

<div class="header_container">

with for example:

<div class="header_container style_2 small">

You can find all available options for header_container styles commented above header_container div.



7. How to use different social icons style?

Social Icons are available in 3 different styles: light, dark and background colored.
To change the default style of social icons you just need to set appropriate class for social icons ul list. Available options:

Light version:
<ul class="social_icons clearfix">

Light version with dark and high contrast skins:
<ul class="social_icons light clearfix">

Dark version:
<ul class="social_icons dark clearfix">

Dark version with dark and high contrast skins::
<ul class="social_icons clearfix">

Background colored:
<ul class="social_icons colors clearfix">


8. I'm getting "Please define Google Maps API Key" alert. What should I do?

You need to generate the Google Maps API Key here - https://developers.google.com/maps/documentation/javascript/get-api-key. Then you'll need to set it in the source code. Please follow the instructions below:

PHP version

Please open footer.php file and set the API Key by replacing YOUR_API_KEY phrase in line 252:

<script type="text/javascript" src="//maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>

HTML version

Please open contact.html and contact_2.html files and set the API Key by replacing YOUR_API_KEY phrase in below line before </body> closing tag:

<script type="text/javascript" src="//maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>


© 2019 QuanticaLabs