API tools faq
paste
Advertisement
becqerel

theme #1 > tags/links page

becqerel
Jul 1st, 2013
923
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.38 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <!--
  4.  
  5. THEME #1 > TAGS/LINKS PAGE
  6. @ WGTHEMES.TUMBLR.COM / WEDNESGAY.TUMBLR.COM
  7.  
  8. >>> PLEASE DO NOT REMOVE THIS TEXT
  9.  
  10. --------------------------------------------------------
  11.  
  12. RULES:
  13.  
  14. -- You CAN:
  15. ► edit to your liking for YOUR PERSONAL USE
  16. ► change the colors and images and etc (of course)
  17.  
  18. -- You CANNOT
  19. ► steal
  20. ► redistribute
  21. ► claim as your own
  22. ► take any part of the code
  23. ► use as a base
  24. ► remove the credit
  25. ► combine with other themes
  26.  
  27. You can find my themes blog at http://wgthemes.tumblr.com
  28.  
  29. >>> PLEASE DO NOT REMOVE THIS TEXT
  30.  
  31. --------------------------------------------------------
  32.  
  33. CUSTOMIZING:
  34.  
  35. All the colors and fonts are first, grouped together by the way I used them. You can, of course, split them and give each one its own color if you know what you're doing.
  36.  
  37. In the html section (CTRL + F <body>), there are notes for changing the sidebar around. You can:
  38. ► Add custom links (as many as you want tbh)
  39. ► Add a sidebar image (remove the icon)
  40. ► Add your blog title
  41.  
  42. The tag (or link or w/e) boxes are set up pretty simply so no notes were added for those.
  43.  
  44. Enjoy!
  45.  
  46. --------------------------------------------------------
  47.  
  48. CREDITS:
  49.  
  50. ► Masonry script: http://isotope.metafizzy.co/
  51. ► Tooltip script: http://manos.malihu.gr/style-my-tooltips-jquery-plugin/
  52.  
  53. >>> PLEASE DO NOT REMOVE THIS TEXT
  54.  
  55. -->
  56. <head>
  57.  
  58. <title>{Title}</title> <!-- you can put a custom title here or add one after (e.g. {Title} | Tags) -->
  59. <link rel="shortcut icon" href="{Favicon}">
  60. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  61. {block:Description}<meta name="description" content="{MetaDescription}" />
  62. {/block:Description}
  63.  
  64. <!-- WEBFONTS -->
  65. <link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
  66.  
  67.  
  68. <!-------- SCRIPTS -------->
  69. <!-- jquery (necessary) -->
  70. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
  71. type="text/javascript"></script>
  72.  
  73. <!-- tooltip script -->
  74. <script src="http://static.tumblr.com/xgofl0y/O7Fm1ufj3/jquery.style-my-tooltips.js" type="text/javascript"></script>
  75. <script>
  76. $().ready(function() {
  77. $("[title]").style_my_tooltips({
  78. tip_follows_cursor: "on", //on/off
  79. tip_delay_time: 200 //milliseconds
  80. });
  81. });
  82. </script>
  83.  
  84. <style type="text/css">
  85.  
  86. /* ---------------- colors ------------- */
  87.  
  88. body{
  89. background-color:#eee;
  90. color:#919191;
  91. }
  92.  
  93. /* link color */
  94. a:link, a:visited, a:active, .titlebox, #s-m-t-tooltip, #cred:hover{
  95. color:#ff88aa;
  96. }
  97.  
  98. #cred{ border: 1px solid #ff88aa; }
  99.  
  100. /* link hover color */
  101. a:hover{ color: #26b3ec; }
  102.  
  103. /* navigation + icon hover + credit background color */
  104. .links .alinks a:hover, .icon:hover, #cred { background-color:#ff88aa; }
  105.  
  106. /* "pattern" color and image */
  107. #top, .patterncontent, ::-webkit-scrollbar-thumb{
  108. background-color:#e4f6fa;
  109. background-image: url(YOURURLHERE);
  110. }
  111.  
  112. /* box color */
  113. .content, .icon, ::-webkit-scrollbar-track, #s-m-t-tooltip, .links .alinks a, .patphoto, #cred:hover{ background-color: #fff; }
  114.  
  115. /* box border color (same as box color) */
  116. .sidebar, .box, ::-webkit-scrollbar-thumb{
  117. border: 1px solid #fff;
  118. }
  119.  
  120. /* navigation + selection + credit color */
  121. .links .alinks a:hover, ::selection, ::-webkit-selection, #cred{ color: #fff; }
  122.  
  123. /* blogtitle/box title color + text shadow */
  124. .blogtitle, .titlebox{
  125. color:#ff88aa;
  126. text-shadow:
  127. 3px 0px 0px #fff, -3px 0px 0px #fff, 0px 3px 0px #fff, 0px -3px 0px #fff, 3px 1px 0px #fff,
  128. -3px 1px 0px #fff, 1px 3px 0px #fff, 1px -3px 0px #fff,
  129. 3px -1px 0px #fff, -3px -1px 0px #fff, -1px 3px 0px #fff, -1px -3px 0px #fff,
  130. 3px 2px 0px #fff, -3px 2px 0px #fff, 2px 3px 0px #fff, 2px -3px 0px #fff,
  131. 3px -2px 0px #fff, -3px -2px 0px #fff, -2px 3px 0px #fff, -2px -3px 0px #fff; /* delete this if you don't want the text shadow */
  132. }
  133.  
  134. /* selection background color */
  135. ::selection, ::-webkit-selection{ background-color: #f4e597;}
  136.  
  137. /* tooltip border */
  138. #s-m-t-tooltip{ border: 1px solid #d9d9d9; }
  139.  
  140. /* blockquotes */
  141. blockquote{
  142. background-color: #eee;
  143. border-color: #eee;
  144. }
  145.  
  146. blockquote::before{ border-color: #d9d9d9; }
  147.  
  148. /* ---------------------- fonts ---------------------- */
  149.  
  150. body{
  151. font-family: Calibri;
  152. font-size:10px;
  153. }
  154.  
  155. .blogtitle, .titlebox{
  156. font-family: 'Satisfy', georgia, times new roman;
  157. }
  158.  
  159. /* ---------------------- body ---------------------- */
  160.  
  161. body{
  162. line-height:;
  163. background-image: url();
  164. background-position: left top;
  165. background-attachment: fixed;
  166. background-repeat: repeat;
  167. }
  168.  
  169. a:link, a:visited, a:active, a:hover{
  170. text-decoration:none;
  171. -webkit-transition: all 0.3s ease-in-out;
  172. -moz-transition: all 0.3s ease-in-out;
  173. -o-transition: all 0.3s ease-in-out;
  174. transition: all 0.3s ease-in-out;
  175. cursor: pointer;
  176. }
  177.  
  178. ul, ol{ margin-left:-15px; font-weight:bold; margin-top: 0px; margin-bottom: 0px; }
  179. li{ font-weight:normal; position: relative; padding: 0; }
  180. li img{ position: relative; max-width:100%; }
  181.  
  182. pre{ word-wrap: break-word; }
  183.  
  184. p{ margin-top:0px; }
  185.  
  186. table{ font-size:10px;}
  187.  
  188. #s-m-t-tooltip{
  189. position:absolute; z-index:90000000000000000; font-size:80%; text-transform: uppercase;; display:inline-block; padding: 3px 7px; max-width:350px; word-wrap: break-word; font-weight: normal; }
  190.  
  191. /* ---------------------- side ---------------------- */
  192.  
  193. #side{
  194. width:210px;
  195. height:100%;
  196. position: fixed;
  197. left:40px;
  198. top: 0;
  199. }
  200.  
  201. #top td{ padding: 10px 5px; }
  202.  
  203. .iconcell{ width:50px; padding-right: 0!important; }
  204.  
  205. .icon{
  206. position:relative;
  207. display: inline-block;
  208. width:30px;
  209. height:30px;
  210. padding: 10px;;
  211. -webkit-border-radius: 500px 500px 500px 500px;
  212. border-radius: 500px 500px 500px 500px;
  213. }
  214.  
  215. .icon, .icon:hover{
  216. -webkit-transition: all 0.5s ease-in-out;
  217. -moz-transition: all 0.5s ease-in-out;
  218. -o-transition: all 0.5s ease-in-out;
  219. transition: all 0.5s ease-in-out;
  220. }
  221.  
  222.  
  223. .icon img{
  224. width:30px;
  225. position: relative;
  226. top:0px;
  227. -webkit-border-radius: 500px 500px 500px 500px;
  228. border-radius: 500px 500px 500px 500px;
  229. border: 0px solid;
  230. }
  231.  
  232. .sidebar .content p:last-child{ margin-bottom: 0 }
  233.  
  234. .blogtitle{
  235. display: block;
  236. font-size: 20px;
  237. }
  238.  
  239. .patphoto { margin: 0px 2px 5px 2px; display: inline-block; display: inline-block; padding: 5px; position: relative; }
  240. .patphoto img{ width: 175px; display: block; }
  241.  
  242. /* ---------------------- links ---------------------- */
  243.  
  244. .links .alinks a{
  245. display: inline-block;
  246. padding: 2px 5px;
  247. margin: 2px;
  248. text-transform: uppercase; font-size: 80%;
  249. text-align: center;
  250. position: relative;
  251. }
  252.  
  253. a.nope, a.nope:hover{
  254. -webkit-transition: all 0.3s ease-in-out;
  255. -moz-transition: all 0.3s ease-in-out;
  256. -o-transition: all 0.3s ease-in-out;
  257. transition: all 0.3s ease-in-out;
  258. }
  259.  
  260. /* -------------------- POSTS -------------------- */
  261.  
  262. #main{
  263. position: relative;
  264. margin-left: 270px;
  265. margin-top: 20px;
  266. display: block;
  267. box-sizing: border-box;
  268. }
  269.  
  270. #container{
  271. position:relative;
  272. top:0px;
  273. min-height:100%
  274. margin-top: 0px;
  275. padding: 0px 0px 0px 0px;
  276. z-index:150;
  277. overflow: visible!important;
  278. }
  279.  
  280. #container .icon:hover{ background-color:#fff; }
  281.  
  282. .box{
  283. position: absolute;
  284. z-index:100;
  285. width:255px;
  286. margin: 20px;
  287. -webkit-transition: all 0.5s ease-in-out;
  288. -moz-transition: all 0.5s ease-in-out;
  289. -o-transition: all 0.5s ease-in-out;
  290. transition: all 0.5s ease-in-out;
  291. }
  292.  
  293. .content{
  294. padding: 15px;
  295. position: relative;
  296. z-index:150!important;
  297. margin: auto;
  298. }
  299.  
  300. .patterncontent{
  301. padding: 5px;
  302. position: relative;
  303. text-align: center;
  304. }
  305.  
  306. .pbody{
  307. margin-bottom:-8px;
  308. margin-top:0px;
  309. }
  310.  
  311. /* -------------------- TITLES -------------------- */
  312.  
  313. .titlebox {
  314. font-family: 'Satisfy';
  315. position: relative;
  316. padding: 15px;
  317. border-left: 0px solid;
  318. line-height:100%;
  319. font-size:27px;
  320. padding-bottom: 10px;
  321. text-align: center;
  322. }
  323.  
  324. /* ---------------------- MISC SECTION ---------------------- */
  325.  
  326. ::-webkit-scrollbar{
  327. height: 11px;
  328. width: 11px;
  329. }
  330.  
  331. #cred{
  332. position: fixed; right: 10px; bottom: 10px;
  333. text-transform: uppercase;
  334. padding: 5px 4px;
  335. font-size: 9px;
  336. text-align: center;
  337. font-family: consolas, monospace, courier;
  338. height: 10px; width: 12px;
  339. -webkit-border-radius: 100px;
  340. border-radius: 100px;
  341. z-index: 10000;
  342. }
  343.  
  344. #cred span{ display: inline-block; width: 1px; }
  345.  
  346. blockquote{ margin: 0px 10px 10px 10px; display: block;
  347. position: relative; order: 5px solid; }
  348.  
  349. blockquote img{ max-width: 100%!important; }
  350.  
  351. blockquote:before{ content: ''; position: absolute; height:100%; padding: 5px 0px; top:-5px; left:-8px; border-left: 3px solid;; z-index:1;}
  352.  
  353. blockquote p:last-child { margin-bottom: 0px!important; }
  354.  
  355. img{
  356. -moz-user-select: none;
  357. -webkit-user-select: none;
  358. /* this will work for QtWebKit in future */
  359. -webkit-user-drag: none;
  360. }
  361.  
  362. </style>
  363.  
  364. <body>
  365.  
  366. <a id="cred" href="http://wgthemes.tumblr.com">w<span></span>g</a>
  367.  
  368.  
  369. <table id="side" cellspacing="0" cellpadding="0"><tr><td>
  370. <div class="sidebar">
  371. <table id="top" cellspacing="0" cellpadding="0"><tr>
  372.  
  373. <!-- if you want the sidebar image, delete from <td class="iconcell"> to </a></td> -->
  374. <td class="iconcell"><a href="/" class="icon"><img src="{PortraitURL-30}"></a></td>
  375.  
  376. <td class="links">
  377. <!-- if you want your blog title to show up, paste the code below right above <div class="alinks">
  378.  
  379. <a href="/" class="blogtitle" style="margin-left: 5px;">{Title}</a>
  380.  
  381. if you have the sidebar image, paste the code below either above or below the sidebar image code
  382. <a href="/" class="blogtitle" style="text-align: center">{Title}</a>
  383. -->
  384.  
  385. <!-- if you want the sidebar image, paste the code below right above <div class="alinks>
  386.  
  387. <center><a href="/" class="patphoto"><img src="YOURURLHERE"></a>
  388. -->
  389. <div class="alinks"><a href="/">home</a><a href="/ask">ask</a><a
  390. href="/archive">archive</a><!-- YOUR LINKS HERE --><a href="YOURURLHERE">link 1</a><a href="YOURURLHERE">link 2</a><a href="YOURURLHERE">link 3</a><a href="YOURURLHERE">link 4</a><a href="YOURURLHERE">link 5</a><!-- END LINKS --></div>
  391. </center></td>
  392. </table>
  393. <div class="content">{Description}</div>
  394. </div>
  395. </td></tr></table>
  396.  
  397. <div id="main">
  398.  
  399. <div id="container">
  400.  
  401. <div class="box"><!-- // start box // -->
  402. <div class="patterncontent titlebox">Title</div>
  403. <div class="content">
  404. <ul>
  405. <li><a href="URL">link</a></li>
  406. <li><a href="URL">link</a></li>
  407. <li><a href="URL">link</a></li>
  408. </ul>
  409. </div>
  410. </div> <!-- // end box // -->
  411.  
  412. <div class="box"><!-- // start box // -->
  413. <div class="patterncontent titlebox">Title</div>
  414. <div class="content">
  415. <ul>
  416. <li><a href="URL">link</a></li>
  417. <li><a href="URL">link</a></li>
  418. <li><a href="URL">link</a></li>
  419. <li><a href="URL">link</a></li>
  420. <li><a href="URL">link</a></li>
  421. <li><a href="URL">link</a></li>
  422. </ul>
  423. </div>
  424. </div> <!-- // end box // -->
  425.  
  426. <div class="box"><!-- // start box // -->
  427. <div class="patterncontent titlebox">Title</div>
  428. <div class="content">
  429. <ul>
  430. <li><a href="URL">link</a></li>
  431. <li><a href="URL">link</a></li>
  432. <li><a href="URL">link</a></li>
  433. </ul>
  434. </div>
  435. </div> <!-- // end box // -->
  436.  
  437. <div class="box"> <!-- // start box // -->
  438. <div class="patterncontent titlebox">Title</div>
  439. <div class="content">
  440. <ul>
  441. <li><a href="URL">link</a></li>
  442. <li><a href="URL">link</a></li>
  443. <li><a href="URL">link</a></li>
  444. </ul>
  445. </div>
  446. </div> <!-- // end box // -->
  447.  
  448. <div class="box"><!-- // start box // -->
  449. <div class="patterncontent titlebox">Title</div>
  450. <div class="content">
  451. <ul>
  452. <li><a href="URL">link</a></li>
  453. <li><a href="URL">link</a></li>
  454. <li><a href="URL">link</a></li>
  455. </ul>
  456. </div>
  457. </div> <!-- // end box // -->
  458.  
  459. </div> <!-- // end container // -->
  460.  
  461. <!-- MASONRY SCRIPT -- DON'T DELETE -->
  462. <script src="http://static.tumblr.com/wcpu05v/zmTmgvpno/jquery.isotope.min.js" type="text/javascript"></script><script src="http://static.tumblr.com/wcpu05v/ZMRmiuuvf/jquery.imagesloaded.min.js" type="text/javascript"></script>
  463. <script>
  464. $(window).load(function(){
  465. var $container = $('#container');
  466. $('#container, .box, .tagbox img').imagesLoaded( function( $images, $proper, $broken ) {
  467. console.log( $images.length + ' images total have been loaded' );
  468. console.log( $proper.length + ' properly loaded images' );
  469. console.log( $broken.length + ' broken images' );
  470. });
  471. $container.isotope({
  472. itemSelector: '.box'
  473. });
  474. });
  475. </script>
  476.  
  477. </div>
  478.  
  479. </body>
  480.  
  481. </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!