API tools faq
paste
Advertisement
Thais-

The Grid Theme - by Thais

Thais-
Jan 13th, 2013
1,138
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.06 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4.  
  5.  
  6. <!--- Theme 4 "The Grid Theme" por Thais Carvalho (artistadesconhecida.tumblr.com); Formato por Bianca Pereira (biibis.tumblr.com) POR FAVOR não copie e não retire os créditos. NÃO DESPREZE nosso trabalho. Obrigada! :3 --->
  7.  
  8. <meta name="image:background" content="http://static.tumblr.com/a3rkdsa/hkTmgktmk/19.png"/>
  9. <meta name="text:Link1" content="http://" />
  10.  
  11.  
  12. <title>{Title}</title>
  13. <link rel="shortcut icon" href="http://static.tumblr.com/a3rkdsa/zpWmgktpz/star.png">
  14. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15. {block:Description}
  16. <meta name="description" content="{MetaDescription}" />
  17. {/block:Description}
  18.  
  19. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
  20.  
  21. {block:IndexPage}
  22.  
  23. <script src="http://masonry.desandro.com/js/jquery-1.7.1.min.js"></script>
  24. <script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
  25. <script src="http://masonry.desandro.com/js/jquery.infinitescroll.min.js"></script>
  26.  
  27. <script>
  28. $(function(){
  29. var $container = $('#conteudo');
  30. $container.imagesLoaded(function(){
  31. $container.masonry({
  32. itemSelector: '.posts',
  33. columnWidth: 270
  34. });
  35. });
  36. $container.infinitescroll({
  37. navSelector : "div#navigation",
  38. nextSelector : "div#navigation a#nextPage",
  39. itemSelector : '.posts',
  40. loading: {
  41. finishedMsg: ' ',
  42. img: ' '
  43. }
  44. },
  45. function( newElements ) {
  46. var $newElems = $( newElements ).css({ opacity: 0 });
  47. $newElems.imagesLoaded(function(){
  48. $newElems.animate({ opacity: 1 });
  49. $container.masonry( 'appended', $newElems, true );
  50. });
  51. }
  52. );
  53.  
  54. });
  55. </script>
  56.  
  57. {/block:IndexPage}
  58.  
  59. <link href='http://fonts.googleapis.com/css?family=Sacramento&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  60.  
  61. </head>
  62.  
  63. <!-- início do css -->
  64. <style type="text/css">
  65.  
  66. /* CORPO */
  67. body {background: url("{image:background}") fixed #f4f4f4; text-align: justify; padding: 0; line-height: 150%; color: #303030 ; height: 100%; font: normal 12px 'tahoma';}
  68.  
  69. /* ESTRUTURAS */
  70. #pagina {width: 810; display: block; margin: 0 auto; text-align: center; overflow: hidden;}
  71. #conteudo {width: 810px; display: block; margin: 0 auto; text-align: justify; overflow: hidden;}
  72. #sidebar {width: 800px; display: block; margin: 0 auto; text-align: justify; overflow: hidden;}
  73. #menu {width: 784px; display: block; margin: 0 auto; text-align: justify; overflow: hidden;}
  74.  
  75. /* CAIXAS */
  76. .box {background: #FFF; display: block; text-align: center; overflow: hidden; padding: 5px; margin-bottom: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
  77. .box2 {background: #FFF; display: block; text-align: justify; overflow: hidden; padding: 5px; margin-bottom: 10px; margin-left: 10px; float: right; width: 500px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
  78. .posts {float: left; width: 260px; overflow: auto; margin-left: 5px;}
  79.  
  80.  
  81. /* SELEÇÃO COLORIDA */
  82. ::-moz-selection {color: #fff; background: #bbb;}
  83. ::selection {color: #fff; background: #556270;}
  84.  
  85. /* TÍTULOS */
  86. h1 {font: bold 40px 'sacramento', cursive; color: #fff ; text-align: center; margin: 0;}
  87. h2 {font: 30px 'sacramento', cursive; color: #000 ; text-align: justify; margin: 0;}
  88.  
  89. /* NEGRITO, ITALICO E SUBLINHADO */
  90. b, strong {color: #556270; text-decoration: none;}
  91. s, strike {color: #556270;}
  92. i, em {color: #556270; text-decoration: none;}
  93. u, underline {text-decoration: none; border-bottom: 1px dotted #aaa;}
  94.  
  95. /* LINKS */
  96. a:link {color: #6b6b6b; text-decoration: none;}
  97.  
  98. a:actived {color: #6b6b6b; text-decoration: none;}
  99.  
  100. a:visited {color: #6b6b6b; text-decoration: none;}
  101.  
  102. a:hover {color: #999999;}
  103.  
  104. /* REBLOGUE E DATA DO POST */
  105. .reblogue {float: right;}
  106. .info_post {display: block; font: 6pt 'tahoma'; letter-spacing: 1px; background: #c0c0c0; padding: 2px; text-transform: uppercase;}
  107. .info_post a {color: #3d3d3d;}
  108.  
  109. /* BLOCKQUOTE */
  110. blockquote {border-left: 3px solid #aaa; font: normal 13px calibri; padding:3px; background: #f4f4f4;}
  111.  
  112. /* PRE */
  113. pre {margin: 10px 0 10px 0; padding: 10px; background-color: #f0f0f0; font: 11px 'courier'; overflow: auto;}
  114.  
  115. /*** Barra de Rolagem Personalizada True Html – Nathália (girls-idiots) modificado por Thais***/
  116.  
  117. ::-webkit-scrollbar-thumb:vertical {background-color: #000; height: 50px;}
  118.  
  119. ::-webkit-scrollbar-thumb:horizontal {background-color: #000; height: 10px;}
  120.  
  121. ::-webkit-scrollbar {height: 5px; width: 5px; background-color: #fff;}
  122.  
  123.  
  124. /* LISTINHAS */
  125. ul {list-style-type:circle;}
  126. .linha {padding: 2px; border-bottom: 1px solid #f4f4f4;}
  127.  
  128. /* CAIXA DA ASK */
  129. .bubble {background: #f8f8f8; padding: 10px; width: 230px; float: right; margin-bottom: 5px;}
  130. .aborde {padding: 3px; background-color: #fff; border: 1px solid #fff; margin-right: 5px !important; margin: -5px;}
  131.  
  132. /* QUOTE */
  133. .quote {font: normal 27px 'sacramento', cursive; margin-top: -45px; margin-left: 30px; text-align: left; color: #000}
  134. .aspa {font-size: 50px; font-family: Georgia; line-height: 40px; color: #fff; margin-bottom: 17px; text-align: left;}
  135. .source {margin: 0; font-size: 10px; text-align: right; text-transform: none;}
  136.  
  137. /* CHAT */
  138. .chat {background: #f0f0f0; margin: 0;}
  139. .chat .chat1 {margin-left: 0px;}
  140. .chat .chat1 .chat2 {background: #f8f8f8; margin-bottom: 1px; padding: 4px 5px 4px 5px;}
  141. .chat .chat1 .chat2.even {color: #aaa; background: #f0f0f0;}
  142. .chat .chat1 .chat2 span {font-weight: bold;}
  143.  
  144. /* PERMALINK DOS POSTS */
  145. .perma {border-left: 4px solid #aaa; display:block; text-indent:5px; vertical-align:middle; margin-bottom : 1px; background:#f4f4f4; line-height: 180%;}
  146.  
  147. /* NOTES */
  148. ol.notes {display:block; border-bottom: 1px solid #fff; text-decoration: none; background: #f4f4f4; list-style-type: none; font-size: 10px;}
  149. ol.notes li.note {border-bottom: solid 1px #fff; padding: 4px;}
  150. ol.notes li.note img.avatar {width: 12px; padding: 2px; background: #fff; margin-bottom: -4px;}
  151. ol.notes li.note span.action {font-weight: none;}
  152. ol.notes li.note .answer_content {font-weight: normal;}
  153. ol.notes li.note blockquote {display: none;}
  154. ol.notes li.note blockquote a {text-decoration: none;}
  155. ol {list-style-position: inside; -webkit-padding-start: 0px;}
  156.  
  157. /***Efeito imagens por Thais***/
  158. .efeitoimagem img{
  159. opacity: 0.6;
  160. -webkit-transition: all 0.6s linear;
  161. -moz-transition: all 0.6s linear;
  162. transition: all 0.6s linear;
  163. margin-bottom:-2px;
  164. width: 410px;
  165. -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
  166. }
  167.  
  168.  
  169. .efeitoimagem img:hover {
  170. opacity: 1;
  171. -webkit-transition: all 0.6s linear;
  172. -moz-transition: all 0.6s linear;
  173. transition: all 0.6s linear;
  174. }
  175.  
  176. /* Creditos por Thais*/
  177. #credito {
  178. font-family: verdana;
  179. font-size: 10px;
  180. text-transform: uppercase ;
  181. font-weight: none;
  182. letter-spacing: 0px;
  183. position: fixed;
  184. bottom: 5px;
  185. right: 5px;
  186. color: #000
  187. }
  188.  
  189. #credito a {
  190. color: #000;
  191. text-decoration: none;
  192. }
  193.  
  194.  
  195.  
  196. /* PAGINAÇÃO */
  197. #infscr-loading{display: none;}
  198.  
  199. </style>
  200. <!-- fim do css -->
  201.  
  202. <body>
  203.  
  204. <!-- início da página -->
  205. <div id="pagina">
  206.  
  207. <!-- início da sidebar -->
  208. <div id="sidebar">
  209. <h1><big>{title}</big></h1>
  210.  
  211. <div class="box">
  212.  
  213. {Description}
  214.  
  215. </div>
  216. <center><a href="/home"><img src="http://static.tumblr.com/a3rkdsa/2avmgkqdq/icons_01.png" /></a>
  217. <a href="/ask"><img src="http://static.tumblr.com/a3rkdsa/nw0mgkqge/icons_02.png" /></a>
  218. <a href="/archive"><img src="http://static.tumblr.com/a3rkdsa/lxZmgkqh9/icons_11.png" /></a>
  219. <a href="{text:link1}"><img src="http://static.tumblr.com/a3rkdsa/KRImgkqj8/icons_94.png" /></a></center>
  220.  
  221.  
  222. </div>
  223. <!-- fim da sidebar -->
  224.  
  225. <div id="menu">
  226.  
  227.  
  228.  
  229. </div>
  230.  
  231. <!-- início do conteúdo -->
  232. <div id="conteudo">
  233.  
  234.  
  235. <!-- pagina com tag -->
  236. {block:TagPage}
  237. <div class="box">
  238. <h2>Posts tagged "<a href="{TagURL}">{Tag}</a>"</h2></div>
  239. {/block:TagPage}
  240.  
  241. {block:Posts}
  242.  
  243. <div class="posts">
  244.  
  245. <div class="box">
  246.  
  247. <!-- text posts -->
  248. {block:Text}
  249. {block:Title}
  250. <h2>{Title}</h2>
  251. {/block:Title}
  252. {Body}
  253. {/block:Text}
  254.  
  255.  
  256. <!-- answer posts -->
  257. {block:Answer}
  258. <div class="bubble">
  259. <img src="{AskerPortraitURL-24}" align="left" class="aborde">
  260. <b>{Asker}</b>: {Question}
  261. </div>
  262. {Answer}
  263. {/block:Answer}
  264.  
  265.  
  266. <!-- link posts -->
  267. {block:Link}
  268. <a href="{URL}" onMouseover="ddrivetip('Clique aqui!')"; onMouseout="hideddrivetip()"><h2>{Name}</h2></a>
  269. {block:Description}{Description}{/block:Description}
  270. {block:Link}
  271.  
  272.  
  273. <!-- photo posts -->
  274. {block:Photo}
  275. <center><div class="efeitoimagem">
  276. <img src="{PhotoURL-250}" width="250px" style="max-width: 250px;"></div>
  277. </center>
  278. {block:Caption}{Caption}{/block:Caption}
  279. {/block:Photo}
  280.  
  281.  
  282. <!-- photoset posts -->
  283. {block:Photoset}<div class="efeitoimagem">
  284. <center>{Photoset-250}</center></div>
  285. {block:Caption}{Caption}{/block:Caption}
  286. {/block:Photoset}
  287.  
  288.  
  289. <!-- quote posts -->
  290. {block:Quote}
  291. <b class="aspa">“</b>
  292. <div class="quote"> ❝{Quote}❞</div>
  293. {block:Source} <div class="source"> — {Source} </div> {/block:Source}
  294. {/block:Quote}
  295.  
  296.  
  297. <!-- chat posts -->
  298. {block:Chat}
  299. {block:Title}<h1>{Title}</h1>{/block:Title}
  300. <div class="chat"> <div class="chat1">
  301. {block:Lines} <div class="chat2 {Alt}"> {block:Label}
  302. <span>{Label}</span> {/block:Label} {Line}</div> {/block:Lines}
  303. </div> </div>
  304. {/block:Chat}
  305.  
  306.  
  307. <!-- audio posts -->
  308. {block:Audio}
  309.  
  310. <div style="float:center; margin-top: 6px;">
  311. <center>{AudioPlayerBlack}</center>
  312.  
  313. <center><b>{PlayCount} plays</b></center>
  314.  
  315. {block:ExternalAudio}(<a href="{ExternalAudioURL}">download!</a>)
  316. {/block:ExternalAudio}</div>
  317.  
  318. {block:Caption}{Caption}{/block:Caption}
  319. {/block:Audio}
  320.  
  321.  
  322.  
  323. <!-- video posts -->
  324. {block:Video}
  325. <center>{Video-500}</center>
  326. {block:Caption}{Caption}{/block:Caption}<br />
  327. {/block:Video}
  328.  
  329. <!-- info dos posts -->
  330. {block:IndexPage}
  331. <div class="info_post">
  332.  
  333. <a href="{Permalink}" title="permalink">{DayOfWeekNumber}/{MonthNumberWithZero}/{ShortYear}</a> <small>•</small> <a href="{Permalink}">{12Hour}:{Minutes} {AmPm}</a>
  334. <div class="reblogue"><a href="{reblogurl}" target="_blank">reblog</a></div>
  335.  
  336. </div>
  337. {/block:IndexPage}
  338. </div>
  339.  
  340. </div>
  341.  
  342. <!-- permalink dos posts -->
  343. {block:PostNotes}
  344.  
  345. <div class="box2">
  346. <div class="perma"> <img src="http://static.tumblr.com/wa79tuo/LApm1iuqc/user.png"> {block:RebloggedFrom}Via <a href="{ReblogParentURL}">{ReblogParentName}</a>, original de <a href="{ReblogRootURL}">{ReblogRootName}</a> {/block:RebloggedFrom} {block:ContentSource}<a href="{SourceURL}" target="blank">®</a>{/block:ContentSource}</div>
  347. <div class="perma"> <img src="http://static.tumblr.com/wa79tuo/3OKm1iuvh/clock.png"> {DayOfMonth},<b> {Month}</b> de {Year}, às {12Hour}:{Minutes} {AmPm} </div>
  348. <div class="perma"> <img src="http://static.tumblr.com/wa79tuo/YzBm1iuyx/tag.png"> {block:HasTags}{/block:HasTags} {block:HasTags} {block:Tags} #<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags} </div>
  349. <div class="perma"> <img src="http://static.tumblr.com/wa79tuo/MiZm1iv2y/heart.png"> {NoteCountwithLabel} </div></div>
  350.  
  351. <div class="box2">{PostNotes}</div>
  352.  
  353. {/block:PostNotes}
  354.  
  355. {/block:Posts}
  356.  
  357. {block:IndexPage}
  358. <div class="column navigation" id="navigation">
  359. {block:Pagination}
  360. {block:PreviousPage}<a href="{PreviousPage}" class="navigate">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}
  361. {block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}{/block:Pagination}
  362. </div>
  363. {/block:IndexPage}
  364.  
  365. </div>
  366.  
  367. </div>
  368.  
  369. </div>
  370. <!-- fim do conteúdo -->
  371.  
  372. </div>
  373. <!-- fim da página -->
  374.  
  375.  
  376. <!-- DO NOT REMOVE THIS -->
  377. <div id="credito">created by <a href="http://artistadesconhecida.tumblr.com"><img src="http://static.tumblr.com/a3rkdsa/tsWmg0x0n/mail-4.png" /></a>
  378. and <a href="http://biibis.tumblr.com"><img src="http://static.tumblr.com/a3rkdsa/G9Bmgkscq/plus.png" /></a>
  379.  
  380.  
  381. </div>
  382.  
  383.  
  384.  
  385.  
  386. </body>
  387. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!