Good News

Good News — News & Magazine Template

  • Version: 1.0.0
  • Last Updated: 1/14/2015
  • Author: RollThemes
Thank you for ordering our Good News Template. If you cannot find the answers for your queries in this file, we are willing to answer your questions through your support forum at here or directly to rollthemes@gmail.com. Thanks so much!

Template features:

  • HTML5 & CSS3 Validated
  • Fully Responsive Design
  • Retina Ready
  • Unlimited Colors
  • Working Contact form with jQuery validator
  • Twitter Feed Widget
  • Newsletter Mailchimp Integration
  • FlexSlider 2 slider ready
  • Detailed documentation
  • Pixel perfect
  • & much more...

HTML Structure

Good News is built based on Bootstrap grid. Good News has a responsive layout which you can easily adjust the rows and columns. Moreover, you can dispose of elements on page to build your own homepage. Below is the structure of index page and index-custom page:

Index (see the Demo here)

<!DOCTYPE html>
<head>
</head>

<body>
   	<!-- Header -->
   	<header id="header" class="header">
	</header>

	<!-- Main -->
	<section id="main">
		<div class="container">
			<div class="row">
				<div class="col-md-8">
					<div class="featured-posts"></div><!-- /.featured-posts -->
					<div class="highlights-posts"></div><!-- /.highlights-posts -->
					<div class="editors-posts"></div><!-- /.editors-posts -->
					<div class="popular-posts"></div><!-- /.popular-posts -->
				</div><!-- /.col-md-8 -->
				<div class="col-md-4">
					<div class="sidebar-widget-1">
						<div class="widget widget-recent"></div><!-- /.widget-recent -->
						<div class="widget widget-ads"></div><!-- /.widget-ads -->
						<div class="widget widget-most-popular"></div><!-- /.widget-popular -->
						<div class="widget widget-tabs"></div><!-- /.widget-tabs -->
						<div class="widget widget-follow-us"></div><!-- /.widget-follow-us -->
						<div class="widget widget-categories"></div><!-- /.widget-categories -->
						<div class="widget widget-subscribe"></div><!-- /.widget-subscribe -->
					</div><!-- /.sidebar -->
				</div><!-- /.col-md-4 -->
				<div class="col-md-12">
				    <div class="gnSlider"></div><!-- /.gnSlider -->
				</div><!-- /.col-md-12 -->
				<div class="col-md-12">
					<div class="trending-posts"></div><!-- /.trending-posts -->
				</div><!-- /.col-md-12 -->
				<div class="col-md-8">
					<div class="social-media-posts"></div><!-- /.social-media-posts -->
				</div><!-- /.col-md-8 -->
			</div><!-- /.row -->
		</div><!-- /.container -->
	</section>

	<!-- Footer -->
	<footer id="footer">
		<div class="footer-widgets"></div><!-- /.footer-widgets -->
		<div class="footer-copyright"></div><!-- /.footer-copyright -->
	</footer>

	<!-- Javascript -->
	<script type="text/javascript" src="javascript/jquery.min.js"></script>
	<script type="text/javascript" src="..."></script>

</body>

</html>
			

Index Customized (see the Demo here)

<!DOCTYPE html>
<head>
</head>

<body>
   	<!-- Header -->
   	<header id="header" class="header">
	</header>

	<!-- Main -->
	<section id="main">
		<div class="container">
			<div class="row">
				<div class="col-md-8">
					<div class="gnSlider"></div><!-- /.gnSlider -->
					<div class="popular-posts"></div><!-- /.popular-posts -->
					<div class="featured-posts"></div><!-- /.featured-posts -->
					<div class="editors-posts"></div><!-- /.editors-posts -->
				</div><!-- /.col-md-8 -->
				<div class="col-md-4">
					<div class="sidebar-widget-1">
						<div class="widget widget-subscribe"></div><!-- /.widget-subscribe -->
						<div class="widget widget-ads"></div><!-- /.widget-ads -->
						<div class="widget widget-tabs"></div><!-- /.widget-tabs -->
						<div class="widget widget-categories"></div><!-- /.widget-categories -->
						<div class="widget widget-most-popular"></div><!-- /.widget-popular -->
						<div class="widget widget-follow-us"></div><!-- /.widget-follow-us -->
						<div class="widget widget-tabs2"></div><!-- /.widget-tabs2 -->
					</div><!-- /.sidebar -->
				</div><!-- /.col-md-4 -->
				<div class="col-md-12">
				    <div class="gnSlider"></div><!-- /.gnSlider -->
				</div><!-- /.col-md-12 -->
				<div class="col-md-12">
					<div class="trending-posts"></div><!-- /.trending-posts -->
				</div><!-- /.col-md-12 -->
				<div class="col-md-8">
					<div class="social-media-posts"></div><!-- /.social-media-posts -->
				</div><!-- /.col-md-8 -->
				<div class="col-md-4">
					<div class="highlights-posts"></div><!-- /.highlights-posts -->
				</div><!-- /.col-md-4 -->
			</div><!-- /.row -->
		</div><!-- /.container -->
	</section>

	<!-- Footer -->
	<footer id="footer">
		<div class="footer-widgets"></div><!-- /.footer-widgets -->
		<div class="footer-copyright"></div><!-- /.footer-copyright -->
	</footer>

	<!-- Javascript -->
	<script type="text/javascript" src="javascript/jquery.min.js"></script>
	<script type="text/javascript" src="..."></script>

</body>

</html>
			

Good NewsTemplate allows you to create the animation effect for any elements or columns easily.

Below is the Newsletter Widget with the fadeInUp (fade in up effect) animation. All of the effects you can use (details at here):

bounce, flash, pulse, rubberBand, shake, swing, tada, wobble, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp, fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig, fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig, flip, flipInX, flipInY, flipOutX, flipOutY, lightSpeedIn, lightSpeedOut, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, hinge, rollIn, rollOut, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp

<div class="widget widget-subscribe gn-animation" data-animation="fadeInUp" data-animation-delay="0" data-animation-offset="75%">
	<h5 class="widget-title">Good News Newsetter</h5>
	<p>Subscribe to our email newsletter for good news, sent out every Monday.</p>
	<form method="post" action="#" id="subscribe-form" data-mailchimp="true">
		<div id="subscribe-content">
			<div class="input">
			   <input type="text" id="subscribe-email" name="subscribe-email" placeholder="Email">
			</div>
			<div class="button">
			   <button type="button" id="subscribe-button" class="" title="Subscribe now">Subscribe</button>
			</div>
		</div>
		<div id="subscribe-msg"></div>
	</form>
</div><!-- /.widget-subscribe -->
				

CSS System

The Good News's CSS System contains 4 parts:
  • Theme style
  • Colors style
  • Shortcodes style
  • Javascripts style - FontAwesome style - Animations style - Bootstrap style

Style.css ( Theme style )

/**  
  * Reset
  * Repeatable Patterns
  * Top
  * Header
  * Elements Page
  * Login Page
  * 404 Page
  * About Page
  * Contact Page
  * Home Page
  * Sidebar Widgets
  * Article
  * Article Detail
  * Footer
  * GoTop
  * Switcher
  * Media Queries
*/
				

Colors style ( Stylesheets/Colors )

Good News defines 5 demo colors. However, while in usage, the template can be used one of the existing color ( color1.css, color2.css, color3.css, color4.css, color5.css ), or define your own color by re-editing the CSS color file address in the <head> of the template file.

<head>
<link rel="stylesheet" type="text/css" href="stylesheets/colors/color1.css" id="colors">
</head>

Shortcodes.css ( Shortcodes - Elements style )

You can easily insert the shortcodes to your web-page. Details at here

/**  
  * Buttons
  * Radio and Checkbox
  * Login and Sign Up Form
  * Gallery
  * Dropdown List
  * Pricing Table
  * Tabs
  * Toggles
  * Alerts
*/
				

Javascripts style - FontAwesome style - Animations style - Bootstrap style

/**  
  * flexslider.css
  * mCustomScrollbar.css

  * font-awesome.css

  * animate.css

  * bootstrap.css
*/
				

Javascript Custom

Here you can modify any settings for ( Animations, Sliders, Twitter, Ajax Contact Form and more..)

Main.js ( javascript/main.js )

/**
  * Tap Mobile Device
  * Animation
  * Go Top Button
  * Lastest Tweets
  * Tabs
  * Toggles
  * Galleries
  * Dropdown List
  * Simple Slider
  * Slider
  * Handle Search Form
  * Handle Panel Toggle
  * Mega Menu
  * Detect Viewport
  * Hide Navigation
  * Scroll Bar
  * Login Popup
  * Ajax Contact Form
  * Responsive Menu
  * Mailchimp Subscribe
*/
				

Shortcodes System

You can easily insert the shortcodes to your web-page. Details at here

/**  
  * Buttons
  * Radio and Checkbox
  * Login and Sign Up Form
  * Gallery
  * Dropdown List
  * Pricing Table
  * Tabs
  * Toggles
  * Alerts
*/
				

Contact Form

To edit the contact form to send mails to your email box, you can look for the config.php. You need to edit yourname@yourdomain.com to your email.

Config.php ( contact/config.php )


define("WEBMASTER_EMAIL", 'yourname@yourdomain.com');
				

MailChimp Integration

Mailchimp is a free application that allows you to obtain users' emails whenever they submit into the form. With this resource, you can simultaneously send email to all users at once. To config Mailchimp you need to open a free account at http://mailchimp.com/ and you need to have the API key and List ID.

API Key: you can get via http://kb.mailchimp.com/article/where-can-i-find-my-api-key

List ID: you can get via http://kb.mailchimp.com/article/how-can-i-find-my-list-id

After having the API key and List ID, you can edit the subscribe-mailchimp.php file as below:

Subscribe-mailchimp.php ( mail/subscribe-mailchimp.php )


  // ENTER YOUR MAILCHIMP API KEY IN FIRST BLOCK
  define('MAILCHIMP_API_KEY', '66a59c4e08b4b2979a15c5f9afd358d4-us3');
  
  // ENTER LIST ID THO WHICH VISITORS ARE SUBSCRIBING
  define('MAILCHIMP_LIST_NAME', 'f1fb64d962');
				

Photoshop files included

You can easily use layered photoshop files


Includes PSD files (desktop, tablet and mobile versions)
				

Credits