API tools faq
paste
Advertisement
ofcuteboys

Theme #06, "Larra"

ofcuteboys
Dec 16th, 2013
160
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.84 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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head><title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  7.  
  8. <!---- THEME #06 BY OFCUTEBOYS
  9. Custom made for ofchristamas!
  10.  
  11. This theme features 6 custom links, a 200 x 180 animated (on hover) sidebar image, 500px posts, a pop up ask box, and an included updates tab that I DID NOT MAKE. Please enjoy it and follow the theme rules!
  12.  
  13.  
  14. : do not steal, repost, or claim as your own
  15.  
  16. :this is not a base code. If you need one, message me.
  17.  
  18. : you can look at my coding to teach yourself HTML but don't steal anything.
  19.  
  20. : If you use this theme, you MUST like/reblog the post. Your feedback helps me know what to make next!
  21.  
  22.  
  23.  
  24.  
  25.  
  26. --->
  27.  
  28. <meta name="color:Background" content="#ffffff"/>
  29. <meta name="color:Text" content="#838282"/>
  30. <meta name="color:Link" content="#b8b8b8"/>
  31. <meta name="color:Hover" content="#838282"/>
  32. <meta name="color:accent" content="#838282"/>
  33. <meta name="image:sidebar" content=""/>
  34. <meta name="image:update image" content="http://24.media.tumblr.com/2eb0bafcb715caefad9bc12f4f87a75b/tumblr_mtcb1mE8ZK1syyeiyo1_500.jpg"/>
  35.  
  36. <meta name="text:Link 1 Title" content="01 text">
  37. <meta name="text:Link 1 URL" content="01">
  38. <meta name="text:Link 2 Title" content="02 text">
  39. <meta name="text:Link 2 URL" content="02">
  40. <meta name="text:Link 3 Title" content="03 text">
  41. <meta name="text:Link 3 URL" content="03">
  42. <meta name="text:quote1" content="first half here"/>
  43. <meta name="text:quote2" content="second half here"/>
  44.  
  45.  
  46. <!---SCRIPT FOR TOOLTIPS--->
  47.  
  48. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  49. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  50. <script>
  51. (function($){
  52. $(document).ready(function(){
  53. $("a[title]").style_my_tooltips({
  54. tip_follows_cursor:true,
  55. tip_delay_time:90,
  56. tip_fade_speed:600,
  57. attribute:"title"
  58. });
  59. });
  60. })(jQuery);
  61. </script>
  62.  
  63.  
  64. <script type="text/javascript"
  65. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  66. <script>
  67. $(document).ready(function() {
  68. //
  69. $('a.poplight[href^=#]').click(function() {
  70. var popID = $(this).attr('rel'); //Get Popup Name
  71. var popURL = $(this).attr('href'); //Get Popup href to define size
  72. var query= popURL.split('?');
  73. var dim= query[1].split('&');
  74. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  75. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://i171.photobucket.com/albums/u300/ferny-dust/sozai/bullets/30.gif" title="Close" alt="Close" /></a>');
  76. var popMargTop = ($('#' + popID).height() + 80) / 2;
  77. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  78. //Apply Margin to Popup
  79. $('#' + popID).css({
  80. 'margin-top' : -popMargTop,
  81. 'margin-left' : -popMargLeft
  82. });
  83. $('body').append('<div id="fade"></div>');
  84. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  85. return false;
  86. });
  87. $('a.close, #fade').live('click', function() {
  88. $('#fade , .popup_block').fadeOut(function() {
  89. $('#fade, a.close').remove(); //fade them both out
  90. });
  91. return false;
  92. });
  93. });
  94. </script>
  95.  
  96.  
  97. <style type="text/css">
  98.  
  99. #oneout {
  100. z-index:999999999999999;
  101. position:fixed;
  102. top:-80px;
  103. left:30px;
  104. width:18px;
  105. font-size:10px;
  106. font-family:calibri;
  107. text-align:left;
  108. -webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;transition-duration:0.5s; }
  109.  
  110. #oneout_inner {
  111. z-index:999999999999999;
  112. position:fixed;
  113. top:30px;
  114. left:-210px;
  115. width:200px;height:auto;
  116. padding:10px;
  117. background:#fff;
  118. -webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;transition-duration:0.5s; }
  119.  
  120.  
  121. #oneout:hover { z-index:999999999999999;left:240px; }
  122. #oneout:hover #oneout_inner { z-index:999999999999999;left:0px; }
  123.  
  124. .onetitle {
  125. z-index:999999999999999;
  126. display:block;
  127. position:absolute;
  128. color:#ebebeb;
  129. top:100px;
  130. left:-17px;
  131. font-family:Lucida Sans;
  132. font-size:25px;
  133. text-transform:uppercase; letter-spacing:-1px;
  134. }
  135.  
  136.  
  137. .popup_block{
  138. display: none;
  139. background: #000;
  140. background-image: url();
  141. padding: 10px;
  142. font-family: arial;
  143. float: left;
  144. line-height:130%;
  145. color:white;
  146. font-size: 10px;
  147. position: fixed;
  148. top: 60%; left: 50%;
  149. z-index: 2;
  150.  
  151. }
  152.  
  153. .popup_block a {
  154. color:{color:accent};
  155. }
  156.  
  157.  
  158. img.btn_close {
  159. float: right;
  160. margin: -5px -5px 0 0;}
  161.  
  162. *html .popup_block {
  163. position: absolute;
  164. }
  165.  
  166.  
  167.  
  168.  
  169.  
  170. #s-m-t-tooltip{
  171. max-width:250px;
  172. z-index:999999;
  173. margin:10px;
  174. padding:2px 5px;
  175. letter-spacing:2px;
  176. text-transform:uppercase; /* cand be lowercase or none */
  177. border-bottom:4px solid {color:accent};
  178. background:black; /* change the background color */
  179. color:#fff; /* change the text color */
  180. font-family:arial; /* change the font */
  181. font-weight:bold;
  182. font-size:9px; /* change the font size */
  183. box-shadow:1px 1px 3px rgba(0,0,0,.1);}
  184.  
  185. body {
  186. background:{color:background};
  187. margin:0px;
  188. color:{color:text};
  189. font-family:arial;
  190. font-size:10px;
  191. line-height:100%;
  192. }
  193.  
  194. a {
  195. text-decoration:none;
  196. outline:none;
  197. -moz-outline-style:none;
  198. color:{color:link};
  199. }
  200.  
  201. a:hover{
  202. color:{color:hover};
  203. }
  204.  
  205. img {
  206. border:none;
  207. }
  208.  
  209. blockquote {
  210. padding-left:5px;
  211. border-left:2px solid;
  212. }
  213.  
  214. blockquote blockquote {
  215. padding-left:5px;
  216. border-left:2px solid;
  217. }
  218.  
  219. h1 {
  220. font-size:25px;
  221. font-weight:bold;
  222. letter-spacing:-2px;
  223. color:black;
  224. }
  225.  
  226. #entries {
  227. padding:10px;
  228. width:500px;
  229. margin-left:500px;
  230. margin-top:40px;
  231. }
  232.  
  233. #post {
  234. width:500px;
  235. margin-bottom:50px;
  236. }
  237.  
  238. #q1 {
  239. margin-top:140px;
  240. margin-left:100px;
  241. position:fixed;
  242. color:black;
  243. font-size:25px;
  244. letter-spacing:-3px;
  245. text-transform:lowercase;
  246. font-family:arial;
  247. font-weight:bold;
  248.  
  249. }
  250.  
  251. #q2 {
  252. margin-top:370px;
  253. width:300px;
  254. margin-left:100px;
  255. position:fixed;
  256. text-align:right;
  257. color:black;
  258. font-size:25px;
  259. letter-spacing:-3px;
  260. text-transform:lowercase;
  261. font-family:arial;
  262. font-weight:bold;
  263.  
  264. }
  265.  
  266.  
  267. b {color:{color:accent}; font-size:1.5;}
  268. i {color:{color:accent};}
  269. em {color:{color:accent}; text-transform:none; font-size:2;}
  270. strong {color:{color:accent}; text-transform:none; font-size:2;}
  271.  
  272.  
  273.  
  274. ::selection {
  275. color:{color:accent};
  276. }
  277.  
  278.  
  279.  
  280. #sidebar {
  281. position:fixed;
  282. margin-left:100px;
  283. overflow:hidden;
  284. margin-top:170px;
  285. width:300px;
  286. height:180px;
  287. background-color:black;
  288. border:5px solid black;
  289. }
  290.  
  291.  
  292.  
  293. #sidebarimage {
  294. width 300px;
  295. height:180px;
  296. margin-top:-248px;
  297. -webkit-transition: all 0.6s ease-out;
  298. -moz-transition: all 0.6s ease-out;
  299. transition: all 0.6s ease-out;
  300. }
  301.  
  302. #sidebarimage img {
  303. width:300px;
  304. margin-top:65px;
  305. position:absolute;
  306. -webkit-transition: all 0.6s ease-out;
  307. -moz-transition: all 0.6s ease-out;
  308. transition: all 0.6s ease-out;
  309. }
  310.  
  311.  
  312. #sidebar:hover #sidebarimage {
  313. margin-left: -200px;
  314.  
  315. margin-top:fixed; -webkit-transition: all 0.6s ease-out;
  316. -moz-transition: all 0.6s ease-out;
  317. transition: all 0.6s ease-out;}
  318.  
  319. #links{
  320. margin-top:-2px;
  321. padding:5px;
  322. border:6px white double;
  323. margin-left:250px;
  324. line-height:100%;
  325. display:block;
  326. width:30px;
  327. text-align:center;
  328. color:white;
  329. font-family:Bebas Neue;
  330. font-size:18px;
  331. }
  332.  
  333. #links a{
  334. padding:5px;
  335. color:white;
  336. }
  337.  
  338. #links a:hover{
  339. color:{color:hover};
  340. }
  341.  
  342. #description {
  343. text-align:justify;
  344. font-size:9px;
  345. font-family:arial;
  346. text-transform:lowercase;
  347. margin-top:-160px;
  348. margin-left:120px;
  349. font-weight:bold;
  350. line-height:120%;
  351. color:white;
  352. width:110px;
  353. position:fixed;
  354. }
  355.  
  356. #description a {color:white;}
  357.  
  358. #pagination {
  359. font-size:10px;
  360. text-align:center;
  361. }
  362.  
  363.  
  364. #info {
  365. text-align:center;
  366. margin-top:20px;
  367. color:white;
  368. background-color:black;
  369. padding:7px;
  370. font-family:arial;
  371. font-weight:bold;
  372.  
  373. }
  374.  
  375. #info a {
  376. color:white;
  377. }
  378.  
  379. #ask{
  380. float:left;
  381. margin-right:5px;
  382. font-family:arial;
  383. font-style:italic;
  384. color:black;
  385. border-bottom:2px solid black;
  386. padding:5px;
  387. line-height:120%;
  388. }
  389.  
  390. .asker {
  391. font-size:15px;
  392. font-family:arial;
  393. font-weight:bold;
  394. letter-spacing:-1px;
  395. color:black;
  396. }
  397.  
  398.  
  399. .date {
  400. color:white;
  401. font-size:17px;
  402. }
  403.  
  404. .date a {
  405. color:white;
  406. }
  407.  
  408. .date a:hover {
  409. color:{color:accent};
  410. }
  411.  
  412.  
  413. .reblog {
  414. font-family:meem2;
  415. font-size:15px;
  416. color:white;
  417. }
  418.  
  419. .reblog a {
  420. color:white;
  421. }
  422.  
  423.  
  424. #credit {
  425. bottom:3px;
  426. position:fixed;
  427. right:10px;
  428. float:right;
  429. font-family:calibri;
  430. color:black;
  431. font-size:9px;
  432. letter-spacing:1px;
  433. text-transform:uppercase;
  434. padding:5px;
  435.  
  436. }
  437.  
  438. #credit a {
  439. color:black;
  440. background-color:white;
  441. padding:5px;
  442. -webkit-transition-duration:.8s;
  443. -moz-transition-duration:.8s;
  444. -o-transition-duration:.8s;
  445. -ms-transition-duration:.8s;
  446. }
  447.  
  448. #credit a:hover {
  449. color:white;
  450. background-color:#00bdb3;
  451. }
  452.  
  453.  
  454.  
  455. @font-face {font-family:"meem2"; src: url('http://static.tumblr.com/gs9d5ab/Rj8m7debq/websymbols-regular-webfont.ttf');}
  456.  
  457.  
  458. {CustomCSS}</style></head><body>
  459.  
  460. <div id="oneout"><span class="onetitle">
  461.  
  462. <img src="{image:update image}" width="120px"; height="auto">
  463. </span>
  464. <div id="oneout_inner">
  465. <center>
  466. <div style="color:#fff; background-color:#000; padding:3px;">UPDATES</div>
  467. <p>
  468. PUT YOUR UPDATES AND STUFF HERE
  469. <p>
  470. <div style="color:#fff; background-color:#000; padding:3px;">STUFF</div>
  471. <p>
  472. MORE STUFF, YOU CAN ADD MORE LITTLE BLACK BOXES TOO LIKE THIS IS A COOL UPDATES TAB. AGAIN I ONLY EDITED IT TO LOOK THIS WAY I DIDN'T COME UP WITH THE WHOLE THING OKAY
  473. </center></div></div>
  474.  
  475.  
  476.  
  477. <a href="{PreviousPage}" title="previous page">
  478. <div id="q1">{text:quote1} . . .</div></a>
  479.  
  480. <div id="sidebar">
  481.  
  482.  
  483.  
  484. <div id="links">
  485. <a href="/" title="refresh">.01</a><br><br>
  486. <a href="#?w=500" rel="02" class="poplight" title="mailbox & FAQ">.02</a><br><br>
  487. <a href="#?w=500" rel="01" class="poplight" title="navigate">.03</a><br><br>
  488. <a href="{text:Link 2 URL}" title="{text:Link 2 Title}">.04</a><br><br>
  489. <a href="{text:Link 3 URL}" title="{text:Link 3 Title}">.05</a></div>
  490.  
  491. <div id="description">{Description}</div>
  492.  
  493.  
  494.  
  495. <div id="sidebarimage"><img src="{image:sidebar}"></div>
  496.  
  497.  
  498.  
  499.  
  500. </div>
  501. <a href="{NextPage}" title="next page">
  502. <div id="q2">. . . {text:quote2}</div></a>
  503.  
  504. <div id="entries">{block:Posts}<div id="post">
  505.  
  506. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  507.  
  508. {block:Photo}{LinkOpenTag}<center><img src="{PhotoURL-500}"></center>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  509.  
  510. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  511.  
  512. {block:Quote}{Quote}{block:Source} —{Source}{/block:Source}{/block:Quote}
  513.  
  514. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  515.  
  516. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  517.  
  518. {block:Audio}{AudioPlayerWhite}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  519.  
  520. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  521.  
  522. {block:Answer}
  523. <div id="ask">
  524. <span style="font-size:45px;font-family:Times;color:{color:accent};letter-spacing:-1px;padding-top:20px;">“</span>{Question}<br><br><span class="asker">-{Asker}</span>
  525. </div><br><br><br><br><br><br>{Answer}
  526. {/block:Answer}
  527.  
  528.  
  529.  
  530. <div id="info"><center><a href="{Perimalink}">{block:Date}<a href="{Permalink}"><span class="date">{ShortMonth}. {DayOfMonth}</span></a> {/block:Date}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  531.  
  532.  
  533.  
  534. <span class="reblog"><a href="{ReblogURL}" title="reblog this" target="_blank" class="details">J</a></span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  535. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  536. <span class="date">
  537. <img src="http://img.photobucket.com/albums/v252/shaquanda/dumpitydump/pixelwixel/teenytinyheart5.gif">
  538. <a href="{Permalink}">{NoteCount} notes </a></span>
  539. <br>
  540. {block:HasTags} <font-color="#fff">filed as-{block:Tags} <a href="{TagURL}">{Tag}</a>, {/block:Tags}</font-color>{/block:HasTags}</div>
  541. </div>
  542. {block:PostNotes}{PostNotes}{/block:PostNotes}
  543. {/block:Posts}</div>
  544.  
  545.  
  546.  
  547. <div id="credit"><a href="http://ofcuteboyscodes.tumblr.com/" title="theme maker credit">ofcuteboys. </a></center></div>
  548.  
  549.  
  550.  
  551. </body>
  552.  
  553.  
  554. <!---POP UP ASK BOX--->
  555.  
  556. <div id="02" class="popup_block">
  557.  
  558. Put your FAQ here!
  559.  
  560.  
  561. <Center><font size="5" color="#000"><p></font><iframe frameborder="0" scrolling="yes" width="100%" height="200" src="http://www.tumblr.com/ask_form/{URL}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
  562. </center></div><center><br>
  563.  
  564.  
  565.  
  566.  
  567. </center>
  568.  
  569. </div></div></div></div></div></div></div></div></div></div></div>
  570.  
  571.  
  572.  
  573.  
  574. </html>
  575.  
  576.  
  577.  
  578.  
  579. </body></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!