Advertisement
surdd

THEME SURDADDY - 01

Apr 21st, 2016
314
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.38 KB | None | 0 0
  1.        <!-----------------------------------------------------------
  2.                       DESIGN by SURDADDY - ORIGINAL ©
  3.       ------------------------------------------------------------->
  4.        
  5. <meta name="color:background" content="#fff" />
  6. <meta name="color:text" content="#999" />
  7. <meta name="color:texto" content="#000" />
  8. <meta name="color:links" content="#000" />
  9. <meta name="color:linkshover" content="#000" />
  10. <meta name="color:rolagem" content="#000" />
  11. <meta name="image:foto" content="" />
  12. <meta name="text:title" content="NAVIGATE" />
  13. <meta name="text:texto" content="EXCUSE ME, NO, I BELIEVE THE PROPER TERM'S EXCUSE YOU. I COULD SWITCH UP ON YOU NIGGAS AND START SHITTIN'. THEY SAY WEALTH IS IN THE MIND, NOT THE POCKET. MAKE NO MISTAKES, IT'S ALL A LEAP OF FAITH FOR LOVE." />
  14.  
  15. <meta name="text:Link1" content="/" />
  16. <meta name="text:Link1 Title" content="link 1" />
  17. <meta name="text:Link2" content="/" />
  18. <meta name="text:Link2 Title" content="link 2" />
  19. <meta name="text:Link3" content="/" />
  20. <meta name="text:Link3 Title" content="link 3" />
  21. <meta name="text:Link4" content="/" />
  22. <meta name="text:Link4 Title" content="link 4" />
  23.  
  24. <head>
  25.                      <title>{Title}</title>
  26.   <link rel="shortcut icon" href="{FavIcon}"><link rel="alternate" type="application/rss+xml" href="{RSS}">{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  27.  
  28. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script> <script> (function($){ $(document).ready(function(){ $("[title]").style_my_tooltips(); }); })(jQuery); </script>  
  29.  
  30. <link href='https://fonts.googleapis.com/css?family=Pathway+Gothic+One' rel='stylesheet' type='text/css'>
  31. <link href='https://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
  32.  
  33. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  34.  
  35. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  36.  
  37. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script><a href="javascript:;" id="scrollToTop"><i class="fa fa-chevron-up"></i></a>
  38.  
  39. </head>
  40. <style type="text/css">
  41.  
  42. #tumblr_controls, .tmblr-iframe{ z-index:9!important; -webkit-filter:invert(100%);position:fixed!important; top:0px!important; right:0px!important; ;opacity: 0.7;transition:0.8s}  
  43. #tumblr_controls, .tmblr-iframe:hover{opacity:.9;transition:0.4s;-webkit-filter:invert(0%);}
  44.  
  45. #s-m-t-tooltip {max-width:200px;line-height:17px;height:17px; font-size:8px; color:#fff; padding:3px 4px 3px 4px; margin:20px 0px 0px 20px; z-index:99999;transition: 0.5s;background:#000;text-transform:uppercase;}
  46.  
  47. #scrollToTop:link,#scrollToTop:visited { color: transparent; background-color: transparent; display: none; position: fixed; bottom:45px; right: 42px;}
  48. #scrollToTop i {font-size:13px;color:#000;}
  49.  
  50. body {font-family:karla, sans-serif; font-size:10.5px; background:{color:background}; color:{color:text};text-align:justify;}
  51.  
  52. a {color: #000; text-decoration: none; text-transform: none;cursor: url('http://33.media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png'), progress;}
  53. a:hover {color:;cursor:url(http://static.tumblr.com/vmteopo/DH3njhg50/help_cursor.png), crosshair; transition:0.5s;}
  54. h1 {font-size:10px;text-align:center;text-transform:uppercase;letter-spacing:1px;}
  55.  
  56. #content {margin-top:15px; margin-left:400px; width:813px;}
  57.  
  58. .posts{float:left;width:220px;;margin:10px;{block:permalinkpage}width:500px;border:1px solid #000;margin-left:120px;{/block:permalinkpage};}
  59. .posts img {width:220px;transition: all 0.5s ease-in-out;}
  60. .postimage img {width:220px;{block:PermalinkPage}width:98%;padding:5px;{/block:PermalinkPage};}
  61. .efects {position:absolute;width:220px;height:99.9%;opacity:0;left:0px;background:rgba(0,0,0,0.8);transition:0.4s;{block:permalinkPage}width:0px;height:0px;opacity:0;{/block:permalinkPage};}
  62. .posts:hover .efects{opacity:1;transition:0.4s;;}
  63. .box {padding:10px;border:1px solid #000;background:#fff;}
  64.  
  65. .quote:first-letter {font-size: 15px; line-height:15px; color:#000}
  66. .quote {text-align:left; line-height:15px; color:{color:text}; padding:3px;}
  67. .source {text-transform:uppercase; text-align:right;font-size:10px; margin-top:1px;}
  68.  
  69. .perguntou {float:left;text-align:left; text-indent:3px;width:100px;text-transform:uppercase;margin-left:1px;margin-top:-5px;height:20px;line-height:28px;}
  70. .perguntou a {text-transform:uppercase;color:{color:text};font-size:9px;}
  71. .fotinha {float:left;text-align:left;width:20px;height:20px;margin-left:6px;margin-top:-5px;border-radius:20px;border:5px solid #fff;z-index:9;}
  72. .fotinha img {width:20px; height:20px;margin-left:0px;margin-top:0px;border-radius:20px;}
  73. .pergunta {background:#000;text-align:left; text-indent:-20px;width:96%;color:#fff;margin-left:0px;margin-top:17px;height:auto;line-height:18px;padding:5px;}
  74. .resposta{text-align:left;padding:5px; width:95%;height:auto;line-height:13px;margin-left:0px;margin-top:0px;color:{color:text};border:1px solid #000;}
  75.  
  76. #audio {width:100px; height:80px;}
  77. #audio img {position:absolute; width:80px; height:80px; background-color:#fff;}
  78. #audiott {position:absolute;margin:12px 84px; width:110px;}
  79. #audiott span {color:{color:text};}
  80. #play {position:absolute; overflow:hidden; height:28px; width:28px; margin:10px;}
  81. #player {position:absolute; width:46px; height:46px; z-index:9; margin:17px; border-radius:40px; opacity:0.6; transition:1s; background:#fff;}
  82. #player:hover {opacity:1; transition:1s;}
  83.  
  84. /******** NOTES POR SURDADDY / DON'T COPY *******/
  85. #notes {width:200px;position:absolute;left:15px;bottom:0px;height:30px;opacity:0;}  
  86. #notes a {text-align:center;color:#fff;padding:3px;font-size:12px;width:15px;height:15px;bottom:0px;float:right;margin:2px;}
  87. #notes i {line-height:15px;}
  88. #notes a:hover {color:#000;font-weight:bold;}
  89. .posts:hover #notes {opacity:1;transition:0.4s;}
  90.  
  91. #notes_n {width:200px; height:10px;position:relative;right:0px;top:0px;z-index:999;transition: all 0.5s ease-in-out;}
  92. #notes_n a {text-align:left;color:{color:text};padding:3px;font-size:10px;width:auto;bottom:0px;float:LEFT;margin-top:2px;}
  93. #notes_n a:hover {color:#999;transition:0.4s;}
  94. .posts:hover #notes_n {opacity:1;transition:0.4s;}
  95.  
  96. /*** FRAGILEHELP ***/
  97. #lpermalink {padding:0px; margin-bottom:1px;overflow-x:hidden; overflow-y:auto;height:200px;border:1px solid #000;color:{color:text};}
  98. #lpermalink a {color:{color:text};margin-left:5px;}
  99. #lpermalink img {float:left; width:20px;}
  100. ol.notes li {list-style-type:none; margin:2px; line-height:18px; padding:5px; border-bottom:1px solid #000;margin-left:-30px;}
  101.  
  102. #creditos {right:45px; bottom:25px; position:fixed;z-index:99999;}
  103. #creditos a {text-align:center; width:20px; height:20px;float:left;line-height:20px;color:#999;font-size:11px;}
  104.  
  105. .vsanna{display: none;}
  106. blockquote {margin:0px;}
  107.  
  108. #infscr-loading{position:absolute!important;width:16px!important;height:11px!important;margin-bottom:-16px!important;top:auto!important;bottom:0;left:40%!important}
  109. .tumblrAutoPager_page_separator, .tumblrAutoPager_page_info {display: none;}
  110.  
  111. ::-webkit-scrollbar {height:0px;width:19px;background: #eee;border:8px solid #fff;}
  112. ::-webkit-scrollbar-thumb:vertical{background: {color:rolagem};border:8px solid #fff;height:auto;}
  113.  
  114. #side { width:160px; height:145px; position:fixed; margin-left:160px;margin-top:190px;border:1px solid #000;}
  115. #foto{position:fixed;margin-left:50px;margin-top:-30px;;}
  116. #foto img { width:50px;border:3px solid #000;border-radius:50px;}
  117.  
  118. #frase {position:fixed;width:152px;height:62px;margin-top:27px; margin-left:5px; text-align:justify;color:{color:texto};font-family:karla, sans-serif;font-size:9px;letter-spacing:1px;line-height:13px;text-transform:uppercase;opacity:1;}
  119.  
  120. #title {position:fixed;width:178px;padding:1px;background:#000; height:15px; margin-top:130px; margin-left:-10px; text-align:center;text-indent:5px;color:#fff;font-size:13px;font-family: 'Pathway Gothic One', sans-serif;letter-spacing:3px;text-transform:uppercase;cursor:url(http://static.tumblr.com/vmteopo/DH3njhg50/help_cursor.png), crosshair;}
  121. #title:hover #menu {opacity:1;height:50px;transition:1s;}
  122.  
  123. /*  MENU POR SURDADDY, DON'T COPY.  */
  124. #menu {position:fixed; margin-top:1px;margin-left:8px; width:160px;height:0px;transition:1s ease-in;border:1px solid #000;opacity:0;background:#fff;}
  125. #menu a {transition:0.5s; width:70px;height:15px;text-transform:uppercase; float: left;color:{color:links}; line-height:16px;font-size:11px; text-align:left;font-family: 'Pathway Gothic One', sans-serif;letter-spacing:1px;border:1px solid #eee;margin-left:5px;}
  126. #menu a:hover{box-shadow:inset -70px 0px 0px {color:linkshover}; color:#fff;transition:0.5s;}
  127. #menu i {margin-left:-2px;font-size:12px;line-height:16px;color:#000;width:20px;}
  128.  
  129. #menu .l1 {transition-delay:0.2s;opacity:0;margin-top:5px;}
  130. #menu .l2 {transition-delay: 0.2s;opacity:0;margin-top:5px;}
  131. #menu .l3 {transition-delay: 0.2s;opacity:0;margin-top:5px;}
  132. #menu .l4 {transition-delay: 0.2s;opacity:0;margin-top:5px;}
  133.  
  134. #title:hover #menu .l1 {transition-delay: 0.2s;opacity:1;}
  135. #title:hover #menu .l2 {transition-delay: 0.4s;opacity:1;}
  136. #title:hover #menu .l3 {transition-delay: 0.5s;opacity:1;}
  137. #title:hover #menu .l4 {transition-delay: 0.3s;opacity:1;}
  138.  
  139. </style>
  140. <body>
  141.  
  142. <div id="side">
  143. <div id="foto"><img src="{image:foto}"></div>
  144. <div id="frase">{text:texto}</div>
  145.  
  146. <div id="title">{text:title}
  147. <div id="menu">
  148. <a class="l1" href="{text:Link1}"><i class="fa fa-home"></i>{text:Link1 Title}</a>
  149. <a class="l2" href="{text:Link2}"><i class="fa fa-comment"></i>{text:Link2 Title} </a>
  150. <a class="l3" href="{text:Link3}"><i class="fa fa-tag"></i>{text:Link3 Title}</a>
  151. <a class="l4" href="{text:Link4}"><i class="fa fa-flash"></i>{text:Link4 Title}</a>
  152. </div></div></div>
  153.  
  154. <div id="content">{block:Posts} <div class="posts">
  155.  
  156. {block:Text}
  157. <div class="box">
  158. {block:Title} <h1>{Title}</h1> {/block:Title}
  159. {Body}
  160. {block:indexpage}
  161. <div id="notes_n">
  162. <a href="{permalink}">POSTED: <span>{Month}, {DayofMonth}.</span></a>
  163. <a href="{ReblogURL}" style="float:right">REBLOG</a>
  164. </div></div>
  165. {/block:indexpage}
  166. {/block:Text}
  167.  
  168. {block:Photo}
  169. <div class="efects"></div><div class="postimage"><img src="{PhotoURL-250}"></div>
  170. {block:indexpage}
  171. <div id="notes">
  172. <a href="{ReblogURL}" title="reblog"><i class="fa fa-refresh"></i></a>
  173. <a href="{permalink}" title="{Month}, {DayofMonth}."><i class="fa fa-share-alt"></i></a>
  174. <a title="{NoteCount} Notes"><i class="fa fa-heart-o"></i></a>
  175. </div>
  176. {/block:indexpage}
  177. {/block:Photo}
  178.  
  179. {block:Photoset}
  180. {Photoset}
  181. {block:indexpage}
  182. <div id="notes">
  183. <a href="{ReblogURL}" title="reblog"><i class="fa fa-refresh"></i></a>
  184. <a href="{permalink}" title="{Month}, {DayofMonth}."><i class="fa fa-share-alt"></i></a>
  185. <a title="{NoteCount} Notes"><i class="fa fa-heart-o"></i></a>
  186. </div>
  187. {/block:indexpage}
  188. {/block:Photoset}
  189.  
  190. {block:Quote}
  191. <div class="box">
  192. <div class="quote">{Quote}<div class="source">- <b>{Source}</b></div></div>
  193. {block:indexpage}
  194. <div id="notes_n">
  195. <a href="{permalink}">POSTED: <span>{Month}, {DayofMonth}.</span></a>
  196. <a href="{ReblogURL}" style="float:right">REBLOG</a>
  197. </div></div>
  198. {/block:indexpage}
  199. {/block:Quote}
  200.  
  201. {block:Link}
  202. <div class="box">
  203. <a href="{URL}" {Target}>{Name}</a>
  204. {block:Description} {Description}{/block:Description}
  205. {block:indexpage}
  206. <div id="notes_n">
  207. <a href="{permalink}">POSTED: <span>{Month}, {DayofMonth}.</span></a>
  208. <a href="{ReblogURL}" style="float:right">REBLOG</a>
  209. </div></div>
  210. {/block:indexpage}
  211. {/block:Link}
  212.  
  213. {block:Chat}
  214. <div class="box">
  215. {block:Title}{Title}{/block:Title}
  216. {block:Lines} {block:Label} <br> <b>{Label}</b> {/block:Label} {Line} {/block:Lines}
  217. {block:indexpage}
  218. <div id="notes_n">
  219. <a href="{permalink}">POSTED: <span>{Month}, {DayofMonth}.</span></a>
  220. <a href="{ReblogURL}" style="float:right">REBLOG</a>
  221. </div></div>
  222. {/block:indexpage}
  223. {/block:Chat}
  224.  
  225. {block:Video}
  226. {Video-250}
  227. {block:indexpage}
  228. <div id="notes_n">
  229. <a href="{permalink}" title="{Month}, {DayofMonth}. {Year}"><span> <i class="fa fa-link"></i></span></a>
  230. <a href="{ReblogURL}" title="reblog"><i class="fa fa-retweet"></i></a>
  231. <a title="{NoteCount} Notes"><span><i class="fa fa-heart-o"></i></span></a>
  232. </div>
  233. {/block:indexpage}
  234. {/block:Video}
  235.  
  236. {block:Audio}
  237. <div class="box">
  238. <div id="audio">
  239. {block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}
  240. <div id="player"><div id="play">{AudioPlayerWhite}</div></div>
  241. <div id="audiott">
  242. Track: {block:TrackName}<span>{TrackName}</span>{/block:TrackName}
  243. <p>Artist: {block:Artist}<span>{Artist}</span>{/block:Artist}</p>
  244. <p>Album: {block:Album}<span>{Album}</span>{/block:Album}</p>
  245. </div></div>
  246. {block:indexpage}
  247. <div id="notes_n">
  248. <a href="{permalink}">POSTED: <span>{Month}, {DayofMonth}.</span></a>
  249. <a href="{ReblogURL}" style="float:right">REBLOG</a>
  250. </div></div>
  251. {/block:indexpage}
  252. {/block:Audio}
  253.  
  254. {block:Answer}
  255. <div class="box">
  256. <div class="fotinha"><img src="{AskerPortraitURL-16}"></div>
  257. <div class="perguntou"><a>{Asker}:</a></div>
  258. <div class="pergunta">{Question}</div>
  259. <div class="resposta">{Answer}</div>
  260. {block:indexpage}
  261. <div id="notes_n">
  262. <a href="{permalink}">POSTED: <span>{Month}, {DayofMonth}.</span></a>
  263. <a href="{ReblogURL}" style="float:right">REBLOG</a>
  264. </div></div>
  265. {/block:indexpage}
  266. {/block:Answer}
  267.  
  268. {block:PermalinkPage}
  269. <div class="box" style="border:1px solid #fff">
  270. {block:Caption}{Caption}{/block:Caption}
  271. {block:HasTags}
  272. <p><i class="fa fa-hashtag"></i> {lang:Tagged}: {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}
  273. <p>{block:Date}<i class="fa fa-clock-o"></i> {TimeAgo}, {MonthNumber}/{DayOfMonth}/{Year}.{/block:Date}
  274. <p>{block:NoteCount}<i class="fa fa-heart-o"></i> {NoteCountWithLabel}.{/block:NoteCount}
  275. <p>{block:RebloggedFrom}<i class="fa fa-share"></i> Via <a href="{ReblogParentURL}">{ReblogParentName}</a>,by <a href="{ReblogRootURL}">{ReblogRootName}</a>.{block:RebloggedFrom}
  276. {block:PostNotes}<div id="lpermalink" style="text-align:left">{PostNotes}</div>{/block:PostNotes}</div>{/block:PermalinkPage}</div>{/block:Posts}</div>
  277.  
  278. <script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script> <script src="http://static.tumblr.com/df28qmy/SHUlh3i7s/jquery.infinitescroll.js"></script> <script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script> <script type="text/javascript"> $(window).load(function () { $('#content').masonry(),
  279. $('.masonryWrap').infinitescroll({ navSelector : "div#navigation",
  280. nextSelector : "div#navigation a#nextPage", itemSelector : ".posts",
  281. bufferPx : 10000, extraScrollPx: 11000, loadingImg : "http://goo.gl/2RmWUx", loadingText : "<i> </i>",
  282. },function() { $('#content').masonry({ appendedContent: $(this) }); } ); }); </script> {block:IndexPage}<div class="column navigation" id="navigation">{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}" class="navigate"> {/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}{block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}{/block:Pagination}</div>{/block:IndexPage}
  283.  
  284. <div id="creditos">
  285. <a href="http://surdaddy.tumblr.com" title="by Surdaddy ">THEME</a>
  286. </div>
  287.  
  288. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement