API tools faq
paste
composeur

Network Theme #3

composeur
Dec 8th, 2012
278
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.17 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <!--
  5.  
  6.  
  7. Network Theme #2
  8.  
  9.  
  10. Created by:
  11. ╭━━┳╮╱╭┳━╮╭┳━━┳━━╮
  12. ┃━━┫┃╱┃┃╭╮╋┫╭━┫━━┫
  13. ┣━━┃╰━╯┃┃┃┃┃╰━╋━━┃
  14. ╰━━┻━╮╭┻╯╰┻┻━━┻━━╯
  15. ╱╱╱╭━╯┃
  16. ╱╱╱╰━━╯
  17.  
  18.  
  19. Please do not remove credit or redistribute. Feel free to edit. To add a background, you must do it manually. The best way is to go down to the 'body { ' and find where it says background-image: url (IMAGE URL).
  20.  
  21.  
  22. Scroll through the code for directions for ask box and adding links! Pages do not work unless they are customized; I will be making some soon xxx
  23.  
  24.  
  25. Everything else you can do by clicking options (:
  26.  
  27.  
  28. -->
  29.  
  30.  
  31. <!-- VARIABLES -->
  32. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  33.  
  34.  
  35. <meta name="color:description" content="#B4B4B4" />
  36. <meta name="color:link hover" content="#ffffff" />
  37. <meta name="color:shadow" content="#ffffff" />
  38. <meta name="color:background" content="#ffffff" />
  39. <meta name="color:link" content="#0f0f0f" />
  40. <meta name="color:hover" content="#aeafd1" />
  41.  
  42.  
  43.  
  44.  
  45.  
  46. <meta name="if:repeat background" content "">
  47. <meta name="if:Header Image" content="0"/>
  48.  
  49. <meta name="font:body" content "">
  50.  
  51. <meta name="image:Header" content="0"/>
  52.  
  53.  
  54. <link href='http://fonts.googleapis.com/css?family=Londrina+Sketch' rel='stylesheet' type='text/css'>
  55.  
  56.  
  57.  
  58.  
  59. <style type="text/css">
  60.  
  61.  
  62.  
  63.  
  64. body {background:{color:background}; padding:20px; font-family:{font:body};
  65.  
  66. font-size:{text:font size}; text-align:justify; color:{color:title};
  67. background-image: url(image url here);
  68.  
  69. background-position: bottom left ;
  70.  
  71. background-attachment: fixed;
  72.  
  73. background-repeat: {block:ifrepeatbackground}repeat;{/block:ifrepeatbackground} {block:ifnotrepeatbackground}no-repeat;{block:ifnotrepeatbackground}
  74.  
  75. }
  76.  
  77.  
  78.  
  79. a {text-decoration:none; color:{color:link}; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
  80. a:hover {color:{color:link hover};}
  81.  
  82.  
  83.  
  84.  
  85.  
  86.  
  87. mains {color:{color:link};{block:ifdefaultfont}font-family: 'Life Savers', cursive;{/block:ifdefaultfont} {block:ifnotdefaultfont}font-family:{font:body};{block:ifnotdefaultfont} font-size:55px; line-height:17px; letter-spacing:1px; font-weight:normal; text-transform:lowercase; margin-top:400px; padding:2px; text-align:center; font-style:none; text-shadow:0px 1px 12px {color:shadow}
  88. }
  89.  
  90.  
  91. menu{color:{color:description}; font-family:{font:body}; font-size:11px; line-height:13px; letter-spacing:0px; font-weight:normal; margin-top:-10px; padding:0px; text-align:left;}
  92.  
  93. iframe#tumblr_controls {
  94. top: 0% !important;
  95. right:0% !important;
  96. position: fixed !important;}
  97.  
  98.  
  99. .spotlightmenu{
  100. width: 100%;
  101. overflow:hidden;
  102. }
  103.  
  104. .spotlightmenu ul{
  105. margin: 0;
  106. padding: 0;
  107. font: bold 14px {font:body}; /* font style and size */
  108. list-style-type: none;
  109. text-align: center; /* "left", "center", or "right" align menu */
  110. }
  111.  
  112. .spotlightmenu li{
  113. display: inline-block;
  114. position:relative;
  115. padding: 5px;
  116. margin: 0;
  117. margin-right: 5px; /* right margin between menu items */
  118. }
  119.  
  120.  
  121. .spotlightmenu li a{
  122. display:inline-block;
  123. padding: 5px;
  124. min-width:50px; /* horizontal diameter of spotlight */
  125. height:50px; /* vertical diameter of spotlight */
  126. text-decoration: none;
  127. color: black;
  128. margin: 0 auto;
  129. overflow:hidden;
  130. -moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
  131. -webkit-transition: all 0.3s ease-in-out;
  132. -o-transition: all 0.3s ease-in-out;
  133. -moz-transition: all 0.3s ease-in-out;
  134. -ms-transition: all 0.3s ease-in-out;
  135. transition: all 0.3s ease-in-out;
  136. }
  137.  
  138. .spotlightmenu li:hover a{
  139. color: white;
  140. background: {color:hover};
  141. -webkit-border-radius: 50%; /* large radius to create circular borders */
  142. -moz-border-radius: 50%;
  143. border-radius: 50%;
  144. }
  145.  
  146. .spotlightmenu li a span{
  147. position:relative;
  148. top:35%; /* move text down so it appears centered within menu item */
  149. }
  150.  
  151.  
  152.  
  153. /*made by sppice, tutorial at html-tutorials.tumblr.com*/
  154.  
  155. #oneout {
  156. -moz-box-shadow: 0px 0px 0px 0px ;
  157. -webkit-box-shadow: 0px 0px 0px 0px ;
  158. box-shadow: 0px 0px 0px 0px ;
  159.  
  160.  
  161. -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='')";
  162. filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='');
  163.  
  164.  
  165. z-index:1000;
  166. position: fixed;
  167. top: 64px;
  168. left: 1px;
  169. width: 18px;
  170. padding: 40px 0;
  171. text-align: center;
  172.  
  173. -webkit-transition-duration: 0.3s;
  174. -moz-transition-duration: 0.3s;
  175. -o-transition-duration: 0.3s;
  176. transition-duration: 0.3s;
  177. -webkit-border-radius: 0 5px 5px 0;
  178. -moz-border-radius: 0 5px 5px 0;
  179. border-radius: 0 5px 5px 0;}
  180.  
  181.  
  182.  
  183.  
  184. .onetitle {
  185. display: block;
  186. writing-mode: lr-tb;
  187. -webkit-transform: rotate(-90deg);
  188. -moz-transform: rotate(-90deg);
  189. -ms-transform: rotate(-90deg);
  190. -o-transform: rotate(-90deg);
  191. transform: rotate(-90deg);
  192. position: absolute;
  193. left: -11px;
  194. top: 3px;
  195. font-family:Lucida Sans;
  196. font-size: 16px;
  197. font-weight: normal;
  198. text-transform: uppercase;
  199. letter-spacing: -1px;}
  200.  
  201. .popup_block{
  202. display: none;
  203. background: #fcfbf8;
  204. padding: 10px;
  205. font-family: arial;
  206. border: 3px solid #f2e7e2;
  207. float: left;
  208. font-size: 10px;
  209. position: fixed;
  210. top: 50%; left: 50%;
  211. z-index: 1;
  212. -webkit-border-radius: 10px;
  213. -moz-border-radius: 10px;
  214. border-radius: 10px;
  215. }
  216. img.btn_close {
  217. float: right;
  218. margin: -5px -5px 0 0;
  219. }
  220. *html .popup_block {
  221. position: absolute;
  222. }
  223.  
  224. </style>
  225.  
  226.  
  227.  
  228.  
  229.  
  230. <meta http-equiv="x-dns-prefetch-control" content="off"/></head>
  231.  
  232.  
  233.  
  234. <body>
  235.  
  236. <script type="text/javascript"
  237.  
  238. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  239.  
  240. <script>
  241.  
  242. $(document).ready(function() {
  243.  
  244. //
  245.  
  246. $('a.poplight[href^=#]').click(function() {
  247.  
  248. var popID = $(this).attr('rel'); //Get Popup Name
  249.  
  250. var popURL = $(this).attr('href'); //Get Popup href to define size
  251.  
  252. var query= popURL.split('?');
  253.  
  254. var dim= query[1].split('&');
  255.  
  256. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  257.  
  258. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://i52.tinypic.com/2lco6ip.png" class="btn_close" title="Close it" alt="Close" /></a>');
  259.  
  260. var popMargTop = ($('#' + popID).height() + 80) / 2;
  261.  
  262. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  263.  
  264. //Apply Margin to Popup
  265.  
  266. $('#' + popID).css({
  267.  
  268. 'margin-top' : -popMargTop,
  269.  
  270. 'margin-left' : -popMargLeft
  271.  
  272. });
  273.  
  274. $('body').append('<div id="fade"></div>');
  275.  
  276. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  277.  
  278. return false;
  279.  
  280. });
  281.  
  282. $('a.close, #fade').live('click', function() {
  283.  
  284. $('#fade , .popup_block').fadeOut(function() {
  285.  
  286. $('#fade, a.close').remove(); //fade them both out
  287.  
  288. });
  289.  
  290. return false;
  291.  
  292. });
  293.  
  294. });
  295.  
  296. </script>
  297. <body>
  298.  
  299.  
  300.  
  301.  
  302. <mains><Br><br><br><br>
  303. <center>{block:IfNotHeaderImage}<a href="">{title}</a></div>{/block:IfNotHeaderImage}{block:IfHeaderImage}<img src="{image:Header}" width="200">{/block:IfHeaderImage}</center></a>
  304.  
  305.  
  306.  
  307. </mains>
  308. <menu> <center>
  309. {description} <br>
  310. <a href="ownerurl">owner</a> / <a href="external link">extra url</a> / <a href="http://synics.tumblr.com">credit</a>
  311. <Br>
  312.  
  313.  
  314. <div class="spotlightmenu">
  315. <ul>
  316.  
  317.  
  318.  
  319. <Br>
  320. <br>
  321. <li><a href="LINK 1"><span>Link 1</span></a></li>
  322. <li><a href="LINK 2"><span>Link 2</span></a></li>
  323. <li><a href="LINK 3"><span>Link 3</span></a></li>
  324. <li><a href="LINK 4"><span>Link 4</span></a></li>
  325. <br>
  326. <li><a href="LINK 5"><span>Link 5</span></a></li>
  327. <li><a href="LINK 6"><span>Link 6</span></a></li>
  328. <li><a href="LINK 7"><span>Link 7</span></a></li>
  329. <li><a href="LINK 8"><span>Link 8</span></a></li>
  330. </ul>
  331.  
  332. <ul>
  333. <a href="#?w=500" rel="02" class="poplight"><span>Apply to this Network!</span></a></li>
  334.  
  335.  
  336. </div>
  337.  
  338. <!-- to add another line of links, just copy and paste, or ask me for theme help @ synics.tumblr.com/ask - you can edit how many links are in a line -->
  339.  
  340.  
  341. </menu>
  342. </body>
  343.  
  344. <div id="02" class="popup_block">
  345. <Center><iframe frameborder="0" scrolling="no" width="100%" height="150" src="http://www.tumblr.com/ask_form/URL.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
  346. </center></div>
  347. </div></div></div></div></div></div></div></div></div></div>
  348.  
  349. </div>
  350.  
  351.  
  352.  
  353. <!-- DO NOT REMOVE CREDIT-->
  354. <div style="position:fixed; bottom:1px; right:1px; opacity: 0.9"><a href="http://synics.tumblr.com" title="synics">credit</a></div>
  355. </body>
  356.  
  357. <!-- HERE IS THE ASK BOX, DO NOT REMOVE, AND ADD YOUR URL WHERE IT SAYS TO;-->
  358.  
  359. <div id="02" class="popup_block">
  360. <Center><iframe frameborder="0" scrolling="no" width="100%" height="150" src="http://www.tumblr.com/ask_form/YOUR URL HERE.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
  361. </center></div>
  362. </div></div></div></div></div></div></div></div></div></div>
  363. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!