API tools faq
paste
Advertisement
cvndythemes

All In One #01

cvndythemes
Sep 20th, 2016
1,000
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.21 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. >> ETHEREAL THEMES // ALL IN ONE #01
  4.  
  5. Designed by etherealthemes
  6. etherealthemes.tumblr.com
  7. ⓒ 2016 - 2017
  8.  
  9. >> TERMS OF USE
  10.  
  11. Do NOT remove the credit
  12. Do NOT claim as your own
  13.  
  14. *You can move the credit, but leave it visible
  15. *Edit as much as you'd like
  16. *Feel free to ask about basic customization
  17. *Theme suggestions always welcomed
  18.  
  19. >> EXTRAS
  20.  
  21. Fonts by Google Fonts
  22. Icons by FontAwesome
  23.  
  24. NOTE:
  25. The blog roll page will looked messed up until you view it on your actual page. The tumblr page editor doesn't fill in the tumblr codes (in this case and such) so it will look like the page is broken. IT IS NOT! I will fill in the codes when you view yoururl.tumblr.com/page.
  26.  
  27. Inverting Tumblr Controls - Search "Tumblr Controls" and delete the second code with the invert settings.
  28.  
  29. To change colors, press CTRL+F and "search for" the original hex code. Then change the color with the "replace with" to change all the associated colors. Then you can go through and tweak individual colors. This just makes it easier to go from light to dark without having to go through each color.
  30.  
  31. ACCENT COLORS CHEATSHEET:
  32. Pink - Blogroll Scrollbar - #fed3e6
  33. Black - Title Tooltip Hover - #010101
  34. Black - Page Titles h1 - #080808
  35. Gray - Navigation Hover - #808080
  36. Purple - Bold Text - #74247e
  37. Dark Gray - Tags - #6b6b6b
  38.  
  39. -->
  40.  
  41. <!DOCTYPE html>
  42. <html>
  43. <title> Page Title </title>
  44.  
  45. <script type="text/javascript"
  46. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  47. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  48. <script>
  49. (function($){
  50. $(document).ready(function(){
  51. $("[title]").style_my_tooltips();
  52. });
  53. })(jQuery);
  54. </script>
  55.  
  56. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  57.  
  58. <link href="https://fonts.googleapis.com/css?family=Open+Sans|Signika:400,700" rel="stylesheet">
  59.  
  60. <style type="text/css">
  61.  
  62. /* --- Body Scrollbar --- */
  63.  
  64. ::-webkit-scrollbar {width:7px;background-color:#ffffff;}
  65. ::-webkit-scrollbar-thumb {background-color:#eeeeee;}
  66.  
  67. /* --- Blogroll Scrollbar --- */
  68.  
  69. div::-webkit-scrollbar {width:7px;background-color:#ffffff;}
  70. div::-webkit-scrollbar-thumb {background-color:#fed8ed;}
  71. div::-webkit-scrollbar-corner {background-color:#ffffff;}
  72.  
  73. /* --- Tooltips --- */
  74.  
  75. #s-m-t-tooltip {
  76. display: block;
  77. font-size: 8px;
  78. background-color:#010101;
  79. letter-spacing: 1px;
  80. text-transform: uppercase;
  81. line-height:130%;
  82. color:#ffffff;
  83. text-align: center;
  84. margin-left: 25px;
  85. padding:5px;
  86. min-width: 40px;
  87. max-width: 150px;
  88. z-index:10;
  89. }
  90.  
  91. /* --- Tumblr Controls --- */
  92.  
  93. iframe.tmblr-iframe {
  94. z-index:5!important;
  95. top:0px!important;
  96. right:-10px!important;
  97. opacity:0.4!important;
  98. padding-right:10px;
  99. transform:scale(0.6);
  100. transform-origin:100% 0;
  101. -webkit-transform:scale(0.6);
  102. -webkit-transform-origin:100% 0;
  103. -o-transform:scale(0.6);
  104. -o-transform-origin:100% 0;
  105. -moz-transform:scale(0.6);
  106. -moz-transform-origin:100% 0;
  107. -ms-transform:scale(0.6);
  108. -ms-transform-origin:100% 0;
  109. }
  110.  
  111. iframe.tmblr-iframe {
  112. filter:invert(1);
  113. -webkit-filter:invert(1);
  114. -o-filter:invert(1);
  115. -moz-filter:invert(1);
  116. -ms-filter:invert(1);
  117. }
  118.  
  119.  
  120. /* --- General --- */
  121.  
  122. body {
  123. margin:0px;
  124. font-family: 'Open Sans', sans-serif;
  125. color:#000000;
  126. font-size:10px;
  127. line-height:12px;
  128. background-color:#ffffff;
  129. }
  130.  
  131. h1 {
  132. font-family: 'Signika', sans-serif;
  133. font-size:20px;
  134. text-transform:uppercase;
  135. text-align:center;
  136. font-style:italic;
  137. color:#080808;
  138. margin:10px 0 10px 0;
  139. font-weight:700;
  140. }
  141.  
  142. #et {
  143. background:transparent;
  144. color:#000000;
  145. background:transparent;
  146. right:0px;
  147. bottom:0px;
  148. padding:5px;
  149. position:fixed;
  150. letter-spacing:1px;
  151. opacity:0.4;
  152. }
  153.  
  154. #et a {
  155. color:#000000;
  156. text-decoration:none;
  157. border:0px;
  158. }
  159.  
  160. /* --- Container --- */
  161.  
  162. #container {
  163. margin:0 auto 0;
  164. width: 500px;
  165. margin-top:100px;
  166. }
  167.  
  168. /* --- Header Image --- */
  169.  
  170. .image {
  171. width:500px;
  172. height:175px;
  173. }
  174.  
  175. /* --- Navigation --- */
  176.  
  177. .navigation {
  178. background:#ffffff;
  179. padding:10px;
  180. text-align:center;
  181. margin-bottom:5px;
  182. }
  183.  
  184. .nav a, .nav a:hover, .nav, .nav:hover, .navigation a {
  185. margin:0 10px 0 10px;
  186. padding:4px;
  187. color:#000000;
  188. background:#ffffff;
  189. text-transform:lowercase;
  190. letter-spacing:1px;
  191. text-decoration:none;
  192. border:0;
  193. }
  194.  
  195. .nav:hover, .navigation a:hover {color:#808080;}
  196.  
  197.  
  198. .secondnav a, .secondnav a:hover, .secondnav, .secondnav:hover {
  199. margin:0 5px 0 5px;
  200. padding:4px;
  201. text-transform:lowercase;
  202. letter-spacing:1px;
  203. text-decoration:none;
  204. border:0;
  205. color:#000000;
  206. }
  207.  
  208.  
  209. /* --- About --- */
  210.  
  211. #div1 {
  212. overflow:scroll;
  213. height:400px;
  214. width:480px;
  215. padding:10px;
  216. background:#ffffff;
  217. text-align:right;
  218. }
  219.  
  220. #div1 img {padding:0 0 5px 10px;}
  221.  
  222. /* --- Contact --- */
  223.  
  224. #div2 {
  225. width:480px;
  226. padding:10px;
  227. background:#ffffff;
  228. text-align:center;
  229. }
  230.  
  231. #div2 b {
  232. color:#74247e;
  233. font-weight:bold;
  234. font-size:11px;
  235. }
  236.  
  237. /* --- Tags --- */
  238.  
  239. #div3 {
  240. width:480px;
  241. padding:10px;
  242. background:#ffffff;
  243. text-align:right;
  244.  
  245. }
  246.  
  247. .column {
  248. position:relative;
  249. width:140px;
  250. background:#ffffff;
  251. }
  252. .one {
  253. margin-left:4px;
  254. margin-top:15px;
  255. }
  256.  
  257. .two {
  258. margin-top:-330px;
  259. margin-left:170px;
  260. }
  261.  
  262. .three {
  263. margin-top:-330px;
  264. margin-left:336px;
  265. }
  266.  
  267. .tagtitle {
  268. display:block;
  269. padding:5px;
  270. margin:4px 5px 0 0;
  271. border-bottom:1px solid #e9e9e9;
  272. font-family: 'Open Sans', sans-serif;
  273. font-style:italic;
  274. font-size:11px;
  275. background:#ffffff;
  276. font-weight:bold;
  277. }
  278.  
  279. .column a {
  280. display:block;
  281. padding:5px;
  282. border-bottom:1px solid #eeeeee;
  283. font-size:10px;
  284. text-transform:lowercase;
  285. letter-spacing:1px;
  286. text-decoration:none;
  287. color:#6b6b6b;
  288. }
  289.  
  290. .column a:hover {
  291. color:#000000;
  292. }
  293.  
  294. /* --- Blogroll --- */
  295.  
  296. #div4 {
  297. overflow:scroll;
  298. height:400px;
  299. width:480px;
  300. padding:10px;
  301. background:#ffffff;
  302. text-align:center!important;
  303. }
  304.  
  305. </style>
  306.  
  307. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  308.  
  309. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  310.  
  311. <script>
  312. $(function() {
  313. $('#showabout').click(function() {
  314. $('div[id^=div]').hide();
  315. $('#div1').show();
  316. });
  317. $('#showmessage').click(function() {
  318. $('div[id^=div]').hide();
  319. $('#div2').show();
  320. });
  321.  
  322. $('#showtags').click(function() {
  323. $('div[id^=div]').hide();
  324. $('#div3').show();
  325. });
  326.  
  327. $('#showblogroll').click(function() {
  328. $('div[id^=div]').hide();
  329. $('#div4').show();
  330. });
  331.  
  332. })
  333. </script>
  334.  
  335. </head>
  336. <body>
  337.  
  338.  
  339. <div id="container">
  340.  
  341. <div class="image">
  342.  
  343. <img src="http://placehold.it/500X175"/>
  344.  
  345. </div>
  346.  
  347. <!-- Start Navigation -->
  348. <div class="navigation">
  349. <a class="nav" id="showabout">About</a>
  350. <a class="nav" id="showmessage">Contact</a>
  351. <a class="nav" id="showtags">Tags</a>
  352. <a class="nav" id="showblogroll">Blogroll</a>
  353. <a class="nav" href="http://ADDYOURNAME.tumblr.com">Back</a>
  354. </div>
  355.  
  356.  
  357.  
  358.  
  359. <!-- Start About -->
  360. <div id="div1">
  361. <h1>About Me</h1>
  362. <center>
  363. <a class="secondnav" href="#">Link</a>
  364. <a class="secondnav" href="#">Link</a>
  365. <a class="secondnav" href="#">Link</a>
  366. <a class="secondnav" href="#">Link</a>
  367. <a class="secondnav" href="#">Link</a>
  368. </center> <p>
  369.  
  370. <img src="http://placehold.it/100X100" align="right">
  371.  
  372. This is the about page. Lorem ipsum dolor sit amet, nunc quam id sed aliquet volutpat, praesent eu habitant eu eget voluptatibus, qui mauris et dapibus risus nulla, condimentum in tincidunt. Sed at, dignissim est rhoncus blandit erat sit tempus, sodales volutpat nibh sit suscipit, quis metus phasellus sit quis. Tincidunt ornare condimentum dignissim, non eu vel proin vitae, faucibus ut porta, purus feugiat elementum consequat et. Bibendum.
  373.  
  374. <p><!-- This adds a space between lines -->
  375.  
  376. Lorem ipsum dolor sit amet, nunc quam id sed aliquet volutpat, praesent eu habitant eu eget voluptatibus, qui mauris et dapibus risus nulla, condimentum in tincidunt. Sed at, dignissim est rhoncus blandit erat sit tempus, sodales volutpat nibh sit suscipit, quis metus phasellus sit quis. Tincidunt ornare condimentum dignissim, non eu vel proin vitae, faucibus ut porta, purus feugiat elementum consequat et. Bibendum faucibus justo.
  377.  
  378. </div>
  379. <!-- End About -->
  380.  
  381.  
  382.  
  383.  
  384.  
  385.  
  386.  
  387.  
  388.  
  389. <!-- Start Contact -->
  390.  
  391. <div id="div2" style="display:none;">
  392.  
  393. <h1>FAQ</h1>
  394. <center>
  395.  
  396. <b>Question Here:</b><br>
  397. The answer goes here.
  398. <p><!-- This adds a space between lines -->
  399.  
  400. <b>Question Here:</b><br>
  401. The answer goes here.
  402. <p><!-- This adds a space between lines -->
  403.  
  404. <b>Question Here:</b><br>
  405. The answer goes here.
  406. <p><!-- This adds a space between lines -->
  407.  
  408. <b>Question Here:</b><br>
  409. The answer goes here.
  410. <p><!-- This adds a space between lines -->
  411.  
  412.  
  413.  
  414. <br><br><h1>Ask Me</h1>
  415. <p><iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/ADDYOURNAME.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
  416.  
  417. </center></div>
  418.  
  419. <!-- End Contact -->
  420.  
  421.  
  422.  
  423.  
  424.  
  425.  
  426.  
  427.  
  428.  
  429. <!-- Start Tags -->
  430.  
  431. <div id="div3" style="display:none;">
  432.  
  433. <h1>Tags</h1>
  434.  
  435. <div class="column one">
  436.  
  437. <!-- Column 1 Tags -->
  438. <div class="tagtitle">tags title</div>
  439. <a href="/tagged/tag">tag one</a>
  440. <a href="/tagged/tag">tag two</a>
  441. <a href="/tagged/tag">tag three</a>
  442. <a href="/tagged/tag">tag four</a>
  443. <a href="/tagged/tag">tag five</a>
  444. <a href="/tagged/tag">tag six</a>
  445.  
  446. <div class="tagtitle">tags title</div>
  447. <a href="/tagged/tag">tag one</a>
  448. <a href="/tagged/tag">tag two</a>
  449. <a href="/tagged/tag">tag three</a>
  450. <a href="/tagged/tag">tag four</a>
  451. <a href="/tagged/tag">tag five</a>
  452. <a href="/tagged/tag">tag six</a>
  453.  
  454.  
  455. </div><div class="column two">
  456.  
  457. <!-- Column 2 Tags -->
  458. <div class="tagtitle">tags title</div>
  459. <a href="/tagged/tag">tag one</a>
  460. <a href="/tagged/tag">tag two</a>
  461. <a href="/tagged/tag">tag three</a>
  462. <a href="/tagged/tag">tag four</a>
  463. <a href="/tagged/tag">tag five</a>
  464. <a href="/tagged/tag">tag six</a>
  465.  
  466. <div class="tagtitle">tags title</div>
  467. <a href="/tagged/tag">tag one</a>
  468. <a href="/tagged/tag">tag two</a>
  469. <a href="/tagged/tag">tag three</a>
  470. <a href="/tagged/tag">tag four</a>
  471. <a href="/tagged/tag">tag five</a>
  472. <a href="/tagged/tag">tag six</a>
  473.  
  474.  
  475. </div><div class="column three">
  476.  
  477. <!-- Column 3 Tags -->
  478. <div class="tagtitle">tags title</div>
  479. <a href="/tagged/tag">tag one</a>
  480. <a href="/tagged/tag">tag two</a>
  481. <a href="/tagged/tag">tag three</a>
  482. <a href="/tagged/tag">tag four</a>
  483. <a href="/tagged/tag">tag five</a>
  484. <a href="/tagged/tag">tag six</a>
  485.  
  486. <div class="tagtitle">tags title</div>
  487. <a href="/tagged/tag">tag one</a>
  488. <a href="/tagged/tag">tag two</a>
  489. <a href="/tagged/tag">tag three</a>
  490. <a href="/tagged/tag">tag four</a>
  491. <a href="/tagged/tag">tag five</a>
  492. <a href="/tagged/tag">tag six</a>
  493.  
  494.  
  495. </div>
  496.  
  497.  
  498. </div>
  499. <!-- End Tags -->
  500.  
  501.  
  502.  
  503.  
  504.  
  505.  
  506.  
  507.  
  508.  
  509. <!-- Start Blogroll -->
  510. <div id="div4" style="display:none;">
  511.  
  512. <h1>Following</h1>
  513.  
  514. {block:Following}
  515. {block:Followed}
  516.  
  517. <a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-40}" /></a>
  518. {/block:Followed}
  519. </div>
  520. {/block:Following}
  521.  
  522.  
  523. <!-- End Blogroll -->
  524. </div>
  525.  
  526.  
  527. </div></div>
  528.  
  529. <div id="et"><a href="http://etherealthemes.co.vu/"><i class="fa fa-paint-brush"></i></a></div>
  530.  
  531. </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!