API tools faq
paste
darianella

"The Wild Ones" tumblr blogroll theme HTML code

darianella
Jan 3rd, 2013
3,262
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.93 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!--
  5.  
  6. Hello, dears! Well, I decided to dip my fingers a bit more into page making, so... here's my first blogroll theme! It was certainly a learning experience to create, and I had a lot of fun doing it. I really hope you guys like it as much as I do!
  7.  
  8. I tried my best to explain all of the customization details within the code, but, if you still have questions, please let me know! I'll try my best to help in any way I can. <3
  9.  
  10. Oh! Yep, and just remember that stealing isn't cool and that I love you.
  11.  
  12.    -Darian
  13.  
  14. -->
  15.  
  16.  
  17. <head><title>{Title}</title>
  18.  
  19. <link rel="shortcut icon" href="{favicon}">
  20.  
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22.  
  23. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  24.  
  25. <style type="text/css">
  26.  
  27. /*BASICS*/
  28.  
  29. ::-webkit-scrollbar {
  30.     width: 5px;
  31.     height: 5px;
  32.     background-color:#c7c7c7;
  33. }
  34.  
  35. ::-webkit-scrollbar-thumb {
  36.     background:#2a2a2a;
  37. }
  38.  
  39. iframe{
  40.     opacity: 0.9;
  41.     filter:alpha(opacity=90);
  42.     -moz-opacity: 0.9;
  43.     -khtml-opacity: 0.9;
  44. }
  45.  
  46. iframe#tumblr_controls {
  47.     right:3px !important;
  48.     position: fixed !important;
  49.     -webkit-transition: opacity 0.7s linear;
  50.     opacity: 0.2;
  51.     -webkit-transition: all 0.8s ease-out;
  52.     -moz-transition: all 0.8s ease-out;
  53.     transition: all 0.8s ease-out;
  54. }
  55.  
  56. iframe#tumblr_controls:hover{
  57.     -webkit-transition: opacity 0.7s linear;
  58.     opacity: 1;
  59.     -webkit-transition: all 0.4s ease-out;
  60.     -moz-transition: all 0.4s ease-out;
  61.     transition: all 0.4s ease-out;
  62. }
  63.  
  64. @font-face{
  65.             font-family: "eurof35";
  66.             src: url('http://fontsforweb.com/public/fonts/469/eurof35.eot');
  67.             src: local("eurofurence light"), url('http://fontsforweb.com/public/fonts/469/eurof35.ttf') format("truetype");
  68. }
  69.        
  70. .fontsforweb_fontid_469 {
  71.             font-family: "eurof35";
  72. }
  73.  
  74. @font-face {
  75.     font-family: "tinytots";
  76.     src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
  77. }
  78.  
  79. body{
  80.     margin:0px;
  81.     font-family: "tinytots";
  82.    
  83.     /*this color value deterimes the color of all of your regular text*/
  84.     color:gray;
  85.    
  86.     font-size:10px;
  87.     line-height:100%;
  88.    
  89.     /*change the link below to change your background image. be sure to keep the apostrophe quotes around the link, or it won't work!*/
  90.     background-image:url('https://lh6.googleusercontent.com/-rDr1AcUyq8I/UOYQ8bxGp6I/AAAAAAAADnU/wOfDyJZi4r4/s60/subtlenet2.png');
  91.    
  92.     background-attachment: fixed;
  93.     background-repeat: repeat;
  94.    
  95.     /*if you just want a plain color background, delete everything that starts with background- above and then put a color here. the image will override your color, so as long as you have an image there the color here won't show up.*/    
  96.     background-color: white;
  97. }
  98.  
  99. a{
  100.     text-decoration:none;
  101.     outline:none;
  102.     -moz-outline-style:none;
  103.     -webkit-transition: all 0.5s linear;
  104.     -moz-transition: all 0.5s linear;
  105.     -o-transition: all 0.5s linear;
  106. }
  107.  
  108.  
  109. img{
  110.     border:none;
  111. }
  112.  
  113. /*BAR AND TITLE*/
  114.  
  115. #bar{
  116.     position:fixed;
  117.     width:100%;
  118.     height:150px;
  119.     margin-top:400px;
  120.  
  121.     /*background color for the big horizontal bar is here. those six digits after the # determine the color. the first two are your red levels, the second are your green levels, and the third are your blue levels. f is the highest, and 0 is the lowest.*/
  122.     background-color:#2a2a2a;
  123.    
  124.     /*these control the color and height of the horizontal bar borders*/
  125.     border-top:4px solid #575757;
  126.     border-bottom:4px solid #575757;
  127. }
  128.  
  129. #title{
  130.     position:fixed;
  131.     margin-left:500px;
  132.     margin-top:30px;
  133.     width:490px;
  134.     height:30px;
  135.     text-align:center;
  136.     text-transform:lowercase;
  137.     font-family: "eurof35";
  138.     font-size:50px;
  139.    
  140.     /*this controls the text color of your title*/
  141.     color:#cecec1;
  142.    
  143.     /*this controls the colored 3D shadow on the title. right now, it's set to match the yellow and white of the side image. to change the colors, play around with the red, green, and blue value numbers, no more than 255. the fourth decimal number is the shadow opacity.*/
  144.     text-shadow:2px 0 0 rgba(255,255,255,0.3), -2px 0 0 rgba(227,214,76,0.3);
  145.     -webkit-transition: all 0.3s linear;
  146.     -moz-transition: all 0.3s linear;
  147.     -o-transition: all 0.3s linear;
  148.    
  149.     /*this is for the color, etc. values for the bar under the title*/
  150.     border-bottom:2px solid #000000;
  151. }
  152.  
  153. #title:hover{
  154.     text-shadow:none;
  155. }
  156.  
  157. /*NAVIGATION*/
  158.  
  159. #navigation{
  160.     position:fixed;
  161.     margin-left:500px;
  162.     width:490px;
  163.     height:10px;
  164.     margin-top:70px;
  165.     text-align:center;
  166. }
  167.  
  168. .nav{
  169.     display:inline-block;
  170.     padding-top:3px;
  171.     height:12px;
  172.     width:70px;
  173.     margin-left:5px;
  174.     margin-right:5px;
  175.     text-align:center;
  176.     opacity:0.9;
  177.     font-family: "tinytots";
  178.     font-size:8px;
  179.     text-transform:uppercase;
  180.    
  181.     /*this is the text color of your first three links*/
  182.     color:#313131;
  183.    
  184.     /*change the background color of your top three navigation links here*/
  185.     background-color:#edd64c;
  186.    
  187.     -webkit-transition: all 0.3s linear;
  188.     -moz-transition: all 0.3s linear;
  189.     -o-transition: all 0.3s linear;
  190. }
  191.  
  192. .nav:hover{
  193.     /*this is the hovered text color*/
  194.     color:#a3901a;
  195.    
  196.     /*this will change the hovered background of your first three links*/
  197.     background-color:#ffffff;
  198.    
  199.     width:60px;
  200. }
  201.  
  202. #custom{
  203.     position:fixed;
  204.     margin-left:500px;
  205.     width:490px;
  206.     height:10px;
  207.     margin-top:100px;
  208.     text-align:center;
  209. }
  210.  
  211. .custom{
  212.     display:inline-block;
  213.     padding-top:3px;
  214.     height:12px;
  215.     width:80px;
  216.     margin-left:5px;
  217.     margin-right:5px;
  218.     text-align:center;
  219.     opacity:0.9;
  220.     font-family: "tinytots";
  221.     font-size:8px;
  222.     text-transform:uppercase;
  223.    
  224.     /*this is the text color of your second four links*/
  225.     color:#bdbcb9;
  226.    
  227.     /*change the background color of your bottom four custom links here*/
  228.     background-color:#000000;
  229.    
  230.     -webkit-transition: all 0.3s linear;
  231.     -moz-transition: all 0.3s linear;
  232.     -o-transition: all 0.3s linear;
  233. }
  234.  
  235. .custom:hover{
  236.     /*this is the hovered text color*/
  237.     color:#313131;
  238.    
  239.     /*this will change the hovered background of your bottom links*/
  240.     background-color:#ffffff;
  241.    
  242.     width:90px;
  243. }
  244.    
  245.  
  246. /*BLOGROLL*/
  247.  
  248. #blogroll{
  249.     position:fixed;
  250.     margin-left:500px;
  251.     margin-top:50px;
  252.     padding-left:10px;
  253.     height:300px;
  254.     width:490px;
  255.     overflow:auto;
  256. }
  257.  
  258. .blogs{
  259.     width:48px;
  260.     height:48px;
  261.     border:7px solid transparent;
  262.     -webkit-transition: all 0.5s linear;
  263.     -moz-transition: all 0.5s linear;
  264.     -o-transition: all 0.5s linear;
  265.    
  266.     /*this makes your blogroll images monochrome*/
  267.   -webkit-filter: grayscale(100%);
  268.   -moz-filter: grayscale(100%);
  269.   -ms-filter: grayscale(100%);
  270.   -o-filter: grayscale(100%);
  271. }
  272.  
  273. .blogs:hover{
  274.   -webkit-filter: grayscale(0%);
  275.   -moz-filter: grayscale(0%);
  276.   -ms-filter: grayscale(0%);
  277.   -o-filter: grayscale(0%);
  278. }
  279.  
  280. #light {
  281.     opacity: 1;
  282.     -webkit-transition: all 0.5s linear;
  283.     -moz-transition: all 0.5s linear;
  284.     -o-transition: all 0.5s linear;
  285. }
  286.  
  287. #light:hover a {
  288.     opacity: .4;
  289. }
  290.  
  291. #light a {
  292.     opacity: .8;
  293.     -webkit-transition: all 0.4s ease-in-out;
  294.     -moz-transition: all 0.4s ease-in-out;
  295.     -o-transition: all 0.4s ease-in-out;
  296. }
  297.  
  298. #light a:hover {
  299.     opacity: 1;
  300. }
  301.  
  302.    
  303. /*SIDE RENDER IMAGE*/
  304.  
  305. #render{
  306.     position:fixed;
  307.     bottom:0;
  308.     margin-left:100px;
  309.     max-width:300px;
  310.     z-index:1;
  311. }
  312.  
  313. /*CREDIT*/
  314.  
  315.  
  316. #credit{
  317.     position:fixed;
  318.     bottom:10px;
  319.     right:10px;
  320.     opacity:0.5;
  321.     z-index:1;
  322.     -webkit-transition: all 0.3s linear;
  323.     -moz-transition: all 0.3s linear;
  324.     -o-transition: all 0.3s linear;
  325.     -ms-transition: all 0.3s linear;
  326. }
  327.  
  328. #credit:hover{
  329.     opacity:0.8;
  330. }
  331.  
  332. #credname{
  333.     position:fixed;
  334.     bottom:-20px;
  335.     width:40px;
  336.     right:3px;
  337.     height:20px;
  338.     opacity:0;
  339.     text-align:center;
  340.     font-size:8px;
  341.     padding-top:3px;
  342.     z-index:999;
  343.     background-color:#f09b4a;
  344.     border-top-right-radius:10px;
  345.     border-top-left-radius:10px;
  346.     -webkit-transition: all 0.3s linear;
  347.     -moz-transition: all 0.3s linear;
  348.     -o-transition: all 0.3s linear;
  349.     -ms-transition: all 0.3s linear;
  350. }
  351.  
  352. #credit:hover ~ #credname{
  353.     bottom:0;
  354.     opacity:0.8;
  355. }
  356.  
  357. #credname:hover{
  358.     bottom:0;
  359.     opacity:0.8;
  360. }
  361.  
  362. a #credname{
  363.     color:#000000;
  364. }
  365.    
  366.  
  367.  
  368. {CustomCSS}
  369.    
  370. body {cursor: url(http://www.dolliehost.com/dolliecrave/cursors/cursors-arrow/arrow38.gif), progress !important;}
  371.    
  372. a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress !important;}
  373.    
  374. </style></head><body>
  375.  
  376. <div id="bar">
  377.     <div id="title">
  378.     <!--this is where the title goes-->
  379.          the wild ones
  380.     </div>
  381.    
  382.     <div id="navigation">
  383.         <a href="/" class="nav">
  384.     <!--this is where the title for your home link goes-->
  385.             return
  386.         </a>
  387.         <a href="/ask" class="nav">
  388.     <!--this is where the title for your ask link goes-->
  389.             message
  390.         </a>
  391.         <a href="http://www.tumblr.com/dashboard" class="nav">
  392.     <!--this is where the title for your dashboard link goes-->
  393.             dashboard
  394.         </a>
  395.     </div>
  396.    
  397.     <div id="custom">
  398.         <a href="/" class="custom">
  399.     <!--this is where the title for your first link goes-->    
  400.             link 1
  401.         </a>
  402.         <a href="/" class="custom">
  403.     <!--this is where the title for your second link goes-->  
  404.             link 2
  405.         </a>
  406.         <a href="/" class="custom">
  407.     <!--this is where the title for your third link goes-->    
  408.             link 3
  409.         </a>
  410.         <a href="/" class="custom">
  411.     <!--this is where the title for your fourth link goes-->  
  412.             link 4
  413.         </a>
  414.     </div>
  415.    
  416. </div>
  417.  
  418.    
  419.  
  420. {block:Following}
  421.     <div id="blogroll">
  422.         <div id="light">
  423.         {block:Followed}
  424.                 <a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-48}" class="blogs"></a>
  425.         {/block:Followed}
  426.         </div>
  427.     </div>
  428. {/block:Following}
  429.  
  430.     <!--this is the place where your render image url goes-->
  431. <img src="https://lh5.googleusercontent.com/-8KMVNlGlhj0/UOYYrINuseI/AAAAAAAADoA/MrcW8d8lAxI/s720/Durarara_Kida_Masaomi_Jaune_-_By_Sacha-Chan.png" id="render">
  432.  
  433.     <!-- this is my cute little fox pixel!<3 -->
  434. <a href="http://redfox-themes.tumblr.com"><img src="https://lh5.googleusercontent.com/-jDb8l0m6g2s/ULvHPyFukjI/AAAAAAAACoA/FRBmvQsxRkc/s22/fox.gif" id="credit"><div id="credname">redfox themes</div></a>
  435.  
  436. </body></html>
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!