API tools faq
paste
Advertisement
sandragonthemes

Theme #22

sandragonthemes
Mar 2nd, 2015
2,680
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.49 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!doctype html>
  3.  
  4. <!--
  5. This is theme #22 by sandragonthemes.
  6. Please follow the rules and do not remove the credit.
  7. If you have questions or feedback please send me a message.
  8. -->
  9.  
  10. <html>
  11. <link rel="shortcut icon" href="{Favicon}">
  12. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  13. {block:Description}
  14. <meta name="description" content="{MetaDescription}" />
  15. {/block:Description}
  16. <link rel="stylesheet" href="http://sandrabelder.nl/other/tumblr/themes/23/stylesheet.css">
  17. <link href='http://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>
  18.  
  19. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  20. <script src="http://static.tumblr.com/gghvtgk/SOQnkkvun/jquery.style-my-tooltips.js"></script>
  21.  
  22. <script>
  23. (function($) {
  24. $(document).ready(function() {
  25. $("[title]").style_my_tooltips({
  26. tip_follows_cursor: true,
  27. tip_delay_time: 100,
  28. tip_fade_speed: 300,
  29. attribute: "title"
  30. });
  31. });
  32. })(jQuery);
  33. </script>
  34.  
  35.  
  36. <style type="text/css">
  37.  
  38. /* SCROLLBAR */
  39. ::-webkit-scrollbar {
  40. width: 2px;
  41. height:2px;
  42. background-color: #2c2c2c;
  43. }
  44.  
  45. ::-webkit-scrollbar-track {
  46. background-color: #2c2c2c;
  47. }
  48.  
  49. ::-webkit-scrollbar-thumb {
  50. background-color: #c10849;
  51. }
  52.  
  53. ::selection {
  54. background-color: #d0d0d0;
  55. }
  56.  
  57. /* SELECTION */
  58. ::-moz-selection {
  59. background: #f6f6f6;
  60. }
  61.  
  62. /*BODY*/
  63. body {
  64. background-color: #f6f6f6;
  65. font-family: "helvetica", "arial", sans-serif;
  66. font-size: 9pt;
  67. color: #2c2c2c;
  68. margin:0px;
  69. padding:0px;
  70. }
  71.  
  72. a{
  73. color: #c10849;
  74. font-weight: none;
  75. text-decoration: none;
  76. }
  77.  
  78. a:hover{
  79. color: #9f023a;
  80. }
  81.  
  82. h1{
  83. font-family: "code_lightregular", sans-serif;
  84. text-transform:lowercase;
  85. font-size:14pt;
  86. padding:0px;
  87. margin:0px;
  88. margin-bottom:15px;
  89. letter-spacing:2px;
  90. text-transform:uppercase;
  91. }
  92.  
  93. h2{
  94. font-size:12pt;
  95. font-family: 'Roboto', sans-serif;
  96. text-transform:uppercase;
  97. font-weight:400;
  98. }
  99.  
  100. h3{
  101. font-size:10pt;
  102. font-family: 'Roboto', sans-serif;
  103. font-weight:700;
  104. text-align:left;
  105. margin:0px 0px 0px 20px;
  106. }
  107.  
  108. ul{
  109. list-style-type:none;
  110. margin:0px;
  111. padding:0px;
  112. }
  113.  
  114. /* TOP BAR */
  115. #topbar{
  116. width:100%;
  117. height:32px;
  118. background-color:#000;
  119. text-align:left;
  120. text-transform:uppercase;
  121. color:#e1e1e1;
  122. padding-top:8px;
  123. }
  124.  
  125. #topbar img{
  126. width:35px;
  127. height:35px;
  128. -webkit-border-radius: 17px;
  129. -moz-border-radius: 17px;
  130. border-radius: 17px;
  131. left:15px;
  132. top:2px;
  133. position:absolute;
  134. }
  135.  
  136. #topbar a{
  137. color:#e1e1e1;
  138. margin-left:10px;
  139. font-size:7pt;
  140. text-transform:uppercase;
  141. }
  142.  
  143. #topbar a:hover{
  144. color:#cecece;
  145. }
  146.  
  147. #title{
  148. font-weight:100;
  149. font-size:14pt;
  150. font-family: 'Roboto', sans-serif;
  151. /*border-bottom:1px solid #e1e1e1;*/
  152. padding:0px 10px 2px 10px;
  153. margin-left:55px;
  154. letter-spacing:1px;
  155. }
  156.  
  157. /* CONTENT SETUP*/
  158. #container{
  159. width:100%;
  160. text-align:center;
  161. }
  162.  
  163. #main{
  164. width:100%;
  165. margin:0 auto;
  166. margin-top:5px;
  167. }
  168.  
  169. #main tr{
  170. width:100%;
  171. }
  172.  
  173. /*MENU*/
  174. #menu {
  175. width:100%;
  176. height:25px;
  177. text-align: center;
  178. margin: 0;
  179. list-style: none;
  180. margin-bottom:20px;
  181. }
  182.  
  183. #menu li {
  184. display: inline-block;
  185. padding:5px 5px;
  186. position: relative;
  187. cursor: pointer;
  188. text-align: left;
  189. -webkit-transition: all 0.2s;
  190. -moz-transition: all 0.2s;
  191. -ms-transition: all 0.2s;
  192. -o-transition: all 0.2s;
  193. transition: all 0.2s;
  194. border-bottom: 1px solid rgba(255,255,255,0);
  195. }
  196.  
  197. #menu li:hover {
  198. border-bottom: 1px solid #e1e1e1;
  199. -webkit-transition: all 0.2s;
  200. -moz-transition: all 0.2s;
  201. -ms-transition: all 0.2s;
  202. -o-transition: all 0.2s;
  203. transition: all 0.2s;
  204. color: #66b89e;
  205. }
  206.  
  207. #menu a{
  208. margin-left:2px;
  209. margin-right:2px;
  210. text-transform:uppercase;
  211. font-family: "code_lightregular", sans-serif;
  212. font-size:10pt;
  213. font-weight:700;
  214. letter-spacing:2px;
  215. color:#2c2c2c;
  216. -webkit-transition: all 0.2s;
  217. -moz-transition: all 0.2s;
  218. -ms-transition: all 0.2s;
  219. -o-transition: all 0.2s;
  220. transition: all 0.2s;
  221. }
  222.  
  223. #menu a:hover{
  224. -webkit-transition: all 0.2s;
  225. -moz-transition: all 0.2s;
  226. -ms-transition: all 0.2s;
  227. -o-transition: all 0.2s;
  228. transition: all 0.2s;
  229. color: #c10849;
  230. font-size:11pt;
  231. }
  232.  
  233.  
  234. /* SECTIONS */
  235. #sections {
  236. width: 100%;
  237. height:500px;
  238. overflow: auto;
  239. overflow-y: hidden;
  240. }
  241.  
  242. .section {
  243. width:510px;
  244. height:460px;
  245. margin:0 auto;
  246. overflow: auto;
  247. padding:20px;
  248. text-align:center;
  249. }
  250.  
  251. /* BIOGRAPHY */
  252. .one_column_text{
  253. width:510px;
  254. margin:0 auto;
  255. text-align:left;
  256. margin-bottom:15px;
  257. }
  258.  
  259. .two_column_text{
  260. text-align:justify;
  261. margin:0 auto;
  262. width:510px;
  263. -webkit-column-count: 2; /* Chrome, Safari, Opera */
  264. -moz-column-count: 2; /* Firefox */
  265. column-count: 2;
  266. -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
  267. -moz-column-gap: 20px; /* Firefox */
  268. column-gap: 20px;
  269. margin-bottom:15px;
  270. }
  271.  
  272. /* TAGS */
  273. .tags{
  274. width:150px;
  275. margin-right:10px;
  276. margin-bottom:20px;
  277. float:left;
  278. text-align:left;
  279. }
  280.  
  281. .tags li{
  282. width:150px;
  283. font-size:7pt;
  284. padding:5px;
  285. margin-bottom:2px;
  286. text-transform:uppercase;
  287. -webkit-transition: all 0.3s;
  288. -moz-transition: all 0.3s;
  289. -ms-transition: all 0.3s;
  290. -o-transition: all 0.3s;
  291. transition: all 0.3s;
  292. }
  293.  
  294. .tags li.taglist_title{
  295. font-family: 'Roboto', sans-serif;
  296. font-size:12pt;
  297. padding:0px;
  298. text-transform:uppercase;
  299. border-bottom:1px solid #e1e1e1;
  300. }
  301.  
  302. .tags li:hover{
  303. padding-left:0px;
  304. -webkit-transition: all 0.3s;
  305. -moz-transition: all 0.3s;
  306. -ms-transition: all 0.3s;
  307. -o-transition: all 0.3s;
  308. transition: all 0.3s;
  309. }
  310.  
  311. /* LINKS */
  312. .navlist{
  313. margin-top:15px;
  314. margin-bottom:30px;
  315. }
  316.  
  317. .navlist li{
  318. margin-bottom:7px;
  319. }
  320.  
  321. .navlist a{
  322. text-transform:uppercase;
  323. font-size:8pt;
  324. padding:0px 4px 2px;
  325. border-bottom:1px solid #e1e1e1;
  326. -webkit-transition: all 0.4s;
  327. -moz-transition: all 0.4s;
  328. -ms-transition: all 0.4s;
  329. -o-transition: all 0.4s;
  330. transition: all 0.4s;
  331. }
  332.  
  333. .navlist a:hover{
  334. padding:0px 12px 2px;
  335. border-bottom:1px solid #cbcbcb;
  336. -webkit-transition: all 0.4s;
  337. -moz-transition: all 0.4s;
  338. -ms-transition: all 0.4s;
  339. -o-transition: all 0.4s;
  340. transition: all 0.4s;
  341. }
  342.  
  343. /* BLOGROLL */
  344. .followed {
  345. width: 64px;
  346. height: 64px;
  347. float:left;
  348. margin:4px;
  349. }
  350.  
  351. .followed img{
  352. width:64px;
  353. height:64px;
  354. border:0px solid #e1e1e1;
  355. -webkit-transition: all 0.2s;
  356. -moz-transition: all 0.2s;
  357. -ms-transition: all 0.2s;
  358. -o-transition: all 0.2s;
  359. transition: all 0.2s;
  360. }
  361.  
  362. .followed img:hover{
  363. width:54px;
  364. height:54px;
  365. border:5px solid #e1e1e1;
  366. -webkit-transition: all 0.2s;
  367. -moz-transition: all 0.2s;
  368. -ms-transition: all 0.2s;
  369. -o-transition: all 0.2s;
  370. transition: all 0.2s;
  371. }
  372.  
  373. #s-m-t-tooltip{
  374. max-width:300px;
  375. z-index:10;
  376. margin:24px 14px 7px 12px;
  377. padding:4px;
  378. background:#f6f6f6;
  379. border:1px solid #e1e1e1;
  380. font-family: 'Roboto', sans-serif;
  381. font-size:6pt;
  382. text-transform:uppercase;
  383. }
  384.  
  385. /* CONTACT */
  386. .contactpage{
  387. float:left;
  388. width:245px;
  389. }
  390.  
  391. .answer{
  392. text-align:left;
  393. margin:0px 0px 10px 20px;
  394. }
  395.  
  396.  
  397. </style>
  398.  
  399. <title>{Title}</title>
  400.  
  401. </head>
  402.  
  403. <body>
  404. <div id="container">
  405. <div id="topbar">
  406. <img src="{PortraitURL-40}">
  407. <span id="title">{Title}</span>
  408. <a href="https://www.tumblr.com/dashboard">Dashboard</a>
  409. <a href="/">Main</a>
  410. <a href="/archive">Archive</a>
  411. <a href="http://sandragonthemes.tumblr.com">Theme</a>
  412. </div>
  413.  
  414. <table id="main">
  415. <!-- START MENU -->
  416. <!-- you can always change the names to whatever,
  417. just remember that the link hashtag has to
  418. match up to the name given to that section
  419. (example: here <a href="#biography"> links to <a name="biography"></a>)-->
  420. <tr>
  421. <td><ul id ="menu">
  422. <li><a href="#biography">Biography</a></li>
  423. /
  424. <li><a href="#tags">Tags</a></li>
  425. /
  426. <li><a href="#links">Links</a></li>
  427. /
  428. <li><a href="#blogroll">Blogroll</a></li>
  429. /
  430. <li><a href="#contact">Contact</a></li>
  431. </ul>
  432.  
  433. </td>
  434. </tr><!-- end menu -->
  435.  
  436.  
  437. <!-- START SECTIONS -->
  438. <tr>
  439. <td><div id="sections">
  440.  
  441. <!-- SECTION 1 -->
  442. <a name="biography"></a>
  443. <div class="section">
  444. <h1>Biography</h1>
  445.  
  446. <p class="two_column_text"><!-- give the paragraph tag this class name if you want to use two columns -->
  447. <strong>This is an example of a two column text field.</strong><br>
  448. <br>
  449.  
  450. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu diam laoreet, imperdiet erat sodales, lobortis nisl. In commodo nibh ac euismod consequat. Duis et accumsan urna, lacinia hendrerit diam. Suspendisse eu massa sit amet urna fermentum bibendum. <br>
  451. <br>
  452. Quisque eu auctor est. Curabitur tellus arcu, rutrum non odio ut, lobortis facilisis diam. Morbi sit amet libero a turpis cursus viverra id sit amet ex. Curabitur scelerisque dictum dapibus. Ut nec velit facilisis, iaculis lorem in, mattis lacus. Donec et erat ac quam consequat placerat et vel nibh.<br>
  453.  
  454. Integer tempor tortor ex, id ultrices risus ornare euismod. Nam a quam euismod, gravida lectus vel, tincidunt libero. Duis eget diam venenatis, mattis ante a, tincidunt purus. Aenean lobortis eu ipsum eu sodales. Duis nec orci faucibus, vehicula nibh ornare, tincidunt urna. Suspendisse sit amet rhoncus sem. Suspendisse ut urna ut tortor viverra maximus. <br>
  455. <br>
  456. Maecenas vehicula mauris at laoreet porttitor. In volutpat malesuada ultricies. Praesent vitae lacus tincidunt, hendrerit lacus id, feugiat sem. Mauris at metus pretium, interdum nibh ac, lacinia est. Donec iaculis ex purus, quis efficitur magna molestie ut.
  457. </p>
  458.  
  459. <p class="one_column_text"><!-- give the paragraph tag this class name if you want to use one column -->
  460. <strong>This is an example of a one column text field.</strong><br>
  461. <br>
  462. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu diam laoreet, imperdiet erat sodales, lobortis nisl. In commodo nibh ac euismod consequat. Duis et accumsan urna, lacinia hendrerit diam. Suspendisse eu massa sit amet urna fermentum bibendum. <br>
  463. <br>
  464. Quisque eu auctor est. Curabitur tellus arcu, rutrum non odio ut, lobortis facilisis diam. Morbi sit amet libero a turpis cursus viverra id sit amet ex. Curabitur scelerisque dictum dapibus. Ut nec velit facilisis, iaculis lorem in, mattis lacus. Donec et erat ac quam consequat placerat et vel nibh.<br>
  465.  
  466. </div> <!-- end section 1 -->
  467.  
  468.  
  469. <!-- SECTION 2 -->
  470. <a name="tags"></a>
  471. <div class="section">
  472. <h1>Tags</h1>
  473.  
  474. <!-- TAGLIST 1 -->
  475. <ul class="tags">
  476. <li class="taglist_title">Taglist 1</li>
  477. <li><a href="/">Tag one</a></li>
  478. <li><a href="/">Tag two</a></li>
  479. <li><a href="/">Tag three</a></li>
  480. <li><a href="/">Tag four</a></li>
  481. <li><a href="/">Tag five</a></li>
  482. <li><a href="/">Tag six</a></li>
  483. </ul>
  484.  
  485. <!-- TAGLIST 2 -->
  486. <ul class="tags">
  487. <li class="taglist_title">Taglist 2</li>
  488. <li><a href="/">Tag one</a></li>
  489. <li><a href="/">Tag two</a></li>
  490. <li><a href="/">Tag three</a></li>
  491. <li><a href="/">Tag four</a></li>
  492. <li><a href="/">Tag five</a></li>
  493. <li><a href="/">Tag six</a></li>
  494. </ul>
  495.  
  496. <!-- TAGLIST 3 -->
  497. <ul class="tags">
  498. <li class="taglist_title">Taglist 3</li>
  499. <li><a href="/">Tag one</a></li>
  500. <li><a href="/">Tag two</a></li>
  501. <li><a href="/">Tag three</a></li>
  502. <li><a href="/">Tag four</a></li>
  503. <li><a href="/">Tag five</a></li>
  504. <li><a href="/">Tag six</a></li>
  505. </ul>
  506.  
  507. <!-- TAGLIST 4 -->
  508. <ul class="tags">
  509. <li class="taglist_title">Taglist 4</li>
  510. <li><a href="/">Tag one</a></li>
  511. <li><a href="/">Tag two</a></li>
  512. <li><a href="/">Tag three</a></li>
  513. <li><a href="/">Tag four</a></li>
  514. <li><a href="/">Tag five</a></li>
  515. <li><a href="/">Tag six</a></li>
  516. </ul>
  517.  
  518. <!-- TAGLIST 5 -->
  519. <ul class="tags">
  520. <li class="taglist_title">Taglist 5</li>
  521. <li><a href="/">Tag one</a></li>
  522. <li><a href="/">Tag two</a></li>
  523. <li><a href="/">Tag three</a></li>
  524. <li><a href="/">Tag four</a></li>
  525. <li><a href="/">Tag five</a></li>
  526. <li><a href="/">Tag six</a></li>
  527. </ul>
  528. </div> <!-- end section 2 -->
  529.  
  530.  
  531. <!-- SECTION 3 -->
  532. <a name="links"></a>
  533. <div class="section">
  534. <h1>Links</h1>
  535.  
  536. <h2>Sideblogs</h2>
  537. <ul class="navlist">
  538. <li><a href="/">Blog 1</a></li>
  539. <li><a href="/">Blog 2</a></li>
  540. <li><a href="/">Blog 3</a></li>
  541. </ul>
  542.  
  543. <h2>Social Media</h2>
  544. <ul class="navlist">
  545. <li><a href="/">twitter</a></li>
  546. <li><a href="/">8tracks</a></li>
  547. <li><a href="/">fanfiction</a></li>
  548. <li><a href="/">something</a></li>
  549. </ul>
  550. </div> <!-- end section 3 -->
  551.  
  552. <!-- SECTION 4 -->
  553. <a name="blogroll"></a>
  554. <div class="section">
  555. <h1>Blogroll</h1>
  556. {block:Following}{block:Followed}
  557. <div class="followed">
  558. <a target="_blank" href="{FollowedURL}"><img src="{FollowedPortraitURL-64}" title="{FollowedName}"></a>
  559. </div>
  560. {/block:Followed}{/block:Following}
  561. </div> <!-- end section 4 -->
  562.  
  563. <!-- SECTION 5 -->
  564. <a name="contact"></a>
  565. <div class="section">
  566. <h1>Contact</h1>
  567. <div class="contactpage">
  568. <!-- !!!!!IMPORTANT!!!!!
  569. for the ask and submit forms to work you have to
  570. replace the text "YOUR USERNAME GOES HERE" with
  571. your username-->
  572.  
  573. <h2>Ask</h2>
  574. <iframe src="http://www.tumblr.com/ask_form/YOUR URSERNAME GOES HERE.tumblr.com" id="ask_form" frameborder="0" height="255" scrolling="no" width=245px"></iframe>
  575.  
  576. <h2>Submit</h2>
  577. <iframe id="submit_form" src="http://www.tumblr.com/submit_form/YOUR USERNAME GOES HERE.tumblr.com" frameborder="0" height="600px" scrolling="no" width="245px"></iframe>
  578. <!--[if IE]><script type="text/javascript">document.getElementById('submit_form').allowTransparency=true;</script><![endif]-->
  579. </div>
  580.  
  581. <div class="contactpage">
  582. <h2>F.A.Q.</h2>
  583. <h3>Question 1</h3>
  584. <p class="answer">Answer 1 lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas semper interdum molestie.</p>
  585. <h3>Question 2</h3>
  586. <p class="answer">Answer 2 lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas semper interdum molestie.</p>
  587. <h3>Question 3</h3>
  588. <p class="answer">Answer 3 lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas semper interdum molestie.</p>
  589. <h3>Question 4</h3>
  590. <p class="answer">Answer 4 lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas semper interdum molestie.</p>
  591. </div><!-- end section 5 -->
  592.  
  593.  
  594.  
  595. </div></td>
  596. </tr><!-- sections end here -->
  597.  
  598. </table>
  599. </div><!--end container-->
  600.  
  601.  
  602. </body>
  603. </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!