API tools faq
paste
Advertisement
bct

full potential page v1

bct
Feb 5th, 2016
2,631
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.46 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!------------------------------------------
  5.  
  6. (◍•ᴗ•◍)♡ ✧*。
  7.  
  8. Full Potential 'All In One' Page (V1.0) by Chloe | @dontbrag | @bychloethemes
  9.  
  10. > Do not delete/alter any credit.
  11. > Do not claim as your own.
  12. > Do not copy any code.
  13. > Do not redistribute.
  14.  
  15. -------------------------------------------
  16.  
  17. How to cutomise ♡
  18.  
  19. To change the appearance you will have to paste the relevant code above </style>
  20. You will need to use hex colours. You can generate hex colours here:
  21. http://www.colorpicker.com/ then replace YOUR_COLOUR with the 6 letters / numbers that are after the hashtag at the top of the website.
  22.  
  23. /*Background colour:*/
  24. body {background-color:#YOUR_COLOUR;}
  25.  
  26. /*Make background a repeating image (replace IMAGE_URL with a link to your image): */
  27. body {background: url(IMAGE_URL) repeat fixed;}
  28.  
  29. /*Make background a stretched image (replace IMAGE_URL with a link to your image):*/
  30. body {background: url(IMAGE_URL) no-repeat center center fixed; background-size:cover;}
  31.  
  32. /*Change text colour:*/
  33. body {color:#YOUR_COLOUR;}
  34.  
  35. /*Round corners:*/
  36. #main {border-radius:5px;}
  37.  
  38. /*Change the title color:*/
  39. .box h1 {color:#YOUR_COLOUR;}
  40.  
  41. /*Remove the shadow from the titles:*/
  42. .box h1 {text-shadow:initial;}
  43.  
  44. /*Change the borders (make all the colours the same):*/
  45. a, #main, ul#nav, #bio blockquote {border-color:1px solid #YOUR_COLOUR;} #main:before, .box hr {background:#YOUR_COLOUR;} .column {-webkit-column-rule: 1px solid #YOUR_COLOUR;-moz-column-rule: 1px solid #YOUR_COLOUR;column-rule: 1px solid #YOUR_COLOUR;}
  46.  
  47. /*Change the nav text colour:*/
  48. ul#nav {color:#YOUR_COLOUR;}
  49.  
  50. /*Change the accent:*/
  51. b, strong {color:#YOUR_COLOUR;} ul#nav li span:before {background:#YOUR_COLOUR;}
  52.  
  53. /*Change the navigate links background:*/
  54. ul.tags li {background:#YOUR_COLOUR;}
  55.  
  56. /*Change the navigate links hovered background:*/
  57. ul.tags li.hovered {background:#YOUR_COLOUR;}
  58.  
  59. I advise not changing the font. Please do not mess with the heights / widths of things as you have a 99.99% chance of screwing things up. It is also advisable tht you do not attempt to change the main content's white background. I haven't given instructions on how to do so because I cannot see it looking good in any other colour.
  60.  
  61. To change the tab title replace the word "etc" 5 lines below.
  62.  
  63. There are instructions on customising the content below <body>
  64. ------------------------------------------->
  65. <meta charset="UTF-8" />
  66. <title>Etc</title>
  67. <link rel="shortcut icon" href="{Favicon}">
  68. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  69. <link rel="stylesheet" href="http://static.tumblr.com/yxfeliq/0gMo0fe39/style.css">
  70. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Playfair+Display' rel='stylesheet' type='text/css'>
  71. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  72. <link rel="stylesheet" href="http://static.tumblr.com/yxfeliq/0gMo0fe39/style.css">
  73. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  74. <script src="http://static.tumblr.com/yxfeliq/yCjo1z6sc/full.potential.js"></script>
  75. <link rel="stylesheet" href="http://static.tumblr.com/yxfeliq/5nqo1z109/full.potential.css">
  76. <style type="text/css">
  77. /*----------Paste your settings below here------------*/
  78.  
  79.  
  80.  
  81.  
  82.  
  83.  
  84. /*----------Paste your settings above here------------*/
  85. </style>
  86. </head>
  87. <body>
  88. <!------------------------------------------------------------
  89. How to customise your content:
  90.  
  91. To change the icon replace the image link just below. The icon needs to be square and a minimum of 150px x 150px
  92.  
  93. Customising the biography: there are instructions on how to change it just below. Search for "bio stuff goes below here"
  94.  
  95. Customising the message tab:
  96. 1. search for {name} and replace it with your URL.
  97. Don't add the .tumblr.com bit though. For example, I would replace it with bychloethemes . this step is incredibly important and if you don't do it the askbox won't work
  98. 2. search for "faq goes below here" to customise the faq.
  99.  
  100. Customising the navi tab: search for "navi goes below here"
  101.  
  102. The blogroll will look really odd in the preview, do not worry, it will look fine on your blog.
  103. ------------------------------------------------------------->
  104. <div id="main">
  105. <div id="icon"><a href="/" title="go home"><img src="https://41.media.tumblr.com/f21420816cbe4c020f2f24999e551f53/tumblr_o1km8obMZ91v5m5m0o4_250.jpg"></a></div>
  106. <ul id="nav">
  107. <li class="changer changer1 active" data-slidey="1"><span>Biography</span></li><!--
  108. --><li class="changer changer2" data-slidey="2"><span>Message</span></li><!--
  109. --><li class="changer changer3" data-slidey="3"><span>Navigate</span></li><!--
  110. --><li class="changer changer4" data-slidey="4"><span>Blogroll</span></li>
  111. </ul>
  112.  
  113. <div id="carousel" class="slidey1"><!--
  114. --><div class="box">
  115. <h1>Biography</h1>
  116. <div id="bio" class="column">
  117. <!---------bio stuff goes below here----------------->
  118. <h3>This is a title</h3>
  119. <p>Your text should be wrapped in p tags like this. I'm just gonna go on for a little while so you can see. Below I am going to show you how to make a list.</p>
  120. <ul>
  121. <li>Here is list item one
  122. <li>and here is number two
  123. <li>you guessed it, this is number three
  124. </ul>
  125. <p>Here we have another paragraph. <b>This is some bold text</b>. <i>This is some italicised text</i>. <u>This is some underlined text</u>. Next I am going to show you a content break / horizontal rule</p>
  126. <hr>
  127. <p>Did you see it? How about a link? <a href="http://YOURURL">link name</a>. That's not too hard. Last thing I'm going to show you is how to make a numbered list.</p>
  128. <h3>My favourite TV shows</h3>
  129. <ol>
  130. <li>Parks and Recreation
  131. <li>Parks & Recreation
  132. <li>Parks and Rec
  133. <li>Parks & Rec
  134. </ol>
  135. <p>Your text will overflow into a second column. If you write a lot it will keep adding columns.</p>
  136. <!---------bio stuff goes above here----------------->
  137. </div>
  138. </div><!--
  139. --><div class="box">
  140. <h1>Message</h1>
  141. <div id="faq" class="column">
  142. <!---------faq goes below here----------------->
  143. <h3>This is how you type a question?</h3>
  144. <p>And this is how you write a reponse. If you have a long faq, like the bio, it will just keep making more columns. If your faq isn't very long remove the word column above.</p>
  145. <!---------faq goes above here----------------->
  146. </div>
  147. <iframe frameborder="0" border="0" scrolling="no" width="100%" height="190" allowtransparency="true" src="http://www.tumblr.com/ask_form/{name}.tumblr.com"></iframe>
  148. </div><!--
  149. --><div class="box">
  150. <h1>Navigate</h1>
  151. <div id="tag-box" class="column">
  152. <!--
  153. to customise the navi you will need to replace the word 'title' with your link section title. put your links after the http:// and replace 'link 1' with your link name.
  154.  
  155. the link sections will not break in half to flow into
  156. another column, so you will have to rearrange them to fit
  157. nicely.
  158.  
  159. to add another section paste the following below the "end"
  160. comment and above the "navi goes above here" comment. paste
  161. as many as you need and delete the links you don't need
  162.  
  163.  
  164. <div class="container">
  165. <h3>Section 1 title</h3>
  166. <ul class="tags">
  167. <li><a href="http://">link 1</a></li>
  168. <li><a href="http://">link 2</a></li>
  169. <li><a href="http://">link 3</a></li>
  170. <li><a href="http://">link 4</a></li>
  171. <li><a href="http://">link 5</a></li>
  172. <li><a href="http://">link 6</a></li>
  173. <li><a href="http://">link 7</a></li>
  174. <li><a href="http://">link 8</a></li>
  175. <li><a href="http://">link 9</a></li>
  176. </ul>
  177. </div>
  178.  
  179.  
  180. -->
  181. <!---------navi goes below here----------------->
  182.  
  183. <!------------------------------->
  184. <div class="container">
  185. <h3>Title</h3>
  186. <ul class="tags">
  187. <li><a href="http://">link 1</a></li>
  188. <li><a href="http://">link 2</a></li>
  189. <li><a href="http://">link 3</a></li>
  190. <li><a href="http://">link 4</a></li>
  191. <li><a href="http://">link 5</a></li>
  192. <li><a href="http://">link 6</a></li>
  193. <li><a href="http://">link 7</a></li>
  194. <li><a href="http://">link 8</a></li>
  195. <li><a href="http://">link 9</a></li>
  196. </ul>
  197. </div>
  198. <!---------------------------------->
  199. <div class="container">
  200. <h3>Title</h3>
  201. <ul class="tags">
  202. <li><a href="http://">link 1</a></li>
  203. <li><a href="http://">link 2</a></li>
  204. <li><a href="http://">link 3</a></li>
  205. <li><a href="http://">link 4</a></li>
  206. <li><a href="http://">link 5</a></li>
  207. <li><a href="http://">link 6</a></li>
  208. </ul>
  209. </div>
  210. <!--------------end----------------->
  211.  
  212. <!---------navi goes above here----------------->
  213. </div>
  214. </div><!--
  215. --><div class="box">
  216. <h1>Blogroll</h1>
  217. {block:Following}
  218. <ul id="blogroll" class="column">
  219. {block:Followed}
  220. <li class="follows">
  221. <img class="follow-pic" src="{FollowedPortraitURL-64}"><div class="follow-info"><span class="follow-url"><a href="{FollowedURL}" target="_blank">{FollowedName}</a></span><span class="follow-title">{FollowedTitle}</span></div>
  222. </li>
  223. {/block:Followed}
  224. </ul>
  225. {/block:Following}
  226. </div>
  227. </div>
  228. </div>
  229. <div style="display:none;"><script language="JavaScript">var fhs = document.createElement('script');var fhs_id = "5215379";
  230. var ref = (''+document.referrer+'');var pn = window.location;var w_h = window.screen.width + " x " + window.screen.height;
  231. fhs.src = "//freehostedscripts.net/ocounter.php?site="+fhs_id+"&e1=&e2=&r="+ref+"&wh="+w_h+"&a=1&pn="+pn+"";
  232. document.head.appendChild(fhs);document.write("<span id='o_"+fhs_id+"'></span>");</script></div>
  233. </body>
  234. </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!