API tools faq
paste
Advertisement
becqerel

theme #1 > blogroll

becqerel
Jul 1st, 2013
503
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.22 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <!--
  4.  
  5. THEME #1 > BLOGROLL 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. Enjoy!
  43.  
  44. --------------------------------------------------------
  45.  
  46. CREDITS:
  47.  
  48. ► Masonry script: http://isotope.metafizzy.co/
  49. ► Tooltip script: http://manos.malihu.gr/style-my-tooltips-jquery-plugin/
  50. ► Ellipsis script: http://stackoverflow.com/questions/536814/insert-ellipsis-into-html-tag-if-content-too-wide
  51.  
  52. >>> PLEASE DO NOT REMOVE THIS TEXT
  53.  
  54. -->
  55. <head>
  56.  
  57. <title>{Title}</title> <!-- you can put a custom title here or add one after (e.g. {Title} | Tags) -->
  58. <link rel="shortcut icon" href="{Favicon}">
  59. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  60. {block:Description}<meta name="description" content="{MetaDescription}" />
  61. {/block:Description}
  62.  
  63. <!-- WEBFONTS -->
  64. <link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
  65.  
  66.  
  67. <!-------- SCRIPTS -------->
  68. <!-- jquery (necessary) -->
  69. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
  70. type="text/javascript"></script>
  71.  
  72. <!-- tooltip script -->
  73. <script src="http://static.tumblr.com/xgofl0y/O7Fm1ufj3/jquery.style-my-tooltips.js" type="text/javascript"></script>
  74. <script>
  75. $().ready(function() {
  76. $("[title]").style_my_tooltips({
  77. tip_follows_cursor: "on", //on/off
  78. tip_delay_time: 200 //milliseconds
  79. });
  80. });
  81. </script>
  82.  
  83. <style type="text/css">
  84.  
  85. /* ---------------- colors ------------- */
  86.  
  87. body{
  88. background-color:#eee;
  89. color:#919191;
  90. }
  91.  
  92. /* link color */
  93. a:link, a:visited, a:active, .box .content, .box:hover .content, #s-m-t-tooltip, #cred:hover{
  94. color:#ff88aa;
  95. }
  96.  
  97. #cred{ border: 1px solid #ff88aa; }
  98.  
  99. /* link hover color */
  100. a:hover{ color: #26b3ec; }
  101.  
  102. /* navigation + icon hover + credit background color */
  103. .links .alinks a:hover, .box:hover .icon, .icon:hover, #cred { background-color:#ff88aa; }
  104.  
  105. /* "pattern" color and image */
  106. #top, .patterncontent, ::-webkit-scrollbar-thumb{
  107. background-color:#e4f6fa;
  108. background-image: url(YOURURLHERE);
  109. }
  110.  
  111. /* box color */
  112. .content, .icon, ::-webkit-scrollbar-track, #s-m-t-tooltip, .links .alinks a, .patphoto, #cred:hover{ background-color: #fff; }
  113.  
  114. /* box border color (same as box color) */
  115. .sidebar, .box, ::-webkit-scrollbar-thumb{
  116. border: 1px solid #fff;
  117. }
  118.  
  119. /* navigation + selection + credit color */
  120. .links .alinks a:hover, ::selection, ::-webkit-selection, #cred{ color: #fff; }
  121.  
  122. /* blogtitle/box title color + text shadow */
  123. .blogtitle{
  124. color:#ff88aa;
  125. text-shadow:
  126. 3px 0px 0px #fff, -3px 0px 0px #fff, 0px 3px 0px #fff, 0px -3px 0px #fff, 3px 1px 0px #fff,
  127. -3px 1px 0px #fff, 1px 3px 0px #fff, 1px -3px 0px #fff,
  128. 3px -1px 0px #fff, -3px -1px 0px #fff, -1px 3px 0px #fff, -1px -3px 0px #fff,
  129. 3px 2px 0px #fff, -3px 2px 0px #fff, 2px 3px 0px #fff, 2px -3px 0px #fff,
  130. 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 */
  131. }
  132.  
  133. /* selection background color */
  134. ::selection, ::-webkit-selection{ background-color: #f4e597;}
  135.  
  136. /* tooltip border */
  137. #s-m-t-tooltip{ border: 1px solid #d9d9d9; }
  138.  
  139. /* ---------------------- fonts ---------------------- */
  140.  
  141. body{
  142. font-family: Calibri;
  143. font-size:10px;
  144. }
  145.  
  146. .blogtitle{
  147. font-family: 'Satisfy', georgia, times new roman;
  148. }
  149.  
  150. /* ---------------------- body ---------------------- */
  151.  
  152. body{
  153. line-height:;
  154. background-image: url();
  155. background-position: left top;
  156. background-attachment: fixed;
  157. background-repeat: repeat;
  158. }
  159.  
  160. a:link, a:visited, a:active, a:hover{
  161. text-decoration:none;
  162. -webkit-transition: all 0.3s ease-in-out;
  163. -moz-transition: all 0.3s ease-in-out;
  164. -o-transition: all 0.3s ease-in-out;
  165. transition: all 0.3s ease-in-out;
  166. cursor: pointer;
  167. }
  168.  
  169. ul, ol{ margin-left:-15px; font-weight:bold; margin-top: 0px; margin-bottom: 0px; }
  170. li{ font-weight:normal; position: relative; padding: 0; }
  171. li img{ position: relative; max-width:100%; }
  172.  
  173. pre{ word-wrap: break-word; }
  174.  
  175. p{ margin-top:0px; }
  176.  
  177. table{ font-size:10px;}
  178.  
  179. #s-m-t-tooltip{
  180. 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; }
  181.  
  182. /* ---------------------- side ---------------------- */
  183.  
  184. #side{
  185. width:210px;
  186. height:100%;
  187. position: fixed;
  188. left:40px;
  189. top: 0;
  190. }
  191.  
  192. #top td{ padding: 10px 5px; }
  193.  
  194. .iconcell{ width:50px; padding-right: 0!important; }
  195.  
  196. .icon{
  197. position:relative;
  198. display: inline-block;
  199. width:30px;
  200. height:30px;
  201. padding: 10px;;
  202. -webkit-border-radius: 500px 500px 500px 500px;
  203. border-radius: 500px 500px 500px 500px;
  204. }
  205.  
  206. .icon, .icon:hover{
  207. -webkit-transition: all 0.5s ease-in-out;
  208. -moz-transition: all 0.5s ease-in-out;
  209. -o-transition: all 0.5s ease-in-out;
  210. transition: all 0.5s ease-in-out;
  211. }
  212.  
  213.  
  214. .icon img{
  215. width:30px;
  216. position: relative;
  217. top:0px;
  218. -webkit-border-radius: 500px 500px 500px 500px;
  219. border-radius: 500px 500px 500px 500px;
  220. border: 0px solid;
  221. }
  222.  
  223. .sidebar .content p:last-child{ margin-bottom: 0 }
  224.  
  225. /* ---------------------- links ---------------------- */
  226.  
  227. .links .alinks a{
  228. display: inline-block;
  229. padding: 2px 5px;
  230. margin: 2px;
  231. text-transform: uppercase; font-size: 80%;
  232. text-align: center;
  233. position: relative;
  234. }
  235.  
  236. /* -------------------- POSTS -------------------- */
  237.  
  238. #main{
  239. max-width:875px;
  240. min-width:350px;
  241. position: relative;
  242. margin-left: 270px;
  243. height:100%;
  244. display: block;
  245. }
  246.  
  247. #container{
  248. height:100%;
  249. position:relative;
  250. top:0px;
  251. padding: 20px 0px 20px 0px;
  252. z-index:150;
  253. }
  254.  
  255. .content{
  256. padding: 15px;
  257. position: relative;
  258. z-index:150!important;
  259. margin: auto;
  260. }
  261.  
  262. #main .content{
  263. padding: 5px;
  264. text-align: center;
  265. text-transform: uppercase;
  266. font-size: 8px;
  267. word-wrap: break-word;
  268. }
  269.  
  270. .box{
  271. position: absolute;
  272. width: 80px;
  273. display: block;
  274. margin: 10px;
  275. -webkit-transition: all 0.5s ease-in-out;
  276. -moz-transition: all 0.5s ease-in-out;
  277. -o-transition: all 0.5s ease-in-out;
  278. transition: all 0.5s ease-in-out;
  279. }
  280.  
  281. .patterncontent{
  282. padding: 5px 10px;
  283. position: relative;
  284. text-align: center;
  285. }
  286.  
  287. .box * { -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. #main .icon{ width: 40px; height: 40px; }
  293. #main .icon img{ width: 40px; }
  294.  
  295. .box .content {
  296. white-space: nowrap;
  297. overflow: hidden;
  298. display: block;
  299. }
  300.  
  301. /* ---------------------- MISC SECTION ---------------------- */
  302.  
  303. ::selection, ::-webkit-selection{
  304. }
  305.  
  306. ::-webkit-scrollbar{
  307. height: 11px;
  308. width: 11px;
  309. }
  310.  
  311. ::-webkit-scrollbar-thumb{
  312. }
  313.  
  314. ::-webkit-scrollbar-track{
  315. background-color: #fff;
  316. }
  317.  
  318.  
  319. #cred{
  320. position: fixed; right: 10px; bottom: 10px;
  321. text-transform: uppercase;
  322. padding: 5px 4px;
  323. font-size: 9px;
  324. text-align: center;
  325. font-family: consolas, monospace, courier;
  326. height: 10px; width: 12px;
  327. -webkit-border-radius: 100px;
  328. border-radius: 100px;
  329. z-index: 10000;
  330. }
  331.  
  332. #cred span{ display: inline-block; width: 1px; }
  333.  
  334. img{
  335. -moz-user-select: none;
  336. -webkit-user-select: none;
  337. /* this will work for QtWebKit in future */
  338. -webkit-user-drag: none;
  339. }
  340.  
  341.  
  342. /* ---------------------- custom css ---------------------- */
  343.  
  344. {CustomCSS}
  345.  
  346. </style>
  347.  
  348. </head>
  349.  
  350. <body>
  351.  
  352. <a id="cred" href="http://wgthemes.tumblr.com">w<span></span>g</a>
  353.  
  354. <table id="side" cellspacing="0" cellpadding="0"><tr><td>
  355. <div class="sidebar">
  356. <table id="top" cellspacing="0" cellpadding="0"><tr>
  357.  
  358. <!-- if you want the sidebar image, delete from <td class="iconcell"> to </a></td> -->
  359. <td class="iconcell"><a href="/" class="icon"><img src="{PortraitURL-30}"></a></td>
  360.  
  361. <td class="links">
  362. <!-- if you want your blog title to show up, paste the code below right above <div class="alinks">
  363.  
  364. <a href="/" class="blogtitle" style="margin-left: 5px;">{Title}</a>
  365.  
  366. if you have the sidebar image, paste the code below either above or below the sidebar image code
  367. <a href="/" class="blogtitle" style="text-align: center">{Title}</a>
  368. -->
  369.  
  370. <!-- if you want the sidebar image, paste the code below right above <div class="alinks>
  371.  
  372. <center><a href="/" class="patphoto"><img src="YOURURLHERE"></a>
  373. -->
  374. <div class="alinks"><a href="/">home</a><a href="/ask">ask</a><a
  375. 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>
  376. </center></td>
  377. </table>
  378. <div class="content">{Description}</div>
  379. </div>
  380. </td></tr></table>
  381.  
  382. <div id="main">
  383.  
  384. {block:Following}
  385.  
  386. <div id="container">
  387.  
  388. {block:Followed}<a href="{FollowedURL}" class="box">
  389. <div class="patterncontent">
  390. <div class="icon"><img src="{FollowedPortraitURL-64}"></div>
  391. </div>
  392. <div class="content">{FollowedName}</div>
  393. </a>{/block:Followed}
  394.  
  395. </div>
  396.  
  397. {/block:Following}
  398.  
  399. <!-- ELLIPSIS SCRIPT -- DON'T DELETE -->
  400. <script type="text/javascript">
  401. (function($) {
  402. $.fn.ellipsis = function()
  403. {
  404. return this.each(function()
  405. {
  406. var el = $(this);
  407.  
  408. if(el.css("overflow") == "hidden")
  409. {
  410. var text = el.html();
  411. var multiline = el.hasClass('multiline');
  412. var t = $(this.cloneNode(true))
  413. .hide()
  414. .css('position', 'absolute')
  415. .css('overflow', 'visible')
  416. .width(multiline ? el.width() : 'auto')
  417. .height(multiline ? 'auto' : el.height())
  418. ;
  419.  
  420. el.after(t);
  421.  
  422. function height() { return t.height() > el.height(); };
  423. function width() { return t.width() > el.width(); };
  424.  
  425. var func = multiline ? height : width;
  426.  
  427. while (text.length > 0 && func())
  428. {
  429. text = text.substr(0, text.length - 1);
  430. t.html(text + "...");
  431. }
  432.  
  433. el.html(t.html());
  434. t.remove();
  435. }
  436. });
  437. };
  438. })(jQuery);
  439. </script>
  440. <script type="text/javascript">
  441. $(".box .content").ellipsis();
  442. </script>
  443.  
  444. <!-- MASONRY SCRIPT -- DON'T DELETE -->
  445. <script src="http://static.tumblr.com/wcpu05v/zmTmgvpno/jquery.isotope.min.js" type="text/javascript"></script>
  446. <script>
  447. $(function(){
  448. var $container = $('#container');
  449. $container.isotope({
  450. itemSelector: '.box'
  451. });
  452. });
  453. </script>
  454.  
  455. </div>
  456.  
  457. </body>
  458. </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!