API tools faq
paste
Advertisement
lostmemento

[Old Page] Follow Forever v4 (Squares)

lostmemento
Mar 19th, 2012
10,868
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.88 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head>
  7.  
  8. <!-- DO NOT REMOVE
  9.  
  10. FOLLOW FOREVER BLOG ROLL v4 MADE BY: http://lostmemento.tumblr.com (lmthemes)
  11.  
  12. -->
  13.  
  14. <!-- BASIC CSS CUSTOMIZE INSTRUCTIONS
  15.  
  16. If you understand CSS and HTML quite a deal I've putt comments next to each line explaining what it changes
  17. If you don't you'll want to refer to the more detailed guide http://lmthemeslpffv4.tumblr.com/guide
  18.  
  19. -->
  20.  
  21. <link href='http://fonts.googleapis.com/css?family=Tinos|PT+Serif|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
  22. <title>{Title}</title>
  23. <link rel="shortcut icon" href="{Favicon}">
  24. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  25. {block:Description}<meta name="description" content="{MetaDescription}"/> {/block:Description}
  26. <link rel="shortcut icon" href="{Favicon}" />
  27. <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  28. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  29.  
  30. <style type="text/css">
  31. body {background-color: #f9f9f9; /* EDIT TO CHANGE BACKGROUND COLOR */
  32. font-family: 'Tinos', Calibri, Helvetica; /* EDIT TO CHANGE FONT FACE */
  33. margin: 0px;}
  34.  
  35. a {text-decoration: none;}
  36.  
  37. #top {width: 100%;
  38. background-color: #fff; /* EDIT TO CHANGE BACKGROUND COLOR OF TOP */
  39. font-size: 7px; /* EDIT TO CHANGE FONT SIZE OF TOP */
  40. letter-spacing: 1px; /* EDIT TO CHANGE THE LETTER SPACING OF TOP */
  41. position: fixed;}
  42.  
  43. .icon {width: 100px;
  44. margin: auto;
  45. background-color: #fff; /* EDIT TO CHANGE THE BACKGROUND OF ICON PANELS - SHOULD BE THE SAME AS #TOP */
  46. height: 100px;
  47. color: #7a7a7a} /* EDIT TO CHANGE THE FONT COLOR OF TEXT UNDER THE TOP ICONS */
  48.  
  49. .icon a:active, .icon a:visited, .icon a:link {color: #7a7a7a;} /* EDIT TO CHANGE THE FONT COLOR OF THE LINKS UNDER THE TOP ICONS */
  50.  
  51. .mainblogbox {width: 80px;
  52. margin: auto;
  53. text-align: center;
  54. margin-top: 30px;}
  55.  
  56. .ichover {height: 100px;
  57. width: 300px;}
  58.  
  59. .ichover:hover .lefticon {
  60. transition-duration: 2s;
  61. -moz-transition-duration: 2s;
  62. -webkit-transition-duration: 2s;
  63. -o-transition-duration: 2s;
  64. text-align: center;
  65. background-color: #fff; /* EDIT TO CHANGE THE BACKGROUND COLOR OF THE LEFT ICON PANEL - SHOULD BE THE SAME AS #TOP */
  66. color: black;
  67. width: 100px;
  68. height: 100px;
  69. margin-left: -100px;
  70. opacity: 1.0}
  71.  
  72. .ichover:hover .righticon {
  73. transition-duration: 2s;
  74. -moz-transition-duration: 2s;
  75. -webkit-transition-duration: 2s;
  76. -o-transition-duration: 2s;
  77. text-align: center;
  78. background-color: #fff; /* EDIT TO CHANGE THE BACKGROUND COLOR OF THE RIGHT ICON PANEL - SHOULD BE THE SAME AS #TOP */
  79. color: black;
  80. width: 100px;
  81. height: 100px;
  82. margin-left: 100px;
  83. opacity: 1.0}
  84.  
  85. .lefticon, .righticon {position: absolute;
  86. transition-duration: 2s;
  87. -moz-transition-duration: 2s;
  88. -webkit-transition-duration: 2s;
  89. -o-transition-duration: 2s;
  90. text-align: center;
  91. background-color: transparent;
  92. color: white;
  93. width: 100px;
  94. height: 100px;
  95. z-index: 0;
  96. opacity: 0.0;}
  97.  
  98. .mainicon {margin-top: 25px;
  99. z-index: 1;
  100. position: relative;}
  101.  
  102. .mainhide {opacity: 1.0;
  103. transition-duration: 0.6s;
  104. -moz-transition-duration: 0.6s;
  105. -webkit-transition-duration: 0.6s;
  106. -o-transition-duration: 0.6s;}
  107.  
  108. .ichover:hover .mainhide {opacity: 0.0;
  109. transition-duration: 0.6s;
  110. -moz-transition-duration: 0.6s;
  111. -webkit-transition-duration: 0.6s;
  112. -o-transition-duration: 0.6s;}
  113.  
  114. .credit {position: absolute;
  115. opacity: 0.0;
  116. text-align: center;
  117. width: 100px;
  118. z-index: 1;
  119. padding-top: 30px;
  120. transition-duration: 0.6s;
  121. -moz-transition-duration: 0.6s;
  122. -webkit-transition-duration: 0.6s;
  123. -o-transition-duration: 0.6s;}
  124.  
  125. .ichover:hover .credit {opacity: 1.0;
  126. transition-duration: 0.6s;
  127. -moz-transition-duration: 0.6s;
  128. -webkit-transition-duration: 0.6s;
  129. -o-transition-duration: 0.6s;
  130. background-color: #fff} /* EDIT TO CHANGE THE BACKGROUND COLOR OF THE CENTER ICON PANEL - SHOULD BE THE SAME AS #TOP */
  131.  
  132. .fyi {color: #fafafa; /* EDIT TO CHANGE THE FONT COLOR OF WHERE IT SAYS HOVER */
  133. position: absolute;
  134. font-size: 36px; /* EDIT TO CHANGE THE FONT SIZE OF WHERE IT SAYS HOVER */
  135. z-index: 0;
  136. margin-left: -15px;} /* EDIT TO CHANGE THE CENTERING OF WHERE IT SAYS HOVER */
  137.  
  138. #container {height: 100%;
  139. margin: auto;
  140. padding: 10px;
  141. text-align: center;
  142. overflow-y: auto;
  143. padding-top: 130px}
  144.  
  145. .iconsbox {width: 525px; /* EDIT TO CHANGE THE NUMBER OF ICONS PER ROW */
  146. margin:auto;}
  147.  
  148. .iconsbox img {border: 3px solid #fff; /* EDIT TO CHANGE THE BORDER COLOR THE ICONS */
  149. margin: 2px;} /* EDIT TO CHANGE THE SPACE BETWEEN ICONS */
  150.  
  151. .iconsdesch {display: inline-block;}
  152.  
  153. .iconsdesch:hover .iconsdesc img {height: 65px; /* EDIT TO CHANGE HOVERED ICON SIZE */
  154. border: 5px solid #fff} /* EDIT TO CHANGE THE BORDER OF THE HOVERED ICON */
  155.  
  156. .iconsdesch:hover .iconsdesc {opacity: 1.0; /* EDIT TO CHANGE THE OPACITY OF THE HOVERED ICON */
  157. height: 30px; width: 30px;
  158. background-color: transparent;
  159. transition-duration: 0.6s;
  160. -moz-transition-duration: 0.6s;
  161. -webkit-transition-duration: 0.6s;
  162. -o-transition-duration: 0.6s;
  163. font-size: 7px; /* EDIT TO CHANGE THE FONT SIZE OF THE HOVERED ICON */
  164. font-family: 'Tinos'; /* EDIT TO CHANGE THE FONT FACE OF THE HOVERED ICON */
  165. letter-spacing: 1px;} /* EDIT TO CHANGE THE LETTER SPACING OF THE HOVERED ICON */
  166.  
  167. .iconsdesc {opacity: 0.0;
  168. position: absolute;
  169. height: 30px;
  170. width: 0px;
  171. background-color: #fff;
  172. font-size: 0px;
  173. transition-duration: 0.6;s
  174. -moz-transition-duration: 0.6s;
  175. -webkit-transition-duration: 0.6s;
  176. -o-transition-duration: 0.6s;
  177. margin-left: -17px; /* EDIT TO CHANGE THE CENTERING THE HOVERED ICON */
  178. margin-top: -20px} /* EDIT TO CHANGE THE CENTERING THE HOVERED ICON */
  179.  
  180. .iconsdesc img {height: 0px;
  181. border: 0px solid #000;}
  182.  
  183. .iconsdesch:hover .icslnk {width: 65px; /* EDIT TO CHANGE THE WIDTH OF THE HOVERED ICON TEXT */
  184. padding: 5px; /* EDIT TO CHANGE THE PADDING OF THE HOVERED ICON TEXT */
  185. background-color: #fff; /* EDIT TO CHANGE THE BACKGROUND COLOR OF THE HOVERED ICON TEXT */
  186. margin-left: 2px;}
  187.  
  188. .icslnk a:link, .icslnk a:visited, .icslnk a:active {background-color: #fff; /* EDIT TO CHANGE THE BACKGROUND COLOR OF THE HOVERED ICON URL */
  189. width: 30px;
  190. max-width: 30px;
  191. text-transform: uppercase;
  192. word-wrap: break-word;
  193. color: #151515} /* EDIT TO CHANGE THE FONT COLOR OF THE HOVERED ICON TEXT */
  194.  
  195.  
  196. </style>
  197. </head>
  198.  
  199. <body>
  200.  
  201. <div id="top">
  202. <center><div class="ichover">
  203.  
  204. <div class="icon"><div class="fyi">HOVER</div>
  205.  
  206. <div class="lefticon"><div class="mainblogbox"><a href="/"><img src="{PortraitURL-24}" style="margin-bottom: 2px"><br>BACK</a></div></div>
  207.  
  208. <div class="righticon"><div class="mainblogbox"><a href="http://www.tumblr.com/dashboard"><img src="http://i42.tinypic.com/99fosh.png" height="24px" style="margin-bottom: 2px"><br>
  209. DASH</a></div></div>
  210.  
  211. <div class="credit"><a href="http://lmthemes.tumblr.com"><img src="http://static.tumblr.com/bkd4m5b/kRDm3vhr3/lmthemeslogoxsml_copy.png"><br>
  212. CREDIT</a></div>
  213. <div class="mainhide"><img src="{PortraitURL-30}" class="mainicon" style="margin-bottom: 2px"><br>
  214. YOUR TITLE HERE</div>
  215.  
  216. </div></div></center>
  217.  
  218. </div>
  219. <div id="container"> <div class="iconsbox">
  220. {block:Following}
  221.  
  222. {block:Followed}<div class="iconsdesch"><div class="iconsdesc"><a href="{FollowedURL}"><img src="{FollowedPortraitURL-96}" title="{FollowedName}"></a><br><div class="icslnk"><a href="{FollowedURL}">{FollowedName}</a></div></div>
  223. <img src="{FollowedPortraitURL-40}"></div>{/block:Followed}
  224.  
  225. {/block:Following}
  226. </div> </div>
  227.  
  228.  
  229. </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!