Page Title

<div id="title">
        <div class="container">
                <div class="title-container">
                        <h1 class="primary">Warta</h1>
                        <p class="secondary">News/magazine website template</p>
        <div class="image-light"></div>

.primary for primary color and .secondary for black color.

Single Line Mode

<div id="title">
        <div class="container">
                <div class="title-container">
                        <h1><span class="secondary">Category:</span><span class="primary">WORLD TRAVEL</span></h1>
        <div class="image-light"></div>


To change title background you just need to replace /img/title-background-*.jpg images with your own images. Below the size of the images.

File Width
/img/title-background-large.jpg >= 1920x150px
/img/title-background-medium.jpg 1366x150px
/img/title-background-small.jpg 768x150px


Font Awesome

Please visit Font Awesome for the documentation.


Please visit Dashicons for the documentation.

GraphicBurger: 40 Social Media Flat Icons

Icon variation classes:

Class Description
.sc-sm Small icons
.sc-md Medium icons
.sc-dark Transparent and low opacity icons

Icon classes:

  1. .sc-facebook
  2. .sc-pinterest
  3. .sc-twitter
  4. .sc-googleplus
  5. .sc-rss
  6. .sc-vimeo
  7. .sc-evernote
  8. .sc-dribbble
  9. .sc-tumblr
  10. .sc-behance
  11. .sc-stumbleupon
  12. .sc-dropbox
  13. .sc-soundcloud
  14. .sc-picasa
  15. .sc-lastfm
  16. .sc-forrst
  17. .sc-flickr
  18. .sc-deviantart
  19. .sc-linkedin
  20. .sc-blogger
  21. .sc-instagram
  22. .sc-yahoo
  23. .sc-youtube
  24. .sc-grooveshark
  25. .sc-digg
  26. .sc-skype
  27. .sc-sharethis
  28. .sc-wordpress
  29. .sc-kickstarter
  30. .sc-bebo
  31. .sc-zerply
  32. .sc-amazon
  33. .sc-myspace
  34. .sc-wikipedia
  35. .sc-technorati
  36. .sc-addthis
  37. .sc-delicious
  38. .sc-xing
  39. .sc-quora
  40. .sc-github
  41. .sc-feedly
  42. .sc-codepen
  43. .sc-foursquare
  44. .sc-reddit
  45. .sc-renren
  46. .sc-stack-exchange
  47. .sc-stack-overflow
  48. .sc-steam
  49. .sc-tencent-weibo
  50. .sc-vine
  51. .sc-vk
  52. .sc-weibo

Image/Photo Frame

<div class="frame thick">
        <a href="#"><img src="" alt="Banner image"></a>
        <div class="image-light"></div>
<img src="img/shadow.png" class="shadow" alt="shadow">

.frame is the photo frame class, by default it has padding 4px. Add class .thick to make the padding 9px. .image-light is shiny light on right top of the image.

No Mobile

<div class="no-mobile">
    <div data-src="img/content/unsplash_527bf4b4ae00d_1-medium.jpg" data-alt="Nunc ut dolor nec mi posuere tincidunt "></div>
    <div data-src="img/content/unsplash_528a8fb8a276d_1-medium.jpg" data-alt="vestibulum ultricies Ut sollicitudin"></div>
    <div data-src="img/content/Bird-Profile-Wellington-New-Zealand-medium.jpg" data-alt="Bird Profile Wellington "></div>

.no-mobile used for any container that contains images that you don’t want to display it on small devices. Don’t use <img> tag but use <div> tag with attribute data-src and data-alt to prevent the image loading in mobile devices.


Warta HTML Site Template uses Nivo Lightbox jQuery plugin, please visit Dev7studios: Nivo Lightbox for the documentation.


Warta HTML Site Template uses RateIt jQuery plugin, please visit RateIt – a jQuery (star) rating plugin for the documentation.


<section class="widget">

        <!-- Widget Header-->
        <div class="header clearfix">
                <a href="#" class="control"><i class="fa fa-plus" title="More news"></i></a>

        <!-- Widget Content -->


Carousel Widget

Please visit Bootstrap: Carousel site for main documentation.

There are 3 sizes that you can use:

  1. .carousel-large for full width size.
    <div id="carousel-large" class="carousel slide carousel-large no-mobile" data-ride="carousel">

    You need to provide 3 different image sizes to match the screen size that user use.

    Attribute Image width Device
    data-small 768px For small devices
    data-medium 1366px For medium devices
    data-large >= 1920px For large devices


    <div data-alt="Mauris lacus nisl suscipit ut orci ut gravida dapibus neque Interdum"
  2. .carousel-medium for medium size image 730x370px.
    <div id="carousel-medium" class="carousel slide carousel-medium no-mobile" data-ride="carousel">
  3. .carousel-small for small size image 350x185px.
    <div id="carousel-small" class="carousel slide carousel-small frame no-mobile" data-ride="carousel">

Caption Animation

Carousel caption animation can only be enabled on .carousel-large and .carousel-medium. To enable the animation you have to initialize it via JavaScript:

new $.CarouselAnimation( elementID );


// Carousel element
<div id="carousel-large" class="carousel slide carousel-large no-mobile" data-ride="carousel">

// Initialize the caption animation
    new $.CarouselAnimation('#carousel-large');

There are 3 animations that you can use:

  1. fade
  2. bounce
  3. slide (default)

To change animation, add data-animation attribute to .carousel-caption. Example:

<div class="carousel-caption" data-animation="slide">

To change the animation speed, add data-speed attribute to .carousel-caption. Example:

<div class="carousel-caption" data-animation="slide" data-speed="3000">

Articles Widget

Class Image size
.article-tiny 90x75px
.article-small 165x90px
.article-medium 350x185px
.article-large 730x370px


<article class="article-medium">    

Slider Tabs

<section id="slider-tabs" class="widget">

    <!-- Widget Header -->
    <ul class="nav nav-tabs">

        <li class="active"><a href="#popular" data-toggle="tab">Popular</a></li>
        <li><a href="#recent" data-toggle="tab">Recent</a></li>
        <li><a href="#gallery" data-toggle="tab">Gallery</a></li>

        <!--Slider Controls-->
        <li class="control current"><a href="#popular" data-slide="next"><span class="fa fa-chevron-right"></span></a></li>
        <li class="control current"><a href="#popular" data-slide="prev"><span class="fa fa-chevron-left"></span></a></li>
        <li class="control"><a href="#recent" data-slide="next"><span class="fa fa-chevron-right"></span></a></li>
        <li class="control"><a href="#recent" data-slide="prev"><span class="fa fa-chevron-left"></span></a></li>
        <li class="control"><a href="#gallery" data-slide="next"><span class="fa fa-chevron-right"></span></a></li>
        <li class="control"><a href="#gallery" data-slide="prev"><span class="fa fa-chevron-left"></span></a></li>


    <!-- Tab Contents -->
    <div class="tab-content">

        <!-- Popular Tab Content -->
        <div class="tab-pane active fade in" id="popular">
            <div class="slider-container article">

        <!-- Recent Tab Content-->
        <div class="tab-pane fade" id="recent">
            <div class="slider-container article">

        <!-- Gallery Tab Content -->
        <div class="tab-pane fade" id="gallery">
            <div class="slider-container">
                <ul class="da-thumbs">



Uses Bootstrap Togglable Tabs, please visit Bootstrap: Togglable tabs for the tab documentation.

.control class for slide control
.current class for current active tab
data-slide to determine the direction

The gallery tab use codrops: Direction-Aware Hover Effect, please visit codrops: Direction-Aware Hover Effect with CSS3 and jQuery  for the documentation. The gallery tab uses 180x180px image size.

You need to initialize the slider via JavaScript. Example:

new $.Slider({
    widget  : '#slider-tabs',   // The widget ID
    tab     : '#popular'        // The tab ID

new $.Slider({
    widget  : '#slider-tabs',   // The widget ID
    tab     : '#recent'         // The tab ID

new $.Slider({
    widget  : '#slider-tabs',   // The widget ID
    tab     : '#gallery'        // The tab ID

Breaking News Widget

Warta HTML Site Template uses Marquee jQuery plugin, please visit aamirafridi: jQuery Marquee Plugin with CSS3 Support for documentation.

FeedBurner Widget

First, you must activate email subscription from FeedBurner dashboard.

<section class="widget feedburner">

    <!-- Widget Header -->
    <div class="header clearfix"><h4>Feedburner</h4></div>

    <!-- Widget Content -->
    <form action="" 
            '', // Change with yours.
		  );return true"
        <div class="input-group">
            <i class="fa fa-envelope"></i>
            <input type="text" name="email" class="input-light" placeholder="Enter your email address" />                                        
        <input type="hidden" value="YOUR_FEEDBURNER_URI" name="uri"/><!-- Change with yours. -->
        <input type="hidden" name="loc" value="en_US"/>
        <input type="submit" value="Subscribe" />   


Change YOUR_FEEDBURNER_URI with your actual FeedBurner URI.

Flickr Feed

<ul id="flickr-feed-aside" class="flickr-feed clearfix">
    <li><i class="fa fa-spinner fa-spin"></i> Please wait...</li>
        <script type="text/template">
                <a href="{{link}}" title="{{title}}" class="light">
                    <img src="{{thumbnail}}" alt="{{title}}">
                    <div class="layer"></div>

Flickr Feed needs to be initialized via JavaScript. Example:

new $.FlickrFeed({
    element : '#flickr-feed-aside', // Your element id to place the photos.
    items   : 8, // How many items do you want to show.
    id      : '', // A single user ID. This specifies a user to fetch for. eg: '[email protected]'.
    ids     : '', // A comma delimited list of user IDs. This specifies a list of users to fetch for.
    tags    : '', // A comma delimited list of tags to filter the feed by.
    tagmode : ''  // Control whether items must have ALL the tags (tagmode=all), or ANY (tagmode=any) of the tags. Default is ALL.

Twitter Feed

Warta HTML Site Template uses Tweetie jQuery plugin, please visit Tweetie Simple jQuery Twitter feed plugin for the documentation. Set your API keys in /php/tweetie/config.php. For the apiPath, use php/tweetie/tweet.php.

Google Map

Warta HTML Site Template uses gmaps.js plugin, please visit gmaps.js for the documentation.


<span class="spoiler" data-type="inline" data-show-text="Reveal Spoiler">
        Incidentally, you have a dime up your nose. Perhaps, but perhaps your 
        civilization is merely the sewer of an even greater society above you!
Data Default Options Description
data-type block inline, block Spoiler type
data-show-text Button show text
data-hide-text Button hide text
data-button-class btn btn-xs btn-primary Button class

Leave a Reply