API tools faq
paste
HendrixRPH

Beach Bum Theme

HendrixRPH
Jul 27th, 2015
768
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.03 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5. <title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  6.  
  7.  
  8. <!---
  9.  
  10. Beach Bum theme by hendrixrph. Feel free to edit fonts/colors/layout/etc for personal use, but do not redistribute and do not remove the credit. If you have any questions about the use of this theme, send a message to hendrixrph.tumblr.com. Thank you!
  11.  
  12. To skip to the part where you and edit the icons in the box at the bottom, search for *** .
  13.  
  14. -->
  15.  
  16. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  17.  
  18. <link rel="shortcut icon" href="{Favicon}" />
  19.  
  20. <link href='http://fonts.googleapis.com/css?family=Arimo:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  21. <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
  22.  
  23.  
  24. <meta name="text:Title" content="Title Goes Here" />
  25. <meta name="text:Header Embellishment" content="" />
  26. <meta name="text:Bottom Label" content="Icons" />
  27. <meta name="text:Refresh Link Name" content="Home" />
  28. <meta name="text:Ask Link Name" content="Ask" />
  29. <meta name="text:Custom Link 1 Name" content="" />
  30. <meta name="text:Custom Link 1 Name" content="" />
  31. <meta name="text:Custom Link 1 URL" content="" />
  32. <meta name="text:Custom Link 2 Name" content="" />
  33. <meta name="text:Custom Link 2 URL" content="" />
  34.  
  35. <meta name="color:Background" content="#f9f9f9" />
  36. <meta name="color:Content Background" content="#ffffff" />
  37. <meta name="color:Post Border" content="#dddddd" />
  38. <meta name="color:Other Borders" content="#dddddd" />
  39. <meta name="color:Header Text" content="#333333" />
  40. <meta name="color:Header Text Shadow" content="#bbbbbb" />
  41. <meta name="color:Body Text" content="#333333" />
  42. <meta name="color:Links" content="#777777" />
  43. <meta name="color:Hover Links" content="#dddddd" />
  44. <meta name="color:Scrollbar Track" content="#f5f5f5" />
  45. <meta name="color:Scrollbar Thumb" content="#dddddd" />
  46.  
  47. <meta name="if:One large image" content="0" />
  48. <meta name="if:Bottom Icons Desaturate" content="1" />
  49. <meta name="if:Header Text Shadow" content="1" />
  50. <meta name="if:Body Text Shadow" content="0" />
  51. <meta name="if:Image Borders" content="1" />
  52. <meta name="if:Bottom Label" content="1" />
  53. <meta name="if:Hide Bottom Box" content="0" />
  54.  
  55. <meta name="image:Background Image" content="" />
  56. <meta name="image:Large Sidebar" content="" />
  57. <meta name="image:Small Sidebar 1" content="" />
  58. <meta name="image:Small Sidebar 2" content="" />
  59. <meta name="image:Small Sidebar 3" content="" />
  60. <meta name="image:Small Sidebar 4" content="" />
  61.  
  62.  
  63. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  64.  
  65. <script type="text/javascript" src="http://static.tumblr.com/tm8oez9/h4yns48ib/jquery.mousewheel.min.js"></script>
  66.  
  67. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  68.  
  69. <script type="text/javascript">
  70.  
  71. (function($){
  72.  
  73. $(document).ready(function(){
  74.  
  75. $("a[title]").style_my_tooltips({
  76.  
  77. tip_follows_cursor:true,
  78.  
  79. tip_delay_time:60,
  80.  
  81. tip_fade_speed:600,
  82.  
  83. attribute:"title"
  84.  
  85. });
  86.  
  87. });
  88.  
  89. })(jQuery);
  90.  
  91. </script>
  92.  
  93. <script>
  94. $(function() {
  95.  
  96. $("#muses").mousewheel(function(event, delta) {
  97.  
  98. this.scrollLeft -= (delta * 30);
  99.  
  100. event.preventDefault();
  101.  
  102. });
  103.  
  104. });
  105. </script>
  106.  
  107. <style>
  108.  
  109. .tooltip{
  110. display: inline;
  111. position: relative;
  112. }
  113. #s-m-t-tooltip {
  114. max-width:300px; /*how big the tooltip can be at most*/
  115. padding:4px; /*padding inside tooltip*/
  116. margin:0px 13px; /*distance from word*/
  117. background:{color:Content Background}; /*background color*/
  118. border:1px solid {color:Post Border}; /*border info*/
  119. font-family:"Arimo", Helvetica, Arial, sans-serif; /*tooltip font*/
  120. font-size:9px; /*tooltip font size*/
  121. text-transform:; /*makes the tooltip title uppercase*/
  122. color:{color:Body Text}; /*tooltip font color*/
  123. z-index:999;
  124. }
  125.  
  126.  
  127. ::-webkit-scrollbar {width: 10px; height: 4px; background:{color:Scrollbar Track}; }
  128. ::-webkit-scrollbar-thumb { background-color:{color:Scrollbar Thumb};}
  129.  
  130. * {
  131. margin:0;
  132. padding:0;
  133. box-sizing:border-box;
  134. }
  135.  
  136. body,html {
  137. height:100%;
  138. }
  139.  
  140. body {
  141. background:{color:Background};
  142. background-image: url({image:Background Image});
  143. padding:30px;
  144. }
  145.  
  146. .wrapper {
  147. width:700px;
  148. height:500px;
  149. position:absolute;
  150. top:0;
  151. bottom: 0;
  152. left: 0;
  153. right: 0;
  154. margin: auto;
  155. }
  156.  
  157. .wrapper > div {
  158. box-shadow:2px 2px 10px rgba(0,0,0,0.1);
  159. border:1px solid {color:Post Border};
  160. background:{color:Content Background};
  161. }
  162.  
  163. .postcontainer {
  164. height:400px;
  165. width:445px;
  166. float:left;
  167. margin-right:20px;
  168. overflow-y:scroll;
  169. overflow-x:hidden;
  170. padding:15px;
  171. padding-right:20px;
  172. }
  173.  
  174.  
  175. /* Sidebar */
  176.  
  177. .sidebar {
  178. width:235px;
  179. height:400px;
  180. float:left;
  181. padding:10px;
  182. position:relative;
  183. }
  184.  
  185. .imggrid {
  186. width:170px;
  187. height:170px;
  188. margin:10px auto;
  189. clear:both;
  190. padding:-5px;
  191. }
  192.  
  193. .imggrid .smallimg {
  194. float:left;
  195. height:75px;
  196. width:75px;
  197. margin:5px;
  198. }
  199.  
  200. .imggrid .largeimg {
  201. height:160px;
  202. width:160px;
  203. margin:5px;
  204. }
  205.  
  206. .sidebar h2 {
  207. font-family:"Ubuntu Condensed", Helvetica, Arial, sans-serif;
  208. text-shadow:2px 2px 10px {color:Header Text Shadow};
  209. font-size:22px;
  210. color:{color:Header Text};
  211. text-align:center;
  212. }
  213.  
  214. .description {
  215. padding:5px 15px;
  216. text-align:center;
  217. max-height:85px;
  218. overflow:hidden;
  219. font-size:11px;
  220. font-family:"Arimo", Helvetica, Arial, sans-serif;
  221. color:{color:Body Text};
  222. line-height:1.35em;
  223. }
  224.  
  225. .links {
  226. list-style-type:none;
  227. text-align:center;
  228. margin:10px auto;
  229. width:150px;
  230. }
  231.  
  232. .links li {
  233. width:60px;
  234. height:20px;
  235. border:1px solid {color:Other Borders};
  236. display:inline-block;
  237. margin:3px;
  238. font-family:"Arimo", Helvetica, Arial, sans-serif;
  239. line-height:1em;
  240. text-transform:lowercase;
  241. }
  242.  
  243. .links a {
  244. color:{color:Links};
  245. font-size:11px;
  246. text-decoration:none;
  247. transition:0.5s all;
  248. }
  249.  
  250. .links a:hover {
  251. color:{color:Hover Links};
  252. }
  253.  
  254. .pagination {
  255. position:absolute;
  256. bottom:0;
  257. left:0;
  258. clear:both;
  259. width:100%;
  260. }
  261.  
  262. .next, .prev {
  263. display:block;
  264. color:{color:Links};
  265. padding:5px 10px;
  266. font-size:11px;
  267. transition:0.5s all;
  268. font-family:"Arimo", Helvetica, Arial, sans-serif;
  269. text-decoration:none;
  270. opacity:0.8;
  271. }
  272.  
  273. .next:hover, .prev:hover {
  274. color:{color:Hover Links};
  275. }
  276.  
  277. .next {
  278. float:right;
  279. }
  280.  
  281. .prev {
  282. float:left;
  283. text-decoration:none;
  284. }
  285.  
  286. /* Muses */
  287.  
  288. #muses {
  289. width:100%;
  290. height:80px;
  291. position:absolute;
  292. bottom:0;
  293. margin-top:20px;
  294. overflow-x:scroll;
  295. overflow-y:hidden;
  296. white-space:nowrap;
  297. text-align:center;
  298. padding:0 3px;
  299. }
  300.  
  301. .muse {
  302. width:65px;
  303. height:65px;
  304. display:inline-block;
  305. margin:4px 2px;
  306. overflow:hidden;
  307. }
  308.  
  309. .muse img {
  310. {block:IfBottomIconsDesaturate}-webkit-filter: grayscale(85%); filter: grayscale(85%);{/block:IfBottomIconsDesaturate}
  311. opacity:0.7;
  312. transition:1s all ease;
  313. }
  314.  
  315. .muse:hover img {
  316. opacity:0.9;
  317. {block:IfBottomIconsDesaturate}-webkit-filter: grayscale(20%); filter: grayscale(20%);{/block:IfBottomIconsDesaturate}
  318. transition:1s all ease;
  319. }
  320.  
  321. .bottomlabel {
  322. z-index:10px;
  323. position:absolute;
  324. bottom:20px;
  325. left:-40px;
  326. font-size:16px;
  327. height:20px;
  328. width:75px;
  329. display:block;
  330. -ms-transform: rotate(270deg);
  331. -webkit-transform: rotate(270deg);
  332. transform: rotate(270deg);
  333. white-space:nowrap;
  334. }
  335.  
  336. /* Post Styling */
  337.  
  338. .post {
  339. margin-top:20px;
  340. border-bottom:1px solid {color:Other Borders};
  341. padding-bottom:10px;
  342. padding-top:5px;
  343. }
  344.  
  345. .post:first-of-type {
  346. margin-top:0px;
  347. }
  348.  
  349. .post:last-of-type {
  350. margin-bottom:10px;
  351. }
  352.  
  353. .postfooter {
  354. font-size:10px;
  355. padding:0px;
  356. margin-top:3px;
  357. margin-bottom:40px;
  358. color:{color:Body Text};
  359. }
  360.  
  361. .info {
  362. height:15px;
  363. }
  364.  
  365. .info::after {
  366. clear:both;
  367. content:'';
  368. width:0;
  369. height:0;
  370. }
  371.  
  372. .date {
  373. float:left;
  374. }
  375.  
  376. .notes {
  377. float:right;
  378. }
  379.  
  380. .tags {
  381. list-style-type:none;
  382. margin:0;
  383. }
  384.  
  385. .tags li {
  386. display:inline;
  387. padding:4px;
  388. }
  389.  
  390. .postfooter a {
  391. text-decoration:none;
  392. }
  393.  
  394. .notecontainer {
  395. font-size:10px;
  396. font-family:"Arimo", Helvetica, Arial, sans-serif;
  397. color:{color:Body Text};
  398. }
  399.  
  400. .notecontainer a {
  401. text-decoration:none;
  402. }
  403.  
  404. .notecontainer img.avatar {
  405. margin-right: 6px;
  406. width: 16px;
  407. height: 16px;
  408. }
  409.  
  410.  
  411. /* Photo Posts */
  412.  
  413. /* Chat Post */
  414.  
  415. /* Link Posts */
  416.  
  417. .title a {
  418. text-decoration:none;
  419. }
  420.  
  421. /* Asks */
  422.  
  423. .question {
  424. font-size:13px;
  425. font-family:"Ubuntu Condensed", Helvetica, Arial, sans-serif;
  426. color:{color:Body Text};
  427. line-height:1.35em;
  428. padding:10px;
  429. border:1px solid {color:Other Borders};
  430. margin:2px 15px;
  431. margin-bottom:10px;
  432. }
  433.  
  434. .asker {
  435. font-size:12px;
  436. font-family:"Ubuntu Condensed", Helvetica, Arial, sans-serif;
  437. color:{color:Body Text};
  438. margin-bottom:10px;
  439. }
  440.  
  441. /* Text Styling */
  442.  
  443. .text {
  444. font-size:11px;
  445. font-family:"Arimo", Helvetica, Arial, sans-serif;
  446. color:{color:Body Text};
  447. line-height:1.35em;
  448. }
  449.  
  450. .title {
  451. font-family:"Ubuntu Condensed", Helvetica, Arial, sans-serif;
  452. text-shadow:2px 2px 10px {color:Header Text Shadow};
  453. font-size:20px;
  454. color:{color:Header Text};
  455. font-weight:bold;
  456. margin-bottom:10px;
  457. }
  458.  
  459. .postcontainer a {
  460. color:{color:Links};
  461. transition:0.5s all;
  462. }
  463.  
  464. .postcontainer a:hover {
  465. color:{color:Hover Links};
  466. }
  467.  
  468. .postcontainer p {
  469. margin:5px 0;
  470. }
  471.  
  472. ul, ol {
  473. margin-left:15px;
  474. }
  475.  
  476. blockquote {
  477. margin:5px 0;
  478. padding-left:10px;
  479. border-left:1px solid {color:Other Borders};
  480. }
  481. img {
  482. max-width:100%;
  483. }
  484.  
  485. h2 {
  486. margin:7px 0;
  487. color:{color:Header Text};
  488. font-family:"Ubuntu Condensed", Helvetica, Arial, sans-serif;
  489. text-shadow:2px 2px 10px {color:Header Text Shadow};
  490. }
  491.  
  492. h2 small {
  493. font-weight:normal;
  494. font-style:italic;
  495. }
  496.  
  497. .credit {
  498. position:fixed;
  499. display:block;
  500. bottom:10px;
  501. right:10px;
  502. font-size:9px;
  503. font-family:"Ubuntu Condensed", Helvetica, Arial, sans-serif;
  504. background:{color:Content Background};
  505. color:{color:Links};
  506. padding:5px 7px;
  507. opacity:0.7;
  508. text-decoration:none;
  509. transition:1s all;
  510. }
  511.  
  512. .credit:hover {
  513. color:{color:Hover Links};
  514. opacity:0.9;
  515. }
  516.  
  517.  
  518. </style>
  519.  
  520.  
  521. <!-- CSS for Options -->
  522.  
  523. {Block:IfNotHeaderTextShadow}
  524. <style>
  525. h2, .sidebar h2, .title {
  526. text-shadow:none;
  527. }
  528. </style>
  529. {/block:IfNotHeaderTextShadow}
  530.  
  531. {Block:IfBodyTextShadow}
  532. <style>
  533. p, ul, ol, li, .text, .description, .postfooter, .question, .asker {
  534. text-shadow:2px 2px 5px {color:Header Text Shadow};
  535. }
  536. </style>
  537. {/Block:IfBodyTextShadow}
  538.  
  539. {Block:IfImageBorders}
  540. <style>
  541. .muse, .sidebar img {
  542. border:1px solid {color:Other Borders};
  543. }
  544. </style>
  545. {/Block:IfImageBorders}
  546.  
  547.  
  548.  
  549. </head>
  550. <body>
  551.  
  552. <div class="wrapper">
  553.  
  554. <div class="postcontainer">
  555. {block:Posts}
  556. <div class="post">
  557. {block:Photo}
  558. {LinkOpenTag}<img src="{PhotoURL-400}" />{LinkCloseTag}
  559. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  560. {/block:Photo}
  561.  
  562. {block:Photoset}
  563. {Photoset-400}
  564. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  565. {/block:Photoset}
  566.  
  567. {block:Video}
  568. {Video-400}
  569. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  570. {/block:Video}
  571.  
  572. {block:Audio}
  573. {AudioPlayer}
  574. <div class="text">{PlayCountWithLabel}</div>
  575. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  576. {/block:Audio}
  577.  
  578. {block:Quote}
  579. <div class="title">{text:Header Embellishment} “{Quote}”</div>
  580. {block:Source}<div class="text">— {Source}</div>{/block:Source}
  581. {/block:Quote}
  582.  
  583. {block:Text}
  584. {block:Title}<div class="title">{text:Header Embellishment} {Title}</div>{/block:Title}
  585. <div class="text">{Body}</div>
  586. {/block:Text}
  587.  
  588. {block:Answer}
  589. <div class="asker">{Asker} asked:</div>
  590. <div class="question">{Question}</div>
  591. {Block:Answerer}<div class="text">{Answer}</div>{/Block:Answerer}
  592. <div class="text">{Replies}</div>
  593. {/block:Answer}
  594.  
  595. {block:Chat}
  596. {block:Title}<div class="title">{text:Header Embellishment} {Title}</div>{/block:Title}
  597. {block:Lines}<div class="text">
  598. {block:Label}<div class="line"><strong>{Label}</strong>{/block:Label} {Line}</div>
  599. </div>{/block:Lines}
  600. {/block:Chat}
  601.  
  602. {block:Link}
  603. <div class="title"><a href="{URL}" >{text:Header Embellishment} {Name}</a></div>
  604. {block:Description}<div class="text">{Description}</div>{/block:Description}
  605. {/block:Link}
  606.  
  607. </div>
  608.  
  609. {block:Date}
  610. <div class="postfooter">
  611. <div class="info">
  612. <div class="date"><a href="{Permalink}">{TimeAgo}</a></div>
  613. {block:NoteCount}<div class="notes">{NoteCountWithLabel}</div>{/block:NoteCount}
  614. </div>
  615. {block:HasTags}
  616. <ul class="tags">
  617. {block:Tags}
  618. <li>
  619. <a href="{TagURL}">#{Tag}</a>
  620. </li>
  621. {/block:Tags}
  622. </ul>
  623. {/block:HasTags}
  624. </div>
  625. {/block:Date}
  626.  
  627. {block:PostNotes}
  628. <div class="notecontainer">{PostNotes}</div>
  629. {/block:PostNotes}
  630.  
  631. {/block:Posts}
  632. </div>
  633.  
  634. <div class="sidebar">
  635. <div class="imggrid">
  636. {Block:IfOneLargeImage}
  637. <img src="{image:Large Sidebar}" class="largeimg">
  638. {/block:IfOneLargeImage}
  639. {Block:IfNotOneLargeImage}
  640. <img src="{image:Small Sidebar 1}" class="smallimg">
  641. <img src="{image:Small Sidebar 2}" class="smallimg">
  642. <img src="{image:Small Sidebar 3}" class="smallimg">
  643. <img src="{image:Small Sidebar 4}" class="smallimg">
  644. {/block:IfNotOneLargeImage}
  645. </div>
  646. <h2>{Text:Title}</h2>
  647. <div class="description">{description}</div>
  648. <ul class="links">
  649. <li><a href="/">{text:Refresh Link Name}</a></li>
  650. <li><a href="/ask">{text:Ask Link Name}</a></li>
  651. <li><a href="{text:Custom Link 1 URL}">{text:Custom Link 1 Name}</a></li>
  652. <li><a href="{text:Custom Link 2 URL}">{text:Custom Link 2 Name}</a></li>
  653. </ul>
  654.  
  655. {block:Pagination}
  656. <div class="pagination">
  657. {Block:PreviousPage}<a class="prev" href="{PreviousPage}"> prev</a>{/Block:PreviousPage}
  658. {Block:NextPage}<a class="next" href="{NextPage}">next</a>{/Block:NextPage}
  659. </div>
  660. {/block:Pagination}
  661. </div>
  662.  
  663. {Block:IfNotHideBottomBox}
  664. <div id="muses">
  665.  
  666. <!--
  667. ***
  668. Although this theme was made with RPers in mind, this bottom portion can be used for more than just your muses. You can use it for affiliates, friends, favorite shows, whatever. -->
  669.  
  670. <!-- Begin copy/paste -->
  671. <a class="muse" href="/" title="hover text"> <!-- Inside href you put the url to your muse's page or tag. Whatever you put in the title attribute will appear when you hover over it. -->
  672. <img src=""> <!-- The image you want goes here. 65x65 -->
  673. </a>
  674. <!-- End copy/paste -->
  675.  
  676.  
  677.  
  678. </div>
  679.  
  680. {Block:IfBottomLabel}<h2 class="bottomlabel">{text:Bottom Label}</h2>{/Block:IfBottomLabel}
  681. {Block:IfNotHideBottomBox}
  682.  
  683. </div>
  684.  
  685. <a href="http://hendrixrph.tumblr.com" class="credit">hendrixrph</a>
  686.  
  687.  
  688.  
  689. </body>
  690. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!