API tools faq
paste
cherrybearr

theme 2

cherrybearr
Dec 31st, 2014
158
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.43 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--Customisation Options (part 2)-->
  6.  
  7. <meta name="color:Background" content="#cccccc" />
  8. <meta name="color:Primary Colour" content="#03999b" />
  9. <meta name="color:Secondary Colour" content="#4cc3c5" />
  10. <meta name="color:Sidebar" content="" />
  11.  
  12. <meta name="font:Body" content="Georgia" />
  13.  
  14. <meta name="image:Background" content="" />
  15.  
  16. <meta name="if:Infinite Scroll" content="0">
  17.  
  18. <!--Things that go in the tab (part 1)-->
  19.  
  20. <title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  21. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  22. <link rel="shortcut icon" href="{Favicon}" />
  23.  
  24. <!--Custom font (part 4)-->
  25.  
  26. <link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'>
  27.  
  28. <style type="text/css">
  29.  
  30. /*Notes in CSS look like this. If you use <!--these--> it will not work*/
  31.  
  32. /*The Background (part 3)*/
  33.  
  34. body {
  35. background-color: {color:Background};
  36. font-family: {font:Body};
  37. background-image: url({image:Background});
  38. background-attachment: fixed;
  39. margin: 0;
  40. word-wrap: break-word;
  41. }
  42.  
  43. /*The Sidebar (part 4)*/
  44.  
  45. #sidebar {
  46. width: 350px;
  47. position: fixed;
  48. padding:20px;
  49. padding-top:50px;
  50. height:550px;
  51. margin-top:-55px;
  52. }
  53.  
  54. /*The Sidebar: Title*/
  55.  
  56. #title1 {
  57. font-family: 'Oregano', cursive;
  58. font-size: 25px;
  59. text-align: center;
  60. padding: 10px;
  61. float:left;
  62. position:relative;
  63. position:fixed;
  64. left:50px;
  65. top:7px;
  66. width:370px;
  67. height:auto;
  68. z-index:1;
  69. clear:both;
  70. line-height:110%;
  71. text-shadow: 0 0 none;
  72. }
  73.  
  74. #title1 a {
  75. color: {color:Primary Colour};
  76. text-decoration: none;
  77. transition: all 1.5s;
  78. -webkit-transition: all 1.5s ease-in-out;
  79. -moz-transition: all 1.5s ease-in-out;
  80. font-family: 'Oregano', cursive;
  81. font-size: 30px;
  82. text-align: center;
  83. padding: 10px;
  84. text-shadow: 0 0 black;
  85. }
  86.  
  87. #title1 a:hover {
  88. color: {color:Secondary Colour};
  89. font-family: 'Oregano', cursive;
  90. font-size: 30px;
  91. text-align: center;
  92. padding: 10px;
  93. text-shadow:10px -10px 10px rgba(255,255,255,.5);
  94. }
  95.  
  96. /*The Sidebar: Image*/
  97.  
  98. #sidebar .image {
  99. width: auto;
  100. height: auto;
  101. border: 3px outset white;
  102. box-shadow:3px 3px 5px black;
  103. }
  104.  
  105. /*The Sidebar: Description*/
  106.  
  107. #sidebar .description {
  108. color: black;
  109. font-size: 14px;
  110. text-align:center;
  111. padding:5px;
  112. line-height:120%;
  113. margin-top:30px;
  114. margin-bottom:30px;
  115. position: relative;
  116. top:-140px;
  117. left:75px;
  118. width:200px;
  119. float:right;
  120. z-index:1;
  121. clear:right;
  122. }
  123.  
  124. #sidebar .description a {
  125. color: {color:Primary Colour};
  126. text-decoration: none;
  127. }
  128.  
  129. #sidebar .description a:hover {
  130. color: {color:Secondary Colour};
  131. }
  132.  
  133. /*The Sidebar: Links*/
  134.  
  135. #sidebar .links {
  136. font-size: 12px;
  137. text-align: center;
  138. padding: 3px 5px;
  139. margin: 5px;
  140. float: left;
  141. width: 60px;
  142. margin: 4px 8px 2px 8px;
  143. color:black;
  144. background: -webkit-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0.1));
  145. background: -moz-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0.1));
  146. float:left;
  147. transition: all 1s ease-in-out;
  148. -webkit-transition: all 1s ease-in-out;
  149. -moz-transition: all 1s ease-in-out;
  150. z-index:1;
  151. }
  152.  
  153. #sidebar .links:hover {
  154. font-size: 12px;
  155. text-align: center;
  156. padding: 3px 5px;
  157. margin: 5px;
  158. float: left;
  159. width: 70px;
  160. margin: 4px 8px 2px 8px;
  161. color:black;
  162. background: -webkit-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0.1));
  163. background: -moz-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0.1));
  164. display: block;
  165. float:left;
  166. background-color: {color:Secondary Colour};
  167. z-index:1;
  168. }
  169.  
  170. #sidebar .links a {
  171. text-decoration:none;
  172. }
  173.  
  174. #links {
  175. width:100px;
  176. height:100px;
  177. float:left;
  178. z-index:1;
  179. }
  180.  
  181. /*The Sidebar: Pagination (part 8)*/
  182.  
  183. #sidebar .pagination {
  184. width: 260px;
  185. text-align: center;
  186. padding: 3px 0;
  187. }
  188.  
  189. #sidebar .pagination a {
  190. color: {color:Primary Colour};
  191. text-decoration: none;
  192. }
  193.  
  194. #sidebar .pagination a:hover {
  195. color: {color:Secondary Colour};
  196. }
  197.  
  198.  
  199. /***************************/
  200.  
  201. /*The Main Content (Part 6)*/
  202.  
  203. #content {
  204. width: 560px;
  205. margin: 60px 0 60px 460px;
  206. padding: 20px 0;
  207. color: black;
  208. }
  209.  
  210. #content a {
  211. color: {color:Primary Colour};
  212. text-decoration: none;
  213. }
  214.  
  215. #content a:hover {
  216. color: {color:Secondary Colour};
  217. }
  218.  
  219. #content blockquote {
  220. border-left: solid 2px black;
  221. margin: 0;
  222. padding-left: 10px;
  223. }
  224.  
  225. img {
  226. border: 0;
  227. max-width: 100%;
  228. }
  229.  
  230. #content #posts {
  231. width: 500px;
  232. margin: 0 auto 20px;
  233. padding:10px;
  234. background-color:rgba(255,255,255,.5);
  235. border-radius:20px;
  236. border:1px dotted white;
  237. box-shadow:0px 0px 10px white;
  238. }
  239.  
  240. #content #posts .title {
  241. font-size: 22px;
  242. }
  243.  
  244. #content #posts .text {
  245. font-size:13px;
  246. }
  247.  
  248. #player {
  249. width:30px;
  250. height:30px;
  251. position:absolute;
  252. overflow:hidden;
  253. margin-top:35px;
  254. margin-bottom:35px;
  255. margin-left:45px;
  256. opacity: 0.7;
  257. filter:alpha(opacity=70);
  258. -moz-opacity: 0.7;
  259. -khtml-opacity: 0.7;
  260. -moz-border-radius: 30px;
  261. -webkit-border-radius: 30px;
  262. border-radius: 30px;
  263. }
  264.  
  265. #albumart {
  266. float:left;
  267. margin:0px 15px 0px 0px;
  268. border:3px solid white;
  269. height:100px;
  270. width:100px;
  271. background-color: rgba(215,215,215,.5);
  272. box-shadow:5px 5px 9px gray;
  273. }
  274.  
  275. #audioplayerbox {
  276. background-image:url("https://31.media.tumblr.com/8daa9cd4a770540f75e2175e7afea863/tumblr_nell0cqJQO1thncmho1_500.jpg");
  277. height:110px;
  278. padding:10px;
  279. }
  280.  
  281. li {
  282. display:block;
  283. padding:2px;
  284. }
  285. .questionbox {
  286. background-color: rgba(230,230,230,.5);
  287. padding: 10px;
  288. border-radius: 10px;
  289. }
  290.  
  291. /***************************/
  292.  
  293. /*The Permalink and Tags (part 7)*/
  294.  
  295. #content #posts #permalink {
  296. font-size:11px;
  297. margin-top:10px;
  298. }
  299.  
  300. #content #posts #tags {
  301. font-size:13px;
  302. }
  303.  
  304. #content #posts #tags .comma:last-child {
  305. display: none;
  306. }
  307.  
  308. /*Note Container (part 7)*/
  309.  
  310. #content #notecontainer {
  311. margin: 20px auto;
  312. width: 500px;
  313. font-size: 11px;
  314. }
  315.  
  316. #content #notecontainer ol.notes {
  317. list-style-type: none;
  318. margin: 0;
  319. padding: 0;
  320. }
  321.  
  322. #content #notecontainer img.avatar {
  323. margin-right: 10px;
  324. width: 16px;
  325. height: 16px;
  326. }
  327.  
  328. /*Custom CSS (part 8)*/
  329.  
  330. {CustomCSS}
  331.  
  332. #search {
  333. margin-left: 100px;
  334. position:relative;
  335. top:-130px;
  336. left:140px;
  337. width:190px;
  338. height:30px;
  339. z-index:1;
  340. }
  341.  
  342.  
  343. #themecredit {
  344. position:relative;
  345. position:fixed;
  346. top:600px;
  347. left:10px;
  348. }
  349.  
  350. .lcb {
  351. color:white;
  352. }
  353.  
  354. .lcb a{
  355. text-decoration:none;
  356. color: {color:Primary Colour};
  357. transition: all 1.5s ease-in-out;
  358. -webkit-transition: all 1.5s ease-in-out;
  359. -moz-transition: all 1.5s ease-in-out;
  360. }
  361.  
  362. .lcb a:hover{
  363. color: {color:Secondary Colour};
  364. }
  365.  
  366. #rilakkuma {
  367. height:35px;
  368. width:35px;
  369. }
  370.  
  371. #sailormoon {
  372. position:fixed;
  373. top:150px;
  374. z-index:-1;
  375. float:left;
  376. clear:left;
  377. left:-70px;
  378. }
  379.  
  380. .avatar {
  381. clear:left;
  382. float:left;
  383. position:relative;
  384. transition: all 1s ease-in-out;
  385. -webkit-transition: all 1s ease-in-out;
  386. -moz-transition: all 1s ease-in-out;
  387. z-index:1;
  388. }
  389.  
  390. .avatar:hover {
  391. clear:left;
  392. float:left;
  393. position:relative;
  394. border-radius:20px;
  395. }
  396.  
  397. #sbl {
  398. position:relative;
  399. clear:both;
  400. padding:30px;
  401. z-index:1;
  402. }
  403.  
  404. #bottomofposts {
  405. background-color:white;
  406. padding:2px 5px 2px 5px;
  407. border-radius:20px;
  408. }
  409.  
  410. #content #posts #likereblog li{
  411. display:inline;
  412. float:right;
  413. position:relative;
  414. top:-13px;
  415. padding:2px;
  416. }
  417.  
  418. </style>
  419.  
  420. <!--Infinite Scroll (part 8)-->
  421.  
  422. {block:IfInfiniteScroll}
  423. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  424. {/block:IfInfiniteScroll}
  425.  
  426. <script type="text/javascript"
  427. src="http://www.google.com/jsapi"></script>
  428.  
  429. <script type="text/javascript">
  430. google.load("jquery", "1.3");
  431. google.setOnLoadCallback(function() {
  432. jQuery(function($) {
  433. // do some stuff here, eg load your tweets, ...
  434. $(document).ready(function() {
  435.  
  436. });
  437. });
  438. });
  439. </script>
  440.  
  441. </head>
  442.  
  443. <body>
  444.  
  445.  
  446.  
  447.  
  448. <!--The Sidebar (part 4)-->
  449.  
  450. <div id="title1"><a href="/">{Title}</a></div>
  451. <div id="sidebar">
  452.  
  453. <div id="sbl">
  454. <a href="{BlogURL}"> <img class="avatar" src={PortraitURL-96}> </a>
  455.  
  456. <div id="links">
  457. {block:AskEnabled}<a href="/ask"><div class="links">{AskLabel}</div></a>{/block:AskEnabled}
  458. {block:SubmissionsEnabled}<a href="/submit"><div class="links">{SubmitLabel}</div></a>{/block:SubmissionsEnabled}
  459. {block:HasPages}{block:Pages}<a href="{url}"><div class="links">{Label}</div></a>{/block:Pages}{/block:HasPages}
  460. </div>
  461. </div>
  462.  
  463. <div class="description">{Description}</div>
  464.  
  465. <div id="search">
  466. <form action="/search" method="get">
  467. <input type="text" name="q" value="{SearchQuery}" style="width:110px; border-radius:20px; padding:2px 5px 2px 5px;"/>
  468. <input type="submit" value="Search" style="position:relative;"/>
  469. </form>
  470. </div>
  471. <!--Pagination (part 8)-->
  472.  
  473. {block:IfNotInfiniteScroll}
  474. <div class="pagination">
  475. {block:PreviousPage}<a href="{PreviousPage}"><-Previous | </a>{/block:PreviousPage}
  476. {block:NextPage}<a href="{NextPage}"> Next-></a>{/block:NextPage}
  477. </div>
  478. {/block:IfNotInfiniteScroll}
  479. </div> <!--sidebar-->
  480.  
  481. <!--------------------------->
  482.  
  483. <div id="themecredit">
  484. <img id="rilakkuma" src="https://38.media.tumblr.com/avatar_aa05499ce1b8_96.png" />
  485. <span class="lcb">Theme made by <a href="http://lilcherrybearr.tumblr.com">LilCherryBearr</a></span>
  486. </div>
  487.  
  488.  
  489. <div id="sailormoon">
  490. <img src="https://33.media.tumblr.com/254f1a9e678eaca204b08ae095d1e2e2/tumblr_ngrdqpdNya1thncmho1_r1_1280.png" />
  491. </div>
  492.  
  493. <!--The Main Content (part 5 & 6)-->
  494.  
  495. <div id="content">
  496. <div class="autopagerize_page_element">
  497. {block:Posts}
  498. <div id="posts">
  499.  
  500. {block:Photo}
  501. {LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
  502. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  503. {/block:Photo}
  504.  
  505. {block:Photoset}
  506. {Photoset-500}
  507. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  508. {/block:Photoset}
  509.  
  510. {block:Video}
  511. {Video-500}
  512. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  513. {/block:Video}
  514.  
  515. {block:Audio}
  516. <div id="audioplayerbox">
  517. <div id="player">{AudioPlayerWhite} </div>
  518. <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}</div>
  519. {PlayCountWithLabel}
  520. {block:TrackName}
  521. <li>Track: {TrackName}</li>
  522. {/block:TrackName}
  523.  
  524. {block:Artist}
  525. <li>Artist: {Artist}</li>
  526. {/block:Artist}
  527.  
  528. {block:Album}
  529. <li>Album: {Album}</li>
  530. {/block:Album}
  531.  
  532. </div>
  533. <p>
  534. {block:caption}<div class="audiocaption">{caption}</div>{/block:caption}
  535. </p>
  536. {/block:Audio}
  537.  
  538. {block:Quote}
  539. <div class="title">“{Quote}”</div>
  540. {block:Source}<div class="text"><br> <hr> {Source}</div>{/block:Source}
  541. {/block:Quote}
  542.  
  543. {block:Text}
  544. {block:Title}<div class="title">{Title}</div>{/block:Title}
  545. <div class="text">{Body}</div>
  546. {/block:Text}
  547.  
  548. {block:Answer}
  549. <div class="questionbox">
  550. <div class="asker_container"><img src="{AskerPortraitURL-24}"> {Asker}</div>
  551. <div class="title">Asked: {Question}</div>
  552. </div>
  553. <div class="text">{Answer}</div>
  554. {block:Answer}
  555.  
  556. {block:Chat}
  557. {block:Title}<div class="title">{Title}</div>{/block:Title}
  558. <div class="text">
  559. {block:Lines}
  560. {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
  561. {/block:Lines}
  562. </div> <!--text-->
  563. {/block:Chat}
  564.  
  565. {block:Link}
  566. <div class="title"><a href="{URL}">{Name}</a></div>
  567. {block:Description}
  568. <div class="text">{Description}</div>
  569. {/block:Description}
  570. {/block:Link}
  571.  
  572. <!--------------------------->
  573.  
  574. <!--The Permalink (Part 7)-->
  575. <div id="bottomofposts">
  576.  
  577. <div id="permalink">
  578. <a href="{Permalink}">
  579. {block:Date}{lang:Posted TimeAgo}{/block:Date}
  580. {block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount}
  581. </a>
  582. </div> <!--permalink-->
  583. <!--The Tags (Part 7)-->
  584.  
  585. {block:HasTags}<div id="tags">
  586. {block:Tags}<a href="{TagURL}">{Tag}</a><span class="comma">, </span>{/block:Tags}.
  587. </div> <!--tags-->
  588. {/block:HasTags}
  589.  
  590. </div> <!--posts-->
  591.  
  592. <!--Note Container (Part 7)-->
  593.  
  594. {block:PostNotes}
  595. <div id="notecontainer">{PostNotes}</div>
  596. {/block:PostNotes}
  597.  
  598. <ul id="likereblog">
  599. <li> {LikeButton} </li>
  600. <li> {ReblogButton} </li>
  601. </ul>
  602.  
  603. </div>
  604.  
  605. {/block:Posts}
  606. </div> <!--autopagerize_page_element-->
  607. </div> <!--content-->
  608.  
  609. </body>
  610.  
  611. </html>
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!