Advertisement
Guest User

Howell Theme by mayanecdote

a guest
Oct 31st, 2014
151
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.54 KB | None | 0 0
  1. <!--
  2. Howell Theme by mayanecdote! Please note this is my first attempt at a theme and I found it really difficult. I probably got a few things wrong but please try to be kind to me! I used kaiguk's Basic base code to start off this theme, so big thanks to them! I really hope you like it~
  3. -->
  4.  
  5. <!DOCTYPE html>
  6.  
  7. <head>
  8.  
  9. <title>{Title}</title>
  10.  
  11. <!--This is your Favicon, (short for favorite icon). You can put any icon that is 16x16, which is the common size for tumblr. If its any bigger or smaller, it won't look right and it will be ugly. -->
  12.  
  13. <link rel="shortcut icon" href="{Favicon}">
  14.  
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16.  
  17.  
  18. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  19.  
  20. <!--These are the colors for the theme -->
  21.  
  22. <meta name="color:bold" content="#ccdd66"/>
  23. <meta name="color:italic" content="#dfea98"/>
  24. <meta name="color:underline" content="#cccccc"/>
  25. <meta name="color:background" content="#ffffff"/>
  26. <meta name="color:text" content="#aaaaaa"/>
  27. <meta name="color:link" content="#ccdd66"/>
  28. <meta name="color:hover" content="#ebf1c2"/>
  29. <meta name="color:border" content="#3bb5bb"/>
  30. <meta name="color:ask bubble" content="#ebf1c2"/>
  31. <meta name="color:scrollbar" content="#ecf2c1">
  32. <meta name="color:linktitlebg" content="#eeeeee"/>
  33. <meta name="color:linktitletext" content="#888888"/>
  34. <meta name="color:selection text" content="#888888"/>
  35. <meta name="color:selection bg" content="#eeeeee"/>
  36. <meta name="color:pagination" content= "#000"
  37.  
  38. <!--These are the image that will be displayed on the theme -->
  39.  
  40. <meta name="image:sidebar img" content="http://38.media.tumblr.com/dfc0aef561c3b756a4848f939ea3feaf/tumblr_ndgf75aFKa1rn1z2fo2_250.gif"/>
  41. <meta name="image:bg" content="http://media.tumblr.com/8a2493f947960ede826eab5c2b426377/tumblr_inline_mkjlcqZOBM1qz4rgp.png"/>
  42.  
  43. <!--These are your links that will go on the theme too -->
  44.  
  45. <meta name="text:Link 1 URL" content="/" />
  46. <meta name="text:Link 1" content="" />
  47. <meta name="text:Link 2 URL" content="" />
  48. <meta name="text:Link 2" content="" />
  49. <meta name="text:Link 3 URL" content="" />
  50. <meta name="text:Link 3" content="" />
  51. <meta name="text:Link 4 URL" content="" />
  52. <meta name="text:Link 4" content="" />
  53. <meta name="text:Link 5 URL" content="" />
  54. <meta name="text:Link 5" content="" />
  55.  
  56.  
  57. <!--This is for you hover titles (When you hover over a link) -->
  58.  
  59.  
  60. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  61. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  62. <script>
  63. (function($){
  64. $(document).ready(function(){
  65. $("[title]").style_my_tooltips();
  66. });
  67. })(jQuery);
  68. </script>
  69.  
  70. <!--This is the theme making really begins, so put your theme making cap on and get started!-->
  71.  
  72.  
  73. <style type="text/css">
  74.  
  75.  
  76. /* this is for the scrollbar */
  77.  
  78. ::-webkit-scrollbar{height: 9px; width: 9px; -webkit-border-radius: 0px; background:{color:background};
  79. }
  80.  
  81. ::-webkit-scrollbar-thumb{background:{color:scrollbar};}
  82. ::-webkit-scrollbar-track{background:{color:bg};
  83. }
  84.  
  85. /* If you want a certain font, background color, your text color, font color, etc. for the theme. General stuff.*/
  86.  
  87. body {
  88. background:{color:background};
  89. background-image:url('{image:bg}');
  90. background-attachment:fixed;
  91. color:{color:text};
  92. font-family:arial;
  93. font-size:11px;
  94. text-align:justify;
  95. margin:0;
  96. line-height:16px;
  97. }
  98.  
  99. /* blockquote */
  100.  
  101. blockquote {
  102. padding:5px 0 5px 30px;
  103. border-left:2px dotted {color:border};
  104. margin-left:30px;
  105. background:#fafafa;
  106. }
  107.  
  108. /* bold (b), italic (i,em), and underlined (u) */
  109.  
  110. b,strong{
  111. color:{color:bold};
  112. }
  113.  
  114.  
  115. i,em{
  116. color:{color:italic};
  117. }
  118.  
  119.  
  120. u{
  121. color:{color:underline};
  122. }
  123.  
  124.  
  125. /* Links & hovers */
  126.  
  127.  
  128. a {
  129. color:{color:link};
  130. text-decoration:none;
  131. -moz-transition-duration:1s;
  132. -webkit-transition-duration:1s;
  133. -o-transition-duration:1s;
  134. }
  135.  
  136.  
  137. a:hover {
  138. color:{color:hover};
  139. /* transition of the image when you hover on it */
  140. -moz-transition-duration:1s;
  141. -webkit-transition-duration:1s;
  142. -o-transition-duration:1s;
  143. }
  144.  
  145. /* Your sidebar, image, description and links */
  146.  
  147.  
  148. #sidebar {
  149. padding:6px;
  150. text-align:left:100px;
  151. position:fixed;
  152. margin-left:-192px;
  153. margin-top:200px;
  154. width:125px;
  155. }
  156.  
  157. #sidebar:hover #desc {
  158. opacity:1;
  159. -moz-transition-duration:1s;
  160. -webkit-transition-duration:1s;
  161. -o-transition-duration:1s;
  162. }
  163.  
  164. #desc {
  165. opacity:0;
  166. -moz-transition-duration:1s;
  167. -webkit-transition-duration:1s;
  168. -o-transition-duration:1s;
  169. }
  170.  
  171. #sideimg img {
  172. width:120px;
  173. border-radius:80px;
  174. padding:6px;
  175. -moz-transition-duration:1s;
  176. -webkit-transition-duration:1s;
  177. -o-transition-duration:1s;
  178. border:2px dotted {color:border};
  179. }
  180.  
  181.  
  182. #sideimg img:hover {
  183. border-radius:0px;
  184. /* transition of the image when you hover on it */
  185. -moz-transition-duration:1s;
  186. -webkit-transition-duration:1s;
  187. -o-transition-duration:1s;
  188. }
  189.  
  190.  
  191. #links {
  192. width:150px;
  193. text-transform:lowercase;
  194. word-spacing:3px;
  195. text-align:justify;
  196. margin-left:11.5px;
  197. }
  198.  
  199.  
  200. #links a {
  201. margin-top:5px;
  202. display:inline-block;
  203. margin-bottom:5px;
  204. }
  205.  
  206. #desc {
  207. width:100px;
  208. margin-left:18px;
  209. text-align:justify;
  210. font-size:11px;
  211. }
  212.  
  213. #theme {
  214. left:50%;
  215. margin-left:-250px;
  216. position:absolute;
  217. }
  218.  
  219.  
  220. /* Your post */
  221.  
  222.  
  223. #entries {
  224. margin-top:75px;
  225. width:400px;
  226.  
  227. }
  228.  
  229.  
  230. #posts {
  231. background:#fff;
  232. width:400px;
  233. margin-left:50px;
  234. margin-bottom:75px;
  235. border:2px dotted {color:border};
  236. padding:15px;
  237. }
  238.  
  239.  
  240. #posts img {
  241. max-width:400px;
  242. }
  243.  
  244.  
  245. /* Quote & Source */
  246.  
  247. #quote{
  248. text-align:left;
  249. font-size:14px;
  250. line-height:18px;
  251. font-weight:bold;
  252. }
  253.  
  254.  
  255. #source {
  256. margin-top:15px;
  257. text-align:right;
  258. }
  259.  
  260.  
  261. /* Audio */
  262.  
  263.  
  264. .player {
  265. width:25px;
  266. height:25px;
  267. overflow:hidden;
  268. position:absolute;
  269. background:white;
  270. }
  271.  
  272.  
  273. .audioinfo {
  274. margin-left:50px;
  275. line-height:120%;
  276. }
  277.  
  278.  
  279. /* Speech Bubble for Question */
  280.  
  281.  
  282. .bubble {
  283. width:326px;
  284. position: relative;
  285. background:{color:ask bubble};
  286. left:60px;
  287. margin: 0;
  288. padding:10px;
  289. text-align:left;
  290. -moz-border-radius:10px;
  291. -webkit-border-radius:10px;
  292. -webkit-box-shadow: 0px 0 1px rgba(0,0,0,0);
  293. -moz-box-shadow: 0px 0 1px rgba(0,0,0,0);
  294. box-shadow: 0px 0 1px rgba(0,0,0,0);
  295. }
  296.  
  297.  
  298. .bubble:after {
  299. position: absolute;
  300. display: block;
  301. content: "";
  302. border-color: {color:ask bubble} transparent transparent transparent;
  303. border-style: solid;
  304. border-width: 15px 15px 0px;
  305. height:0;
  306. width:0;
  307. position:absolute;
  308. left:-15px;
  309. top:10px;
  310. }
  311.  
  312.  
  313. /* Chats */
  314.  
  315.  
  316. .chat ol {
  317. padding:0;
  318. list-style:none;
  319. }
  320.  
  321.  
  322. .line {
  323. list-style:none;
  324. padding:5px 0;
  325. }
  326.  
  327.  
  328. .label {
  329. text-decoration:bold;
  330. }
  331.  
  332.  
  333. /* Permalink & Info */
  334.  
  335.  
  336. #info {
  337. padding:10px;
  338. width:374px;
  339. text-align:left;
  340. line-height:15px;
  341. margin-top:10px;
  342. height:auto;
  343. background:#fafafa;
  344. padding:10px;
  345. }
  346.  
  347.  
  348. #perma {
  349. margin-top:10px;
  350. padding:5px;
  351. font-size:9px;
  352. color:{color:link};
  353. text-transform:normal;
  354. font-style:normal;
  355. letter-spacing:2px;
  356. text-align:center;
  357. }
  358.  
  359.  
  360. /* Notes */
  361.  
  362.  
  363. .note li {
  364. list-style-type:none;
  365. padding:10px 25px 10px 25px;
  366. text-align:left;
  367. margin:0px;
  368. border-bottom:1px solid {color:border};
  369. line-height:140%;
  370. -moz-transition-duration:0.5s;
  371. -webkit-transition-duration:0.5s;
  372. -o-transition-duration:0.5s;
  373. }
  374.  
  375.  
  376. .notes img {
  377. display:none!important;
  378. }
  379.  
  380.  
  381. /* For Hovering Over Links*/
  382.  
  383.  
  384. #s-m-t-tooltip {
  385. z-index: 9999;
  386. background: {color:LinkTitleBG};
  387. font-size: 10px;
  388. line-height: 11px;
  389. font-family: arial;
  390. letter-spacing: 1px;
  391. text-transform: normal;
  392. color: {color:LinkTitleText};
  393. max-width: 150px;
  394. word-wrap: break-word;
  395. padding: 2px 5px 2px 6px;
  396. display: block;
  397. margin: 24px 14px 7px 12px;
  398. -webkit-box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.10);
  399. -moz-box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.10);
  400. box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.10);
  401. }
  402.  
  403.  
  404. /* Selection Text & BG (instead of having that blue background when you highlight something) */
  405.  
  406.  
  407. ::selection {
  408. background:{color:selection bg};
  409. color:{color:selection text};
  410. }
  411.  
  412. #colour-bar {
  413. width:100%;
  414. height:10px;
  415. overflow:none;
  416. position:fixed;
  417. }
  418.  
  419. .colour-part {
  420. width:20%;
  421. height:100%;
  422. float:left;
  423. }
  424.  
  425. .back, .next {
  426. font-size:36px;
  427.  
  428. font-family:arial;
  429. color: #000;
  430. position:fixed;
  431. -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s;
  432. transition-duration: 0.8s; -o-transition-duration: 0.8s;}
  433.  
  434. .next {float:right; top: 200px; left: 355px;}
  435. .back {float:left; top: 280px; left: 355px;}
  436.  
  437. img:hover{-webkit-filter: grayscale(0%); -webkit-transition: .5s ease-in-out;-moz-filter: grayscale(0%); -moz-transition: .5s ease-in-out;-o-filter: grayscale(0%); -o-transition: .5s ease-in-out;} img{-webkit-filter: grayscale(100%); -webkit-transition: .5s ease-in-out;-moz-filter: grayscale(100%); -moz-transition: .5s ease-in-out-o-filter: grayscale(100%); -o-transition: .5s ease-in-out;}
  438.  
  439. {CustomCSS}
  440.  
  441.  
  442. </style>
  443.  
  444.  
  445. </head>
  446.  
  447. <!-- This is where you place you put your theme together and make it look all nice -->
  448.  
  449. <body>
  450.  
  451. {block:Pagination}
  452.  
  453. {block:NextPage}<a class="next" href="{NextPage}">»</a>{/block:NextPage}
  454. {block:PreviousPage}<a class="back" href="{PreviousPage}">«</a>{/block:PreviousPage}
  455.  
  456. {block:PermalinkPagination}
  457. {block:NextPost}<a class="next" href="{NextPost}">»</a>{/block:NextPost}
  458. {block:PreviousPost}<a class="back" href="{PreviousPost}">«</a>{/block:PreviousPost}
  459. {/block:PermalinkPagination}
  460.  
  461. {/block:Pagination}
  462.  
  463. <div id="pagination"></div>
  464.  
  465. <div id="colour-bar">
  466. <div class="colour-part" style="background-color:#000;"></div>
  467. <div class="colour-part" style="background-color:#888;"></div>
  468. <div class="colour-part" style="background-color:#000;"></div>
  469. <div class="colour-part" style="background-color:#888;"></div>
  470. <div class="colour-part" style="background-color:#000;"></div>
  471. </div>
  472.  
  473. <div id="theme">
  474.  
  475. <div id="sidebar">
  476.  
  477. <div id="sideimg"><img src="{image:Sidebar img}"></div>
  478.  
  479. <div id="links">
  480.  
  481. {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
  482.  
  483. {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}
  484.  
  485. {block:ifLink3}<a href="{text:Link 3 URL}" >{text:Link 3}</a>{/block:ifLink3}
  486.  
  487. {block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifLink4}
  488.  
  489. {block:ifLink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:ifLink5}
  490. </div>
  491.  
  492. <div id="desc">{Description}</div>
  493.  
  494. </div>
  495.  
  496. <div id="entries">
  497.  
  498.  
  499. <!--This is where you fix all your post (your quotes post, text post, photo post, audio post, etc. -->
  500.  
  501. {block:Posts}
  502.  
  503. <div id="posts">
  504.  
  505. {block:Quote}
  506. <div id="quote">“{Quote}”</div>
  507. {block:Source}<div id="source">— {Source}</div>{/block:Source}
  508. {/block:Quote}
  509.  
  510.  
  511. {block:Text}
  512. {block:Title}
  513. <div id="title"><div style="font-size:17px; text-align:left;">{Title}</div></div>{/block:Title}
  514. {Body}
  515. {/block:Text}
  516.  
  517. {block:Link}
  518. <div id="title">
  519. <div style="font-size:17px; text-align:left;"><a href="{URL}">{Name} »</a></div></div>
  520. {block:Description}{Description}{/block:Description}
  521. {/block:Link}
  522.  
  523. {block:Chat}
  524. {block:Title}
  525. <h1>{Title}</h1>
  526. {/block:Title}
  527. <div class="chat">
  528. <ol>{block:Lines}
  529. <li class="line {Alt}">
  530. {block:Label}
  531. <span class="label">
  532. <b>{Label}</b></span>
  533. {/block:Label}{Line}</li>
  534. {/block:Lines}
  535. </ol></div>
  536. {/block:Chat}
  537.  
  538. {block:Photo}
  539. {LinkOpenTag}<center><img src="{PhotoURL-400}" alt="{PhotoAlt}"/></center>
  540. {LinkCloseTag}
  541. {/block:Photo}
  542.  
  543. {block:Photoset}
  544. <center>{Photoset-400}</center>
  545. {/block:Photoset}
  546.  
  547. {block:Video}
  548. {Video-400}
  549. {/block:Video}
  550.  
  551. {block:Audio}<div class="player">{AudioPlayerWhite}</div><div class="audioinfo">{block:TrackName}{TrackName}{/block:TrackName}{block:Artist}<br> by {Artist}{/block:Artist}</div>
  552. {/block:Audio}
  553.  
  554.  
  555. {block:Answer}
  556. <div class="post"><br>
  557. <div class="askerportrait"><img style="border-radius:50px;" src="{AskerPortraitURL-40}" align="left" /></div><div class="bubble">{Asker} asked: {Question}</div><br>
  558. <div style="margin-left:200px;">{Answer}</div>
  559. </div>
  560. {/block:Answer}
  561.  
  562. {block:IndexPage}
  563. <div id="perma">
  564. <img src="http://static.tumblr.com/3yblkz0/qSLn46s92/eee.png">
  565. <a href="{Permalink}">Posted {block:Date}{TimeAgo}{/block:Date} with {NoteCountWithLabel}</a> <img src="http://static.tumblr.com/3yblkz0/qSLn46s92/eee.png"></div>
  566. {block:IndexPage}
  567.  
  568. {block:PermalinkPage}
  569. {block:Date}
  570. <div id="info">
  571. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}<br>
  572. <b>Date:</b> {ShortMonth} {DayOfMonthWithZero}, {Year}<br>
  573. {block:NoteCount}
  574. <b>Notes:</b> {NoteCount}<br>
  575. {/block:NoteCount}
  576. {block:RebloggedFrom}
  577. <b>Via:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
  578. {/block:RebloggedFrom}
  579. {block:ContentSource}
  580. <b>Source:</b> <a href="{SourceURL}">{SourceTitle}</a><br>
  581. {/block:ContentSource}
  582. {block:HasTags}
  583. <b>Tagged:</b>
  584. {block:Tags}
  585. <a href="{TagURL}">#{Tag}</a>
  586. {/block:Tags}
  587. {/block:HasTags}
  588. </div>
  589. {/block:Date}
  590. {/block:PermalinkPage}
  591.  
  592. <div class="note">{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  593.  
  594. </div>
  595.  
  596.  
  597. {/block:Posts}
  598.  
  599. <!-- Congratsss!!! This is the end of the theme, if you didn't change the theme at all, please keep the credit...and if you did..you know what to do already so I really don't need to tell you anymore...:PPP -->
  600. <div style="position:fixed;bottom:3px; right:3px; font-size:18px; letter-spacing:1px; font-family:arial;"><a href="http://mayanecdote.tumblr.com/" title="theme by Maya">✰</a>
  601. </div>
  602.  
  603. </div>
  604.  
  605. </div>
  606.  
  607. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement