API tools faq
paste
Advertisement
EllenMaty

Elly's Base Code v2 (Fixed Sidebar) - Summarized

EllenMaty
Oct 25th, 2014
288
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.81 KB | None | 0 0
raw download clone embed print report
  1. <!-- BASE CODE BY ELLY-THEMES | elly-themes.tumblr.com | KEEP THIS CREDITS -->
  2.  
  3. <html lang="en">
  4.  
  5. <head>
  6.  
  7. <!-- Título -->
  8. <title>{Title}</title>
  9.  
  10. <!-- Favicon -->
  11. <link rel="shortcut icon" href="{Favicon}">
  12.  
  13. <!-- S-M-T Tooltip Script -->
  14. <link href="http://static.tumblr.com/3l2jcs4/NYMn4n79a/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  15. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  16. <script src="http://static.tumblr.com/3l2jcs4/209n1fe9k/jquery.style-my-tooltips.js"></script>
  17. <script>
  18. (function($){
  19. $(document).ready(function(){
  20. $("[title]").style_my_tooltips({
  21. tip_follows_cursor:true,
  22. tip_delay_time:100,
  23. tip_fade_speed:100,
  24. attribute:"title"
  25. });
  26. });
  27. })(jQuery);
  28. </script>
  29.  
  30. <!-- BASE CODE BY ELLY-THEMES | elly-themes.tumblr.com | KEEP THIS CREDITS -->
  31.  
  32. <style type="text/css">
  33.  
  34. body { /* Estilo geral */
  35. background-color: #eee;
  36. background-attachment: fixed;
  37. font-family: arial;
  38. font-size: 13px;
  39. color: #757575;
  40. background-image: url('http://40.media.tumblr.com/5085c1a54a7a1224dd3b293b78cf944e/tumblr_n7gg1ehJbh1rmzx9io3_250.png');
  41. }
  42.  
  43. a { /* Links */
  44. color: #888;
  45. text-decoration: underline;
  46. }
  47.  
  48. a:hover { /* Links Hover */
  49. color: #ccc;
  50. }
  51.  
  52. #all_content { /* Caixa que abriga a sidebar e os posts */
  53. margin: auto;
  54. width: 1059px;
  55. }
  56.  
  57. #posts_content {
  58. /* Caixa que abriga os posts */
  59. {block:indexpage} width: 704px; {/block:indexpage}
  60. {block:permalinkpage} width: 602px; {/block:permalinkpage}
  61. margin-left: 300px;
  62. }
  63.  
  64. .entry { /* Post em si */
  65. float: left;
  66. text-align: left;
  67. {block:indexpage} width: 250px; {/block:indexpage}
  68. {block:permalinkpage} width: 500px; {/block:permalinkpage}
  69. background-color: #fff;
  70. box-shadow: 5px 5px 0px #aaa;
  71. border: 1px solid #aaa;
  72. padding: 20px;
  73. margin: 30px;
  74. }
  75.  
  76. .entry img { /* Estilo da imagem do post */
  77. max-width: 100%;
  78. }
  79.  
  80. .entry li { /* Estilo da lista dos posts */
  81. margin-left: -15px;
  82. list-style-type: square;
  83. }
  84.  
  85. .pagination { /* Paginaзгo */
  86. display: none;
  87. }
  88.  
  89. blockquote { /* Estilo da blockquote */
  90. margin: 0px;
  91. border-left: 1px solid #ccc;
  92. padding-left: 10px;
  93. margin-left: 10px;
  94. }
  95.  
  96. .posts_title { /* Tнtulo do Post */
  97. text-align: center;
  98. font-size: 15px;
  99. color: #fff;
  100. background-color: #aaa;
  101. border: 1px solid #888;
  102. padding: 20px;
  103. font-weight: bold;
  104. }
  105.  
  106. .posts_title_link a { /* Tнtulo do Post */
  107. text-align: center;
  108. font-size: 15px;
  109. color: #fff;
  110. background-color: #aaa;
  111. border: 1px solid #888;
  112. padding: 20px;
  113. font-weight: bold;
  114. display: block;
  115. }
  116.  
  117. .posts_title_link a:hover {
  118. color: #ddd;
  119. }
  120.  
  121. .permalink_box { /* Caixa que abriga os links das notas e do reblog */
  122. text-align: center;
  123. border-top: 1px solid #aaa;
  124. margin-top: 10px;
  125. padding-top: 10px;
  126. color: #ccc;
  127. }
  128.  
  129. #sidebar_content { /* Caixa que abriga a sidebar */
  130. width: 1004px;
  131. z-index: 99;
  132. margin: auto;
  133. }
  134.  
  135. #sidebar { /* Sidebar em si */
  136. width: 260px;
  137. margin-top: 200px;
  138. line-height: normal;
  139. margin-bottom: 40px;
  140. position: fixed;
  141. text-align: center;
  142. }
  143.  
  144. #sidebar img { /* Estilo da imagem da sidebar */
  145. width: 80px;
  146. }
  147.  
  148. .sidebar_title { /* Tнtulo a sidebar */
  149. font-size: 40px;
  150. text-transform: uppercase;
  151. color: #fff;
  152. text-shadow: 1px 1px 0px #888, -1px -1px 0px #888;
  153. }
  154.  
  155. #sidebar_links { /* Caixa que abriga os links da sidebar */
  156. position: relative;
  157. margin-left: -10px;
  158. }
  159.  
  160. #sidebar_links a { /* Estilo dos links da sidebar */
  161. color: #fff;
  162. background-color: #aaa;
  163. border: 1px solid #888;
  164. padding: 5px 10px;
  165. margin-left: 10px;
  166. text-decoration: none;
  167. }
  168.  
  169. #sidebar_links a:hover { /* Links da sidebar em hover */
  170. background-color: #fff;
  171. color: #888;
  172. border-color: #ccc;
  173. }
  174.  
  175. .sidebar_description { /* Descriзгo da sidebar */
  176. margin-top: 10px;
  177. margin-bottom: 25px;
  178. }
  179.  
  180. ol.notes li.note { /* Linha da lista de notas de um post */
  181. padding-bottom: 3px;
  182. list-style-type: none; }
  183.  
  184. ol.notes blockquote {
  185. margin-top: 5px;
  186. margin-bottom: 2px;
  187. }
  188.  
  189. ol.notes { /* Caixa que abriga as notas de um post */
  190. float: left;
  191. padding-top: 10px;
  192. margin-left: -25px;
  193. list-style-type: none;
  194. text-align: left;
  195. position: relative; }
  196.  
  197. ol.notes li.note img.avatar { /* Avatar que aparece nas notas de um post */ vertical-align: -4px;
  198. margin-right: 10px;
  199. width: 16px;
  200. height: 16px;
  201. }
  202.  
  203. ::-moz-selection { /* Seleзгo colorida para Mozilla Firefox */
  204. background:#888;
  205. color:#fff;
  206. }
  207.  
  208. ::selection { /* Seleзгo colorida para os demais navegadores */
  209. background:#ccc;
  210. color: #fff;
  211. }
  212.  
  213. #s-m-t-tooltip { /* Tooltip */
  214. font-family: arial;
  215. margin-top: 23px;
  216. margin-left: 15px;
  217. font-size: 12px;
  218. letter-spacing: 1px;
  219. text-transform: uppercase;
  220. background-color: #fff;
  221. color: #aaa;
  222. padding: 5px;
  223. border: 1px solid #aaa;
  224. }
  225.  
  226. ::-webkit-scrollbar-thumb:vertical { /* Barra de rolagem vertical */
  227. background: #888;
  228. }
  229.  
  230. ::-webkit-scrollbar-thumb:horizontal { /* Barra de rolagem horizontal */
  231. background-color: #888;
  232. }
  233.  
  234. ::-webkit-scrollbar-corner { /* Encontro das barras de rolagem */
  235. background-color: #aaa;
  236. }
  237.  
  238. ::-webkit-scrollbar { /* Barra de rolagem em si */
  239. border: 1px solid #aaa;
  240. width:10px; height: 10px;
  241. background: #fff;
  242. }
  243.  
  244. #asker_box { /* Caixa que abriga as asks */
  245. color: #fff;
  246. background-color: #aaa;
  247. border: 1px solid #888;
  248. padding: 20px;
  249. display: block;
  250. text-align: left;
  251. }
  252.  
  253. #asker_box a { /* Links da caida da ask */
  254. color: #fff;
  255. }
  256.  
  257. #asker_box a:hover { /* Links da caixa da ask em hover */
  258. color: #eee;
  259. }
  260.  
  261. .quote { /* Estilo da Quote */
  262.  
  263. font-size: 15px; font-style: italic;}
  264.  
  265. </style>
  266.  
  267. <!-- BASE CODE BY ELLY-THEMES | elly-themes.tumblr.com | KEEP THIS CREDITS -->
  268.  
  269. <!-- Theme em grade por Manatopia.org -->
  270.  
  271. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  272. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  273.  
  274. <script>
  275. $(function(){
  276. var $container = $('#posts_content');
  277. $container.imagesLoaded(function(){
  278. $container.masonry({
  279. itemSelector: '.entry',
  280. });
  281. });
  282. $container.infinitescroll({
  283. itemSelector : ".entry",
  284. navSelector : "div.pagination",
  285. nextSelector : ".pagination a#next",
  286. loadingImg : "",
  287. loadingText : "<em></em>",
  288. bufferPx : 10000,
  289. extraScrollPx: 12000,
  290. },
  291. // trigger Masonry as a callback
  292. function( newElements ) {
  293. var $newElems = $( newElements ).css({ opacity: 0 });
  294. // ensure that images load before adding to masonry layout
  295. $newElems.imagesLoaded(function(){
  296. $newElems.animate({ opacity: 1 });
  297. $container.masonry( 'appended', $newElems, true );
  298. });
  299. }
  300. );
  301. });
  302. </script>
  303.  
  304. </head>
  305.  
  306. <body>
  307.  
  308. <div class="pagination">
  309. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">previous</a> &middot;{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" id="next">next</a>{/block:NextPage}{/block:Pagination}
  310. </div>
  311.  
  312. <div id="sidebar_content">
  313.  
  314. <center>
  315.  
  316. <div id="sidebar">
  317.  
  318. <div class="sidebar_title">{Title}</div>
  319.  
  320. <div class="sidebar_description">{block:Description}{Description}{/block:Description}</div>
  321.  
  322. <div id="sidebar_links">
  323. <a href="#" title="Link Tooltip">Home</a>
  324. <a href="#" title="Link Tooltip 2">Message</a>
  325. <a href="#" title="Link Tooltip 3">Archive</a>
  326. </div>
  327.  
  328. </div>
  329.  
  330. </center>
  331.  
  332. </div>
  333.  
  334. <div id="all_content">
  335.  
  336. <center>
  337.  
  338. <div id="posts_content">
  339.  
  340. {block:Posts}
  341.  
  342. <!-- BASE CODE BY ELLY-THEMES | elly-themes.tumblr.com | KEEP THIS CREDITS -->
  343.  
  344. {block:ContentSource}
  345. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  346. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  347. {/block:SourceLogo}
  348. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  349. {/block:ContentSource}
  350.  
  351. <div class="entry">
  352.  
  353. {block:Text}
  354.  
  355. {block:Title}<div style="border-bottom: 15px solid transparent"><div class="posts_title">{Title}</div></div>{/block:Title}
  356. <div style="margin-top: -15px;">{Body}</div>
  357.  
  358. {/block:Text}
  359.  
  360.  
  361. {block:Quote}
  362.  
  363. <div class="quote">"{Quote}"</div> </p> <div style="text-align:right">- {Source}</div>
  364.  
  365. {/block:Quote}
  366.  
  367.  
  368. {block:Link}
  369.  
  370. <div class="posts_title_link"><a href="{URL}">{Name}</a></div> {block:description}{description}{/block:description}
  371.  
  372. {/block:Link}
  373.  
  374.  
  375. {block:Chat}
  376.  
  377. {block:Lines}{block:Label}<b>{Label}</b> {/block:Label}{Line}<br>{/block:Lines}
  378. {/block:Chat}
  379.  
  380.  
  381. {block:Answer}
  382.  
  383. <div id="asker_box"><b>{Asker} asked:</b> {Question}</div> {Answer}
  384.  
  385. {/block:Answer}
  386.  
  387.  
  388. {block:Audio}
  389.  
  390. <center>{AudioPlayerGrey}</center> <br>
  391. <b>Track Name:</b> {block:TrackName}{TrackName}{/block:TrackName}<br>
  392. <b>Artist:</b> {block:artist}{Artist}{/block:artist}<br>
  393. <b>Album:</b> {block:Album}{Album}{/block:Album}<br>
  394. <b>Player Count:</b> {FormattedPlayCount} plays<br>
  395.  
  396. {/block:Audio}
  397.  
  398.  
  399. {block:Video}
  400.  
  401. {block:indexpage}{Video-250}{/block:indexpage} {block:permalinkpage}{Video-500}{/block:permalinkpage}
  402.  
  403. {/block:Video}
  404.  
  405.  
  406. {block:Photo}
  407.  
  408. {block:indexpage}<img src="{PhotoURL-250}"/>{/block:indexpage} {block:permalinkpage}<img src="{PhotoURL-500}"/>{/block:permalinkpage}
  409.  
  410. {/block:Photo}
  411.  
  412.  
  413. {block:Photoset}
  414.  
  415. {block:indexpage}{Photoset-250}{/block:indexpage} {block:permalinkpage}{Photoset-500}{/block:permalinkpage}
  416.  
  417. {/block:Photoset}
  418.  
  419.  
  420. {block:caption}{Caption}{/block:caption}
  421.  
  422.  
  423. {block:IndexPage}
  424.  
  425. <div class="permalink_box"><a href="{ReblogURL}" target="_blank">Reblog</a> / <a href="{Permalink}">{NoteCount}</a>{block:HasTags}<br>{block:Tags}<i><a href="{TagURL}">#{Tag}</a></i>{/block:Tags}{/block:HasTags}</div>
  426.  
  427. {/block:IndexPage}
  428.  
  429. {block:PermalinkPage}
  430.  
  431. {block:PostNotes}{PostNotes}{/block:PostNotes}
  432.  
  433. {/block:PermalinkPage}
  434.  
  435. </div>
  436.  
  437. <!-- BASE CODE BY ELLY-THEMES | elly-themes.tumblr.com | KEEP THIS CREDITS -->
  438.  
  439. {/block:Posts}
  440.  
  441. </div>
  442.  
  443. </center>
  444.  
  445. </body>
  446.  
  447. </html>
  448.  
  449. <!-- BASE CODE BY ELLY-THEMES | elly-themes.tumblr.com | KEEP THIS CREDITS -->
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!