API tools faq
paste
itsGabriela

theme base

itsGabriela
Apr 27th, 2012
528
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 14.75 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.  
  3.  
  4.  
  5.         <!--     theme by S A T I S F F I E D tumblr     -->
  6.  
  7.  
  8.  
  9. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  10. <head profile="http://gmpg.org/xfn/11">
  11.  
  12. <!-- aqui são as coisinhas que você altera no appearance, DEIXEI ISSO PARA FACILITAR pois a grande maioria dos detalhes (incluindo fonte do theme, cores, quantas colunas, imagens e links) estão aqui para serem costumizados de forma mais fácil   -->
  13.  
  14.     <meta name="color:background" content="#eeeeee"/>
  15.     <meta name="color:text" content="#000000" />
  16.     <meta name="color:link" content="#000000" />
  17.     <meta name="color:scroll" content="#000000" />
  18.     <meta name="color:sidebar" content="#ffffff"/>
  19.     <meta name="color:entry" content="#ffffff"/>
  20.    
  21.     <meta name="if:two columns" content=""/>
  22.     <meta name="if:three columns" content=""/>
  23.     <meta name="if:four columns" content=""/>
  24.    
  25.     <meta name="if:show caption" content=""/>
  26.    
  27.     <meta name="select:font" content="consolas" title="consolas"/>
  28.     <meta name="select:font" content="calibri" title="calibri"/>
  29.  
  30.     <meta name="image:sidebar" content=""/>
  31.     <meta name="image:background" content="" />
  32.  
  33.     <meta name="text:link 1" content="" />
  34.     <meta name="text:link 1 title" content="" />
  35.     <meta name="text:link 2" content="" />
  36.     <meta name="text:link 2 title" content="" />
  37.     <meta name="text:link 3" content="" />
  38.     <meta name="text:link 3 Title" content="" />
  39.     <meta name="text:link 4" content="" />
  40.     <meta name="text:link 4 title" content="" />
  41.  
  42.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  43.     <title>{Title}</title>
  44.     <link rel="shortcut icon" href="{Favicon}" />
  45.  
  46. <!--    estes 3 códigos abaixo são os códigos pra colagem infinita funcionar e para os posts ficarem alinhados, recomendo manter o theme com rolagem infinita porque tirando algum desses códigos pode, justamente, fazer com que os posts se desalinhem     -->
  47.  
  48. <script type="text/javascript" src="http://static.tumblr.com/5u1fog0/z2jnb4r5z/jquery.js"></script>
  49.  
  50. <script type="text/javascript" src="http://static.tumblr.com/qkog7w0/bXUodntpq/scroll.txt"></script>
  51.  
  52. <script type="text/javascript"> $(window).load(function(){var $wall = $('#posts');$wall.imagesLoaded(function(){$wall.masonry({ itemSelector: '#entry', isAnimated : true });}); $wall.infinitescroll({navSelector : 'div#navigation', nextSelector : 'div#navigation a#nextPage', itemSelector : '#entry', bufferPx : 11000, debug : false, errorCallback: function() { $('#infscr-loading').fadeOut('normal'); }}, function( newElements ) {var $newElems = $( newElements ); $newElems.hide(); $newElems.imagesLoaded(function(){ $wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('normal');} );});}); $('#posts').show(500); }); </script>
  53.  
  54. </head>
  55.  
  56. <style type="text/css">
  57.  
  58. /***       essa parte configura o tamanho, cor e a fonte do theme, a cor e imagem de fundo      ***/
  59.                        
  60. body {color:{color:text}; background-color:{color:background}; background-image: url('{image:Background}'); background-attachment:fixed; font-family:{select:font}; font-size:10px; line-height:110%; text-align:justify}
  61.  
  62. /***       essa parte configura os links, a cor normal e de quando o mouse passa em cima, recomendo não alterar nada porque as cores você pode customizar nas opções do theme      ***/
  63.                        
  64. a:link, a:active, a:visited{color: {color:link}; text-decoration:none}
  65. a:hover{color:{color:link}; background-color: transparent;}
  66.  
  67. /***      essa parte é correspondente a sidebar (#sbar) e a tudo que vai dentro dela; aqui você configura de acordo com o que você quiser nela e inclui os códigos que quiser; deixei alguns simples pra que você possa ter uma referência; o HEIGHT:AUTO signficia que ela não tem um limite de tamanho, ou seja, aumenta ou diminui dependendo do que você colocar nela; para mudar isso substitua o AUTO por algum número + px no final      ***/
  68.  
  69. #sbar {width:250px; height:auto; left:53px; top:150px; position:fixed; background-color: {color:sidebar}; border-right:0px solid {color:sidebarborder}; padding:5px; overflow:hidden;}
  70.  
  71. #link {margin-bottom:2px; font-family:{select:font}; text-align:; font-size:9px; text-transform:uppercase; padding:5px;}
  72. #link a{font-size:9px; text-transform:uppercase; color:{color:link};}
  73. #link a:hover{color:{color:link}}
  74.  
  75. #title {font-family: georgia; font-size:16px; text-transform:lowercase; letter-spacing:0px; margin-bottom:3px; margin-top:0px; color:{color:text}}
  76.  
  77. #stext {font-size:10px;line-height:9px; height:auto; text-align:justify; background-color:; padding:5px; overflow:hidden; color:{color:text}}
  78.  
  79. /***       essa parte fala dos posts, mais especificamente onde eles aparecem, MUITO CUIDADO AO MEXER EM ALGO AQUI, e eu recomendo que você mude somente os números de onde diz left:___px (que é a distância da esquerda pra direita) e/ou top:___px (que é a distância de cima pra baixo), porque a quantidade de colunas é customizável nas opções do theme, logo, não há muita coisa para mudar        ***/
  80.  
  81. #posts {text-align:left; width: 400px; background-color: transparent; padding: 3px; margin-bottom:10px; text-align: none; position: relative; left:350px; top:15px;
  82.  
  83. {block:iftwocolumns} width:560px; margin-left:0px; {/block:iftwocolumns}
  84.  
  85. {block:ifthreecolumns} width:830px; margin-left:0px; {/block:ifthreecolumns}
  86.  
  87. {block:iffourcolumns} width:1100px; margin-left:0px; {/block:iffourcolumns}}
  88.  
  89. /***      essa parte aqui também fala dos posts, porém de cada coluna em especial, caso você queira mudar o tamanho delas mude o width:250px (pra quando forem 2 até 4 colunas) ou o width:400px quando quiser um tamanho diferente com 1 só coluna sendo usada; os margin-left e margin-bottom são referentes ao espaço de uma coluna pra outra, então mude se você quiser os posts mais espaçados    ***/
  90.  
  91. #entry{position:relative; float:left; display:inline-block; width:400px;  padding:5px; margin-bottom:5px; overflow:hidden; background-color: {color:entry};
  92.  
  93. {block:iftwocolumns} width:250px; margin-left:5px;  {/block:iftwocolumns}
  94.  
  95. {block:ifthreecolumns} width:250px; margin-left:5px;  {/block:ifthreecolumns}
  96.    
  97. {block:iffourcolumns} width:250px; margin-left:5px;  {/block:iffourcolumns}}
  98.  
  99. /***      essa parte fala das imagens dos posts, mude somente se você mudar a witdh dos posts, pra que as fotos fiquem no mesmo tamanho; IMPORTANTE: os photosets não acompanham qualquer tamanho dos posts, e o tumblr só aceita photosets com 250, 400, 500 ou 700px, então procure por {Photoset-250} aqui mesmo no theme e troque o 250 pelos outros valores caso seus posts tenham um tamanho maior   ***/
  100.  
  101. #entry img {max-width:400px; height:auto;
  102.  
  103. {block:iftwocolumns} max-width:250px; height:auto; {/block:iftwocolumns}
  104.  
  105. {block:ifthreecolumns} max-width:250px; height:auto; {/block:ifthreecolumns}
  106.  
  107. {block:iffourcolumns} max-width:250px; height:auto; {/block:iffourcolumns}}
  108.  
  109. /***       esse é o comando para os títulos dos posts, mude de acordo com o que quiser      ***/
  110.  
  111. h1{color:{color:text}; font-family: {select:font}; font-size:15px; letter-spacing:0px; font-weight:normal; line-height:14px; text-transform: none; margin:0px; padding:0px; text-align:left; margin-top:0px; margin-bottom:8px}
  112. h1 a:hover {text-transform: none;}
  113.  
  114. /***       recomendo não mexer aqui        ***/
  115.                        
  116. .source{display:none}
  117.  
  118. p{margin-top:5px; margin-bottom:5px}
  119. blockquote {padding:0px; padding-left:5px; margin-left:0px; border-left:2px solid {color:text};}
  120.  
  121. /***       essa parte configura o estilo dos posts de áudio, mexa se entender o código e quiser que ele apareça de modo diferente       ***/
  122.  
  123. .audio{opacity: 1.0; position:relative; overflow:hidden; min-height:20px; font-size: 10px; font-family:{select:font}}
  124.  
  125. .player{position:absolute; z-index:3; background:#fff; margin-top:46px; margin-left:63px; opacity:0.75; filter:alpha(opacity=75); border:0px #000000 solid; border-radius: 100px;}
  126.  
  127. .audioplayer{background: #fff; border: 0px solid #f8f8f8; width:207px; height:19px; overflow:hidden; padding:5px; padding-bottom:13px; margin-right:5px; margin-top: 5px;}
  128.  
  129. .audioinfo{margin-top: 0px; margin-left:0px; line-height:11px; font-family: {select:font}; font-size:10px!important; font-style: normal;}
  130.  
  131. .audiocaption{margin-top:7px;margin-bottom:px;}
  132. .audiocaption img{max-width:80px!important;}
  133.  .audiocaption blockquote img{max-width:310px!important;}
  134.  
  135. .audiocaption blockquote blockquote img{max-width:310px!important;}
  136.  
  137. /***       aqui em .quote você tem a forma com que os quotes aparecem, em seguida a forma com que os chats aparecem, recomendo não mexer também      ***/
  138.  
  139. .quote {font-family: {select:font}; text-align:left; font-size: 10px; padding: 3px; line-height:10px;}
  140. .quotesource {text-align: left; text-transform: none; margin-bottom: 5px;}
  141. .quotesource a, a:hover{text-transform: none;}
  142.  
  143. .user_1 .label {color:{color:text}; font-weight:bold}
  144. .user_2 .label {color:{color:text}; font-weight:bold}
  145. ul.chat, .chat ol, .chat li {list-style:none; margin:0px; padding:0px;}
  146.  
  147. /***       esse é o código que tira a contagem das páginas na rolagem infinita, portanto NÃO REMOVA       ***/
  148.  
  149. .tumblrAutoPager_page_separator, .tumblrAutoPager_page_info {display: none;}
  150.  
  151. /***      essa parte é sobre os notes dos posts, configure se quiser mudar algo ou troque o código caso queira usar outro      ***/
  152.    
  153. .notes {font-family: {select:font}; text-align: left; line-height: 15px; letter-spacing:px; text-transform:none; font-size:10px; opacity:1; margin-bottom:px;}
  154. .notes a:hover{text-transform:none}
  155.  
  156. /***       esse código é dos notes dos posts quando você abre o permalink dele; esse código é bem básico na verdade, e só troque se souber mexer nos códigos direitinho       ***/
  157.  
  158. .permalinkposts {font-family: {select:font}; font-size:10px; line-height:11px; text-transform:lowercase; padding:3px;;}
  159.  
  160. ol.permalinknotes {margin-top:5px; padding:5;}
  161. ol.permalinknotes li {float:left;}
  162.  
  163. </style>
  164. </head>
  165.  
  166. <body>
  167.  
  168. <!--    aqui fica a sidebar e tudo que vai nela, mude algo somente de acordo com o que você colocar no css do theme    -->
  169.  
  170. <div id="sbar">
  171.  
  172. <div id="link">
  173. <div id="title">{title}</div>
  174. <a href="{text:link 1}">{text:link 1 title}</a>&nbsp;
  175. <a href="{text:link 2}">{text:link 2 title}</a>&nbsp;
  176. <a href="{text:link 3}">{text:link 3 title}</a>&nbsp;
  177. <a href="{text:link 4}">{text:link 4 title}</a>&nbsp;
  178.  
  179. <a href="URL DO SEU TUMBLR" title="theme by SEU TUMBLR, base by satisffied">THEME</a></div>
  180.  
  181. <div id=stext>{description}</div>
  182.  
  183. </div>
  184.  
  185. <div id="posts">
  186.  
  187. <!--    esse também é um código pra rolagem infinita funcionar, só mexa/retire caso coloque paginação tradicional no theme    -->
  188.  
  189. {block:IndexPage}<div class="column navigation" id="navigation">
  190. {block:Pagination}
  191. {block:PreviousPage}<a href="{PreviousPage}" class="navigate">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}
  192. {block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}{/block:Pagination}
  193. </div>{/block:IndexPage}
  194.  
  195. <!--    aqui começam os posts, cuidado ao mexer e observe bem qual {block} você está mexendo (photo, quote, link, etc)    -->
  196.  
  197. {block:Posts}<div id="entry">
  198.  
  199. {block:Quote}
  200. <div class="quote">"{Quote}"</div>
  201. {block ource}<div class="quotesource"> — <b>{Source}</b></div>
  202. {/block:source}
  203.  
  204. {/block:Quote}
  205.  
  206. {block:Title}<p><center><h1>{Title}&nbsp;</h1></center>{/block:Title}
  207. <p>{block:Text}{Body}
  208.  
  209. {/block:Text}
  210.  
  211. {block:Link}<p><center><h1><a href="{URL}" class="link" {Target}>{Name}&nbsp;</h1></center></a>
  212. <P>{block:Description}{Description}{/block:Description}
  213.  
  214. {/block:Link}
  215.  
  216. {block:Photo}
  217. <div style=margin-top:-1px>
  218. {LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
  219. {block:IfShowCaption}{Caption}{/block:IfShowCaption}
  220. </div>
  221.  
  222. {/block:Photo}
  223.  
  224. {block:Photoset}
  225. <div style=margin-top:-1px;>
  226. {Photoset-250}</div>
  227. {block:IfShowCaption}{Caption}{/block:IfShowCaption}
  228.  
  229. {/block:Photoset}
  230.  
  231. {block:Chat}
  232. <ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul><p>
  233.  
  234. {/block:Chat}
  235.  
  236. {block:Video}
  237. <div style=margin-top:-1px>
  238. {Video-250}
  239. {block:IfShowCaption}{Caption}{/block:IfShowCaption}
  240. </div>
  241.  
  242. {/block:Video}
  243.  
  244. {block:Answer}<div style=margin-top:-4px;>
  245. <b>{Asker}</b> asked:<br><i>{Question}</i>
  246. {Answer}</div>
  247.  
  248. {/block:Answer}
  249.  
  250. <div class="source">{block:ContentSource}<a href="{SourceURL}">{lang:Source}:{block:SourceLogo}
  251.       <img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  252.         {/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}</a>
  253. {/block:ContentSource}</div>
  254.  
  255. {block:Audio}
  256.  
  257. <div class="audio"><div class="audioinfo"><b>Title:</b> <span{block:TrackName} style="display: none;"{block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}<br /><b>Artist:</b> <span{block:Artist} style="display: none;"{block:Artist}>Unknown</span>{block:Artist}{Artist}{/block:Artist}<br /><b>Album:</b> <span{block:Album} style="display: none;"{block:Album}>Unknown</span>{block:Album}{Album}{/block:Album}<br />{block:ExternalAudio}<b>Download:</b> <a href="{ExternalAudioURL}">Click Here</a><br />{/block:ExternalAudio}<b>Played:</b> {FormattedPlayCount}
  258. <div class="audioplayer">{AudioPlayerWhite}</div>
  259. </div>
  260. <div class="audiocaption">{block:Caption}{Caption}{/block:Caption}</div></div>
  261.  
  262. {/block:Audio}
  263.  
  264. <!--    essa parte é sobre os notes dos posts    -->
  265.  
  266. {block:IndexPage}
  267. <div class="notes">
  268. <a href="{Permalink}">{NoteCountWithLabel}</a> / <a href="{ReblogUrl}" target="_blank">reblog</a>
  269. </div>{/block:IndexPage}
  270.  
  271. <!-- esse código é dos notes dos posts quando você abre o permalink dele -->
  272.  
  273. {block:PermalinkPage}<br>
  274. {block:Date}
  275. <div class="permalinkposts">
  276. <div style="margin-top:0px;">
  277. {block:HasTags}tags:
  278. {block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}
  279. <br>{/block:HasTags}
  280. posted {TimeAgo} {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}
  281. {block:RebloggedFrom}<br>
  282. via <a href="{ReblogParentURL}">{ReblogParentName}</a> · by <a href="{ReblogRootURL}">{ReblogRootName}</a>
  283. {/block:RebloggedFrom}
  284.  
  285. {block:PostNotes}<div class="permalinknotes">{PostNotes}</div>{/block:PostNotes}
  286.  
  287. </div>
  288. </div>
  289. {/block:Date}
  290. {/block:PermalinkPage}
  291.    
  292. </div>
  293. {/block:Posts}</div>
  294.  
  295. <!--    parte do código que remove aquele (source, via) do theme   -->
  296.  
  297. <div style="display:none">{block:RebloggedFrom}(via ;<a href="{ReblogParentURL}"title="{ReblogParentTitle}">{ReblogParentName}</a>){/block:RebloggedFrom}</div>
  298.  
  299. </body>
  300. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!