API tools faq
paste
Advertisement
Katting

Bubbly Personalities POPUP

Katting
Mar 30th, 2017
196
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.43 KB | None | 0 0
raw download clone embed print report
  1. <!----------------------------------------------------------------------
  2.  
  3. FELINES THEMES : Bubbly Personalities [About Popup]
  4.  
  5. ***Important Notice***
  6.  
  7. The font of this popup will change depending on the 'body' font of your theme. If no theme is listed for body, you will need to put the font-family there so you won't need to put it in each individual div in this popup.
  8.  
  9. Feel free to spice it up and give the quote and stuff like that it's own header, as well as change the color arrangement. Remember to change the color scheme to your themes meta colors to match your theme (if you want I mean).
  10.  
  11. Color codes included are:
  12.  
  13. - #e0c1b4
  14. - #d4d1c3
  15. - #9d9d9a
  16.  
  17.  
  18. Social media buttons look best with 5 links, but if needed you can play with the socialbuttons div width and margins to make it look good with less.
  19.  
  20.  
  21. I included 3 tabs for the bio section. If you know how to add more working tabs and want to add them, you may, but please don't ask me how to add them. But if you need any other help please let me know!
  22.  
  23.  
  24. © Feline Themes
  25. ----------------------------------------------------------------------->
  26.  
  27. <div id="aboutpopup">
  28.  
  29. <div id="picandsocial">
  30.  
  31. <div id="aboutpic"><img src="{Favicon}"></div>
  32.  
  33. <div id="socialbuttons">
  34. <!----------
  35.  
  36. YOU WILL NEED FONT AWESOME INSTALLED IN YOUR THEME FOR ICONS TO SHOW UP
  37.  
  38. Feel free to change these up as you'd like to suit your needs. If you need the icon code for another site you can easily find it here:
  39.  
  40. http://fontawesome.io/icons/
  41.  
  42.  
  43. * Not ALL social media sites out there have an icon, but many of them do. *
  44.  
  45. If you have a social site that's not listed on Font Awesome, you can always try to improvise for that icon. (As you can see this was done for WeHeartIt)
  46.  
  47. ---------->
  48.  
  49. <a href="TWITTER URL HERE" title="Twitter" target="blank"><div class="social"><i class="fa fa-twitter"></i></div></a>
  50.  
  51. <a href="INSTAGRAM URL HERE" title="Instagram" target="blank"><div class="social"><i class="fa fa-instagram"></i></div></a>
  52.  
  53. <a href="FACEBOOK URL HERE" title="Facebook" target="blank"><div class="social"><i class="fa fa-facebook"></i></div></a>
  54.  
  55. <a href="SNAPCHAT URL HERE" title="SC USERNAME" target="blank"><div class="social"><i class="fa fa-snapchat-ghost"></i></div></a>
  56.  
  57. <a href="WE HEART IT URL HERE" title="WeHeartIt" target="blank"><div class="social"><span class="fa fa-heart"></span></div></a>
  58. </div>
  59.  
  60. </div>
  61.  
  62.  
  63.  
  64.  
  65. <div id="basicinfo">
  66.  
  67. <div class="basicinfo">
  68. <div class="basiclabel"><i class="fa fa-user"></i></div>
  69. <b>Name:</b> Name Here
  70. </div>
  71.  
  72. <div class="basicinfo">
  73. <div class="basiclabel"><i class="fa fa-birthday-cake"></i></div>
  74. <b>Birthday:</b> Birthday Here
  75. </div>
  76.  
  77. <div class="basicinfo">
  78. <div class="basiclabel"><i class="fa fa-moon-o"></i></div>
  79. <b>Star Sign:</b> Star Sign Here
  80. </div>
  81.  
  82. <div class="basicinfo">
  83. <div class="basiclabel"><i class="fa fa-star"></i></div>
  84. <b>Personality:</b> MBTI Type Here
  85. </div>
  86.  
  87. <div class="basicinfo">
  88. <div class="basiclabel"><i class="fa fa-globe"></i></div>
  89. <b>Location:</b> State/Country Here
  90. </div>
  91.  
  92. </div>
  93.  
  94.  
  95.  
  96.  
  97. <div id="aboutquote">
  98. "Write a quote you like in here! Feel free to use a cute font for this if you want!"
  99.  
  100. <div id="quotesource">- Source Of Quote</div>
  101. </div>
  102.  
  103.  
  104.  
  105. <div id="abouttabs">
  106.  
  107. <!----------------------------------------------------------->
  108. <div id="about1" onClick="document.getElementById('about1').style.zIndex='110'; document.getElementById('about2').style.zIndex='0'; document.GetElementById('about3').style.zIndex='0'">
  109. <div id="abouttab1">About</div>
  110. <div id="aboutbox1">
  111.  
  112. <p>Write a brief bio about yourself in here. Have fun with this! You may set up these three popups however you need to. </p>
  113.  
  114. </div>
  115. </div>
  116. <!----------------------------------------------------------->
  117. <div id="about2" onClick="document.getElementById('about2').style.zIndex='110'; document.getElementById('about1').style.zIndex='0'; document.GetElementById('about3').style.zIndex='0'">
  118. <div id="abouttab2">Interests</div>
  119. <div id="aboutbox2">
  120.  
  121. <p>This tab is for listing some of your interests.. but you can use it for anything you want. Same with the friends tab really!</p>
  122.  
  123. <h2>Heading</h2>
  124.  
  125. <ul>
  126. <li> List this stuff . . . </li>
  127. <li> However you want! </li>
  128. <li> Love a lot of stuff?</li>
  129. <li>Don't worry I made it so all your tabs can scroll!</li>
  130. </ul>
  131.  
  132. </div>
  133. </div>
  134. <!----------------------------------------------------------->
  135. <div id="about3" onClick="document.getElementById('about3').style.zIndex='100'; document.getElementById('about1').style.zIndex='0'; document.getElementById('about2').style.zIndex='0'">
  136. <div id="abouttab3">Friends</div>
  137. <div id="aboutbox3">
  138.  
  139. <a href="http://felinethemes.tumblr.com/" target="blank">
  140. <figure>
  141. <center>
  142. <img src="http://api.tumblr.com/v2/blog/felinethemes.tumblr.com/avatar/512/">
  143. <figcaption>Friend's Name</figcaption>
  144. </center>
  145. </figure>
  146. </a>
  147.  
  148.  
  149. <a href="http://felinethemes.tumblr.com/" target="blank">
  150. <figure>
  151. <center>
  152. <img src="http://api.tumblr.com/v2/blog/felinethemes.tumblr.com/avatar/512/">
  153. <figcaption>Friend's Name</figcaption>
  154. </center>
  155. </figure>
  156. </a>
  157.  
  158.  
  159. <a href="http://felinethemes.tumblr.com/" target="blank">
  160. <figure>
  161. <center>
  162. <img src="http://api.tumblr.com/v2/blog/felinethemes.tumblr.com/avatar/512/">
  163. <figcaption>Friend's Name</figcaption>
  164. </center>
  165. </figure>
  166. </a>
  167.  
  168. <a href="http://felinethemes.tumblr.com/" target="blank">
  169. <figure>
  170. <center>
  171. <img src="http://api.tumblr.com/v2/blog/felinethemes.tumblr.com/avatar/512/">
  172. <figcaption>Friend's Name</figcaption>
  173. </center>
  174. </figure>
  175. </a>
  176.  
  177. <a href="http://felinethemes.tumblr.com/" target="blank">
  178. <figure>
  179. <center>
  180. <img src="http://api.tumblr.com/v2/blog/felinethemes.tumblr.com/avatar/512/">
  181. <figcaption>Friend's Name</figcaption>
  182. </center>
  183. </figure>
  184. </a>
  185.  
  186. </div>
  187. </div>
  188. <!----------------------------------------------------------->
  189. </div>
  190.  
  191. </div>
  192.  
  193. <!------------------------------------------------------------------------->
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!