API tools faq
paste
Advertisement
lizarps

Theme #011: Apartment 3C

lizarps
May 1st, 2016
488
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.26 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <!--
  5. Original coding by crayonthemes
  6. T H E M E • B Y • L I Z
  7. ✿ THEME BY LIZ @ MORRISONSRPH ✿
  8. -->
  9.  
  10. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  11. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  12.  
  13. <title>{Title}</title>
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16.  
  17. {block:Description}
  18. <meta name="description" content="{MetaDescription}"/>
  19. {/block:Description}
  20.  
  21.  
  22. <head>
  23. <script type="text/javascript"
  24. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  25. <script>
  26. $(document).ready(function() {
  27. //
  28. $('a.poplight[href^=#]').click(function() {
  29. var popID = $(this).attr('rel'); //Get Popup Name
  30. var popURL = $(this).attr('href'); //Get Popup href to define size
  31. var query= popURL.split('?');
  32. var dim= query[1].split('&');
  33. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  34. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  35. var popMargTop = ($('#' + popID).height() + 80) / 2;
  36. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  37. //Apply Margin to Popup
  38. $('#' + popID).css({
  39. 'margin-top' : -popMargTop,
  40. 'margin-left' : -popMargLeft
  41. });
  42. $('body').append('<div id="fade"></div>');
  43. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  44. return false;
  45. });
  46. $('a.close, #fade').live('click', function() {
  47. $('#fade , .popup_block').fadeOut(function() {
  48. $('#fade, a.close').remove(); //fade them both out
  49. });
  50. return false;
  51. });
  52. });
  53. </script>
  54.  
  55.  
  56. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  57. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  58.  
  59. <meta name="image:Background" content=""/>
  60. <meta name="image:Sidebar 1" content=""/>
  61.  
  62. <meta name="color:background" content="ffffff"/>
  63. <meta name="color:text" content="#000000"/>
  64. <meta name="color:links" content="#dddddd"/>
  65. <meta name="color:bold" content="#809729" />
  66. <meta name="color:italic" content="#809729" />
  67. <meta name="color:sidebar" content="#ffffff"/>
  68. <meta name="color:sidebar links" content="#f1f1f1"/>
  69. <meta name="color:sidebar text" content="#fffff"/>
  70. <meta name="color:sidebar link hover" content="#ffffff"/>
  71. <meta name="color:hover" content="#eeeeee"/>
  72. <meta name="color:box background" content="#ef95a5"/>
  73. <meta name="color:border" content="#000000"/>
  74. <meta name="color:scrollbar" content="#000000"/>
  75. <meta name="color:title" content="#eeeeee"/>
  76. <meta name="color:post background" content="#ffffff"/>
  77. <meta name="color:post links" content="#ef95a5"/>
  78. <meta name="color:permalink border" content="#dddddd"/>
  79. <meta name="color:box shadow" content="#999" />
  80. <meta name="color:info" content="#ffffff" />
  81. <meta name="color:notes" content="#c4d6e8"/>
  82.  
  83. <meta name="text:Hover 1" content="hover 1"/>
  84. <meta name="text:Hover 2" content="hover 2"/>
  85. <meta name="text:Hover 3" content="hover 3"/>
  86. <meta name="text:Hover 4" content="hover 4"/>
  87. <meta name="text:Hover 5" content="hover 5"/>
  88.  
  89. <meta name="if:styledpre" content="1" />
  90.  
  91. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  92.  
  93. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  94.  
  95. <script>
  96.  
  97. (function($){
  98.  
  99. $(document).ready(function(){
  100.  
  101. $("a[title]").style_my_tooltips({
  102.  
  103. tip_follows_cursor:true,
  104.  
  105. tip_delay_time:90,
  106.  
  107. tip_fade_speed:900,
  108.  
  109. attribute:"title"
  110.  
  111. });
  112.  
  113. });
  114.  
  115. })(jQuery);
  116.  
  117. </script>
  118.  
  119.  
  120. <style type="text/css">
  121.  
  122. ::-webkit-scrollbar-thumb {
  123. height:auto;
  124. background-color:{color:Scrollbar};
  125. }
  126.  
  127. ::-webkit-scrollbar {
  128. height:9px;
  129. width:4px;
  130. background-color:{color:ScrollbarBg};
  131. }
  132.  
  133. /*Fonts*/
  134. <link href='http://fonts.googleapis.com/css?family=Poiret+One|Amatic+SC|Megrim|Raleway+Dots' rel='stylesheet' type='text/css'>
  135.  
  136. <link href='http://fonts.googleapis.com/css?family=Lekton|Antic+Slab|Andika' rel='stylesheet' type='text/css'>
  137.  
  138. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  139.  
  140.  
  141. /* MAIN */
  142.  
  143. body {
  144. background-color:{color:background};
  145. background-image: url('{image:Background}');
  146. color:{color:Text};
  147. font-family: 'roboto'
  148. text-transform: uppercase;
  149. font-size: 10px;
  150. margin: 0px;
  151. padding: 0px;
  152. }
  153.  
  154. iframe#tumblr_controls {
  155. position:fixed!important;
  156. width:40%;
  157. right:3px!important;
  158. top:3px!important;
  159. opacity:.4;
  160. }
  161.  
  162. iframe#tumblr_controls a:hover{
  163. opacity:.9;
  164. }
  165.  
  166. img {
  167. border:none;
  168. overflow:hidden!important;
  169. margin-bottom:10px
  170. }
  171.  
  172. a:link, a:active {
  173. text-decoration:none;
  174. font-size:10px;
  175. color: {color:links}; }
  176.  
  177. a:visited {
  178. text-decoration:none;
  179. color: {color:links}; }
  180.  
  181. a:hover {
  182. text-decoration:none;
  183. color: {color:hover};
  184. font-style:normal;}
  185.  
  186. b, strong {
  187. font-size:9px;
  188. text-shadow:3px 3px 5px {color:#ef95a5};
  189. }
  190.  
  191. blockquote {
  192. border-left:2px solid {color:text};
  193. padding-left:6px; }
  194.  
  195. blockquote img {
  196. max-width:370px!important;
  197. }
  198.  
  199. #tumblr_controls{ position:fixed!important; right: 0px; top:0px;}
  200.  
  201. i, em, .em {color:{color:text};}
  202.  
  203. u, ul {
  204. font-size:10px;
  205. color:#00bcc8;
  206. }
  207.  
  208. big {
  209. font-size:12px;
  210. color:#debeb6;
  211. }
  212.  
  213.  
  214. {block:ifstyledpre}
  215. pre {
  216. text-align:center;
  217. padding:6px;
  218. border:1px solid {color:Text};
  219. box-shadow:2px 2px {color:text};
  220. background:transparent;
  221. color:{color:Text};
  222. font-size:10px;
  223. word-wrap:break-word;
  224. font-family:helvetica;
  225. text-transform:uppercase;
  226. margin:10px;
  227. }
  228. {/block:ifstyledpre}
  229.  
  230. small{font-size:9px;}
  231.  
  232. h1 {
  233. font-size:15px;
  234. color:{color:text};
  235. text-transform:uppercase;
  236. font-family: 'Roboto', sans-serif;
  237. background-color:{color:info};
  238. padding:10px;
  239. font-style:bold, italic;
  240. text-align:center;
  241. }
  242.  
  243. h2 {
  244. font-size:10px;
  245. text-align:center;
  246. line-height:100%;
  247. letter-spacing:-0.5px;
  248. color:{color:text};
  249. background-color:{color:info};
  250. font-weight:bold;
  251. text-transform:uppercase;
  252. padding:5px;
  253. padding-bottom:2px;
  254. }
  255.  
  256.  
  257. .tooltip{
  258. display: inline;
  259. position: relative;
  260. }
  261.  
  262. #s-m-t-tooltip {
  263. max-width:230px;
  264. padding:2px 2px 2px 3px;
  265. margin:20px 7px -2px 20px;
  266. background-color:{color:odd chat background};
  267. font-family:'04b03', arial;
  268. font-size:8px;
  269. line-height:10px;
  270. letter-spacing:1px;
  271. text-transform:uppercase;
  272. color:{color:odd chat text};
  273. z-index:999999999999999999999999999999999999;
  274. -webkit-animation: scale .8s 1; /* Chrome, Safari, Opera */
  275. animation: scale .8s 1;
  276. }
  277.  
  278. .sidebar {
  279. position:fixed;
  280. margin-left:200px;
  281. margin-top:-10px;
  282. height:500px;
  283. width:400px;
  284. padding:5px;
  285. background:{color:post links};
  286. box-shadow: 3px 3px 5px {color:box shadow};
  287. }
  288.  
  289.  
  290. /* CONTENT */
  291.  
  292. .container {
  293. max-height: 500px;
  294. height: 500px;
  295. overflow: auto;
  296. background-color: #000000;
  297. }
  298.  
  299. #entries {
  300. position: fixed;
  301. height:500px;
  302. background-color: {color:post links};
  303. overflow:auto;
  304. padding:5px;
  305. overflow-x:hidden;
  306. width:565px;
  307. margin-left:590px;
  308. margin-top:-20px;
  309. box-shadow: 3px 3px 5px {color:box shadow};
  310. }
  311.  
  312. #post {
  313. width: 500px;
  314. margin-left:10px;
  315. margin-top:20px;
  316. height: auto;
  317. background-color:#fff;
  318. padding: 20px;
  319. margin-bottom:25px;
  320. color: {color:text};
  321. text-align:justify;
  322. }
  323.  
  324. /*POST INFO*/
  325.  
  326. #info {
  327. width:500px;
  328. text-align:center;
  329. font-family:'arial';
  330. margin-top:2px;
  331. margin-left:-5px;
  332. letter-spacing:1px;
  333. font-size:10px;
  334. font-style:none;
  335. padding:5px;
  336. line-height:10px;
  337. text-transform:uppercase;
  338. background:{color:info};
  339. border-bottom:{color:post bg};
  340. border-top: 1px dotted {color:post bg};;
  341. }
  342.  
  343. #info a {
  344. text-align:center;
  345. color:{color:Post Links};
  346. }
  347.  
  348. #info a:hover {
  349. -moz-transition-duration:0.3s;
  350. -webkit-transition-duration:0.3s;
  351. -o-transition-duration:0.3s;
  352. color:{color:Hover}
  353. }
  354.  
  355. #tags {
  356. float:left;
  357. background-color:#c4d6e8;
  358. color:{color:Post Links};
  359. width:530px;
  360. margin-top:6px;
  361. margin-left:-20px;
  362. text-align:center;
  363. font-size:7px;
  364. padding:5px;
  365. margin-bottom:30px;
  366. font-size:8px;
  367. opacity:1;
  368. transition-duration: 0.5s;
  369. -moz-transition-duration: 0.5s;
  370. -webkit-transition-duration: 0.5s;
  371. -o-transition-duration: 0.5s
  372. }
  373.  
  374. #tags a {
  375. letter-spacing:0px;
  376. font-size:8px;
  377. padding:5px;
  378. text-align:center;
  379. font-family:'CALIBRI';
  380. text-decoration:uppercase;
  381. display:inline-block;
  382. color:{color:post links};
  383. }
  384.  
  385. #tags a:hover {
  386. -moz-transition-duration:0.3s;
  387. -webkit-transition-duration:0.3s;
  388. -o-transition-duration:0.3s;
  389. color:{color:Hover};
  390. }
  391.  
  392.  
  393. /*Sidebar*/
  394.  
  395. .sidebarimage {
  396. position:fixed;
  397. margin-top:50px;
  398. margin-left:35px;
  399. width:120px;
  400. height:120px;
  401. background:{color:Background};
  402. border:3px double {color:Sidebar};
  403. box-shadow: 3px 3px 5px {color:box shadow};
  404. }
  405.  
  406. .sbimg1 {
  407. position:fixed;
  408. margin:0;
  409. opacity:1;
  410. -webkit-transition: all .8s ease-in-out;
  411. -moz-transition: all .8s ease-in-out;
  412. -ms-transition: all .8s ease-in-out;
  413. -o-transition: all .8s ease-in-out;
  414. transition: all .8s ease-in-out;
  415. }
  416.  
  417. .blogtitle {
  418. margin-top:80px;
  419. margin-left:-870px;
  420. z-index:100;
  421. font-size:35px;
  422. font-weight:400;
  423. text-transform:uppercase;
  424. font-family:bebas neou, helvetica;
  425. letter-spacing:3px;
  426. line-height:18px;
  427. text-align:center;
  428. color:{color:Title};
  429. padding:5px;
  430. transition: all 0.5s ease-in-out;
  431. -webkit-transition: all 0.5s ease-in-out;
  432. -moz-transition: all 0.5s ease-in-out;
  433. -o-transition: all 0.5s ease-in-out;
  434. }
  435.  
  436. #tit {
  437. position:fixed;
  438. margin-top:0px;
  439. font-family:'roboto';
  440. }
  441.  
  442. #sb {
  443. position:fixed;
  444. margin-top:560px;
  445. margin-left:0px;
  446. }
  447.  
  448.  
  449. #description {
  450. background:{color:post background};
  451. position:fixed;
  452. width:320px;
  453. height:160px;
  454. font-family:'calibri';
  455. font-size:10px;
  456. margin-top:190px;
  457. margin-left:25px;
  458. overflow:auto;
  459. padding:10px;
  460. text-align:justify;
  461. line-height:14px;
  462. color:{color:text};
  463. text-transform:none;
  464. box-shadow: 3px 3px 5px {color:box shadow};
  465. }
  466.  
  467. #description::-webkit-scrollbar-thumb {
  468. width:3px;
  469. height:4px;
  470. background:{color:Sidebar text};
  471. }
  472.  
  473. #description::-webkit-scrollbar {
  474. background:{color:Sidebar text};
  475. width:3px;
  476. }
  477.  
  478.  
  479. #icons {
  480. position:fixed;
  481. padding:5px;
  482. padding-right:0px;
  483. margin-top:390px;
  484. margin-left:110px;
  485. z-index:11;
  486. height:20px;
  487. font-size:17px;
  488. color:{color:post background};
  489. }
  490.  
  491. #icons a {
  492. padding:0 5px;
  493. margin-left:6px;
  494. display:inline-block;
  495. color:{color:post background};
  496. }
  497.  
  498. #icons a:hover {
  499. color:{color:post background};
  500. text-shadow:0px 0px 1px {color:Hover};
  501. }
  502.  
  503. /*PAGINATION*/
  504. #pagination {
  505. margin-top:430px;
  506. margin-left:250px;
  507. width:320px;
  508. position:fixed;
  509. padding:10px 0px;
  510. font-family:'04b03', sans-serif;
  511. font-size:8px;
  512. letter-spacing:2px;
  513. text-transform:uppercase;
  514. line-height:8px;
  515. text-align:center;
  516. }
  517.  
  518. #pagination a {
  519. padding:0px 10px;
  520. font-size:8px;
  521. letter-spacing:4px;
  522. color:{color:post background};
  523. }
  524.  
  525. /*AUDIO*/
  526. #audio {
  527. min-height:70px;
  528. margin:0;
  529. padding:0 0 5px 0;
  530. }
  531.  
  532. #albumartwork {
  533. position:absolute;
  534. background-image: url('http://static.tumblr.com/hbqviai/7KBlqu606/no_album_art.jpg');
  535. background-repeat:no-repeat;
  536. background-position:left;
  537. background-size:80px 80px;
  538. margin:0;
  539. height:80px;
  540. width:80px;
  541. }
  542.  
  543.  
  544. #audioinfo {
  545. font-family:ms gothic;
  546. font-size:11px;
  547. line-height:14px;
  548. margin-top:0px;
  549. margin-left:80px;
  550. height:60px;
  551. padding:10px;
  552. text-align:left;
  553. list-style:none;
  554. color:{color:text};
  555. }
  556.  
  557. #abox {
  558. position:absolute;
  559. margin-top:15px;
  560. margin-left:15px;
  561. width:30px;
  562. height:30px;
  563. padding:10px;
  564. opacity:.9;
  565. background:white;
  566. -webkit-transition: all 0.7s ease;
  567. -moz-transition: all 0.7s ease;
  568. -ms-transition: all 0.7s ease;
  569. -o-transition: all 0.7s ease;
  570. transition: all 0.7s ease;
  571. }
  572.  
  573. #abox:hover {
  574. opacity:1;
  575. }
  576.  
  577. #audioplayer {
  578. margin-top:1px;
  579. margin-left:1px;
  580. width:28px;
  581. height:28px;
  582. overflow:hidden;
  583. }
  584.  
  585.  
  586. /*Titles*/
  587. .title1 {
  588. font-family:helvetica, sans-serif;
  589. font-size:18px;
  590. font-weight:bold;
  591. line-height:100%;
  592. letter-spacing:0px;
  593. padding:0;
  594. margin-bottom:5px;
  595. }
  596.  
  597. .title1::first-letter {
  598. text-transform:uppercase;
  599. }
  600.  
  601.  
  602. /*QUOTE*/
  603. .quote {
  604. font-size:18px;
  605. font-family:helvetica;
  606. font-style:normal;
  607. margin-bottom:15px;
  608. text-transform:normal;
  609. text-align:left;
  610. font-weight:bold;
  611. font-style:italic;
  612. color:{color:Text};
  613. }
  614.  
  615. .quotesource {
  616. font-size:9px;
  617. text-align:right;
  618. font-style:none;
  619. text-transform:lowercase;
  620. font-family:helvetica;
  621. margin-bottom:5px;
  622. color:{color:Text};
  623. }
  624.  
  625.  
  626. /*CHAT*/
  627. .answer span,.convo li{
  628. margin:0 0 5px;
  629. border-radius:1em;
  630. padding:.5em 10px;
  631. max-width:75%;
  632. clear:both;
  633. position:relative
  634. }
  635. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{
  636. float:left;
  637. background-color:#c4d6e8;
  638. color:#000;
  639. left:3px
  640. }
  641. .me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after{
  642. content:"";
  643. position:absolute;
  644. left:-.5em;
  645. bottom:0;
  646. width:.5em;
  647. height:1em;
  648. border-right:.5em solid #c4d6e8;
  649. border-bottom-right-radius:1em .5em
  650. }
  651. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{
  652. right:3px;
  653. float:right;
  654. background-color:#ef95a5;
  655. color:#000
  656. }
  657. .them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after{
  658. content:"";
  659. position:absolute;
  660. right:-.5em;
  661. bottom:0;
  662. width:.5em;
  663. height:1em;
  664. border-left:.5em solid #ef95a5;
  665. border-bottom-left-radius:1em .5em
  666. }
  667. .me p,.answer,.asked span{
  668. padding:0;margin:0
  669. }
  670. .answer{
  671. overflow:hidden
  672. }
  673.  
  674. .asked p {
  675. text-align: left;
  676. margin: 0 0px 10px 0px;
  677. padding: 0;
  678. color: #666666;
  679. font-family: 'Inconsolata', Inconsolata;
  680. font-size: 12px;
  681. line-height: 0px;
  682. }
  683.  
  684. .footerright .viasrc {
  685. float: left;
  686. }
  687. .asked a {
  688. margin:0;padding:0;
  689. }
  690. .user_4{background-color:;color:#000000}.user_4::after{border-color:}.user_6{background-color:;color:#000000}.user_6::after{border-color:}.user_5{background-color:;color:#000}.user_5::after{border-color:}.user_3{background-color:;color:#000000}.user_3::after{border-color:}.user_7{background-color:;color:#000000}.user_7::after{border-color:}.user_8{background-color:;color:#000000}.user_8::after{border-color:}.user_9{background-color:;color:#000000}.user_9::after{border-color:}
  691.  
  692. .convo {
  693. overflow: hidden;
  694. list-style-type: none;
  695. padding: 0;
  696. margin: 0;
  697. }
  698.  
  699.  
  700. /*ASKS*/
  701. .que {
  702. padding:9px;
  703. text-align:left;
  704. font-size:9px;
  705. text-transform:italic;
  706. color:{color:text};
  707. background-color: #f5f5f5;
  708. border-left:3px solid {color:post links};
  709. }
  710.  
  711. .asker a {
  712. color:{color:odd chat text};
  713. margin-left:0px;
  714. margin-bottom:15px;
  715. font-size:10px;
  716. text-transform:uppercase;
  717. }
  718.  
  719. .asker {
  720. text-align:left;
  721. padding-top:5px;
  722. color:{color:text};
  723. }
  724.  
  725. .answer {
  726. text-align:left;
  727. margin-top:5px;
  728. margin-bottom:5px;
  729. font-size:11px;
  730. }
  731.  
  732.  
  733. #perma {
  734. padding:10px 15px 0px 15px;
  735. text-align:center;
  736. font-family:ms gothic;
  737. font-size:11px;
  738. letter-spacing:1px;
  739. line-height:13px;
  740. text-transform:uppercase;
  741. color:{color:text};
  742. }
  743.  
  744. #perma a {
  745. color:{color:Links};
  746. -webkit-transition: all 0.7s ease;
  747. -moz-transition: all 0.7s ease;
  748. -ms-transition: all 0.7s ease;
  749. -o-transition: all 0.7s ease;
  750. transition: all 0.7s ease;
  751. }
  752.  
  753.  
  754. /* Chrome, Safari, Opera */
  755. @-webkit-keyframes scale {
  756.  
  757. 0% { transform: scale(.5, .5);-moz-transform: scale(.5, .5);-ms-transform: scale(.5, .5);-webkit-transform: scale(.5, .5);-o-transform: scale(.5, .5);}
  758.  
  759. 50% {transform: scale(1.25, 1.25); -moz-transform: scale(1.25, 1.25); -ms-transform: scale(1.25, 1.25); -webkit-transform: scale(1.25, 1.25); -o-transform: scale(1.25, 1.25);}
  760.  
  761. 100% {transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); -o-transform: scale(1, 1);}
  762.  
  763. }
  764.  
  765. /* Standard syntax */
  766. @keyframes scale {
  767.  
  768. 0% { transform: scale(.5, .5); -moz-transform: scale(.5, .5); -ms-transform: scale(.5, .5); -webkit-transform: scale(.5, .5); -o-transform: scale(.5, .5);}
  769.  
  770. 50% {transform: scale(1.25, 1.25); -moz-transform: scale(1.25, 1.25); -ms-transform: scale(1.25, 1.25); -webkit-transform: scale(1.25, 1.25);
  771. -o-transform: scale(1.25, 1.25);}
  772.  
  773. 100% {transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); -o-transform: scale(1, 1);}
  774. }
  775.  
  776. /*--
  777.  
  778. updates tab #7 by BRAVETHEMES
  779.  
  780. ◤ ◥
  781. don't be an asshole;
  782. keep the credits.
  783. ◣ ◢
  784.  
  785. - - - -
  786.  
  787. for html help go to:
  788. http://bravethemes.tumblr.com/
  789. http://htmlqueens.tumblr.com/
  790.  
  791. --*/
  792. .kingdom{/* this is the coding to the whole tab holder */
  793. width:150px; /* change the width here */
  794. top:100px; /* change how far from the top ; you can also change it to bottom */
  795. left:400px; /* how far from right ; you can also change it to left */
  796. padding:3px;
  797. position:fixed;
  798. background:transparent; /* change the background here */
  799. color:#fff;
  800. }
  801.  
  802. .kingdom b{ /* this are the subtitles */
  803. text-align:center;
  804. line-height:20px;
  805. border-bottom:1px solid #ffffff; /* change the border here */
  806. margin-bottom:2px;
  807. letter-spacing:2px;}
  808.  
  809. #queen{ /* the thing that gets hovered over */
  810. border:1px solid #ffffff; /* change the border here */
  811. padding:7px;
  812. margin:7px;
  813. margin-top:22px;
  814. text-align:center;
  815. font-size:11px;
  816. height:36px;
  817. box-shadow: 3px 3px 5px {color:box shadow};
  818. }
  819.  
  820. .royal{ /* here you cusomize the titles */
  821. border-bottom:1px solid #fff; /* change the borders here */
  822. font-weight:bold;
  823. text-align:center;
  824. font-size:9px
  825. padding:10px;
  826. }
  827.  
  828. /*CREDIT*/
  829.  
  830. #cred {
  831. position:fixed;
  832. font-family:'Calibri';
  833. text-transform:uppercase;
  834. font-size:8px;
  835. right:9px;
  836. bottom:9px;
  837. padding:4px;
  838. letter-spacing:1px;
  839. background-color:{color:content bg};
  840. border:1px solid color: #ef95a5;
  841. }
  842.  
  843. /*POP-UP*/
  844.  
  845. .popup_block{
  846. display:none;
  847. background:#fff;
  848. padding:20px;
  849. border:1px solid #eee; /* if you want a solid white pop-up, delete this */
  850. float:left;
  851. position:fixed;
  852. top:50%;left:50%;
  853. z-index: 99999;
  854. -webkit-box-shadow: 0px 0px 20px #000; /* delete for solid white */
  855. -moz-box-shadow: 0px 0px 20px #000; /* delete for solid white */
  856. box-shadow: 0px 0px 20px #000; /* delete for solid white */
  857. }
  858.  
  859. *html #fade {position: absolute;}
  860. *html .popup_block {position: absolute;}
  861. #fade {
  862. display:none;
  863. position:fixed;
  864. left:0px;
  865. top:0px;
  866. width:100%;
  867. height:100%;
  868. z-index:9999;
  869. background:#fff; /* change to #fff for solid white */
  870. opacity:0.5; /* change to opacity:1; */
  871. }
  872. {CustomCSS}
  873. </style>
  874.  
  875. <script type="text/javascript"
  876. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  877. <script>
  878. $(document).ready(function() {
  879. //
  880. $('a.poplight[href^=#]').click(function() {
  881. var popID = $(this).attr('rel'); //Get Popup Name
  882. var popURL = $(this).attr('href'); //Get Popup href to define size
  883. var query= popURL.split('?');
  884. var dim= query[1].split('&');
  885. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  886. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  887. var popMargTop = ($('#' + popID).height() + 80) / 2;
  888. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  889. //Apply Margin to Popup
  890. $('#' + popID).css({
  891. 'margin-top' : -popMargTop,
  892. 'margin-left' : -popMargLeft
  893. });
  894. $('body').append('<div id="fade"></div>');
  895. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  896. return false;
  897. });
  898. $('a.close, #fade').live('click', function() {
  899. $('#fade , .popup_block').fadeOut(function() {
  900. $('#fade, a.close').remove(); //fade them both out
  901. });
  902. return false;
  903. });
  904. });
  905. </script>
  906.  
  907. </head>
  908. <body>
  909.  
  910. <div class="sidebar">
  911. <div class="sidebarimage">
  912. <div class="sbimg1"><img src="{image:Sidebar 1}"></div>
  913. </div>
  914.  
  915. <div id="icons">
  916. <a href="/" title="{text:Hover 1}"><i class="fa fa-home"></i></a>
  917. <a href="/ask" title="{text:Hover 2}"><i class="fa fa-paper-plane-o"></i></a>
  918. <a href="" title="{text:Hover 3}"><i class="fa fa-list-ul"></i></a>
  919. <a href="" title="{text:Hover 4}"><i class="fa fa-heart-o"></i></a>
  920. <a href="#?w=300" rel="box1" class="poplight" title="{text:Hover 5}"><i class="fa fa-diamond"></i></a>
  921. </div>
  922.  
  923. <div id="description"><span id="dl">{description}</span></div>
  924.  
  925. <!-- updates tab by noveia / bravethemes -->
  926. <div class="kingdom">
  927. <div id="reign">
  928. <div id="queen">
  929. <b>WID</b><br>
  930. your updates here. <!-- change the text here -->
  931. </div>
  932. <div id="queen">
  933. <b>To-Do List</b><br>
  934. your stats here.<!-- change the text here -->
  935. </div>
  936. <!-- if you want more boxes just add <div id="queen"> under this -->
  937. </div>
  938. </div>
  939. </div>
  940.  
  941. <div id="pagination">{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}"> back </a>{/block:PreviousPage}&nbsp;{CurrentPage} of {TotalPages} &nbsp;{block:NextPage}<a href="{NextPage}"> next </a>{/block:NextPage}{/block:Pagination}
  942. </div>
  943. </div>
  944.  
  945.  
  946. <div class="blogtitle">
  947. <span style="font-size:35px; letter-spacing:3px;" id="tit">{Title}</span></div>
  948.  
  949. <div id="box1" class="popup_block">
  950. <pre>TITLE</pre>
  951. <span style="font-size:9px;">write whatever you want to add here, it can be an about, to do, etc.</span>
  952. </div>
  953.  
  954. </div></div></div></div></div></div></div></div></div></div>
  955.  
  956. <div id="entries">
  957. {block:Posts}
  958. <div id="post">
  959.  
  960. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  961.  
  962. {block:Text}
  963. {block:Title}<div class="title1">{Title}</div>{/block:Title}
  964. {Body}
  965. {/block:Text}
  966.  
  967. {block:Photo}
  968. <div class="photo">
  969. {LinkOpenTag}<img src="{PhotoURL-HighRes}" width="100%" />{LinkCloseTag}
  970. </div>{block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  971. {/block:Photo}
  972.  
  973. {block:Photoset}
  974. <div class="photoset">{Photoset-500}</div>
  975. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  976. {/block:Photoset}
  977.  
  978. {block:Quote}
  979. <div id="quote1">{Quote}</div>
  980. {block:Source}<div class="s">{Source}</div>{/block:Source}
  981. {/block:Quote}
  982.  
  983. {block:Video}
  984. <div class="video">{Video-500}</div>
  985. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  986. {/block:Video}
  987.  
  988.  
  989. {block:Audio}
  990. <div id="audio">
  991. <div id="albumartwork">
  992. {block:AlbumArt}<img src="{AlbumArtURL}" width="80"/>{/block:AlbumArt}</div>
  993. <div id="abox"><div id="audioplayer">{AudioPlayerWhite}</div></div>
  994. <div id="audioinfo">
  995. <li>{block:TrackName}<b>Title:</b> {TrackName}{/block:TrackName}</li>
  996. <li>{block:Artist}<b>By:</b> {Artist}{/block:Artist}</li>
  997. <li>{block:PlayCount}<b>Plays:</b> {FormattedPlayCount}{/block:PlayCount}</li></div></div>{block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  998. {/block:Audio}
  999.  
  1000. <!--CHAT POST-->
  1001. {block:Chat}
  1002. {block:Title}
  1003. <h1>{Title}</h1>{/block:Title}<br>
  1004. <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}
  1005. {Line}</li>{/block:Lines}</ul>
  1006. {/block:Chat}
  1007.  
  1008. {block:Quote}<div class="quote">“{Quote}”</div>{block:Source} <div class="quotesource">—{Source}</div>{/block:Source}{/block:Quote}
  1009.  
  1010. {block:Answer}<div class="que"><img src="{AskerPortraitURL-24}" style="float:left;">&nbsp;&nbsp; {ASKER}:<br><i>&nbsp;&nbsp; {Question}</i></div><div class="answer">{Answer}</div>{/block:answer}
  1011.  
  1012.  
  1013. <div id="info">
  1014. <a href="{Permalink}" title="{TimeAgo}"><b>{MonthNumberWithZero}/{DayOfMonthWithZero}/{ShortYear} {12HourWithZero}:{Minutes}{CapitalAmPm}</b></a>{/block:Date} —{block:RebloggedFrom} <a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}
  1015. and {block:ContentSource} <a href="{SourceURL}"><a href="{SourceURL}">source</a>{/block:ContentSource}
  1016. {block:RebloggedFrom} <a href="{ReblogParentURL}" target="_blank"></a>{/block:RebloggedFrom}
  1017. with {NoteCountWithLabel}</a>{block:HasTags}<div id="tags">
  1018. {block:Tags}<i class="fa fa-tag"></i><a href="/tagged/{Tag}">{Tag}</a>{/block:Tags}
  1019. </div>{block:HasTags}
  1020. </div>
  1021. </div>
  1022. {/block:Posts}
  1023. <br><br>{block:PostNotes}<div id="notes"><left>{PostNotes}</div>{/block:PostNotes}</div></div>
  1024. {/block:Posts}</div></div></div>
  1025. <br><br><br><br>
  1026. {/block:Posts}
  1027. </div>
  1028.  
  1029. <div style="position:fixed; font-size:8px; bottom:5px; right:5px; padding:2px;"><a href="http://crayonthemes.tumblr.com" title="theme"><i>thm.</i></a>
  1030. </div>
  1031.  
  1032. </body>
  1033. </div></div></div></div></div></div></div></div></div></div>
  1034. </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!