Categories

Components

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>
        </div>
        <div class="image-light"></div>
</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>
        </div>
        <div class="image-light"></div>
</div>

Background

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

Icons

Font Awesome

Please visit Font Awesome for the documentation.

Dashicons

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="http://placehold.it/360x185.jpg" alt="Banner image"></a>
        <div class="image-light"></div>
</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>
</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.

Lightbox

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

Rating

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

Widgets

<section class="widget">

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

        <!-- Widget Content -->

</section>

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">
    </div>

    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

    Example:

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

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 );

Example:

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

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

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">
</div>

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

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

Articles Widget

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

Example:

<article class="article-medium">    
</article>

Slider Tabs

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

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

        <!--Titles-->
        <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>

    </ul><!--.nav-tabs-->

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

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

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

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

    </div><!--.tab-content-->

</section><!--#slider-tabs-->

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="http://feedburner.google.com/fb/a/mailverify" 
          method="post" 
          target="popupwindow" 
          onsubmit="window.open(
            'http://feedburner.google.com/fb/a/mailverify?uri=YOUR_FEEDBURNER_URI', // Change with yours.
            'popupwindow', 
            'scrollbars=yes,width=550,height=520'
		  );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" />                                        
        </div>
        <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" />   
    </form>

</section>

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>
    <li>
        <script type="text/template">
            <li>
                <a href="{{link}}" title="{{title}}" class="light">
                    <img src="{{thumbnail}}" alt="{{title}}">
                    <div class="layer"></div>
                </a>
            </li>
        </script>
    </li>
</ul>

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.

Spoiler

<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!
</span>
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