Advertisement
abbybeth

craicshelley theme #2

Feb 7th, 2015
420
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.92 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!--
  4.  
  5. •–––– theme by abby / craicshelley ––––•
  6.  
  7. all the usual theme rules apply, but just to recap (I would hate to have to send my flying monkeys after you, because you're lovely):
  8.  
  9. → don't remove the credit or claim as your own
  10. → don't use as a base code. the base code i used to make this is from adoredash
  11.  
  12.  
  13. protips !!!
  14.  
  15. → the color option "quotemarks" is the color of the quotation mark behind quote posts. that is the one place that it shows up.
  16.  
  17. → for the love of god and chicken nuggets, don't touch the "h6" part of the code. that would mess with the aforementioned quotation marks
  18.  
  19. → wanna make the links stop doing that expanding thing? search for "letter-spacing" and delete that. likewise, you can change the number of pixels they expand instead of geting rid of it entirely
  20.  
  21. → colour palettes!!! http://pltts.me/ or http://www.colourlovers.com/ or http://www.color-hex.com are are awesome resources!
  22.  
  23. and remember !!! if you get stuck and need help, just shoot me an ask and I'll try my best to help you !!!
  24.  
  25. -->
  26.  
  27.  
  28. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  29. <head>
  30.  
  31. <title>{Title}</title>
  32. <link rel="shortcut icon" href="{Favicon}">
  33. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  34. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  35.  
  36. <meta name="color:text" content="#5c5863"/>
  37. <meta name="color:link" content="#7ca2a2"/>
  38. <meta name="color:quote" content="#7ca2a2"/>
  39. <meta name="color:hover" content="#808c8f"/>
  40. <meta name="color:selection" content="#808c8f"/>
  41. <meta name="color:quotemarks" content="#888888"/>
  42. <meta name="color:scrollbar" content="#b4dec1"/>
  43. <meta name="color:linkbg" content="#102029"/>
  44. <meta name="color:infobg" content="#b4dec1"/>
  45. <meta name="color:bg" content="#ffffff"/>
  46.  
  47. <meta name="image:sidebar" content=""/>
  48.  
  49. <meta name="text:link url" content="/">
  50. <meta name="text:link title" content="navigation">
  51.  
  52.  
  53.  
  54.  
  55. <style type="text/css">
  56.  
  57.  
  58. ::-moz-selection {background-color:{color:selection};
  59. color:{color:bg};}
  60. ::selection {background-color:{color:selection};
  61. color:{color:bg};}
  62. ::-webkit-scrollbar {height: 6px;width: 4px;}
  63. ::-webkit-scrollbar-thumb {background-color:{color:scrollbar}; width: 4px;}
  64. ::-webkit-scrollbar-track{background-color:{color:bg}; width: 2px;}
  65.  
  66.  
  67.  
  68. body {
  69. background-color:{color:bg};
  70. font-family:helvetica;
  71. font-size:10px;
  72. padding-bottom:5px;
  73. padding-top:0px;
  74. padding-right:0px;
  75. padding-left:0px;
  76. text-align:justify;
  77. color:{color:text};
  78. margin:0;
  79. }
  80.  
  81.  
  82. a {
  83. text-decoration:none;
  84. text-transform:uppercase;
  85. -moz-outline-style:none;
  86. color:{color:link};
  87. -webkit-transition: all 0.5s ease;
  88. -moz-transition: all 0.5s ease;
  89. -o-transition: all 0.5s ease
  90. }
  91.  
  92. a:hover {
  93. opacity:1;
  94. color:{color:hover};
  95. letter-spacing:2px;
  96. -webkit-transition: all 0.5s ease;
  97. -moz-transition: all 0.5s ease;
  98. -o-transition: all 0.5s ease
  99. }
  100.  
  101. img {
  102. border:none;
  103. opacity: 1;
  104. }
  105.  
  106.  
  107. h1 {
  108. font-size:20px;
  109. text-align:center;
  110. color:{color:text};
  111. text-transform:uppercase;
  112. font-family:helvetica;
  113. font-weight:200;
  114. }
  115.  
  116. h2 {
  117. font-size:17px;
  118. text-align:center;
  119. color:{color:text};
  120. text-transform:lowercase;
  121. font-family:helvetica;
  122. font-weight:200;
  123. }
  124.  
  125. /*DON'T TOUCH THIS ONE (h6) OR YOU'LL MESS UP THE QUOTE THINGYS ON QUOTE POSTS!!! who needs 6 headers anyways thats why i picked h6*/
  126. h6 {
  127. font-size:40px;
  128. opacity: 0.60;
  129. line-height:50%;
  130. color:{color:quotemarks};
  131. margin-bottom:-10px;
  132. margin-top:-10px;
  133. z-index:-100000000;
  134. }
  135.  
  136.  
  137. blockquote {
  138. width: 490px;
  139. font-size:10px;
  140. text-transform: normal;
  141. line-height:10px;
  142. margin-left:0px;
  143. padding: 4px;
  144. padding-left:9px;
  145. border-left: 5px solid {color:linkbg};
  146. color: {color:text};
  147. }
  148.  
  149.  
  150.  
  151.  
  152. #sidebar {
  153. position:fixed;
  154. width:300px;
  155. margin-right:0px;
  156. margin-left:110px;
  157. margin-top:140px;
  158. margin-bottom:0px;
  159. opacity:1;
  160. }
  161.  
  162.  
  163. #sidebarimage {
  164. width:175px;
  165. height:300px;
  166. }
  167.  
  168. #sidebarimage img {
  169. width:175px;
  170. height:300px;
  171. opacity:1;
  172. margin-left:-30px;
  173. padding-top:0px;
  174. padding-bottom:10px;
  175. padding-right:0px;
  176. padding-left:0px;
  177. }
  178.  
  179. .desc {
  180. position:fixed;
  181. margin-top:-180px;
  182. margin-left:145px;
  183. font-family:helvetica;
  184. line-height:100%;
  185. font-size:10px;
  186. font-style:normal;
  187. width:150px;
  188. height:130px;
  189. overflow:auto;
  190. padding:9px;
  191. text-align:justify;
  192. text-transform:lowercase;
  193. background:{color:bg};
  194. z-index:-1;
  195. }
  196.  
  197. .links {
  198.  
  199. position:fixed;
  200. margin-top:-295px;
  201. margin-left:145px;
  202. width:150px;
  203. padding-bottom:5px;
  204. padding-top:5px;
  205. word-spacing:8px;
  206. line-height:200%;
  207. letter-spacing:3px;
  208. font-family:helvetica;
  209. font-size:11;
  210. color:{color:link};
  211. text-align:justify;
  212. text-transform:uppercase;
  213. }
  214.  
  215. .links a {
  216. font-size: 10px;
  217. border-left: 5px solid {color:linkbg};
  218. color:{color:link};
  219. width:150px;
  220. height:15px;
  221. padding-top:5px;
  222. padding-bottom:5px;
  223. padding-left:5px;
  224. -moz-transition-duration:0.6s;
  225. -webkit-transition-duration:0.6s;
  226. -o-transition-duration:0.6s;
  227. }
  228.  
  229. .links a:hover {
  230. color:{color:hover};
  231. border-left: 8px solid {color:linkbg};
  232. letter-spacing:6px;
  233. padding-top:8px;
  234. padding-bottom:8px;
  235. padding-left:5px;
  236. -moz-transition-duration:0.6s;
  237. -webkit-transition-duration:0.6s;
  238. -o-transition-duration:0.6s;
  239. }
  240.  
  241.  
  242. .pagi {
  243. margin-right:-170px;
  244. margin-top:-13px;
  245. font-family:helvetica;
  246. font-size:10px;
  247. text-align:center;
  248. text-transform:uppercase;
  249. z-index:1;
  250. }
  251.  
  252. .pagi a {
  253. font-size:10px;
  254. letter-spacing:2px;
  255. }
  256.  
  257. .pagi a:hover {
  258. letter-spacing:4px;
  259. }
  260.  
  261.  
  262.  
  263. /*-----ENTRIES-----*/
  264. #entries {
  265. padding:10px;
  266. padding-bottom:5px;
  267. width:500px;
  268. margin-left:450px;
  269. margin-top:50px;
  270. font-size:10px;
  271. margin-bottom:50px;
  272. }
  273.  
  274.  
  275.  
  276. #posts {
  277. width:500px;
  278. padding-bottom:20px;
  279. padding:10px;
  280. margin-top:20px;
  281. background-color:{color:bg};
  282. }
  283.  
  284.  
  285. #info {
  286. width:500px;
  287. padding-top:5px;
  288. padding-bottom:8px;
  289. padding-left:8px;
  290. font-size:10px;
  291. margin-left:-1px;
  292. font-style:normal;
  293. text-transform:uppercase;
  294. text-align:left;
  295. border-top: 2px solid {color:infobg};
  296. -moz-transition-duration:0.5s;
  297. -webkit-transition-duration:0.5s;
  298. -o-transition-duration:0.5s;
  299. }
  300.  
  301. #info a{
  302. margin-top:-20px;
  303. color:{color:text};
  304. -moz-transition-duration:0.5s;
  305. -webkit-transition-duration:0.5s;
  306. -o-transition-duration:0.5s;
  307. }
  308.  
  309. #info a:hover{
  310. color:{color:bg};
  311. -moz-transition-duration:0.5s;
  312. -webkit-transition-duration:0.5s;
  313. -o-transition-duration:0.5s;
  314. }
  315.  
  316. .tags {
  317. font-family:helvetica;
  318. width:500px;
  319. line-height:100%;
  320. text-align:left;
  321. padding-top:7px;
  322. text-transform: lowercase;
  323. font-size:8px;
  324. -moz-transition-duration:0.5s;
  325. -webkit-transition-duration:0.5s;
  326. -o-transition-duration:0.5s;
  327. }
  328.  
  329.  
  330. .notes {
  331. text-transform:normal;
  332. letter-spacing:0px;
  333. font-size:9px;
  334. margin-top:20px;
  335. font-style:normal;
  336. margin-left:-20px;
  337. text-align:left;
  338. line-height:30px;
  339. }
  340.  
  341. .notes img{
  342. padding:2px;
  343. border:1px solid #eee;
  344. margin-bottom:-4px;
  345. -webkit-transition:all 0.5s ease-in-out;
  346. -moz-transition:all 0.5s ease-in-out;
  347. -o-transition:all 0.5s ease-in-out;
  348. -ms-transition:all 0.5s ease-in-out;
  349. transition:all 0.5s ease-in-out;
  350. }
  351.  
  352. .notes img:hover {opacity: 0.6;
  353. -webkit-transition:all 0.5s ease-in-out;
  354. -moz-transition:all 0.5s ease-in-out;
  355. -o-transition:all 0.5s ease-in-out;
  356. -ms-transition:all 0.5s ease-in-out;
  357. transition:all 0.5s ease-in-out;}
  358.  
  359.  
  360. .quote {
  361. font-size:20px;
  362. font-family:helvetica;
  363. font-style:normal;
  364. line-height:17px;
  365. margin-bottom:15px;
  366. text-transform:uppercase;
  367. text-align:center;
  368. font-weight:normal;
  369. font-style:none;
  370. color:{color:quote};
  371. z-index:2;
  372. }
  373.  
  374. .quotesource {
  375. font-size:11px;
  376. text-align:center;
  377. font-style:none;
  378. text-transform:lowercase;
  379. font-family:helvetica;
  380. margin-bottom:5px;
  381. color:{color:text};
  382. z-index:2;
  383. }
  384.  
  385.  
  386. #albumimg {
  387. }
  388.  
  389. #albumimg img {
  390. width:75px;
  391. height:75px;
  392. padding:0px;
  393. }
  394.  
  395.  
  396. .ask {
  397. font-size:20px;
  398. font-family:helvetica;
  399. letter-spacing:-2px;
  400. font-weight:bold;
  401. text-align:center;
  402. padding:6px;
  403. text-transform:uppercase;
  404. z-index:2;
  405. }
  406.  
  407. .question {
  408. letter-spacing:0px;
  409. margin-top:-12px;
  410. text-transform:uppercase;
  411. padding:4px;
  412. text-align:center;
  413. color:{color:Text};
  414. z-index:2;
  415. }
  416.  
  417. .answer {
  418. width:500px;
  419. letter-spacing:0px;
  420. text-align:justify;
  421. padding-top:5px;
  422. margin-bottom:1px;
  423. color:{color:Text};
  424. z-index:2;
  425. }
  426.  
  427.  
  428. .user_1 .label {color:{color:linkbg}; font-weight:normal; font-style:italic; text-transform:uppercase;}
  429. .user_2 .label {color:{color:link}; font-weight:normal; font-style:italic; text-transform:uppercase; }
  430. .user_3 .label {color:{color:linkbg}; font-weight:normal; font-style:italic; text-transform:uppercase;}
  431. .user_4 .label {color:{color:link}; font-weight:normal; font-style:italic; text-transform:uppercase; }
  432. .user_5 .label {color:{color:linkbg}; font-weight:normal; font-style:italic; text-transform:uppercase; }
  433. .user_6 .label {color:{color:link}; font-weight:normal; font-style:italic; text-transform:uppercase; }
  434. .ul.chat {}
  435. .chat ol {}
  436. .chat li {list-style:none; margin-left:-38px; padding:2px; font-family: helvetica; font-style: none; font-size: 10px; }
  437.  
  438.  
  439.  
  440. #cred{
  441. float:right;
  442. position:fixed;
  443. bottom:5px;
  444. right:10px;
  445. padding:7px;
  446. font-size:8px;
  447. text-align:center;
  448. line-height:210%;
  449. text-transform:uppercase;
  450. }
  451.  
  452. #cred a{
  453. padding:7px;
  454. color:#A4A4A4;
  455. }
  456.  
  457. #cred a:hover{
  458. color:#fff;
  459. padding:7px;
  460. background-color:{color:hover};
  461. opacity: 0.50;
  462. }
  463.  
  464. #credimage {
  465. float:right;
  466. position:fixed;
  467. bottom:10px;
  468. right:10px;
  469. padding:7px;
  470. width:75px;
  471. }
  472.  
  473. #credimage img{
  474. width:75px;
  475. }
  476.  
  477. #credimage img:hover {
  478. opacity: 0.50;
  479. -webkit-transition: all 0.6s ease-out;
  480. -o-transition: all 0.6s ease-out;
  481. -webkit-transition: all 0.6s ease-out;
  482. -moz-transition: all 0.6s ease-out;
  483. }
  484.  
  485. {CustomCSS}</style></head><body>
  486.  
  487.  
  488. <div id="sidebar">
  489.  
  490.  
  491. <div id="sidebarimage"><img src="{image:sidebar}"></div>
  492.  
  493.  
  494. <div class="desc">
  495. {Description}
  496. </div>
  497.  
  498.  
  499. <div class="links">
  500. <a href="/">home</a><br><br>
  501. <a href="/ask">ask</a><br><br>
  502. <a href="{text:link url}">{text:link title}</a>
  503. </div>
  504.  
  505.  
  506. {block:Pagination}
  507. <div class="pagi">
  508. {block:PreviousPage}
  509. <a href="{PreviousPage}">last</a>
  510. {/block:PreviousPage}
  511. ||
  512. {block:NextPage}
  513. <a href="{NextPage}"> next</a>
  514. {/block:NextPage}
  515. </div>
  516. {/block:Pagination}
  517.  
  518.  
  519. </div>
  520.  
  521.  
  522. <div id="entries">{block:Posts}<div id="posts">
  523.  
  524.  
  525. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  526.  
  527.  
  528. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  529.  
  530.  
  531. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  532.  
  533.  
  534. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  535.  
  536.  
  537. {block:Quote}<div class="quote"><h6>❝</h6>{Quote}</div>{block:Source} <div class="quotesource">—{Source}</div>{/block:Source}{/block:Quote}
  538.  
  539.  
  540. {block:Audio}<left><div id="albumimg">{block:AlbumArt}<img src="{AlbumArtURL}" width="75px" height="75px" align="left" style="margin-right:10px" />{/block:AlbumArt}</div></left>
  541. <div style="font-size:14px; font-weight:lighter; font-style:italic;">{block:TrackName}{TrackName}<br>{/block:TrackName}</div>
  542. {block:Artist}{Artist}<br>{/block:Artist}
  543. {block:PlayCount}{PlayCountWithLabel}<br>{/block:PlayCount}
  544. {/block:ExternalAudio}<br>
  545. <left><span class="audio">{AudioPlayerWhite}</left></span>
  546. {Caption}
  547. {/block:Audio}
  548.  
  549.  
  550. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  551.  
  552.  
  553. {block:Chat}<ul class="chat">{block:Title}<h1>{Title}</h1>{/block:Title} {block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>{/block:Chat}
  554.  
  555.  
  556. {block:Answer}<div id="question"><span style="text-transform:uppercase"><center>{Asker} says:<br><br><i>"{Question}"</i></center></span></div>{Answer}{/block:Answer}
  557.  
  558.  
  559. <div id="info"><a href="{Permalink}">{block:Date}{DayOfMonthWithZero} {ShortMonth}, {Year}</a> || {TimeAgo} {/block:Date} {block:RebloggedFrom} via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
  560. {block:ContentSource}<br> <a href="{SourceURL}"> <a href="{SourceURL}">© {SourceLink}</a> {/block:ContentSource}{block:RebloggedFrom} <a href="{ReblogParentURL}" target="_blank"></a>{/block:RebloggedFrom}
  561. <br><a href="{Permalink}">{NoteCountWithLabel}</a>
  562. {block:HasTags}<div id="tags"><b>Tagged:</b> {block:Tags}<a href="{TagURL}">#{Tag},</a> {/block:Tags}</div>{/block:HasTags}</div></div>
  563. {/block:Posts}
  564. {block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
  565. {/block:Posts}</div></div></div>
  566.  
  567.  
  568. <div id="credimage"><a href="http://craicshelley.tumblr.com">
  569. <img src="https://31.media.tumblr.com/73a6dda48b42d893d854a75878612948/tumblr_nhfoj5inq71rs4m9po1_250.png"/></a></div></center>
  570.  
  571.  
  572.  
  573. {block:ContentSource}
  574. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  575. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  576. {/block:SourceLogo}
  577. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  578. {/block:ContentSource}
  579.  
  580.  
  581. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement