API tools faq
paste
Advertisement
ochizukes

Page 001: Simplicity

ochizukes
May 2nd, 2015
6,377
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 21.06 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Page 001. Optimized for Tumblr on desktop. Compatible with Google Chrome, Mozilla Firefox, Opera, Safari, and Internet Explorer.
  4.  
  5. This page is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International license.
  6.  
  7. http://creativecommons.org/licenses/by-nc-nd/4.0/
  8.  
  9. -->
  10.  
  11. <!--
  12.  
  13. WELCOME! First start by editing the colors in the appearance options. Then use the HTML to add your content.
  14.  
  15. For About BG, Content Title BG, Sidebar BG, Tag BG, Tag Title BG, and Tooltip BG, I use RGBA to make the colors transparent. Editing them is easy!
  16.  
  17. RGBA Example: 0, 0, 0, 1
  18.  
  19. The first three numbers are the color. The last number is how transparent you want it to be, 1 being opaque (completely there) and 0 being transparent (completely gone). For the last number, you can use decimal values. So if you type in 0.5, it will be 50% opaque.
  20.  
  21. To find the first three numbers, go to Adobe Color CC:
  22.  
  23. https://color.adobe.com/create/color-wheel/?base=2&rule=Analogous&selected=0&name=My%20Color%20Theme&mode=rgb&rgbvalues=0.31174084851556383,0.4941825548767448,1,0.5947766425893062,0.04550000000000004,0.91,1,0,0,0.91,0.46620276750449996,0.04550000000000004,1,0.8602414134699302,0.050000000000000044&swatchOrder=0,1,2,3,4
  24.  
  25. And move one of the pegs around until you find a color you like. I like to use this site for entire color schemes as well because the other pegs move around to find complementary colors.
  26.  
  27. Once you find a color you like, look at the square of the color you're going to use. Below it there's the letters RGB and three numbers listed out. Those are the numbers you need, make sure you type them in that order!
  28.  
  29. Now that you're done editing colors, scroll down to <body> to begin editing the text!
  30.  
  31. -->
  32.  
  33. <!DOCTYPE html><html>
  34.  
  35. <head>
  36.  
  37. <!-- META -->
  38.  
  39. <title>{Title}</title>
  40. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  41. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  42.  
  43. <!-- LINK REL -->
  44.  
  45. <link rel="shortcut icon" href="{image:Favicon}"/>
  46. <link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
  47.  
  48. <!-- IMAGES -->
  49.  
  50. <meta name="image:About Me" content=""/>
  51. <meta name="image:Favicon" content=""/>
  52.  
  53. <!-- COLORS -->
  54.  
  55. <meta name="color:About Borders" content="#ffffff"/>
  56. <meta name="color:About Text" content="#ffffff"/>
  57. <meta name="color:Blockquote" content="#ffffff"/>
  58. <meta name="color:Content Borders" content="#ffffff"/>
  59. <meta name="color:Content Title" content="#ffffff"/>
  60. <meta name="color:Gradient Top" content="#e7e0f3"/>
  61. <meta name="color:Gradient Middle" content="#d8eaf5"/>
  62. <meta name="color:Gradient Bottom" content="#feeef3"/>
  63. <meta name="color:Icons" content="#ffffff"/>
  64. <meta name="color:Icon Borders" content="#ffffff"/>
  65. <meta name="color:Scroll" content="#ffffff"/>
  66. <meta name="color:Sidebar Borders" content="#ffffff"/>
  67. <meta name="color:Sidebar Subtitles" content="#ffffff"/>
  68. <meta name="color:Sidebar Text" content="#ffffff"/>
  69. <meta name="color:Sidebar Title" content="#ffffff"/>
  70. <meta name="color:Tags" content="#ffffff"/>
  71. <meta name="color:Tag Borders" content="#ffffff"/>
  72. <meta name="color:Tag Title" content="#ffffff"/>
  73. <meta name="color:Tag Title Borders" content="#ffffff"/>
  74. <meta name="color:Tooltip Border" content="#ffffff"/>
  75. <meta name="color:Tooltip Text" content="#c2dbea"/>
  76.  
  77. <!-- TEXT -->
  78.  
  79. <meta name="text:About BG" content="0, 0, 0, 0.1"/>
  80. <meta name="text:Content Title BG" content="0, 0, 0, 0.1"/>
  81. <meta name="text:Sidebar BG" content="0, 0, 0, 0.1"/>
  82. <meta name="text:Tag BG" content="0, 0, 0, 0.1"/>
  83. <meta name="text:Tag Title BG" content="255, 255, 255, 0.3"/>
  84. <meta name="text:Tooltip BG" content="0, 0, 0, 0.2"/>
  85.  
  86. <!-- STYLESHEET -->
  87.  
  88. <style type="text/css">
  89.  
  90. iframe#tumblr_controls { opacity:0; }
  91.  
  92. /* Body properties */
  93.  
  94. html { background: -webkit-linear-gradient(left top, {color:Gradient Top}, {color:Gradient Middle}, {color:Gradient Bottom}); background: -o-linear-gradient(bottom right, {color:Gradient Top}, {color:Gradient Middle}, {color:Gradient Bottom}); background: -moz-linear-gradient(bottom right, {color:Gradient Bottom}, {color:Gradient Middle}, {color:Gradient Top}); background: linear-gradient(to bottom right, {color:Gradient Top}, {color:Gradient Middle}, {color:Gradient Bottom}); font:normal 400 12px lato; letter-spacing:1px; line-height:150%; min-height:100%; }
  95.  
  96. body { margin:0; overflow:hidden; padding:0; }
  97.  
  98. /* Scrollbar */
  99.  
  100. ::-webkit-scrollbar-track { background-color:{color:Scroll}; background-clip:padding-box; border:3px solid rgb(0, 0, 0); border:3px solid rgba(0, 0, 0, 0); -webkit-background-clip:padding-box; }
  101.  
  102. ::-webkit-scrollbar-thumb { background-color:{color:Scroll}; background-clip:padding-box; border:0px solid rgb(0, 0, 0); border:0px solid rgba(255, 0, 0, 0); -webkit-background-clip: padding-box; }
  103.  
  104. ::-webkit-scrollbar { width:5px; }
  105.  
  106. /* Tooltip */
  107.  
  108. a { cursor:help; display:inline-block; font:normal normal 85% sans-serif; position:relative; text-decoration:none; }
  109.  
  110. a > i { background:rgba({text:Tooltip BG}); background-clip:padding-box; border:2px solid {color:Tooltip Border}; bottom:100%; border-radius:3px; color:{color:Tooltip Text}; font:normal normal 10px lato, sans-serif; left:50%; letter-spacing:1px; line-height:110%; margin-left:-52px; margin-bottom:0px; opacity:0; padding:10px 4px; position:absolute; text-align:center; text-transform:uppercase; width:90px; visibility:hidden; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; transition:all 0.5s ease-out; z-index:1; }
  111.  
  112. a > i:before, a > i:after { border-left:8px solid transparent; border-right:8px solid transparent;content: ""; left:50%; margin-left:-7px; position:absolute; top:100%; }
  113.  
  114. a > i:before { border-top:8px solid {color:Tooltip Border}; margin-top:2px; }
  115.  
  116. /* Ignore this */
  117.  
  118. a > i:after{ border-top:10px solid rgba(255, 255, 255, 0); margin-top:-2px; z-index:1; }
  119.  
  120. a:hover > i { opacity:1; visibility:visible; }
  121.  
  122. /* Blockquotes */
  123.  
  124. blockquote { border-left:1px solid {color:Blockquote}; margin-left:12px; padding-top:1px; padding-left:12px; padding-bottom:1px; padding-right:0; width:90%; word-wrap:break-word; }
  125.  
  126. /* Left sidebar */
  127.  
  128. #left { background:rgba({text:Sidebar BG}); border-right:1px solid {color:Sidebar Borders}; height:100%; left:0; position:fixed; top:0; transition-duration:0.5s; -webkit-transition-duration:0.5s; width:40px; z-index:1; }
  129.  
  130. #left.open2 { transition-duration:0.5s; -webkit-transition-duration:0.5s; width:250px; }
  131.  
  132. /* Left sidebar content */
  133.  
  134. .fave-title { border-bottom:2px solid {color:Sidebar Borders}; color:{color:Sidebar Title}; font:normal 300 32px lato, sans-serif; height:75px; letter-spacing:4px; margin-left:-350px; opacity:0; padding-top:25px; text-transform:uppercase; text-align:center; visibility:hidden; -webkit-transition:all 0.8s ease-out; -moz-transition:all 0.8s ease-out; transition:all 0.8s ease-out; }
  135.  
  136. .subtitles { color:{color:Sidebar Subtitles}; margin-left:-350px; opacity:0; padding-left:20px; visibility:hidden; -webkit-transition:all 0.8s ease-out; -moz-transition:all 0.8s ease-out; transition:all 0.8s ease-out; }
  137.  
  138. .faves { border-bottom:1px solid {color:Sidebar Borders}; color:{color:Sidebar Text}; font-size:10px; margin-left:-350px; padding-left:30px; padding-bottom:20px; padding-top:7px; text-transform:uppercase; opacity:0; visibility:hidden; -webkit-transition:all 0.8s ease-out; -moz-transition:all 0.8s ease-out; transition:all 0.8s ease-out; }
  139.  
  140. /* When left sidebar opens */
  141.  
  142. #left.open2 .fave-title, #left.open2 .subtitles, #left.open2 .faves { margin-left:0px; opacity:1; visibility:visible; -webkit-transition:all 0.8s ease-out; -moz-transition:all 0.8s ease-out; transition:all 0.8s ease-out; }
  143.  
  144. /* About me + links wrap */
  145.  
  146. #button-box { border-left:1px solid {color:Content Borders}; border-right:1px solid {color:Content Borders}; height:100vh; margin-left:61px; transition-duration:0.5s; -webkit-transition-duration:0.5s; width:490px; }
  147.  
  148. /* When left sidebar opens */
  149.  
  150. #button-box.open2 { margin-left:271px; transition-duration:0.5s; -webkit-transition-duration:0.5s; }
  151.  
  152. /* Title */
  153.  
  154. #top { background-color:rgba({text:Content Title BG}); border-bottom:2px solid {color:Content Borders}; color:{color:Content Title}; font:normal 300 32px lato, sans-serif; height:75px; left:0; letter-spacing:4px; padding-top:25px; text-transform:uppercase; text-align:center; top:0; width:100%; z-index:1; }
  155.  
  156. /* Link wrap*/
  157.  
  158. #button-wrap { margin:0 auto; padding-top:50px; text-align:center; width:490px; }
  159.  
  160. #button-wrap a { text-decoration:none; }
  161.  
  162. /* Line icon borders */
  163.  
  164. .border1 { border-bottom:1px solid {color:Icon Borders}; border-top:1px solid {color:Icon Borders}; width:490px; }
  165.  
  166. .border2 { border-bottom:1px solid {color:Icon Borders}; margin-top:-17px; width:490px; }
  167.  
  168. .border3 { border-bottom:1px solid {color:Icon Borders}; margin-top:-17px; margin-bottom:33px; width:490px; }
  169.  
  170. /* Icon styling */
  171.  
  172. h1 { border-left:1px solid {color:Icon Borders}; color:{color:Icons}; font-weight:normal; font-style:normal; font-size:40px; line-height:1; padding:18px; margin-top:-1px; margin-bottom:-1px; transition-duration:0.5s; -webkit-transition-duration:0.5s; }
  173.  
  174. h1:hover { opacity:.5; transition-duration:0.5s; -webkit-transition-duration:0.5s; }
  175.  
  176. /* About box */
  177.  
  178. #bottom { background-color:rgba({text:About BG}); border-top:2px solid {color:About Borders}; border-bottom:2px solid {color:About Borders}; height:370px; width:490px; z-index:1;margin:0 auto; }
  179.  
  180. /* About content */
  181.  
  182. .img-wrap { padding:15px; }
  183.  
  184. .about-img { border:1px solid {color:About Borders}; margin-right:10px; margin-bottom:5px; opacity:0.8; padding:5px; width:120px; }
  185.  
  186. .about-txt { color:{color:About Text}; height:337px; margin-top:-15px; overflow-x:hidden; overflow-y:scroll; padding-left:5px; padding-right:15px; text-align:left; }
  187.  
  188. /* Tag boxes */
  189.  
  190. #tags, #tags2 { background-color:rgba({text:Tag BG});height:250px; top:104px; left:691px; position:fixed; transition-duration:0.5s; -webkit-transition-duration:0.5s; width:300px; border: solid 1px {color:Tag Borders};  opacity:0; visibility:hidden; }
  191.  
  192. @-moz-document url-prefix() {
  193.  #tags, #tags2 { top:105px; }
  194. }
  195.  
  196. #tags2 { top:420px; }
  197.  
  198. /* Tag lines */
  199.  
  200. .line { background:transparent; border-top:1px solid {color:Icon Borders}; margin-top:125px; margin-left:-140px; width:140px; }
  201.  
  202. /* Tag content */
  203.  
  204. .tag-box { color:{color:Tags}; height:209px; margin-top:-112px; overflow-x:hidden; overflow-y:scroll; padding:16px; padding-top:0px; }
  205.  
  206. .tag-title { background:rgba({text:Tag Title BG}); border-top:1px solid {color:Tag Title Borders}; border-bottom:1px solid {color:Tag Title Borders}; color:{color:Tag Title}; font-size:10px; margin-bottom:10px; margin-left:-16px; padding:10px; text-align:center; text-transform:uppercase; width:110%; }
  207.  
  208. /* Transition */
  209.  
  210. #tags.open1, #tags2.open1 { opacity:1; visibility:visible; transition-duration:0.5s; -webkit-transition-duration:0.5s; }
  211.  
  212. /* When left sidebar opens */
  213.  
  214. #tags.open2, #tags2.open2 { left:901px; transition-duration:0.5s; -webkit-transition-duration:0.5s; }
  215.  
  216. /* Responsiveness */
  217.  
  218. @media screen and (max-height:800px) { #bottom { height:310px; }    
  219.    
  220. .about-txt { height:270px; } }
  221.  
  222. /* Credit */
  223.  
  224. .credit a { color:#a5a5a5; }
  225.  
  226. {CustomCSS}
  227. </style>
  228.  
  229. <!-- Icon font script !don't touch -->
  230.  
  231. <script src="http://static.tumblr.com/at44twr/nHXn9gbb6/cufon.js" type="text/javascript"></script>
  232.     <script src="http://static.tumblr.com/at44twr/8sGn9gc9t/linea-basic-10_400.font.js" type="text/javascript"></script>
  233.         <script type="text/javascript">
  234.             Cufon.replace('h1');
  235.             Cufon.replace('#sub1');
  236.         </script>
  237.  
  238. <!-- Jquery !don't touch -->
  239.  
  240. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  241.  
  242. <!-- Tags !don't touch -->
  243.  
  244. <script type="text/javascript">
  245. $(document).ready(function () {
  246.     $('.bo').click(function () {
  247.         $('#tags, #tags2').toggleClass('open1');
  248.     })
  249. });
  250. </script>
  251.  
  252. <!-- Left sidebar !don't touch -->
  253.  
  254. <script type="text/javascript">
  255. $(document).ready(function () {
  256.    $('.le').click(function () {
  257.        $('#left, #button-box, #bottom, #tags, #tags2').toggleClass('open2');
  258.    })
  259. });
  260. </script>
  261.  
  262. </head>
  263.  
  264. <body>
  265.  
  266. <!-- Left sidebar. I use it to list off my favorite things, but however you choose to use it is up to you! -->
  267.  
  268. <div id="left">
  269.  
  270. <!-- here is the left sidebar title -->
  271.  
  272. <div class="fave-title"> Title </div><br>
  273.  
  274. <!-- your first subtitle -->
  275.    
  276.    <div class="subtitles"> Subtitle One </div>
  277.  
  278. <!-- your list items for this section. if you remove the <br> end tags there won't be individual lines, so be careful! -->
  279.    
  280.         <div class="faves">
  281.          ▷ Item One <br>
  282.          ▷ Item Two <br>
  283.          ▷ Item Three <br>
  284.          ▷ Item Four <br>
  285.          ▷ Item Five <!-- no br for the final line -->
  286.         </div><br>
  287.    
  288. <!-- your second subtitle -->
  289.    
  290.     <div class="subtitles"> Subtitle Two </div>
  291.  
  292. <!-- your list items for this section -->
  293.    
  294.         <div class="faves">
  295.          ▷ Item One <br>
  296.          ▷ Item Two <br>
  297.          ▷ Item Three <br>
  298.          ▷ Item Four <br>
  299.          ▷ Item Five <!-- no br for the final line -->
  300.         </div><br>
  301.    
  302. <!-- your third subtitle -->
  303.    
  304.     <div class="subtitles"> Subtitle Three </div>
  305.  
  306. <!-- your list items for this section -->
  307.    
  308.         <div class="faves">
  309.          ▷ Item One <br>
  310.          ▷ Item Two <br>
  311.          ▷ Item Three <br>
  312.          ▷ Item Four <br>
  313.          ▷ Item Five <!-- no br for the final line -->
  314.         </div><br>
  315.    
  316. <!-- your fourth subtitle -->
  317.    
  318.     <div class="subtitles"> Subtitle Four </div>
  319.  
  320. <!-- your list items for this section -->
  321.    
  322.         <div class="faves">
  323.          ▷ Item One <br>
  324.          ▷ Item Two <br>
  325.          ▷ Item Three <br>
  326.          ▷ Item Four <br>
  327.          ▷ Item Five <!-- no br for the final line -->
  328.         </div> <!-- no br for the final section -->
  329.    
  330. </div>
  331.  
  332. <!-- End left sidebar -->
  333.  
  334. <!-- About me + links -->
  335.  
  336. <div id="button-box">
  337.  
  338. <!-- here is the about me & links title -->
  339.  
  340. <div id="top"> My Links </div>
  341.  
  342. <!-- Links -->
  343.  
  344. <div id="button-wrap">
  345.  
  346. <!-- Row 1 -->
  347.  
  348. <div class="border1">
  349.  
  350. <!--
  351.  
  352. these are your three rows of links. the first row is navigation, the last are custom links. don't touch anything between <h1></h1> otherwise your icons will disappear!
  353.  
  354. -->
  355.  
  356.    <a href="#" class="le"> <!-- the button that slides out the left menu -->
  357.        <h1 style="border:none;"> Y </h1> <!-- leave this alone -->
  358.        <i> left sidebar </i> <!-- the text that appears on hover -->
  359.    </a>
  360.  
  361.    <a href="#" class="bo"> <!-- the button that makes two boxes appear -->
  362.        <h1> > </h1>
  363.        <i> text boxes </i>
  364.    </a>
  365.  
  366.    <a href="/"> <!-- back to blog -->
  367.        <h1> Z </h1>
  368.        <i> index </i>
  369.    </a>
  370.  
  371.    <a href="/ask"> <!-- to your inbox -->
  372.        <h1> ) </h1>
  373.        <i> message </i>
  374.    </a>
  375.  
  376.    <a href="/archive"> <!-- to your archive -->
  377.        <h1> d </h1>
  378.        <i> archive </i>
  379.    </a>
  380.  
  381.    <a href="http://tumblr.com"> <!-- to the dashboard -->
  382.        <h1> X </h1>
  383.        <i> leave </i>
  384.    </a>
  385.  
  386. </div><br>
  387.  
  388. <!-- End row 1 -->
  389.  
  390. <!-- Row 2 -->
  391.  
  392. <div class="border2">
  393.  
  394. <!--
  395.  
  396. these are custom links. input whatever urls you'd like! links should have no spaces within the quotations.
  397.  
  398. note that nothing between <h1></h1> should be touched, but the text between <i></i> can be edited.
  399.  
  400. -->
  401.  
  402.     <a href="URL-HERE">
  403.         <h1 style="border:none;"> U </h1>
  404.         <i> link name </i>
  405.     </a>
  406.  
  407.     <a href="URL-HERE">
  408.         <h1> P </h1>
  409.         <i> link name </i>
  410.     </a>
  411.  
  412.     <a href="URL-HERE">
  413.         <h1> l </h1>
  414.         <i> link name </i>
  415.     </a>
  416.  
  417.     <a href="URL-HERE">
  418.         <h1> 7 </h1>
  419.         <i> link name </i>
  420.     </a>
  421.  
  422.     <a href="URL-HERE">
  423.         <h1> ~ </h1>
  424.         <i> link name </i>
  425.     </a>
  426.  
  427.     <a href="URL-HERE">
  428.         <h1> ! </h1>
  429.         <i> link name </i>
  430.     </a>
  431.  
  432. </div><br>
  433.  
  434. <!-- End row 2 -->
  435.  
  436. <!-- Row 3 -->
  437.  
  438. <div class="border3">
  439.  
  440. <!--
  441.  
  442. these are EVEN MORE custom links. input whatever urls you'd like! links should have no spaces within the quoations.
  443.  
  444. note that nothing between <h1></h1> should be touched, but the text between <i></i> can be edited
  445.  
  446. -->
  447.  
  448.    <a href="URL-HERE">
  449.        <h1 style="border:none;"> _ </h1>
  450.        <i> link name </i>
  451.    </a>
  452.  
  453.    <a href="URL-HERE">
  454.        <h1> / </h1>
  455.        <i> link name </i>
  456.    </a>
  457.  
  458.    <a href="URL-HERE">
  459.        <h1> ? </h1>
  460.        <i> link name </i>
  461.    </a>
  462.  
  463.    <a href="URL-HERE">
  464.        <h1> Q </h1>
  465.        <i> link name </i>
  466.    </a>
  467.  
  468.    <a href="URL-HERE">
  469.        <h1> + </h1>
  470.        <i> link name </i>
  471.    </a>
  472.  
  473.    <a href="URL-HERE">
  474.        <h1> \ </h1>
  475.        <i> link name </i>
  476.    </a>
  477.  
  478. </div><br>
  479.  
  480. <!-- End row 3 -->
  481.    
  482. </div>
  483.  
  484. <!-- End links -->
  485.  
  486. <!-- About me -->
  487.  
  488. <div id="bottom">
  489.    
  490. <div class="img-wrap">
  491.    <img class="about-img" align="left" src="{image:About Me}" alt=""/>
  492. </div>
  493.  
  494.    <div class="about-txt">
  495.    
  496.    Your description goes here.<br><br><!-- add two <br> end tags for paragraph spacing -->
  497.    
  498.    Make it as long as you want.<!-- don't add <br> end tags to the last paragraph -->
  499.        
  500.     </div>
  501.    
  502. <!-- End about me -->    
  503.    
  504. </div>    
  505.  
  506. <!-- End about me + links -->
  507.  
  508. <!-- Top tag box. Again, I use these two boxes for tags but you can do whatever you want for them! This is just an idea. -->
  509.  
  510. <div id="tags">
  511. <div class="line"></div>
  512.  
  513.     <div class="tag-box">
  514.    
  515. <!-- your first set title -->    
  516.  
  517.         <div class="tag-title"> Set One </div>
  518.  
  519. <!-- your set items -->
  520.    
  521.             <div style="padding-left:15px;">
  522.                 ▷ Item One <br><!-- I should mention that if you want an extra line just press the enter key, type what you want, and add <br> to the end of it until you're finished! This applies to the left sidebar too. -->
  523.                ▷ Item Two <br>
  524.                ▷ Item Three <br>
  525.                ▷ Item Four <!-- no br for the final line -->
  526.            </div><br>
  527.  
  528. <!-- your second set title -->  
  529.  
  530.        <div class="tag-title"> Set Two </div>
  531.  
  532. <!-- your set items -->
  533.    
  534.            <div style="padding-left:15px;">
  535.                ▷ Item One <br>
  536.                ▷ Item Two <br>
  537.                ▷ Item Three <br>
  538.                ▷ Item Four <!-- no br for the final line -->
  539.            </div><br>
  540.    
  541. <!-- your third set title -->  
  542.  
  543.        <div class="tag-title"> Set Three </div>
  544.  
  545. <!-- your set items -->
  546.    
  547.            <div style="padding-left:15px;">
  548.                ▷ Item One <br>
  549.                ▷ Item Two <br>
  550.                ▷ Item Three <br>
  551.                ▷ Item Four <!-- no br for the final line -->
  552.            </div> <!-- no br for the final set -->
  553.    </div>
  554. </div>
  555.  
  556. <!-- End top tag box -->
  557.  
  558. <!-- Bottom tag box -->
  559.  
  560. <div id="tags2">
  561. <div class="line"></div>
  562.  
  563.    <div class="tag-box">
  564.  
  565.        <!-- your first set title -->    
  566.  
  567.        <div class="tag-title"> Set One </div>
  568.  
  569. <!-- your set items -->
  570.    
  571.            <div style="padding-left:15px;">
  572.                ▷ Item One <br>
  573.                ▷ Item Two <br>
  574.                ▷ Item Three <br>
  575.                ▷ Item Four <!-- no br for the final line -->
  576.            </div><br>
  577.  
  578. <!-- your second set title -->  
  579.  
  580.        <div class="tag-title"> Set Two </div>
  581.  
  582. <!-- your set items -->
  583.    
  584.            <div style="padding-left:15px;">
  585.                ▷ Item One <br>
  586.                ▷ Item Two <br>
  587.                ▷ Item Three <br>
  588.                ▷ Item Four <!-- no br for the final line -->
  589.            </div><br>
  590.    
  591. <!-- your third set title -->  
  592.  
  593.        <div class="tag-title"> Set Three </div>
  594.  
  595. <!-- your set items -->
  596.    
  597.            <div style="padding-left:15px;">
  598.                ▷ Item One <br>
  599.                ▷ Item Two <br>
  600.                ▷ Item Three <br>
  601.                ▷ Item Four <!-- no br for the final line -->
  602.            </div> <!-- no br for the final set -->
  603.    </div>
  604. </div>
  605.  
  606. <!-- End bottom tag box -->
  607.  
  608. <!--
  609.  
  610. There's only one more step. Now that you've finished making your page, select update preview, then save. Go to your sideblog to view the page.
  611.  
  612. If you're using Google Chrome, Mozilla Firefox, or Internet Explorer, hit CTRL + U. If you're using Opera, hit CTRL + F3. This will show you the page source.
  613.  
  614. Press CTRL + A  and right-click to copy all of the text on the page. Now when you go to add a page, where it says "Standard Layout" click the dropwdown menu and select "Custom Layout" instead. Paste everything you copied there, update the preview and save!
  615.  
  616. I use this method because otherwise, editing page colors can be difficult if you don't know CSS / HTML. I hope you enjoy this page theme, happy using! And don't remove my credit :-(
  617.  
  618. -->
  619.  
  620. <div class="credit" style="bottom:0;right:0;position:fixed;font-size:11px;letter-spacing:1px;text-transform:uppercase;">&nbsp;<a href="http://maomuthemes.tumblr.com">© 2014 mt</a> </div>
  621.  
  622. </body>
  623. </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!