LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
  
	

Twitter custom widgets customized!

#fuckmylife

Sadly, twitter does not support API :(

CSS
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html, body {
  overflow-x: hidden;
}

body {
  background: #fff;
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 2em;
  text-align: center;
  margin: 0;
}

h3 {
  text-align: center;
  margin: 0 0 3em;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 1em 0 3em;
}
.container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.example1 {
  position: relative;
  background: #ecf0f1;
}
.example1:before, .example1:after {
  content: "";
  position: absolute;
  background: #ecf0f1;
  top: 0;
  bottom: 0;
  width: 9999px;
}
.example1:before {
  right: 100%;
}
.example1:after {
  left: 100%;
}

#tw-widget1 li {
  background: #fff;
  max-width: 340px;
  min-width: 300px;
  position: relative;
  border-radius: 6px;
  box-shadow: 0px 0px 25px -4px rgba(0, 0, 0, 0.4);
  margin: 0 auto;
}
#tw-widget1 a {
  text-decoration: none;
}
#tw-widget1 .user {
  background: #FD7A79;
  padding: 20px 20px 16px;
  position: relative;
  border-radius: 6px 6px 0px 0px;
  border-bottom: 1px solid #fd6160;
}
#tw-widget1 .user a span {
  position: absolute;
  display: block;
  top: 0;
  text-align: left;
}
#tw-widget1 .user a span[data-scribe="element:name"] {
  position: absolute;
  top: 21px;
  left: 55px;
  font-size: 16px;
  color: white;
  font-weight: bold;
}
#tw-widget1 .user a span[data-scribe="element:screen_name"] {
  position: absolute;
  top: 42px;
  left: 74px;
  font-size: 14px;
  color: white;
}
#tw-widget1 .tweet {
  margin: 0;
  padding: 20px;
  color: #4d4d4d;
  font-weight: bold;
}
#tw-widget1 .tweet a {
  color: #4d4d4d;
  font-weight: bold;
  text-decoration: none;
}
#tw-widget1 .tweet a[data-scribe="element:url"] {
  color: #00ae8e;
}
#tw-widget1 .tweet a[data-scribe="element:hashtag"] {
  color: #FD7A79;
}
#tw-widget1 .interact {
  margin: 0;
  padding: 0;
  position: relative;
  background: #04C6C4;
  border-radius: 0px 0px 6px 6px;
  border-top: 1px solid #03adab;
}
#tw-widget1 .interact a {
  padding: 15px 0;
  text-decoration: none;
  color: #fff;
  background: #04C6C4;
}
#tw-widget1 .interact a:hover {
  color: #4d4d4d;
  background: #04bcba;
}
#tw-widget1 .interact a:active {
  box-shadow: inset 0px 0px 10px -4px rgba(0, 0, 0, 0.75);
}
#tw-widget1 .interact a:first-child {
  border-radius: 0px 0px 0px 6px;
}
#tw-widget1 .interact a:last-child {
  border-radius: 0px 0px 6px 0px;
}
#tw-widget1 .interact .twitter_reply_icon, #tw-widget1 .interact .twitter_fav_icon, #tw-widget1 .interact .twitter_retweet_icon {
  text-align: center;
  font-size: 0px;
  width: calc(100% / 3);
  display: inline-block;
}
#tw-widget1 .interact .twitter_reply_icon:before, #tw-widget1 .interact .twitter_fav_icon:before, #tw-widget1 .interact .twitter_retweet_icon:before {
  font-size: 22px;
  font-family: "Fontawesome";
  -webkit-font-smoothing: antialiased;
  padding-right: 4px;
}
#tw-widget1 .interact .twitter_reply_icon:before {
  content: "";
}
#tw-widget1 .interact .twitter_retweet_icon:before {
  content: "";
}
#tw-widget1 .interact .twitter_fav_icon:before {
  content: "";
}
#tw-widget1 .timePosted {
  margin: 0 0 10px;
  padding: 0 20px;
  font-size: 12px;
  text-align: right;
}
#tw-widget1 .timePosted:before {
  font-family: "Fontawesome";
  -webkit-font-smoothing: antialiased;
  content: "";
  padding-right: 4px;
}

.example2 {
  position: relative;
  background: #1abc9c;
  padding: 5em 0;
}
.example2 h2 {
  margin: 0 0 1.5em;
}
.example2:before, .example2:after {
  content: "";
  position: absolute;
  background: #1abc9c;
  top: 0;
  bottom: 0;
  width: 9999px;
}
.example2:before {
  right: 100%;
}
.example2:after {
  left: 100%;
}

#tw-widget2:after {
  content: "";
  display: table;
  clear: both;
}
#tw-widget2 li {
  width: 80%;
  margin: 0 auto;
  float: none;
}
@media (min-width: 48em) {
  #tw-widget2 li {
    width: calc(100% / 3);
    float: left;
  }
}
#tw-widget2 a {
  text-decoration: none;
}
#tw-widget2 .user {
  padding: 20px 20px 16px;
  position: relative;
}
#tw-widget2 .user a span {
  display: block;
  text-align: left;
  color: white;
  font-weight: bold;
}
#tw-widget2 .user a img[data-scribe="element:avatar"] {
  display: none;
}
#tw-widget2 .user a span[data-scribe="element:name"] {
  font-size: 20px;
}
#tw-widget2 .user a span[data-scribe="element:screen_name"] {
  font-size: 14px;
  color: black;
}
#tw-widget2 .tweet {
  margin: 0;
  padding: 10px 20px;
  color: white;
}
#tw-widget2 .tweet a {
  font-weight: bold;
  text-decoration: none;
  color: white;
}
#tw-widget2 .tweet a[data-scribe="element:url"] {
  text-decoration: underline;
}
#tw-widget2 .tweet a[data-scribe="element:hashtag"] {
  color: #ecf0f1;
}
#tw-widget2 .tweet img[aria-label^="Emoji"] {
  max-height: 14px;
}
#tw-widget2 .timePosted {
  margin: 0;
  padding: 0 20px;
  font-size: 14px;
  text-align: left;
}
#tw-widget2 .timePosted:before {
  font-family: "Fontawesome";
  -webkit-font-smoothing: antialiased;
  content: "";
  padding-right: 4px;
}
JS
 /*********************************************************************
 *  #### Twitter Post Fetcher v12.0 ####
 *  Coded by Jason Mayes 2013. A present to all the developers out there.
 *  www.jasonmayes.com
 *  Please keep this disclaimer with my code if you use it. Thanks. :-)
 *  Got feedback or questions, ask here: 
 *  http://www.jasonmayes.com/projects/twitterApi/
 *  Github: https://github.com/jasonmayes/Twitter-Post-Fetcher
 *  Updates will be posted to this site.
 *********************************************************************/
var twitterFetcher=function(){function w(a){return a.replace(/]*>(.*?)<\/b>/gi,function(a,f){return f}).replace(/class=".*?"|data-query-source=".*?"|dir=".*?"|rel=".*?"/gi,"")}function m(a,c){for(var f=[],g=new RegExp("(^| )"+c+"( |$)"),h=a.getElementsByTagName("*"),b=0,k=h.length;bk&&(a.splice(k,a.length-k),f.splice(k,f.length-k),g.splice(k,g.length-k),b.splice(k,b.length-k),h.splice(k,h.length-k));c=[];e=a.length;for(b=0;b'+w(f[b].innerHTML)+"
"),d+='

'+w(a[b].innerHTML)+"

",q&&(d+='

'+g[b].getAttribute("aria-label")+"

")):a[b].innerText?(r&&(d+='

'+f[b].innerText+"

"),d+= '

'+a[b].innerText+"

",q&&(d+='

'+g[b].innerText+"

")):(r&&(d+='

'+f[b].textContent+"

"),d+='

'+a[b].textContent+"

",q&&(d+='

'+g[b].textContent+"

"));A&&(d+='

');B&&void 0!==h[b]&&(l=h[b],void 0!==l?(l=l.innerHTML.match(/data-srcset="([A-z0-9%_\.-]+)/i)[0],l=decodeURIComponent(l).split('"')[1]):l=void 0,d+='
Image from tweet
');c.push(d);b++}if(null===v){a=c.length;f=0;g=document.getElementById(x);for(h="
    ";f"+c[f]+"",f++;g.innerHTML=h+"
"}else v(c);s=!1;0
Host Instantly Drag and Drop Website Builder

 

Description

Nobody likes classic twitter widget. This is an example of how can twitter feed, hashtag, search query could be customized and used in any kind of website. As well us Twitter Widget Custom css styling
Term
Mon, 11/27/2017 - 21:37

Related Codes

Pen ID
Pen ID
Pen ID