Javascript and CSS

USED CSS stylesheets:

style.css – main Exico theme stylesheet,
bootstrap.min.css – bootstrap styles.

If you would like to use FontAwesome for icons – you need to attach it separately with the following code:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/
css/font-awesome.min.css">

1 2	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/ css/font-awesome.min.css">

Main style – make sure it’s included in head section when you clicking on Edit HTML

<style>

 /*Group button*/


 .btn-group span{
 cursor: context-menu;
 }

 span.btn.ct-btn--transparent:hover{
 background-color: transparent;
 color: #000000;
 }

 /*Article box*/

 .ct-articleBox-media img{
 height: auto;
 }

 .video-wrapper iframe,
 iframe.soundcloud_audio_player{
 width: 100%;
 }

 /*Reblog link*/

 a.reblog-link{
 display: none;
 }

 a.tumblr_blog{
 position:relative;
 background-color: #000000;
 color:#ffffff;
 padding: 5px;
 margin-left: 14px;
 }

 a.tumblr_blog:before{
 content:"";

 border-top: 0px solid transparent;
 border-bottom: 29px solid transparent;
 border-left: 14px solid #000000;
 position: absolute;
 left: 100%;
 top: 0;
 }

 a.tumblr_blog:after{

 content: "";
 border-top: 29px solid transparent;
 border-bottom: 0px solid transparent;
 border-right: 14px solid #000000;
 position: absolute;
 right: 100%;
 top: 0;
 }

 div.link-host{
 padding: 5px;
 border: 1px solid #000000;
 display:inline;
 color:#000000;
 }

 /*Chat post*/


 ul.conversation{
 padding-left: 0px;
 list-style: none;
 text-align: left;
 }

 ul.conversation > li.chat-odd,ul.conversation > li.chat-even{
 margin-left: 0px !important;
 }

 ul.conversation .label{
 background-color: #000000;
 }


 /* tumblr video --> */

 .tumblr_video_container{
 width: auto !important;
 height: auto !important;
 }

 /*Masonry --> */
 .ct-gallery-item.ct-gallery-item--masonry img{
 height: 50%;
 }

 /* <-- masonry */

 .widget{
 border-bottom: 1px solid #333333;
 }

 .tags.tagcloud{
 padding-left: 0px;
 }

 .tags.tagcloud li{
 display: inline-block;
 }

 .btn-link{
 color: #000000;
 }

 #posts .post-wrapper .post .panel{
 box-shadow: none;
 border: none;
 border-radius: 0px;
 margin-bottom: 0px;
 }

 .post-controls .controls-wrapper .control{
 display: inline-block;
 padding-right: 15px;
 margin-left: -10px;

 }


 /* Custom CSS */
 {CustomCSS}

</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

<style>

/*Group button*/

.btn-group span{

cursor: context-menu;

}

span.btn.ct-btn--transparent:hover{

background-color: transparent;

color: #000000;

}

/*Article box*/

.ct-articleBox-media img{

height: auto;

}

.video-wrapper iframe,

iframe.soundcloud_audio_player{

width: 100%;

}

/*Reblog link*/

a.reblog-link{

display: none;

}

a.tumblr_blog{

position:relative;

background-color: #000000;

color:#ffffff;

padding: 5px;

margin-left: 14px;

}

a.tumblr_blog:before{

content:"";

border-top: 0px solid transparent;

border-bottom: 29px solid transparent;

border-left: 14px solid #000000;

position: absolute;

left: 100%;

top: 0;

}

a.tumblr_blog:after{

content: "";

border-top: 29px solid transparent;

border-bottom: 0px solid transparent;

border-right: 14px solid #000000;

position: absolute;

right: 100%;

top: 0;

}

div.link-host{

padding: 5px;

border: 1px solid #000000;

display:inline;

color:#000000;

}

/*Chat post*/

ul.conversation{

padding-left: 0px;

list-style: none;

text-align: left;

}

ul.conversation > li.chat-odd,ul.conversation > li.chat-even{

margin-left: 0px !important;

}

ul.conversation .label{

background-color: #000000;

}

/* tumblr video --> */

.tumblr_video_container{

width: auto !important;

height: auto !important;

}

/*Masonry --> */

.ct-gallery-item.ct-gallery-item--masonry img{

height: 50%;

}

/* <-- masonry */

.widget{

border-bottom: 1px solid #333333;

}

.tags.tagcloud{

padding-left: 0px;

}

.tags.tagcloud li{

display: inline-block;

}

.btn-link{

color: #000000;

}

#posts .post-wrapper .post .panel{

box-shadow: none;

border: none;

border-radius: 0px;

margin-bottom: 0px;

}

.post-controls .controls-wrapper .control{

display: inline-block;

padding-right: 15px;

margin-left: -10px;

}

/* Custom CSS */

{CustomCSS}

</style>

Used Javascripts:

main.js – main javascript file,
bootstrap.min.js – responsible for website responsiveness,
device.min.js – required for mobile menu,
jquery.browser.min.js – support for old IE browsers,
snap.min.js – required for mobile menu
jquery.appear.js – required for animations,
init_mediasection.js – responsible for parallax effect,
jquery.stellar.min.js – responsible for parallax effect,
jquery.magnific-popup.min.js – used for magnific lightbox,
init_magnific.js – used for magnific lightbox,
jquery.isotope.min.js – required for masonry effect,
imagesloaded.js – required for masonry effect,
infinitescroll.min.js – required for masonry effect,
init.js – required for masonry effect,

Required script – make sure that this code is always included after last attached script:

<script type='text/javascript'>

var flickr = $('.flickr_badge_image a');

    flickr.addClass('ct-galleryBox-overlay');


var Tumblr = Tumblr || {};

Tumblr.RecentPosts = function(el, postsCount) {
  var apiUrl = "http://" + document.domain + "/api/read/json?callback=?&filter=text&num=" + (postsCount || 10);

  var titleTypes = {
    regular: "regular-title",
    link: "link-text",
    quote: "quote-source",
    photo: "photo-caption",
    conversation: "conversation-title",
    video: "video-caption",
    audio: "audio-caption",
    answer: "question"
  };

  var renderPosts = function(posts) {
    return $.map($.map(posts, postInfo), renderPost);
  };

  var renderPost = function(post) {
    return "<li><a class='post_footer' href='" + post.url + "'><i class='fa fa-link'></i> " + post.title.substr(0,40) + "...</a></li> <small class='ct-u-fontType-2'>"+ post.date+"</small>";
  };

  var postInfo = function(post) {
    var titleType = titleTypes[post.type];
    if (titleType in post) {
      return {
        title: post[titleType],
        url: post["url-with-slug"],
        date: post["date"],
        type: post["type"]
      };
    }
  };

  return {
    render: function() {
      var loadingEl = $("<div>").text("Loading...").appendTo($(el));
      $.getJSON(apiUrl, function(data) {
        loadingEl.remove();
        $("<ul class='recent-posts'>").appendTo($(el))
        .hide().append(renderPosts(data.posts)
        .join("")).slideDown('slow');
      });

      return this;
    }
  }
};

  $(function() {
    new Tumblr.RecentPosts($("#recent-posts"),2).render()
  })
</script>

var flickr = $('.flickr_badge_image a');

flickr.addClass('ct-galleryBox-overlay');

var Tumblr = Tumblr || {};

Tumblr.RecentPosts = function(el, postsCount) {

var apiUrl = "http://" + document.domain + "/api/read/json?callback=?&filter=text&num=" + (postsCount || 10);

var titleTypes = {

regular: "regular-title",

link: "link-text",

quote: "quote-source",

photo: "photo-caption",

conversation: "conversation-title",

video: "video-caption",

audio: "audio-caption",

answer: "question"

};

var renderPosts = function(posts) {

return $.map($.map(posts, postInfo), renderPost);

};

var renderPost = function(post) {

return "<li><a class='post_footer' href='" + post.url + "'><i class='fa fa-link'></i> " + post.title.substr(0,40) + "...</a></li> <small class='ct-u-fontType-2'>"+ post.date+"</small>";

};

var postInfo = function(post) {

var titleType = titleTypes[post.type];

if (titleType in post) {

return {

title: post[titleType],

url: post["url-with-slug"],

date: post["date"],

type: post["type"]

};

}

};

return {

render: function() {

var loadingEl = $("<div>").text("Loading...").appendTo($(el));

$.getJSON(apiUrl, function(data) {

loadingEl.remove();

$("<ul class='recent-posts'>").appendTo($(el))

.hide().append(renderPosts(data.posts)

.join("")).slideDown('slow');

});

return this;

}

};

$(function() {

new Tumblr.RecentPosts($("#recent-posts"),2).render()

})

</script>

OHTER:

Contact form

The contact form was made using on-line contact form builder. The documentation is here:
http://www.jotform.com/myforms

Disqus for tumblr – comments for each posts are displayed with:

https://disqus.com

News

Siver

Estato

Disrupt

We are elite