API tools faq
paste
Advertisement
ofcuteboys

Theme Blog Theme (Unfinished)

ofcuteboys
Dec 10th, 2013
87
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.31 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.  
  7.  
  8. <meta name="color:Background" content="#ffffff"/>
  9. <meta name="color:Text" content="#838282"/>
  10. <meta name="color:Link" content="#b8b8b8"/>
  11. <meta name="color:Hover" content="#838282"/>
  12. <meta name="color:accent" content="#00aeef"/>
  13. <meta name="image:caroline" content=""/>
  14. <meta name="image:theme2" content=""/>
  15. <meta name="image:theme3" content=""/>
  16.  
  17.  
  18.  
  19.  
  20. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  21. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  22. <script>
  23. (function($){
  24. $(document).ready(function(){
  25. $("a[title]").style_my_tooltips({
  26. tip_follows_cursor:true,
  27. tip_delay_time:90,
  28. tip_fade_speed:600,
  29. attribute:"title"
  30. });
  31. });
  32. })(jQuery);
  33. </script>
  34.  
  35.  
  36. <script type="text/javascript"
  37. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  38. <script>
  39. $(document).ready(function() {
  40. //
  41. $('a.poplight[href^=#]').click(function() {
  42. var popID = $(this).attr('rel'); //Get Popup Name
  43. var popURL = $(this).attr('href'); //Get Popup href to define size
  44. var query= popURL.split('?');
  45. var dim= query[1].split('&');
  46. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  47. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://i171.photobucket.com/albums/u300/ferny-dust/sozai/bullets/15.gif" class="btn_close" title="Close" alt="Close" /></a>');
  48. var popMargTop = ($('#' + popID).height() + 80) / 2;
  49. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  50. //Apply Margin to Popup
  51. $('#' + popID).css({
  52. 'margin-top' : -popMargTop,
  53. 'margin-left' : -popMargLeft
  54. });
  55. $('body').append('<div id="fade"></div>');
  56. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  57. return false;
  58. });
  59. $('a.close, #fade').live('click', function() {
  60. $('#fade , .popup_block').fadeOut(function() {
  61. $('#fade, a.close').remove(); //fade them both out
  62. });
  63. return false;
  64. });
  65. });
  66. </script>
  67.  
  68. <link href='http://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
  69.  
  70.  
  71. <style type="text/css">
  72.  
  73.  
  74. .popup_block{
  75. display: none;
  76. background: #000;
  77. background-image: url();
  78. padding: 10px;
  79. font-family: arial;
  80. float: left;
  81. line-height:130%;
  82. color:white;
  83. font-size: 10px;
  84. position: fixed;
  85. top: 30%; left: 50%;
  86. z-index: 2;
  87.  
  88. }
  89.  
  90. .popup_block a {
  91. color:{color:accent};
  92. }
  93. img.btn_close {
  94. float: right;
  95. width:10px;
  96. margin: -5px -5px 0 0;
  97. }
  98. *html .popup_block {
  99. position: absolute;
  100. }
  101.  
  102. #s-m-t-tooltip{
  103. max-width:250px;
  104. z-index:999999;
  105. margin:10px;
  106. padding:2px 5px;
  107. letter-spacing:2px;
  108. text-transform:uppercase; /* cand be lowercase or none */
  109. border-top:4px solid {color:accent}; /* change the border width and color */
  110. background:#FFF; /* change the background color */
  111. color:#000; /* change the text color */
  112. font-family:arial; /* change the font */
  113. font-weight:bold;
  114. font-size:9px; /* change the font size */
  115. box-shadow:1px 1px 3px rgba(0,0,0,.1);}
  116.  
  117.  
  118. b {color:{color:accent}; font-size:1.5;}
  119. i {color:{color:accent};}
  120. em {color:{color:accent}; text-transform:none; font-size:1.5;}
  121. strong {color:{color:accent}; text-transform:none; font-size:1.5;}
  122.  
  123.  
  124.  
  125. ::selection {
  126. background-color:{color:accent};
  127. }
  128.  
  129.  
  130. ::-webkit-scrollbar {width: 9px; height: 3px; background: white;}
  131. ::-webkit-scrollbar-thumb {background-color:{color:accent} ; border: 2px solid white;}
  132.  
  133. body {
  134. background:{color:background};
  135. margin:0px;
  136. color:black;
  137. font-family:arial;
  138. font-size:12px;
  139. line-height:100%;
  140. }
  141.  
  142. a {
  143. color:gray;
  144. text-decoration:none;
  145. -moz-transition-duration:.4s;
  146. -webkit-transition-duration:.4s;
  147. -o-transition-duration:.4s;
  148. }
  149.  
  150. a:hover{
  151. color:white;
  152. -moz-transition-duration:.4s;
  153. -webkit-transition-duration:.4s;
  154. -o-transition-duration:.4s;
  155. }
  156.  
  157.  
  158.  
  159.  
  160. img {
  161. border:none;
  162. }
  163.  
  164. blockquote {
  165. padding-left:5px;
  166. border-left:2px solid {color:accent};
  167. }
  168.  
  169. blockquote blockquote {
  170. padding-left:5px;
  171. border-left:2px solid {color:accent};
  172. }
  173.  
  174. h1 {
  175. font-size:15px;
  176. }
  177.  
  178.  
  179. #left {
  180. background-color:#000;
  181. width:450px;
  182. margin-left:0px;
  183. margin-top:-20px;
  184. height:800px;
  185. position:fixed;
  186. }
  187.  
  188. #top {
  189. border-bottom: 6px white dotted;
  190.  
  191. }
  192.  
  193. .themesby {
  194. font-family:Arial;
  195. font-size:25px;
  196. font-weight:bold;
  197. padding-top:40px;
  198. padding-left:20px;
  199. color:#aaa;
  200. letter-spacing:-2px;
  201. text-transform:lowercase;
  202.  
  203. }
  204.  
  205. #left:hover .themesby {
  206. color:white;
  207. }
  208.  
  209. .Caroline {
  210. width:200px;
  211.  
  212. }
  213. .Caroline img {
  214. width:350px;
  215. margin-left:50px;
  216. }
  217.  
  218. #questions {
  219. color:white;
  220. font-family:Arial;
  221. font-weight:bold;
  222. letter-spacing:-2px;
  223. font-size:27px;
  224. text-transform:lowercase;
  225. text-align:center;
  226. width:450px;
  227. padding-top:15px;
  228. }
  229.  
  230. .link1 {
  231. border-top:3px solid gray;
  232. margin-left:52px;
  233. margin-top:20px;
  234. font-weight:bold;
  235. padding-top:5px;
  236. color:gray;
  237. width:75px;
  238. font-family:arial;
  239. letter-spacing:-1px;
  240. font-size:15px;
  241. text-align:center;
  242. -moz-transition-duration:.4s;
  243. -webkit-transition-duration:.4s;
  244. -o-transition-duration:.4s;
  245. }
  246.  
  247. .link1:hover {
  248. color:white;
  249. border-top-color:white;
  250. -moz-transition-duration:.4s;
  251. -webkit-transition-duration:.4s;
  252. -o-transition-duration:.4s;
  253. }
  254.  
  255.  
  256.  
  257. .link2 {
  258. border-top:3px solid gray;
  259. margin-left:142px;
  260. margin-top:-20px;
  261. font-weight:bold;
  262. padding-top:5px;
  263. color:gray;
  264. width:75px;
  265. font-family:arial;
  266. letter-spacing:-1px; font-size:15px;
  267. text-align:center;
  268. -moz-transition-duration:.4s;
  269. -webkit-transition-duration:.4s;
  270. -o-transition-duration:.4s;
  271. }
  272.  
  273. .link2:hover {
  274. color:white;
  275. border-top-color:white;
  276. -moz-transition-duration:.4s;
  277. -webkit-transition-duration:.4s;
  278. -o-transition-duration:.4s;
  279. }
  280.  
  281.  
  282. .link3 {
  283. border-top:3px solid gray;
  284. margin-left:232px;
  285. margin-top:-20px;
  286. font-weight:bold;
  287. padding-top:5px;
  288. color:gray;
  289. width:75px;
  290. font-family:arial;
  291. letter-spacing:-1px;
  292. font-size:15px;
  293. text-align:center;
  294. -moz-transition-duration:.4s;
  295. -webkit-transition-duration:.4s;
  296. -o-transition-duration:.4s;
  297. }
  298.  
  299. .link3:hover {
  300. color:white;
  301. border-top-color:white;
  302. -moz-transition-duration:.4s;
  303. -webkit-transition-duration:.4s;
  304. -o-transition-duration:.4s;
  305. }
  306.  
  307.  
  308. .link4 {
  309. border-top:3px solid gray;
  310. margin-left:322px;
  311. margin-top:-20px;
  312. font-weight:bold;
  313. padding-top:5px;
  314. color:gray;
  315. width:75px;
  316. font-family:arial;
  317. letter-spacing:-1px; font-size:15px;
  318. text-align:center;
  319. -moz-transition-duration:.4s;
  320. -webkit-transition-duration:.4s;
  321. -o-transition-duration:.4s;
  322. }
  323.  
  324. .link4:hover {
  325. color:white;
  326. border-top-color:white;
  327. -moz-transition-duration:.4s;
  328. -webkit-transition-duration:.4s;
  329. -o-transition-duration:.4s;
  330. }
  331.  
  332.  
  333. #themerules {
  334. font-size:10px;
  335. font-family:arial;
  336. color:white;
  337. width:430px;
  338. text-align:left;
  339. margin-left:10px;
  340. height:270px;
  341.  
  342. overflow:scroll;
  343. }
  344.  
  345.  
  346. /*---END LEFT BAR---*/
  347.  
  348.  
  349. /*---BEGIN MIDDLE SECTION---*/
  350.  
  351.  
  352. #body {
  353. width:500px;
  354. border-left:8px solid {color:accent};
  355. border-right:8px solid {color:accent};
  356. margin-left:500px;
  357. margin-top:-650px;
  358. height:635px;
  359. position:fixed;
  360. }
  361.  
  362.  
  363. #topbar {
  364. width:500px;
  365. background-color:black;
  366. height:25px;
  367. margin-left:0px;
  368. margin-top:0px;
  369. padding-top:15px;
  370. }
  371.  
  372. #topbar a{
  373. font-size:15px;
  374. font-family:arial;
  375. text-align:center;
  376. padding-top:25px;
  377.  
  378. }
  379.  
  380.  
  381.  
  382.  
  383. #content {
  384. width: 494px;
  385. margin-left: 5px;
  386. margin-top: 20px;
  387. display: inline-block;
  388. height: 580px;
  389. overflow-y: scroll;
  390. }
  391.  
  392.  
  393. #theme {
  394. padding: 5px;
  395. padding-bottom: 15px;
  396. margin-left: 0px;
  397.  
  398. display: inline-block;
  399. }
  400.  
  401.  
  402. #title {
  403. font-family: 'Arial';
  404. font-weight:bold;
  405. width: 196px;
  406. text-transform: lowercase;
  407. font-size: 15px;
  408. letter-spacing: -1px;
  409. font-style: ;
  410. margin-bottom: -5px;
  411. margin-left: 15px;
  412. text-align: center;
  413. color: #fff;
  414. background-color: #000;
  415. padding: 8px;
  416. padding-bottom: 10px;
  417.  
  418.  
  419. }
  420.  
  421. #infoo {
  422. text-align: center;
  423. padding: 4px 2px 6px 6px;
  424. background-color: #000;
  425. margin-left:15px;
  426. margin-top: 0px;
  427. color: white;
  428. width: 204px;
  429. font-weight:bold;
  430. font-family: arial;
  431. letter-spacing: 0px;
  432. background-color: #000;
  433. font-size: 11px;
  434. text-transform: uppercase;
  435. }
  436.  
  437. #infoo a {
  438. color:white;
  439. }
  440.  
  441. #photo {
  442. width:200px;
  443. height:150px;
  444. margin-left:15px;
  445. }
  446.  
  447. #photo img {
  448. width:212px;
  449. height:150px;
  450. }
  451.  
  452. #entries {
  453. width:350px;
  454. padding: 50px 50px 50px 50px;
  455. height:600px;
  456. margin-top:5px;
  457. overflow-y:scroll;
  458. }
  459.  
  460.  
  461. #post {
  462. width:400px;
  463. font-family:arial;
  464. font-size:10px;
  465. color:black;
  466.  
  467. }
  468.  
  469. #right {
  470. width:350px;
  471. margin-left:1000px;
  472. margin-top:-636px;
  473. background-color:none;
  474. border: 5px solid black;
  475. height:680px;
  476. position:fixed;
  477. }
  478.  
  479. /*---END MIDDLE SECTION---*/
  480.  
  481.  
  482. {CustomCSS}</style></head><body>
  483.  
  484. <div id="left">
  485.  
  486.  
  487. <div id="top">
  488. <a href="/">
  489. <div class="themesby"></a>
  490. Themes By
  491. <div class="Caroline">
  492. <img src="{image:Caroline}">
  493. </div>
  494. </div>
  495.  
  496. </div>
  497.  
  498.  
  499.  
  500.  
  501.  
  502. <div id="questions">
  503.  
  504. HTML Questions<br><br>
  505.  
  506. <iframe frameborder="0" border="0" scrolling="yes" width="400" height="180" allowtransparency="true" src="http://www.tumblr.com/ask_form/ofcuteboyscodes.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe>
  507. </div>
  508.  
  509.  
  510.  
  511. <div class="link1"><a href="http://ofcuteboys.tumblr.com/" title="main blog">owner</a></div>
  512.  
  513.  
  514. <div class="link2" ><a href="/tagged/answer"title="previously answered html queries">answered</a></div>
  515.  
  516.  
  517. <div class="link3"><a href="/tagged/tutorial" title="HTML tutorials">tutorials</a></div>
  518.  
  519. <div class="link4"><a href="#?w=500" rel="01" class="poplight" title="information">info</a></div>
  520.  
  521.  
  522. <div id="themerules">
  523.  
  524. <div style="font-size:25px;margin-top:20px;text-align:center;text-transform:lowercase;letter-spacing:-2px;font-weight:bold;">Theme Rules</div><br><br>
  525. <b>●</b> Don't Steal
  526. <blockquote>
  527. I work hard on my themes. Each one takes me several <b>hours</b> to code. Please, respect the work that I do and don't steal my themes. This includes <i>reposting them, claiming them as your own even after editing them,and moving or removing my credit.</i> public.
  528. </blockquote>
  529.  
  530. <b>●</b> Like/Reblog the post if using
  531. <blockquote>
  532. This is really helpful for me! I like to know what you guys are looking for so I can code themes that you want to use.
  533. </blockquote>
  534.  
  535. <b>●</b> Ask Theme Questions Here
  536. <blockquote>that ask box is there for a reason. please don't send html questions to my main blog.</blockquote>
  537.  
  538. <b>●</b> Don't Use As Base Code
  539. <blockquote>
  540. there are plenty of base codes out there. my themes are my intellectual property, not base codes. If you need a base, hoenarry has a great one. editing my theme does not make it yours.
  541. </blockquote>
  542.  
  543. <b>●</b> Do Not Move Credit
  544. <blockquote>it's tiny and it's not going to bother you. leave it where it is or I will find you.</blockquote>
  545.  
  546.  
  547.  
  548. </div>
  549.  
  550.  
  551.  
  552.  
  553. <!----END LEFT BAR--->
  554.  
  555. <!---BEGIN BODY SECTION--->
  556.  
  557. <div id="body">
  558.  
  559. <div id="topbar">
  560. <center>
  561. <a href="{PreviousPage}" title="back"> << </a>
  562. <a href="/tagged/pages" title="my page themes">◉</a>
  563. <a href="/tagged/theme rec" title="theme recommendations">◉</a>
  564. <a href="/about" title="about me and my themes">◉</a>
  565. <a href="{NextPage}" title="forward">>></a>
  566. </center>
  567. </div>
  568.  
  569.  
  570. <div id="content">
  571.  
  572.  
  573. <div id="theme">
  574. <div id="title">hiatus theme #01</div>
  575. <div id="photo">
  576. <img src="http://i44.tinypic.com/5ml4k6.png">
  577. </div>
  578. <div id="infoo">
  579. <a href="http://pastebin.com/ypxr0iW7">code</a>, <a href="http://carolines.co.vu/post/69380902120/ofcuteboyscodes-theme-pack-01-by-ofcuteboys">information</a>, + <a href="http://candeycanes.tumblr.com">prev</a>
  580. </div>
  581. </div>
  582.  
  583.  
  584.  
  585.  
  586. <div id="theme">
  587. <div id="title">theme #03, "Sugar Cookies"</div>
  588. <div id="photo">
  589. <img src="{image:theme3}">
  590. </div>
  591. <div id="infoo">
  592. <a href="http://pastebin.com/nmDVGbka">code</a>, <a href="http://carolines.co.vu/post/69380902120/ofcuteboyscodes-theme-pack-01-by-ofcuteboys">information</a>, + <a href="http://lloucaster.tumblr.com">prev</a>
  593. </div>
  594. </div>
  595.  
  596.  
  597.  
  598.  
  599. <div id="theme">
  600. <div id="title">theme #02, "Winter's Waltz"</div>
  601. <div id="photo">
  602. <img src="{image:theme2}">
  603. </div>
  604. <div id="infoo">
  605. <a href="http://pastebin.com/PYWVudyZ">code</a>, <a href="http://carolines.co.vu/post/69380902120/ofcuteboyscodes-theme-pack-01-by-ofcuteboys">information</a>, + <a href="http://gingrebread.tumblr.com">prev</a>
  606. </div>
  607. </div>
  608.  
  609. </div>
  610.  
  611. </div>
  612.  
  613. <div id="right">
  614. <div id="entries">
  615.  
  616.  
  617.  
  618. {block:posts}<div id="post">
  619. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  620.  
  621. {block:Photo}{LinkOpenTag}<center><img src="{PhotoURL-400}" width="300px"></center>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  622.  
  623.  
  624. {block:Quote}{Quote}{block:Source} —{Source}{/block:Source}{/block:Quote}
  625.  
  626. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  627.  
  628. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  629.  
  630. {block:Audio}{AudioPlayerWhite}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  631.  
  632. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  633.  
  634. {block:Answer}<div id="asker"><img src="{AskerPortraitURL-24}"></div>{Asker}:<br>{Question}<br>{Answer}{/block:Answer}
  635.  
  636. <div id="info"><a href="{Perimalink}">{block:Date}<a href="{Permalink}">{Month} {DayOfMonth}</a> {/block:Date} with <a href="{Permalink}">{NoteCount} notes </a> {block:RebloggedFrom} — <a href="{ReblogParentURL}">via</a> ; {/block:RebloggedFrom} {block:ContentSource}<a href="{SourceURL}"> src <a href="{SourceURL}"></a>{/block:ContentSource}{/block:RebloggedFrom}
  637. <br>
  638. {block:HasTags}{block:Tags} # <a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}</div>
  639.  
  640.  
  641. {block:PostNotes}{PostNotes}{/block:PostNotes}
  642. </div>{/block:Posts}
  643. </div>
  644.  
  645.  
  646. </div>
  647.  
  648. </div>
  649.  
  650.  
  651.  
  652.  
  653.  
  654.  
  655.  
  656.  
  657.  
  658.  
  659.  
  660.  
  661.  
  662.  
  663. </body>
  664.  
  665.  
  666. <div id="01" class="popup_block">
  667.  
  668. <h1><center>THEME INFORMATION</h1><br>
  669. <center>
  670.  
  671.  
  672.  
  673.  
  674. <a rel="license" href="http://creativecommons.org/licenses/by-nd/4.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nd/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nd/4.0/">Creative Commons Attribution-NoDerivatives 4.0 International License</a>.<br><br>
  675.  
  676. <b>●</b> my creative commons license means that my themes are available for use by the general public and may be edited. my license says that you may <b>not</b> redistribute my themes, even after editing them.<br><br>
  677.  
  678. <b>●</b> every single code on this blog was written by myself unless otherwise noted.<br><br>
  679.  
  680.  
  681. <b>●</b> The following people have helped me with my coding, by providing base codes, simple codes which I have included, or giving advice.
  682.  
  683. ofjack, sextlouis, ofpewds, paynex, alexgaeskarth, zerie, tinyvagina, hoenarry, hazzstop, academyoftumblr, twerkitnarry, hogwat
  684.  
  685.  
  686. </div></div></div></div></div></div></div></div></div></div>
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!