API tools faq
paste
Advertisement
ofcuteboys

Bulletproof Theme #8

ofcuteboys
May 2nd, 2014
3,652
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.72 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>
  4. <title>{Title}</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  8.  
  9. <!---
  10.  
  11.  
  12. 888 8888888 888b d888 8888888888 .d8888b.
  13. 888 888 8888b d8888 888 d88P Y88b
  14. 888 888 88888b.d88888 888 Y88b.
  15. 888 888 888Y88888P888 8888888 "Y888b.
  16. 888 888 888 Y888P 888 888 "Y88b.
  17. 888 888 888 Y8P 888 888 "888
  18. 888 888 888 " 888 888 Y88b d88P
  19. 88888888 8888888 888 888 8888888888 "Y8888P"
  20.  
  21. BULLETPROOF THEME VIII BY OFCUTEBOYS/LIMESTHEMES/CAROLINE
  22.  
  23. All of the customization options on this theme are within the code. The pop ups make it slightly more difficult to customize, but I made it as simple as I could. If you have questions, don't hesitate to ask me!
  24.  
  25. To find a pop up to customize, command+f and search "pop up" or "ask box"/"about me"/"navigation"
  26.  
  27. Remember to use my themes respectfully, which means no stealing/using as a base code/tampering with the credit/reposting/redistributing/etc. Just be nice and enjoy the theme!
  28.  
  29. --->
  30.  
  31.  
  32. <meta name="color:background" content="#ffffff"/>
  33. <meta name="color:text" content="#f7f7fa"/>
  34. <meta name="color:link" content="#888888"/>
  35. <meta name="color:accent" content="#ffffff"/>
  36. <meta name="color:sidebar" content="#ffffff"/>
  37.  
  38. <meta name="image:sidebar" content="" />
  39. <meta name="image:about me" content="http://24.media.tumblr.com/60871508ca55e0647c2d577906e121ac/tumblr_mssv2xRNo11rdkd18o1_400.jpg"/>
  40. <meta name="image:closebutton" content=""/>
  41.  
  42.  
  43.  
  44.  
  45. <meta name="text:link1" content="messages"/>
  46. <meta name="text:link2" content="about me"/>
  47. <meta name="text:link3" content="navigation"/>
  48. <meta name="text:link4" content="archive"/>
  49. <meta name="text:link4url" content="/archive"/>
  50. <meta name="text:sidebar image URL" content="url here"/>
  51.  
  52. <meta name="if:text url" content="1"/>
  53. <meta name="if:upload" content="0"/>
  54. <meta name="text:blog url" content="your url goes here"/>
  55.  
  56. <meta name="if:only render captions on permalink page" content="0"/>
  57.  
  58.  
  59. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  60.  
  61. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  62.  
  63. <script>
  64. (function($){
  65. $(document).ready(function(){
  66. $("[title]").style_my_tooltips({
  67. tip_follows_cursor:true,
  68. tip_delay_time:200,
  69. tip_fade_speed:300
  70. }
  71. );
  72. });
  73. })(jQuery);
  74. </script>
  75.  
  76.  
  77.  
  78.  
  79.  
  80.  
  81.  
  82.  
  83.  
  84. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  85. <script>
  86. $(document).ready(function(){
  87. $("#search").click(function(){
  88. $("#searchbox").slideToggle("fast");
  89. });
  90. });
  91. </script>
  92.  
  93.  
  94. <script type="text/javascript"
  95. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  96.  
  97. <script>
  98.  
  99.  
  100.  
  101. $(document).ready(function() {
  102.  
  103. //
  104.  
  105.  
  106.  
  107. //When you click on a link with class of poplight and the href starts with a #
  108.  
  109. $('a.poplight[href^=#]').click(function() {
  110.  
  111. var popID = $(this).attr('rel'); //Get Popup Name
  112.  
  113. var popURL = $(this).attr('href'); //Get Popup href to define size
  114.  
  115.  
  116.  
  117. //Pull Query & Variables from href URL
  118.  
  119. var query= popURL.split('?');
  120.  
  121. var dim= query[1].split('&');
  122.  
  123. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  124.  
  125.  
  126.  
  127. //Fade in the Popup and add close button
  128.  
  129. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="{image:closebutton}" class="btn_close" title="Close Window" alt="Close" /></a>');
  130.  
  131.  
  132. //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
  133.  
  134. var popMargTop = ($('#' + popID).height() + 80) / 2;
  135.  
  136. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  137.  
  138.  
  139.  
  140. //Apply Margin to Popup
  141.  
  142. $('#' + popID).css({
  143.  
  144. 'margin-top' : -popMargTop,
  145.  
  146. 'margin-left' : -popMargLeft
  147.  
  148. });
  149.  
  150.  
  151.  
  152. //Fade in Background
  153.  
  154. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  155.  
  156. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  157.  
  158.  
  159.  
  160. return false;
  161.  
  162. });
  163.  
  164.  
  165.  
  166. //Close Popups and Fade Layer
  167.  
  168. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  169.  
  170. $('#fade , .popup_block').fadeOut(function() {
  171.  
  172. $('#fade, a.close').remove(); //fade them both out
  173.  
  174. });
  175.  
  176. return false;
  177.  
  178. });
  179.  
  180.  
  181.  
  182.  
  183.  
  184. });
  185.  
  186. </script>
  187.  
  188.  
  189.  
  190. <style type="text/css">
  191.  
  192. #fade {
  193. display: none;
  194. background: #fff;
  195. position: fixed;
  196. left: 0;
  197. top: 0;
  198. width: 250px;
  199. height: 100%;
  200. opacity: 0;
  201. z-index: 9999;
  202. }
  203.  
  204. .popup_block{
  205. display: none;
  206. background: #FFFFFF;
  207. padding: 20px;
  208. float: left;
  209. position: fixed;
  210. top: 50%;
  211. left: 220px;
  212. z-index: 99999;
  213. }
  214.  
  215. img.btn_close {
  216. float: right;
  217. margin: 40px -15px 0 0;
  218. width:7px;
  219. }
  220.  
  221. *html #fade {
  222. position: absolute;
  223. }
  224.  
  225. *html .popup_block {
  226. position: absolute;
  227. }
  228.  
  229.  
  230.  
  231.  
  232. body {
  233. background-color:{color:background};
  234. font-family:Helvetica;
  235. font-size:11px;
  236. color:{color:text};
  237. }
  238.  
  239. a {
  240. color:{color:link};
  241. text-decoration:none;
  242. -webkit-transition-duration:.3s;
  243. -moz-transition-duration:.3s;
  244. -o-transition-duration:.3s;
  245. }
  246.  
  247. a:hover {
  248. color:{color:accent};
  249. }
  250.  
  251. h1 {
  252. font-size:18px;
  253. font-weight:lighter;
  254. letter-spacing:2px;
  255. font-family:Baskerville;
  256. font-style:italic;
  257. text-align:center;
  258. color:black;
  259. }
  260.  
  261. h1 a {
  262. color:black;
  263. font-family:Helvetica;
  264. font-size:18px;
  265. }
  266.  
  267. h1 a:hover {
  268. color:{color:accent};
  269. }
  270.  
  271. h2 {
  272. font-family:Helvetica;
  273. font-weight:200;
  274. border-bottom:1px solid black;
  275. letter-spacing:3px;
  276. font-size:14px;
  277. }
  278.  
  279. h3 {
  280. font-size:12px;
  281. text-transform:uppercase;
  282. font-weight:200;
  283. letter-spacing:4px;
  284. }
  285.  
  286. h4 {
  287. font-size:10px;
  288. letter-spacing:4px;
  289. text-transform:uppercase;
  290. font-weight:100;
  291. }
  292.  
  293.  
  294. blockquote {
  295. padding:10px;
  296. background-color:#f7f7fa;
  297. text-align:center;
  298. letter-spacing:2px;
  299. }
  300.  
  301. blockquote blockquote {
  302. padding:10px;
  303. background-color:white;
  304. }
  305.  
  306.  
  307. blockquote img,blockquote blockquote img {
  308. max-width:250px;
  309. border:20px solid white;
  310. }
  311.  
  312.  
  313.  
  314. #fresh {
  315. font-family:helvetica;
  316. margin-top:80px;
  317. margin-left:-62px;
  318. text-align:center;
  319. width:250px;
  320. font-size:13px;
  321. color:black;
  322. letter-spacing:10px;
  323. font-weight:400;
  324. text-transform:uppercase;
  325. -webkit-transition-duration:1s;
  326. -moz-transition-duration:1s;
  327. -o-transition-duration:1s;
  328. }
  329.  
  330. #fresh a{
  331. color:black;
  332. text-align:center;
  333.  
  334. }
  335.  
  336. #fresh a:hover {
  337. text-shadow:0px 0px 1px #000;
  338.  
  339. }
  340.  
  341.  
  342.  
  343. #sidebar {
  344. width:200px;
  345. height:855px;
  346. margin-left:00px;
  347. margin-top:-50px;
  348. border-right:40px solid #f7f7fa;
  349. border-left:30px double #f7f7fa;
  350. padding-left:100px;
  351. position:fixed;
  352. padding-right:20px;
  353. z-index:9999;
  354. }
  355.  
  356. #sidebarimage {
  357. width:150px;
  358. height:200px;
  359. margin-top:25px;
  360. margin-left:-40px;
  361. background-color:#f7f7fa;
  362. padding:20px;
  363. -webkit-transition-duration:1s;
  364. }
  365.  
  366. #sidebarimage img {
  367. width:150px;
  368. height:200px;
  369. -webkit-filter: saturate(120%);
  370. -webkit-transition-duration:1s;
  371. -moz-transition-duration:1s;
  372. -o-transition-duration:1s;
  373. }
  374.  
  375.  
  376.  
  377.  
  378. #sidebarquote {
  379. width:200px;
  380. line-height:180%;
  381. margin-left:-43px;
  382. margin-top:35px;
  383. font-style:italic;
  384. letter-spacing:2px;
  385. color:#000;
  386. text-align:center;
  387. font-family:baskerville;
  388. font-weight:100;
  389. font-size:13px;
  390. font-weight:normal;
  391. }
  392.  
  393.  
  394.  
  395. #links {
  396. width:180px;
  397. word-spacing:2px;
  398. display:inline-block;
  399. font-family:helvetica;
  400. text-align:center;
  401. font-size:10px;
  402. margin-top:-200px;
  403. margin-left:0px;
  404. color:black;
  405. letter-spacing:1px;
  406. text-transform:lowercase;
  407. position:fixed;
  408. opacity:0;
  409. -webkit-transition-duration:1s;
  410. -moz-transition-duration:1s;
  411. -o-transition-duration:1s;
  412. }
  413.  
  414. #sidebar:hover #links {
  415. opacity:1;
  416. }
  417.  
  418. #links a {
  419. color:black;
  420. background-color:white;
  421. border:1px solid black;
  422. padding:3px;
  423. display:block;
  424. width:100px;
  425. margin-top:10px;
  426. }
  427.  
  428. #links a:hover {
  429. background-color:rgba(255,255,255,.6);
  430. color:black;
  431. }
  432.  
  433.  
  434.  
  435. #postcontainer {
  436. margin-left:600px;
  437. margin-top:-50px;
  438. width:600px;
  439. }
  440.  
  441. #post {
  442. padding:5px 0px 5px 0px;
  443. width:500px;
  444. margin-top:100px;
  445. font-size:10px;
  446. letter-spacing:2px;
  447. line-height:180%;
  448. color:black;
  449. text-align:center;
  450. }
  451.  
  452. #post img {
  453. padding:30px;
  454. background-color:#f7f7fa;
  455. -webkit-transition-duration:500ms;
  456. -moz-transition-duration:500ms;
  457. -o-transition-duration:500ms;
  458. -ms-transition-duration:500ms;
  459. }
  460.  
  461. #post:hover img {
  462. -webkit-filter:grayscale(0%);
  463. -moz-filter:grayscale(0%);
  464. -o-filter:grayscale(0%);
  465. -ms-filter:grayscale(0%);
  466. }
  467.  
  468.  
  469.  
  470. .ask_block {
  471. width:525px;
  472. background-color:#f7f7fa;
  473. padding:10px;
  474. text-align:center;
  475. }
  476.  
  477. .answer {
  478. color:black;
  479. padding:10px;
  480. padding-top:5px;
  481. border:1px solid #f7f7fa;
  482. letter-spacing:1px;
  483. text-align:center;
  484. width:523px;
  485. }
  486.  
  487. .asker {
  488. font-size:9px;
  489. text-transform:uppercase;
  490. font-weight:normal;
  491. letter-spacing:2px;
  492. }
  493.  
  494. .asker a:hover {
  495. color:{color:accent};
  496. }
  497.  
  498. .info {
  499. margin-top:-20px;
  500. font-size:9px;
  501. color:black;
  502. padding-top:0px;
  503. text-align:left;
  504. padding:30px;
  505. padding-left:5px;
  506. width:100%;
  507. -webkit-transition-duration:.7s;
  508. -moz-transition-duration:.7s;
  509. -o-transition-duration:.7s;
  510. -ms-transition-duration:.7s;
  511.  
  512. }
  513.  
  514. .post:hover #info {
  515. opacity:1;
  516. }
  517.  
  518. .info a {
  519. color:#000;
  520. }
  521.  
  522. .reblog {
  523. font-style:italic;
  524. margin-left:10px;
  525. }
  526.  
  527. .info a:hover {
  528. color:{color:accent};
  529. }
  530.  
  531. .info img {
  532. padding:none;
  533. background-color:transparent;
  534. border:none;
  535. }
  536.  
  537. ::selection {
  538. background-color:{color:accent};
  539. }
  540.  
  541.  
  542. ::-webkit-scrollbar {
  543. width:1px;
  544. background-color:transparent;
  545. }
  546.  
  547.  
  548.  
  549.  
  550. #credit {
  551. bottom:3px;
  552. position:fixed;
  553. right:10px;
  554. float:right;
  555. font-family:calibri;
  556. color:black;
  557. font-size:9px;
  558. letter-spacing:1px;
  559. text-transform:uppercase;
  560. padding:5px;
  561.  
  562. }
  563.  
  564. #credit a {
  565. color:black;
  566. background-color:white;
  567. padding:5px;
  568. -webkit-transition-duration:.8s;
  569. -moz-transition-duration:.8s;
  570. -o-transition-duration:.8s;
  571. -ms-transition-duration:.8s;
  572. }
  573.  
  574. #credit a:hover {
  575. color:white;
  576. background-color:{color:accent};
  577. }
  578.  
  579.  
  580.  
  581.  
  582. #pagi {
  583. margin-top:20px;
  584. margin-left:-10px;
  585. height:50px;
  586. width:100%;
  587. text-align:center;
  588. }
  589.  
  590. .jump_page {
  591. padding: 8px 16px;
  592. background-color: #fff;
  593. color:#000;
  594. font-family:Helvetica;
  595. font-size:10px;
  596. letter-spacing:2px;
  597. text-decoration:none;
  598. }
  599.  
  600. .current_page, .jump_page:hover {
  601. padding: 8px 16px;
  602. color: {color:accent};
  603. text-decoration:none;
  604. -webkit-transition-duration:.4s;
  605. -moz-transition-duration:.4s;
  606. -o-transition-duration:.4s;
  607. -ms-transition-duration:.4s;
  608. }
  609.  
  610. .tags {
  611. font-weight:lighter;
  612. text-align:right;
  613. float:right;
  614. margin-left:8px;
  615. margin-top:0px;
  616. opacity:0;
  617. -webkit-transition-duration:.7s;
  618. -moz-transition-duration:.7s;
  619. -o-transition-duration:.7s;
  620. -ms-transition-duration:.7s;
  621. }
  622.  
  623.  
  624.  
  625. .tags a:hover {
  626. color:{color:accent};
  627. }
  628.  
  629. #post:hover .tags {
  630. opacity:1;
  631. }
  632.  
  633. .tags img {
  634. background-color:transparent;
  635. border:none;
  636. }
  637.  
  638. .captoin {
  639. background-color:#f7f7fa;
  640. color:black;
  641. padding:15px;
  642. letter-spacing:1px;
  643. line-height:200%;
  644. display:block;
  645. margin-top:10px;
  646. width:526px;
  647. border:2px solid #f5f5f7;
  648. }
  649.  
  650.  
  651. /*---RENDERED ONLY ON PERMALINK PAGES---*/
  652.  
  653.  
  654. #postnotes {
  655. display:block;
  656. margin-left:-30px;
  657. color:black;
  658. width:550px;
  659. }
  660.  
  661. #postnotes ol {
  662. line-height:110%;
  663. display:block;
  664. font-style:normal;
  665. color:black;
  666. list-style-type:Upper-Roman;
  667. }
  668.  
  669. #postnotes img {
  670. display:none;
  671. }
  672.  
  673. #postnotes a {
  674. text-transform:uppercase;
  675. font-size:8px;
  676. letter-spacing:3px;
  677. font-style:normal;
  678. }
  679.  
  680. #postnotes li {
  681. padding:5px;
  682. letter-spacing:2px;
  683. display:block;
  684. margin-left:0px;
  685. margin-top:5px;
  686. color:black;
  687. -webkit-transition-duration:.4s;
  688. -moz-transition-duration:.4s;
  689. -o-transition-duration:.4s;
  690. -ms-transition-duration:.4s;
  691. }
  692.  
  693. #postnotes li a:hover {
  694. text-shadow:1px 1px 1px #ccc;
  695. color:black;
  696. }
  697.  
  698.  
  699.  
  700. .sfm input {background-color: #f7f7fa;
  701. font-size: 8px;
  702. border: 0px;
  703. border:1px solid #777;
  704. text-transform: uppercase;
  705. margin-top: 10px;
  706. width:100px;
  707. color: #000;
  708. letter-spacing: 1px;
  709. padding: 4px 8px;
  710. font-family: calibri, helvetica, arial;}
  711. #sb {
  712. width:60px;
  713. }
  714.  
  715. #search {
  716. color:black;
  717. background-color:white;
  718. border:1px solid black;
  719. padding:3px;
  720. display:block;
  721. width:100px;
  722. margin-top:10px;
  723. cursor:help;
  724. -webkit-transition-duration:.6s;
  725. -o-transition-duration:.6s;
  726. -ms-transition-duration:.6s;
  727. -moz-transition-duration:.6s;
  728. }
  729.  
  730. #search:hover {
  731. background-color:rgba(255,255,255,.7);
  732. }
  733.  
  734. #searchbox, #search {
  735. text-align:center;
  736. }
  737.  
  738. #searchbox {
  739. display:none;
  740. margin-top:10px;
  741. }
  742.  
  743.  
  744. #s-m-t-tooltip{
  745. max-width:300px;
  746. margin:15px;
  747. padding:2px 8px;
  748. color:#000;
  749. font-weight:300;
  750. z-index:999999;
  751. font-size:10px;
  752. margin-top:-5px;
  753. font-family:helvetica;
  754. letter-spacing:2px;
  755. }
  756.  
  757. #description {
  758. background-color:white;
  759. height:100%;
  760. color:black;
  761. letter-spacing:2px;
  762. padding:10px;
  763. text-align:center;
  764. font-size:9px;
  765. line-height:200%;
  766. font-weight:100;
  767. }
  768.  
  769. .myimage {
  770. width:100px;
  771. margin-top:100px;
  772. border-radius:50%/50%;
  773. }
  774.  
  775.  
  776. #description h1 {
  777. font-family:Baskerville;
  778. font-weight:100;
  779. letter-spacing:2px;
  780. color:black;
  781. font-style:normal;
  782. font-size:18px;
  783. margin-top:20px;
  784. }
  785.  
  786. #description p {
  787. margin-top:20px;
  788. }
  789. #description a,#description a i {
  790. color:black;
  791. font-style:normal;
  792. font-family:Baskerville;
  793. font-size:11px;
  794. }
  795.  
  796.  
  797. .convo li{
  798. list-style: none;
  799. letter-spacing:2px;
  800. font-size:10px;
  801. line-height:200%;
  802. text-align:center;
  803. }
  804.  
  805. .convo .label {text-transform: uppercase; letter-spacing:3px;font-weight:500;}
  806.  
  807. .line_odd .label {color: #000;}
  808. .line_even .label {color: #000;}
  809.  
  810. .line_odd {
  811. background-color:white;
  812. color:#000;
  813. padding:4px;
  814. }
  815.  
  816. .line_even {
  817. background-color:#f7f7fa;
  818. padding:4px;
  819. color:#000;
  820. }
  821.  
  822. #navigation {
  823. background-color:white;
  824. height:100%;
  825. color:black;
  826. letter-spacing:2px;
  827. padding:10px;
  828. text-align:center;
  829. font-size:9px;
  830. line-height:200%;
  831. font-weight:100;
  832. width:300px;
  833. }
  834.  
  835. .linkylinks a {
  836. border-bottom:1px solid white;
  837. width:150px;
  838. color:black;
  839. display:block;
  840. text-align:center;
  841. font-weight:500;
  842. padding:15px;
  843. font-size:9px;
  844. text-transform:uppercase;
  845. -webkit-transition-duration:.5s;
  846. -moz-transition-duration:1s;
  847. -o-transition-duration:1s;
  848. }
  849.  
  850. .linkylinks a:hover .line {
  851. width:295px;
  852. margin-left:-70px;
  853. }
  854.  
  855. .line {
  856. margin-top:10px;
  857. background-color:black;
  858. width:0px;
  859. margin-left:75px;
  860. position:fixed;
  861. height:1px;
  862. -webkit-transition-duration:.5s;
  863. -moz-transition-duration:1s;
  864. -o-transition-duration:1s;
  865. }
  866.  
  867. #navigation h1 {
  868. font-family:Baskerville;
  869. font-style:italic;
  870. font-weight:100;
  871. letter-spacing:5px;
  872. color:black;
  873. font-size:18px;
  874. margin-top:120px;
  875. }
  876.  
  877.  
  878. #message {
  879. background-color:white;
  880. height:100%;
  881. color:#000;
  882. letter-spacing:1px;
  883. padding:10px;
  884. padding-right:25px;
  885. font-family:helvetica;
  886. text-align:center;
  887. font-size:11px;
  888. line-height:200%;
  889. font-weight:100;
  890. overflow:scroll;
  891. -webkit-filter:grayscale(100%);
  892. -moz-filter:grayscale(100%);
  893. -ms-filter:grayscale(100%);
  894. -o-filter:grayscale(100%);
  895. }
  896.  
  897. #message li:nth-of-type(odd) {
  898. list-style:url(http://i62.tinypic.com/28k09ys.jpg);
  899. text-align:left;
  900. }
  901.  
  902. #message li:nth-of-type(even) {
  903. list-style:url(http://i57.tinypic.com/2da0x7s.jpg);
  904. text-align:left;
  905. }
  906.  
  907. #message h1 {
  908. font-family:Baskerville;
  909. font-style:italic;
  910. font-weight:100;
  911. letter-spacing:5px;
  912. color:black;
  913. font-size:18px;
  914. margin-top:100px;
  915.  
  916. }
  917.  
  918.  
  919. .dinky {
  920. float:left;
  921. }
  922.  
  923.  
  924. #albumart img{
  925. width:80px;
  926. height:80px;
  927. padding:0px;
  928. border-width:0px;
  929. }
  930.  
  931.  
  932. .player {
  933. background-color:white;
  934. width:30px;
  935. overflow:hidden;
  936. height:28px;
  937. padding:5px;
  938. padding-left:8px;
  939. padding-right:1px;
  940. position:absolute;
  941. margin-top:-59px;
  942. margin-left:21px;
  943. }
  944.  
  945. .donkey {
  946. float:left;
  947. margin-left:25px;
  948. }
  949.  
  950. .track {
  951. width:275px;
  952. padding:10px;
  953. font-size:18px;
  954. font-family:Baskerville;
  955. font-style:italic;
  956. padding-top:0px;
  957. color:{color:accent};
  958. border-bottom:1px solid #eee;
  959. padding-bottom:5px;
  960. }
  961.  
  962.  
  963. .artist {
  964. width:287px;
  965. padding:4px;
  966. background-color:#f3f3f3;
  967. text-transform:uppercase;
  968. letter-spacing:3px;
  969. }
  970.  
  971. .playcount {
  972. width:287px;
  973. padding:4px;
  974. background-color:#f9f9f9;
  975. font-size:9px;
  976. text-transform:uppercase;
  977. letter-spacing:3px;
  978. }
  979.  
  980.  
  981. #audiolo {
  982. width:400px;
  983. padding-bottom:80px;
  984. }
  985.  
  986. #audiolo img {
  987. opacity:.3;
  988. -webkit-filter:grayscale(100%);
  989. -moz-filter:grayscale(100%);
  990. -ms-filter:grayscale(100%);
  991. -o-filter:grayscale(100%);
  992. -webkit-transition-duration:.5s;
  993. -o-transition-duration:.5s;
  994. -moz-transition-duration:.5s;
  995. -ms-transition-duration:.5s;
  996. }
  997.  
  998. #audiolo:hover img {
  999. opacity:1;
  1000. -webkit-filter:grayscale(0%);
  1001. -moz-filter:grayscale(0%);
  1002. -ms-filter:grayscale(0%);
  1003. -o-filter:grayscale(0%);
  1004.  
  1005. }
  1006.  
  1007. .quote {
  1008. font-family:Baskerville;
  1009. font-style:italic;
  1010. font-size:15px;
  1011. text-align:center;
  1012. border:20px solid white;
  1013. }
  1014.  
  1015. .source {
  1016. font-family:Helvetica;
  1017. border:20px solid white;
  1018.  
  1019. color:black;
  1020. text-align:center;
  1021. letter-spacing:5px;
  1022. text-transform:uppercase;
  1023. font-size:7px;
  1024. padding-bottom:10px;
  1025. text-decoration:none;
  1026. -webkit-transition-duration:.5s;
  1027. -o-transition-duration:.5s;
  1028. -moz-transition-duration:.5s;
  1029. -ms-transition-duration:.5s;
  1030. }
  1031.  
  1032.  
  1033.  
  1034. .source a {
  1035. font-family:Helvetica;
  1036. color:{color:accent};
  1037. text-decoration:none;
  1038. text-align:center;
  1039. letter-spacing:5px;
  1040. text-transform:uppercase;
  1041. font-size:5px;
  1042. }
  1043.  
  1044. .photoset {
  1045. background-color:#f7f7fa;
  1046. text-align:center;
  1047. padding-top:15px;
  1048. padding-bottom:15px;
  1049. width:560px;
  1050. }
  1051.  
  1052.  
  1053. .photos {
  1054. padding:25px;
  1055. padding-left:35px;
  1056. padding-top:10px;
  1057. }
  1058.  
  1059.  
  1060.  
  1061.  
  1062. </style>
  1063.  
  1064.  
  1065. </head>
  1066. <body>
  1067.  
  1068.  
  1069.  
  1070. <div id="sidebar">
  1071.  
  1072. <div id="fresh"><a href="/">{Title}</a></div>
  1073.  
  1074. <div id="sidebarimage">
  1075. {block:IfTextUrl}
  1076. <img src="{text:sidebar image URL}">{/block:IfTextUrl}
  1077. {block:IfUpload}<img src="{image:sidebar}">{/block:IfUpload}
  1078. </div>
  1079.  
  1080. <div id="links">
  1081. <a href="#?w=300" rel="message" class="poplight">{text:link1}</a>
  1082. <a href="#?w=300" rel="description" class="poplight">{text:link2}</a>
  1083. <a href="#?w=300" rel="navigation" class="poplight">{text:link3}</a>
  1084. <a href="{text:link4url}">{text:link4}</a>
  1085. <div id="search">search tags</a>
  1086. </div></div>
  1087.  
  1088.  
  1089. <div id="sidebarquote">{Description}
  1090. <div id="searchbox">
  1091. <form action="/search" method="get" class="sfm">
  1092. <input type="text" name="q" value="{SearchQuery}" id="sf"/>
  1093. <input type="submit" value="Search" id="sb"/>
  1094. </form>
  1095. </div>
  1096. </div>
  1097.  
  1098. </div>
  1099.  
  1100.  
  1101.  
  1102.  
  1103. <div id="postcontainer">
  1104. {block:Posts}
  1105. <div id="post">
  1106.  
  1107.  
  1108. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  1109.  
  1110.  
  1111.  
  1112. {block:Photo}{LinkOpenTag}<center><img src="{PhotoURL-500}" width="500px"></center></a>
  1113. {block:IfOnlyRenderCaptionsOnPermalinkPage}
  1114. {block:PermalinkPage}{block:Caption}<div class="captoin">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfOnlyRenderCaptionsOnPermalinkPage}
  1115. {block:IfNotOnlyRenderCaptionsOnPermalinkPage}
  1116. {block:Caption}<div class="captoin">{Caption}</div>{/block:Caption}{/block:IfNotOnlyRenderCaptionsOnPermalinkPage}
  1117.  
  1118.  
  1119.  
  1120. {/block:Photo}
  1121.  
  1122.  
  1123. {block:Photoset}
  1124. <div class="photoset"><div class="photos">{Photoset-500}</div></div>{block:IfOnlyRenderCaptionsOnPermalinkPage}
  1125. {block:PermalinkPage}{block:Caption}<div class="captoin">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfOnlyRenderCaptionsOnPermalinkPage}
  1126. {block:IfNotOnlyRenderCaptionsOnPermalinkPage}
  1127. {block:Caption}<div class="captoin">{Caption}</div>{/block:Caption}{/block:IfNotOnlyRenderCaptionsOnPermalinkPage}{/block:Photoset}
  1128.  
  1129.  
  1130. {block:Video}{Video-500}{block:IfOnlyRenderCaptionsOnPermalinkPage}
  1131. {block:PermalinkPage}{block:Caption}<div class="captoin">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfOnlyRenderCaptionsOnPermalinkPage}
  1132. {block:IfNotOnlyRenderCaptionsOnPermalinkPage}
  1133. {block:Caption}<div class="captoin">{Caption}</div>{/block:Caption}{/block:IfNotOnlyRenderCaptionsOnPermalinkPage}{/block:Video}
  1134.  
  1135.  
  1136. {block:Audio}<div id="audiolo">
  1137. <div class="dinky">
  1138. {block:AlbumArt}<div id="albumart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  1139.  
  1140. <div class="player">{AudioPlayerWhite}</div></div>
  1141. <div class="donkey">
  1142. <div class="track"> {block:TrackName}
  1143. {TrackName}
  1144. {/block:TrackName} </div>
  1145.  
  1146.  
  1147. <div class="artist">
  1148. {block:Artist}
  1149. {Artist}
  1150. {/block:Artist} </div>
  1151.  
  1152.  
  1153. <div class="playcount">
  1154.  
  1155. {block:PlayCount}{PlayCountWithLabel}{/block:PlayCount}</div></div>
  1156.  
  1157.  
  1158. {block:IfOnlyRenderCaptionsOnPermalinkPage}
  1159. {block:PermalinkPage}{block:Caption}<div class="captoin">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfOnlyRenderCaptionsOnPermalinkPage}
  1160. {block:IfNotOnlyRenderCaptionsOnPermalinkPage}
  1161. {block:Caption}<div class="captoin">{Caption}</div>{/block:Caption}{/block:IfNotOnlyRenderCaptionsOnPermalinkPage}</div>{/block:Audio}
  1162.  
  1163.  
  1164. {block:Quote}<div class="quote">{Quote}</div>{block:Source}<div class="source">{Source}</div>{/block:Source}{block:ContentSource}{/block:ContentSource}
  1165. {/block:Quote}
  1166.  
  1167.  
  1168. {block:Link}<h1><a href="{URL}" {Target}>{Name}</h1></a>{block:IfOnlyRenderCaptionsOnPermalinkPage}
  1169. {block:PermalinkPage}{block:Description}<div class="captoin">{Description}</div>{/block:Description}{/block:PermalinkPage}{/block:IfOnlyRenderCaptionsOnPermalinkPage}
  1170. {block:IfNotOnlyRenderCaptionsOnPermalinkPage}
  1171. {block:Description}<div class="captoin">{Description}</div>{/block:Description}{/block:IfNotOnlyRenderCaptionsOnPermalinkPage}{/block:Link}
  1172.  
  1173. {block:Answer}
  1174. <div class="ask_block"><span class="asker">{Asker}</span> asked: {Question}</div>
  1175. <div class="answer">{Answer}
  1176. </div>{/block:Answer}
  1177.  
  1178.  
  1179. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}<div class="convo">{block:Lines}<li class="line_{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}
  1180. {Line}</li>{/block:Lines}</div>
  1181. {/block:Chat}
  1182.  
  1183. <div class="info">
  1184. <!---POST INFO--->
  1185. <a href="{Permalink}"><b>{12Hour}:{Minutes}{ampm}</a>/<a href="{Permalink}">{NoteCountWithLabel}</b></a>
  1186. <a href="{ReblogURL}" class="reblog">reblog</a>
  1187. {block:HasTags}{block:Tags}<a href="{TagURL}" class="tags">#{Tag}</a> {/block:Tags}{/block:HasTags}</div>
  1188.  
  1189. </div>
  1190. {/block:Posts}
  1191.  
  1192. <div id="postnotes">{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  1193.  
  1194.  
  1195. <div id="pagi">
  1196. {block:Pagination}
  1197. {block:PreviousPage}<a href="{PreviousPage}" class="jump_page">&laquo;</a>{/block:PreviousPage}
  1198.  
  1199. {block:JumpPagination length="5"}
  1200. {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  1201. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  1202. {block:NextPage}<a href="{NextPage}" class="jump_page">&raquo;</a>{/block:NextPage}
  1203. {/block:Pagination}
  1204. </div></div>
  1205.  
  1206. <div id="credit"><a href="http://ofcuteboys.tumblr.com">ofcuteboys</a></div>
  1207.  
  1208.  
  1209. </body>
  1210.  
  1211. <!---POP UP ASK BOX/MESSAGE PAGE--->
  1212. <div id="message" class="popup_block">
  1213. <!---I put in notes and several blank questions which you should use to put in your FAQ! If you want to add more questions, just add <li>QUESTION</li><li>ANSWER</li><br> and put your own stuff in. If you want to take out a question, just highlight everything between one QUESTION and END QUESTION and delete it. You don't have to touch the askbox code, just type your URL in the box on the customization page where it goes.-->
  1214.  
  1215. <h1>FAQ</h1><!---PUT THE TITLE HERE--->
  1216. <ul>
  1217. <li>How do I set up my FAQ?</li>
  1218. <li>Use an unordered list just like this one! The list items have been set up for you so that the images show up. Just type your questions and answers, and make sure to put a break tag in between each section.</li>
  1219. <br>
  1220. <!---QUESTION--->
  1221. <li>PUT YOUR QUESTION HERE</li>
  1222. <li>PUT YOUR ANSWER HERE</li>
  1223. <br>
  1224. <!----END OF QUESTION--->
  1225. <!---QUESTION--->
  1226. <li>PUT YOUR QUESTION HERE</li>
  1227. <li>PUT YOUR ANSWER HERE</li>
  1228. <br>
  1229. <!----END OF QUESTION--->
  1230. <!---QUESTION--->
  1231. <li>PUT YOUR QUESTION HERE</li>
  1232. <li>PUT YOUR ANSWER HERE</li>
  1233. <br>
  1234. <!----END OF QUESTION--->
  1235. <!---QUESTION--->
  1236. <li>PUT YOUR QUESTION HERE</li>
  1237. <li>PUT YOUR ANSWER HERE</li>
  1238. <br>
  1239. <!----END OF QUESTION--->
  1240.  
  1241.  
  1242.  
  1243. </ul> <p><iframe frameborder="0" scrolling="no" width="100%" height="250" src="http://www.tumblr.com/ask_form/{text:blog url}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
  1244.  
  1245. </div>
  1246.  
  1247.  
  1248.  
  1249. <!---POP UP ABOUT ME--->
  1250. <div id="description" class="popup_block">
  1251. <img src="{image:about me}" class="myimage">
  1252. <p><h1><i>Name; Age</i></h1></p>
  1253.  
  1254. <p>In this first paragraph, write a quick summary of yourself. Maybe give some modifiers, or things you like to do. For example, "Mediocre theme maker and pop punk groupie"</p>
  1255. <p>Write more about yourself here!</p>
  1256. <p>And maybe a little more! If you have lots to say, just add more p tags.</p>
  1257. <p><i><a href="/me">More About Me</a></i></p>
  1258.  
  1259. </div>
  1260.  
  1261.  
  1262. <!---POP UP NAVIGATION--->
  1263.  
  1264. <div id="navigation" class="popup_block">
  1265. <h1>Navigation</h1><center><!---ERASE NAVIGATION AND PUT IN YOUR TITLE-->
  1266. <div class="linkylinks">
  1267. <a href="LINK URL">LINK NAME<div class="line"></div></a>
  1268. <a href="LINK URL">LINK NAME <div class="line"></div></a>
  1269. <a href="LINK URL">LINK NAME <div class="line"></div></a>
  1270. <a href="LINK URL">LINK NAME <div class="line"></div></a>
  1271. <a href="LINK URL">LINK NAME <div class="line"></div></a>
  1272. </div></center>
  1273. </div>
  1274.  
  1275.  
  1276.  
  1277. </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!