NewsZ - News & Magazine Html Template

Visit Our Product Page

Last update: 28.11.2016
Version: V1.3
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

NewsZ is a clean, modern and minimalistic responsive Html Template. It’s especially designed for magazine, blog and news websites and more. This is built with modern technologies like HTML5, CSS3, jQuery, Bootstrap3.x, Font Awesome 4.x, Megamenu, LESS, Gulp, Modernizer, CSS3 Animation, Owl Slider and more. It have many Pages: Three Home Pages, Two Categories pages, Video Listing Page, Audio Listing Page, Audio Player, Photo Gallery & Listing Page.
It have many Pages:

  • Home Page ( index.html )
  • index boxmenu Page ( index-boxmenu.html )
  • index color Categories Page ( index-colorcat.html )
  • Single Article (Left Sidebar) Page ( article-leftsidebar.html )
  • Single Article (Right Sidebar) Page ( article.html )
  • Single Article (Full Width) Page ( article-nosidebar.html )
  • Categories Page (3 Col) ( category.html )
  • Categories Page (2 Col) ( category2.html )
  • Video Listing Page ( video.html )
  • Audio Listing Page ( audio.html )
  • Audio Player Page ( audio-list.html )
  • Photo Gallery Page ( photogallery.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 Twelve(12) html files named

  • Home Page ( index.html )
  • index boxmenu Page ( index-boxmenu.html )
  • index color Categories Page ( index-colorcat.html )
  • Single Article (Left Sidebar) Page ( article-leftsidebar.html )
  • Single Article (Right Sidebar) Page ( article.html )
  • Single Article (Full Width) Page ( article-nosidebar.html )
  • Categories Page (3 Col) ( category.html )
  • Categories Page (2 Col) ( category2.html )
  • Video Listing Page ( video.html )
  • Audio Listing Page ( audio.html )
  • Audio Player Page ( audio-list.html )
  • Photo Gallery Page ( photogallery.html )

For Home Page index.html File

For index boxmenu Page copy index-boxmenu.html File

For index color Categories Page copy index-colorcat.html

For Single Article (Left Sidebar) Page copy article-leftsidebar.html

For Single Article (Right Sidebar) Page copy article.html

For Single Article (Full Width) Page copy article-nosidebar.html

For Categories Page (3 Col) copy category.html

For Categories Page (2 Col) copy category2.html

For Video Listing Page copy video.html

For Audio Listing Page copy audio.html

For Audio Player Page copy audio-list.html

For Photo Gallery Page copy photogallery.html file and edit

General

Site Header code starts from near line 1 and ends at line 106. It Contains global settings for this settings.

Change Site Stylesheet: In this stylesheet has all global styles with default color. If you want to only change color then please find Eight stylesheet in css directory with suffix ...style.css , no matter the settings are changed in any styles switching. Because all stylesheets has same global styles with different pre defined color scheme.

If you want to add new stylesheet then add it to site head section and to add new javascript file please see bottom of the index file.

Custom JS file: If you find custom js code the please find news.js from js directory.

Header Top

If you would like to edit Header Top content : you would do the following: (Line No: Near 117 to 236 )

For Header top left area Like this type of code in index.html 

                                
    
                                    
  •  Dhaka.Bangladesh
    • 
                                    
  •  30C
    • 
                                    
  • 11 Feb 2015
    • 
                                    
  • 10:12 PM
    •

For Header top Right(Account area) area Like this type of code in index.html

If you would like to edit Logo & Advertising area content : you would do the following: (Line No: Near 137 to 150 )

For Logo Like this type of code in index.html

For Advertising area Like this type of code in index.html

If you would like to edit Menu content : you would do the following: (Line No: Near 151 to 1724 )

For 1 Megamenu Item Like this type of code in index.html 

                                
  • 
                                    
                                    
                                
    •

    For Simple Dropdown Like this type of code in index.html 

                                    
  • 
                                    
                                    
                                
    •

    Breaking

    If you would like to edit Header Top content : you would do the following: (Line No: Near 1729 to 1783 )

    For Single News Like this type of code in index.html 

                                    
  • 
                                    
                                    08:12 Maecenas ut arcu malesuada, gravida risus nec, pellentesque diam.
                                
    •

    Top Slider

    If you would like to edit Header Top content : you would do the following: (Line No: Near 1792 to 1995 )

    For Slider Single Item Like this type of code in index.html 

                                    
    
                                    
    
                                        
    
                                            
    
                                                The Last of us
                                                
    
                                                    Video
                                                    
                                                
    
                                            
    
                                        
    
                                        
                                        
    
                                            
    Tigers Bow
                                                Out With Heads High Two
    

                                            
    By Ahmed Imtiazuddin, At
                                                Mirpur
    

                                            
    
                                                
    Recent thunderstorms have shown how fast flood waters rise in Metro Manila. Despite efforts to ease the floods in the Metro, authorities say this is a complex problem that can't easily be solved ...

    News & Buzz Widget

    If you would like to edit News & Buzz Widget content : you would do the following: (Line No: Near 2000 to 2182 )

    For News & Buzz Widget Like this type of code in index.html 

                                    
    
                                    
    News & Buzz
    

                                    
    
                                        
    
                                            
    
                                                article
                                                
    
                                                    Video
                                                    
                                                
    
                                            
    
                                            
    
                                                
    Everyone is talking Cobain!
                                                
    

                                                
    Class aptent taciti sociosqu ad litora torquent per conubiater nostra, per inceptos himenaeos. Suspendisse posuere feugiat gravida. Nulla facilisi. Aenean dui neque sed leo taciti sociosqu ad litora torquent per conubiater nostra taciti sociosqu ad litora torquent neque sed leo taciti socios.
    

                                                
    
                                                    
                                                         16 October 2016

    Latest News Widget

    If you would like to edit Latest News Widget content : you would do the following: (Line No: Near 2091 to 2182 )

    For Latest News Widget Like this type of code in index.html 

                                    
    
                                    
    
                                        Latest News

    If you would like to edit Featured News Widget content : you would do the following: (Line No: Near 2185 to 2305 )

    For Featured News Widget Single Item Like this type of code in index.html 

                                    
    
                                    
    
                                        
    
                                            
    
                                                article
                                                
    
                                                    Video
                                                    
                                                
    
                                            
    
                                            
    
                                                
    Why everyone is the talking Cobain
                                                    !
    

                                                
    Class aptent taciti sociosqu ad litora torquent per conubiater nostra, pers inceptos himenaeos. Suspendisse posuere feugiat
    

                                                
    
                                                    
                                                         16 October 2016

    Video News Widget Style

    If you would like to edit Video News Widget content : you would do the following: (Line No: Near 2308 to 2536 )

    For Featured Video Area Like this type of code in index.html 

                                    
    
                                    
    
                                        
    
                                            
    
                                                article
                                                
    
                                                    Video
                                                    

                                                    
    
                                                        
    
                                                            
    
                                                                
                                                                    
                                                                
                                                            
    
                                                        
    
                                                    
    
                                                
    
                                            
    
                                            
    
                                                
    
                                                    Why everyone is the talking Cobain !
    

                                                
    Class aptent taciti sociosqu ad litora torquent per conubiater nostra, per inceptos himenaeos. Suspendisse posuere feugiat gravida. Nulla facilisi. Aenean dui neque sed leo taciti sociosqu ad litora torquent per conubiater nostra taciti sociosqu ad litora torquent.
                                                
    

                                                
    
                                                    
                                                         16 October 2016

    For Video Right List Like this type of code in index.html

    For Video Right List Single Item Like this type of code in index.html

    Audio News Widget Style

    If you would like to edit Audio News Widget content : you would do the following: (Line No: Near 2546 to 2774 )

    Edit For Audio News Widget Like Video News Widget type of code in index.html

    Techonology Widget Style

    If you would like to edit Techonology Widget content : you would do the following: (Line No: Near 2777 to 2934 )

    For featured news Like this type of code in index.html 

                                    
    
                                    
    
                                        article
                                        
    
                                            Intertaintment
                                            
                                        
    
                                    
    
                                    
    
                                        
    Why everyone is the talking
                                            Cobain !
    

                                        
    Class aptent taciti sociosqu ad litora torquent per conubiater nostra, per inceptos himenaeos. Suspendisse posuere feugiat gravida. Nulla facilisi. Aenean dui neque sed leo taciti sociosqu ad litora torquent per conubiater nostra taciti sociosqu ad litora torquent.
    

                                        
    
                                            
                                                 16 October 2016

    For Listing Single Item Like this type of code in index.html

    For Special Color, Use cbx-techonology-brand Class in index.html 

                                    
    
                                    
    
                                        .
                                        .
                                        .
                                        .
                                        .
                                        .

    Intertaintment Widget Style

    If you would like to edit Intertaintment Widget content : you would do the following: (Line No: Near 2937 to 3097 )

    Same Type of Code as Techonology Widget

    For Special Color, Use cbx-intertaintment-brand Class in index.html 

                                    
    
                                    
    
                                        .
                                        .
                                        .
                                        .
                                        .
                                        .

    Sports Widget Style

    If you would like to edit Intertaintment Widget content : you would do the following: (Line No: Near 3100 to 3258 )

    Same Type of Code as Techonology Widget

    For Special Color, Use cbx-sports-brand Class in index.html 

                                    
    
                                    
    
                                        .
                                        .
                                        .
                                        .
                                        .
                                        .

    If you would like to edit Photo Gallary Widget content : you would do the following: (Line No: Near 3262 to 3431 )

    For Photo Gallary Single photo Like this type of code in index.html 

                                    
    
                                    
    
                                        
    
                                            galary 6
                                            
    
                                                
    
                                                    
    
                                                        
                                                    
    
                                                
    
                                            
    
                                        
    
                                        
    Photo Caption

    If you would like to edit Footer content : you would do the following: (Line No: Near 3433 to 3565 )

    For footer Left Widget Like this type of code in index.html 

                                    
    
                                    
    
                                        

                                        
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, aspernatur atque, dolor dolores excepturi fugit illum incidunt itaque neque numquam obcaecati officiis quisquam quos tenetur veniam, veritatis vero vitae! Voluptatem.
    
                                    
    
                                    
                                    
    
                                        
    Address
    
                                        
    
                                            11B1, Al-Baraka Tower, 252 Elephant Road, Dhaka 1205, Bangladesh
                                        
    
                                    
    
                                    
                                    
    
                                        
    Subscription

    For footer middle listing Widget Like this type of code in index.html 

                                    
    
                                    
    All Catagoris

    For footer Right Widget Like this type of code in index.html 

                                    
    
                                    
    Social Connect
    

                                    
                                    
    Tweets

    Twitter Feed

    The Code is like (in index.html): search for keyword "tweetiefeed"

    Twitter feed uses a js script owl carousel which default added in every html and php folder in Template root/tweetie. To create twitter app please follow this guideline. Here we need to collect 4 keys. The follow that guideline it will help you to collect Consumer key(api key) and consumer secret(api secret). If you go to your twitter app config page and click tab "Keys and Access Token" check the section titled "Your Access Token", There you will get Access Token and Access Secret. So, total we will have 4 keys. Now go to Template root/tweetie/api/config.php you will see code like bellow

                                     // Consumer Key
    define('CONSUMER_KEY', 'copy paste here');
    define('CONSUMER_SECRET', 'copy paste here');

    // User Access Token
    define('ACCESS_TOKEN', 'copy paste here');
    define('ACCESS_SECRET', 'copy paste here');

    Now need to work bit js code, check the index.html near footer line no 1008-1034

                                     //adding twitter feed, dependency js location siteroot/tweetie/tweetie.js
        $('#tweetiefeed').twittie(
            {
                'username': 'codeboxr',
                'hideReplies': true,
                'count' : 10,
                'apiPath' : 'tweetie/api/tweet.php',
                'dateFormat': '%b-%d-%Y',
                'template': '{{tweet}}-{{date}}'
            }, function () {
                    //using owl carousel
                    $("#tweetiefeed ul").owlCarousel({
                        navigation : false, // Show next and prev buttons
                        slideSpeed : 900,
                        rewindSpeed : 1000,
                        paginationSpeed : 400,
                        navigationText : ['',''],
                        pagination : false,
                        autoPlay : true,
                        stopOnHover : false,
                        singleItem:true,
                        addClassActive:true
                    });
                    //tweet sliding using owl carousel ends
                }
        );
        //twitter feed done.

    Here the only thing you need to change is 'username': 'codeboxr', , put your twitter handle/username where it says codeboxr

    Audio Player Listing

    If you would like to edit: you would do the following audio-list.html File

    The Code is like (audio-list.html):

    Default in Template root/assets/albums is the all album's root dir, you can create the folder for single album as you need, as example we have created a folder name album1 and put mp3 files in it, for any single mp3 file if you want to load the album cover photo/thumbnail then put it in the album folder, by default any single album will use the default cover photo from dir Template root/assets/albums/cover-default.png. In the above html code inside the div "cbxmusicplayer" there is a tag audio which is the main play list holder, check the audio tag has multiple source tag which is the single music file.

    The above code shows how a single audio file can be setup. first attribute src is the mp3 file location, data-cover is the thumbnail for this song. if you don't have different then use default cover, then data-download-url which is the download url for this song, if you don't need it then don't put that tag, then title attribute, then type="audio/mpeg" as default for any mp3

    Subscribe Area

    This feature need to take care the php part most but if you still need to change for html see the code block like bellow or search with keyword "subscribe-form-action" The Code is like (in index.html):