API tools faq
paste
Advertisement
ofcuteboys

Theme #03 "Sugar Cookies"

ofcuteboys
Dec 6th, 2013
186
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.87 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head><title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  7.  
  8. <!---
  9. | |
  10. | CAROLINE'S THEME |
  11. | |
  12.  
  13.  
  14.  
  15. THEME #03, "Sugar Cookies"
  16.  
  17. The rules for my theme are-
  18. : do not steal, repost, or claim as your own
  19.  
  20. : I'm fine with people borrowing bits of my code. If you use a significant portion, please give me credit on another page or something!
  21.  
  22. : There are a lot of base codes out there. This theme is not a base code. You ARE welcome to look at it to teach yourself coding though
  23.  
  24. : If you use this theme, you MUST like/reblog the post. Your feedback helps me know what to make next!
  25.  
  26. CREDITS (people who helped)
  27. -zerie made the tooltips
  28. -hoenarry made the base code
  29. --->
  30.  
  31. <meta name="color:Background" content="#ffffff"/>
  32. <meta name="color:Text" content="#ffffff"/>
  33. <meta name="color:Link" content="#b8b8b8"/>
  34. <meta name="color:Hover" content="#838282"/>
  35. <meta name="color:accent" content="#888888"/>
  36.  
  37. <meta name="image:sidebar" content=""/>
  38. <meta name="text:Link 1 Title" content="01 text">
  39. <meta name="text:Link 1 URL" content="01">
  40. <meta name="text:Link 2 Title" content="02 text">
  41. <meta name="text:Link 2 URL" content="02">
  42. <meta name="text:Link 3 Title" content="03 text">
  43. <meta name="text:Link 3 URL" content="03">
  44.  
  45.  
  46.  
  47.  
  48. <link href='http://fonts.googleapis.com/css?family=Signika+Negative' rel='stylesheet' type='text/css'>
  49.  
  50.  
  51. <link href='http://fonts.googleapis.com/css?family=Oleo+Script+Swash+Caps' rel='stylesheet' type='text/css'>
  52.  
  53.  
  54. <style type="text/css">
  55.  
  56.  
  57. #lace {
  58. width:200px;
  59. position:fixed;
  60. top:0;
  61. left:0;}
  62.  
  63.  
  64. b {color:{color:accent}; font-size:2.5;}
  65. i {color:{color:accent};}
  66. em {color:{color:accent}; text-transform:uppercase; font-size:1.5;}
  67. strong {color:{color:accent}; text-transform:uppercase; font-size:1.5;}
  68.  
  69.  
  70. ::selection {
  71. background-color:{color:accent};
  72. }
  73.  
  74. body {
  75. background:{color:background};
  76. margin:0px;
  77. color:{color:text};
  78. font-family:arial;
  79. font-size:11px;
  80. line-height:100%;
  81. }
  82.  
  83. a {
  84. text-decoration:none;
  85. outline:none;
  86. -moz-outline-style:none;
  87. color:{color:link};
  88. font-weight:bold;
  89. }
  90.  
  91. a:hover{
  92. color:{color:hover};
  93. }
  94.  
  95.  
  96.  
  97. img {
  98. border:none;
  99. }
  100.  
  101. blockquote {
  102. padding-left:5px;
  103. border-left:2px solid;
  104. }
  105.  
  106. blockquote blockquote {
  107. padding-left:5px;
  108. border-left:2px solid;
  109. }
  110.  
  111. h1 {
  112. font-size:15px;
  113. }
  114.  
  115. #entries {
  116. padding:10px;
  117. width:500px;
  118. margin-left:550px;
  119. margin-top:40px;
  120. }
  121.  
  122. #post {
  123. width:500px;
  124. margin-bottom:50px;
  125. background-color:black;
  126. padding:10px;
  127. }
  128.  
  129. #sidebar {
  130. position:fixed;
  131. margin-left:150px;
  132. margin-top:350px;
  133. }
  134.  
  135. #title {
  136. font-size:35px;
  137. font-family:oleo script swash caps;
  138. text-align:center;
  139. margin-top:-100px;
  140. margin-left:-50px;
  141. padding:10px;
  142. }
  143.  
  144. #sidebarimage {
  145. width 250px;
  146. -webkit-transition: all 1s ease-in-out;
  147. -moz-transition: all 1s ease-in-out;
  148. -ms-transition: all 1s ease-in-out;
  149. -o-transition: all 1s ease-in-out;
  150. transition: all 1s ease-in-out;
  151. }
  152.  
  153. #sidebarimage img {
  154. width:250px;
  155. z-index:0;
  156. height:180px;
  157. border:6px solid black;
  158. margin-top:-100px;
  159. -webkit-transition: all 1s ease-in-out;
  160. -moz-transition: all 1s ease-in-out;
  161. -ms-transition: all 1s ease-in-out;
  162. -o-transition: all 1s ease-in-out;
  163. transition: all 1s ease-in-out;
  164. }
  165.  
  166. #description {
  167. text-align:center;
  168. background-color:black;
  169. border-top:3px solid {color:accent};
  170. width:245px;
  171. height:100px;
  172. font-family:bebas neue;
  173. color:white;
  174. margin-top:-50px;
  175. font-size:15px;
  176. line-height:130%;
  177. margin-left:2px;
  178. padding:5px;
  179. position:fixed;
  180. opacity:0;
  181. -webkit-transition: all 1s ease-in-out;
  182. -moz-transition: all 1s ease-in-out;
  183. -ms-transition: all 1s ease-in-out;
  184. -o-transition: all 1s ease-in-out;
  185. transition: all 1s ease-in-out;
  186.  
  187. }
  188.  
  189. #sidebarimage:hover #description{
  190. opacity:1;
  191. margin-top:-113px;
  192. -webkit-transition: all 1s ease-in-out;
  193. -moz-transition: all 1s ease-in-out;
  194. -ms-transition: all 1s ease-in-out;
  195. -o-transition: all 1s ease-in-out;
  196. transition: all 1s ease-in-out;
  197. }
  198.  
  199.  
  200. #link1 {
  201. margin-top:9px;
  202. margin-left:0px;
  203. padding:1px;
  204. -webkit-transition: all 1s ease-in-out;
  205. -moz-transition: all 1s ease-in-out;
  206. -ms-transition: all 1s ease-in-out;
  207. -o-transition: all 1s ease-in-out;
  208. transition: all 1s ease-in-out;
  209. }
  210.  
  211. #link1line {
  212. background-color:gray;
  213. width:1px;
  214. height:12px;
  215. margin-top:-60px;
  216. margin-left:24px;
  217. -webkit-transition: all 1s ease-in-out;
  218. -moz-transition: all 1s ease-in-out;
  219. -ms-transition: all 1s ease-in-out;
  220. -o-transition: all 1s ease-in-out;
  221. transition: all 1s ease-in-out;
  222. }
  223.  
  224. #link1:hover {
  225. margin-top:20px;
  226. -webkit-transition: all 1s ease-in-out;
  227. -moz-transition: all 1s ease-in-out;
  228. -ms-transition: all 1s ease-in-out;
  229. -o-transition: all 1s ease-in-out;
  230. transition: all 1s ease-in-out;
  231. }
  232.  
  233.  
  234. #link1:hover #link1line {
  235. height:50px;
  236. margin-top:-90px;
  237. -webkit-transition: all 1s ease-in-out;
  238. -moz-transition: all 1s ease-in-out;
  239. -ms-transition: all 1s ease-in-out;
  240. -o-transition: all 1s ease-in-out;
  241. transition: all 1s ease-in-out;
  242. }
  243.  
  244.  
  245.  
  246. #link2 {
  247. margin-top:35px;
  248. margin-left:40px;
  249. padding:1px;
  250. -webkit-transition: all 1s ease-in-out;
  251. -moz-transition: all 1s ease-in-out;
  252. -ms-transition: all 1s ease-in-out;
  253. -o-transition: all 1s ease-in-out;
  254. transition: all 1s ease-in-out;
  255. }
  256.  
  257. #link2line {
  258. background-color:gray;
  259. width:1px;
  260. height:155px;
  261. margin-top:-202px;
  262. margin-left:24px;
  263. -webkit-transition: all 1s ease-in-out;
  264. -moz-transition: all 1s ease-in-out;
  265. -ms-transition: all 1s ease-in-out;
  266. -o-transition: all 1s ease-in-out;
  267. transition: all 1s ease-in-out;
  268. }
  269.  
  270. #link2:hover {
  271. margin-top:60px;
  272. -webkit-transition: all 1s ease-in-out;
  273. -moz-transition: all 1s ease-in-out;
  274. -ms-transition: all 1s ease-in-out;
  275. -o-transition: all 1s ease-in-out;
  276. transition: all 1s ease-in-out;
  277. }
  278.  
  279.  
  280.  
  281.  
  282.  
  283.  
  284. #link3 {
  285. margin-top:-50px;
  286. margin-left:90px;
  287. padding:1px;
  288. -webkit-transition: all 1s ease-in-out;
  289. -moz-transition: all 1s ease-in-out;
  290. -ms-transition: all 1s ease-in-out;
  291. -o-transition: all 1s ease-in-out;
  292. transition: all 1s ease-in-out;
  293. }
  294.  
  295. #link3line {
  296. background-color:gray;
  297. width:1px;
  298. height:152px;
  299. margin-top:-200px;
  300. margin-left:24px;
  301. -webkit-transition: all 1s ease-in-out;
  302. -moz-transition: all 1s ease-in-out;
  303. -ms-transition: all 1s ease-in-out;
  304. -o-transition: all 1s ease-in-out;
  305. transition: all 1s ease-in-out;
  306. }
  307.  
  308. #link3:hover {
  309. margin-top:20px;
  310. -webkit-transition: all 1s ease-in-out;
  311. -moz-transition: all 1s ease-in-out;
  312. -ms-transition: all 1s ease-in-out;
  313. -o-transition: all 1s ease-in-out;
  314. transition: all 1s ease-in-out;
  315. }
  316.  
  317.  
  318.  
  319.  
  320. #link4 {
  321. margin-top:80px;
  322. margin-left:140px;
  323. padding:1px;
  324. -webkit-transition: all 1s ease-in-out;
  325. -moz-transition: all 1s ease-in-out;
  326. -ms-transition: all 1s ease-in-out;
  327. -o-transition: all 1s ease-in-out;
  328. transition: all 1s ease-in-out;
  329. }
  330.  
  331. #link4line {
  332. background-color:gray;
  333. width:1px;
  334. height:192px;
  335. margin-top:-200px;
  336. margin-left:24px;
  337. -webkit-transition: all 1s ease-in-out;
  338. -moz-transition: all 1s ease-in-out;
  339. -ms-transition: all 1s ease-in-out;
  340. -o-transition: all 1s ease-in-out;
  341. transition: all 1s ease-in-out;
  342. }
  343.  
  344. #link4:hover {
  345. margin-top:130px;
  346. -webkit-transition: all 1s ease-in-out;
  347. -moz-transition: all 1s ease-in-out;
  348. -ms-transition: all 1s ease-in-out;
  349. -o-transition: all 1s ease-in-out;
  350. transition: all 1s ease-in-out;
  351. }
  352.  
  353.  
  354.  
  355. #link5 {
  356. margin-top:-100px;
  357. margin-left:200px;
  358. padding:1px;
  359. -webkit-transition: all 1s ease-in-out;
  360. -moz-transition: all 1s ease-in-out;
  361. -ms-transition: all 1s ease-in-out;
  362. -o-transition: all 1s ease-in-out;
  363. transition: all 1s ease-in-out;
  364. }
  365.  
  366. #link5line {
  367. background-color:gray;
  368. width:1px;
  369. height:192px;
  370. margin-top:-200px;
  371. margin-left:24px;
  372. -webkit-transition: all 1s ease-in-out;
  373. -moz-transition: all 1s ease-in-out;
  374. -ms-transition: all 1s ease-in-out;
  375. -o-transition: all 1s ease-in-out;
  376. transition: all 1s ease-in-out;
  377. }
  378.  
  379. #link5:hover {
  380. margin-top:20px;
  381. -webkit-transition: all 1s ease-in-out;
  382. -moz-transition: all 1s ease-in-out;
  383. -ms-transition: all 1s ease-in-out;
  384. -o-transition: all 1s ease-in-out;
  385. transition: all 1s ease-in-out;
  386. }
  387.  
  388.  
  389.  
  390. #credit {
  391. bottom:3px;
  392. position:fixed;
  393. right:10px;
  394. float:right;
  395. font-family:calibri;
  396. color:black;
  397. font-size:9px;
  398. letter-spacing:1px;
  399. text-transform:uppercase;
  400. padding:5px;
  401.  
  402. }
  403.  
  404. #credit a {
  405. color:black;
  406. background-color:white;
  407. padding:5px;
  408. -webkit-transition-duration:.8s;
  409. -moz-transition-duration:.8s;
  410. -o-transition-duration:.8s;
  411. -ms-transition-duration:.8s;
  412. }
  413.  
  414. #credit a:hover {
  415. color:white;
  416. background-color:#00bdb3;
  417. }
  418.  
  419.  
  420. #pagination {
  421. font-size:10px;
  422. text-align:center;
  423. }
  424.  
  425. #info {
  426. text-align:center;
  427. margin-top:10px;
  428. }
  429.  
  430. #ask{
  431. float:left;
  432. margin-right:5px;
  433. font-family:arial;
  434. font-style:italic;
  435. color:black;
  436. border-bottom:2px solid black;
  437. padding:5px;
  438. line-height:120%;
  439. }
  440.  
  441. .asker {
  442. font-size:15px;
  443. font-family:arial;
  444. font-weight:bold;
  445. letter-spacing:-1px;
  446. color:black;
  447. }
  448.  
  449.  
  450. #s-m-t-tooltip{
  451. max-width:250px;
  452. z-index:999999;
  453. margin:10px;
  454. padding:2px 5px;
  455. letter-spacing:2px;
  456. text-transform:uppercase; /* cand be lowercase or none */
  457. border:2px solid #000; /* change the border width and color */
  458. background:#FFF; /* change the background color */
  459. color:#000; /* change the text color */
  460. font-family:arial; /* change the font */
  461. font-weight:bold;
  462. font-size:9px; /* change the font size */
  463. box-shadow:1px 1px 3px rgba(0,0,0,.1);}
  464.  
  465.  
  466. {CustomCSS}</style>
  467.  
  468.  
  469.  
  470. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  471. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  472. <script>
  473. (function($){
  474. $(document).ready(function(){
  475. $("a[title]").style_my_tooltips({
  476. tip_follows_cursor:true,
  477. tip_delay_time:90,
  478. tip_fade_speed:600,
  479. attribute:"title"
  480. });
  481. });
  482. })(jQuery);
  483. </script>
  484. </head><body>
  485.  
  486. <br>
  487.  
  488.  
  489.  
  490.  
  491.  
  492.  
  493.  
  494. <div id="sidebar">
  495.  
  496. <div id="title">{Title}</div>
  497.  
  498.  
  499. <div id="sidebarimage">
  500. <img src="{image:sidebar}"><div id="description">{Description}</div>
  501. </div>
  502.  
  503.  
  504.  
  505.  
  506. <div id="link1">
  507. <a href="/"title="home"><img src="http://media.tumblr.com/321362221e31e7688ab172fcbd2e44aa/tumblr_inline_mvyyujH50S1ql5d5i.gif"></a><div id="link1line"></div>
  508. </div>
  509.  
  510.  
  511.  
  512. <div id="link2">
  513. <a href="/ask" title="messages"><img src="http://media.tumblr.com/bf69ebd1ab563adc35a165eb6377c0ed/tumblr_inline_mvyyueuJie1ql5d5i.gif"></a><div id="link2line"></div></div>
  514.  
  515.  
  516.  
  517.  
  518. <div id="link3">
  519. <a href="{text:Link 1 URL}" title="{text:Link 1 Title}"><img src="http://media.tumblr.com/321362221e31e7688ab172fcbd2e44aa/tumblr_inline_mvyyujH50S1ql5d5i.gif"></a><div id="link3line"></div></div>
  520.  
  521.  
  522. <div id="link4">
  523. <a href="{text:Link 2 URL}" title="{text:Link 2 Title}"><img src="http://media.tumblr.com/bf69ebd1ab563adc35a165eb6377c0ed/tumblr_inline_mvyyueuJie1ql5d5i.gif"></a><div id="link4line"></div></div>
  524.  
  525. <div id="link5">
  526.  
  527. <a href="{text:Link 3 URL}" title="{text:Link 3 Title}"><img src="http://media.tumblr.com/321362221e31e7688ab172fcbd2e44aa/tumblr_inline_mvyyujH50S1ql5d5i.gif"></a><div id="link5line"></div></div>
  528.  
  529.  
  530.  
  531.  
  532.  
  533.  
  534.  
  535. <div id="pagination">
  536. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">back</a>{/block:PreviousPage} —
  537. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}{/block:Pagination}
  538. </div></div>
  539.  
  540.  
  541.  
  542. <div id="entries">{block:Posts}<div id="post">
  543.  
  544. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  545.  
  546. {block:Photo}{LinkOpenTag}<center><img src="{PhotoURL-500}"></center>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  547.  
  548. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  549.  
  550. {block:Quote}{Quote}{block:Source} —{Source}{/block:Source}{/block:Quote}
  551.  
  552. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  553.  
  554. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  555.  
  556. {block:Audio}{AudioPlayerWhite}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  557.  
  558. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  559.  
  560. {block:Answer}<div id="ask"><span class="asker">{Asker} :&nbsp;&nbsp;&nbsp;</span>{Question}</div><br><br><br><br><br><br>{Answer}{/block:Answer}
  561.  
  562. <div id="info"><a href="{Perimalink}">{block:Date}<a href="{Permalink}">{Month} {DayOfMonth}</a> {/block:Date} with <a href="{Permalink}">{NoteCount} notes </a> {block:RebloggedFrom} — <a href="{ReblogParentURL}">via</a> ; {/block:RebloggedFrom} {block:ContentSource}<a href="{SourceURL}"> src <a href="{SourceURL}"></a>{/block:ContentSource}{/block:RebloggedFrom}
  563. <br>
  564. {block:HasTags}{block:Tags} # <a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}</div>
  565.  
  566. </div>
  567. {block:PostNotes}{PostNotes}{/block:PostNotes}
  568. {/block:Posts}</div>
  569.  
  570. <div id="credit"><a href="http://ofcuteboyscodes.tumblr.com/">O C B</a></center></div>
  571.  
  572. </body></html>
  573.  
  574.  
  575.  
  576.  
  577.  
  578.  
  579. </body></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!