API tools faq
paste
Advertisement
inspiradora-themes

THEME 1

inspiradora-themes
Oct 24th, 2014
127
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.40 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Theme #14 Base Code by Kaylie (@deanandhispie)
  4.  
  5. Hey, so I am going to go through this step by step with you. You can use this without crediting me, or you can use it as a base. Edit as much as you want.
  6.  
  7. If you would credit me I would love that, or even tag me in your post so I can see what lovely themes you made.
  8.  
  9.   Thanks and enjoy the theme!
  10.  
  11. -->
  12.  
  13.  <!-- So this right here is the really imprtant stuff, I would advise against changing nothing. -->
  14.  
  15.  <script>
  16. var mensagem="Não copie, reblogue!";
  17. function bloqueio()
  18. {alert(mensagem);}
  19. document.onkeydown=bloqueio;
  20. var mensagem="Todos os direitos reservados.";
  21. function bloqueio()
  22. {alert(mensagem);}
  23. document.onkeydown=bloqueio;
  24. </script>
  25.  
  26.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  27.  
  28.  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  29. <head>
  30. <title>{Title}</title>
  31. <link rel="shortcut icon" href="{Favicon}">
  32.  
  33. <!-- This is the thing that makes the description there. -->
  34.  
  35. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  36. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  37.  
  38.   <!--Default Variables, these are split up into three main divisions: color, image, and text. These are the buttons that you have when it says appearance on the customizations. The content="#something" is what the default color for that is.-->
  39.  
  40.     <meta name="color:bg" content="#FFFFFF">
  41.     <meta name="color:border" content="#e2e1e1">
  42.     <meta name="color:infobg" content="#F9F9F9">
  43.     <meta name="color:links hover" content="#f7f5f5">
  44.     <meta name="color:links" content="#c2c2c2">
  45.     <meta name="color:title" content="#f7f5f5">
  46.     <meta name="color:scrollbar" content="#dddada">
  47.     <meta name="color:scrollbar bg" content="#f7f5f5">
  48.     <meta name="color:tags" content="#d3d0d0">
  49.     <meta name="color:text" content="#c0bfbf">
  50.    
  51.     <meta name="image:sidebar" content=""/>
  52.     <!-- This is where you name the buttons for what you want the links to be called.-->
  53.  
  54.     <meta name="text:linkA" content="">
  55.     <meta name="text:linkA url" content="/">
  56.     <meta name="text:linkB" content="">
  57.     <meta name="text:linkB url" content="/">
  58.    
  59.  
  60.  
  61.  <!-- This is the thing that makes the theme, Without this, your theme is nothing.-->
  62.  
  63. <style type="text/css">
  64.    
  65.  /*This is just a normal scrollbar code. It makes the scrollbar change to a cool one. Where it says , this is where you put what color you want or add it to the meta names. If you want to change the width, change where it says 10px.*/
  66.  
  67. ::-webkit-scrollbar {background-color:{color:scrollbar bg}; height:8px; width:5px}
  68. ::-webkit-scrollbar-thumb:vertical {background-color:{color:scrollbar}; height:50px}
  69. ::-webkit-scrollbar-thumb:horizontal {background-color:{color:scrollbar}; height:10px!important}
  70.  
  71. /*Here is a font code, you can upload as many as you want. Just use what word is in the quotation marks to say it.*/
  72. @font-face { font-family: "masexy"; src: url('http://static.tumblr.com/q54tzar/4Ugm21ggi/ma_sexy_1_.ttf'); }
  73.  
  74.                /*General things like links and stuff.*/
  75.  
  76. /*This is the basic start. What you put here is what everything on your entire theme will be as a default*/
  77.  
  78. body {
  79.     background:{color:bg}; /*You have to make a meta name, or replace this with a #color. This is where you change the entire theme's background.*/
  80.     color:{color:text};  /*Again, this is where the color goes.*/
  81.     /
  82. }
  83.  
  84.  /* So if you want to change the font, or size on anything, you can do that. A means links.*/
  85.  
  86. a {      
  87.     color:{color:links};
  88.     text-decoration:none /* This is there so the links don't have an underline under them */
  89. }
  90.  
  91. /* This is what appears when you hover over a link. Play around with it. Maybe change the font size or font.*/
  92.  
  93. a:hover {
  94.     opacity:2;    /* This is how clear something is. 0 means it is transparent, 1 is opaque. */
  95.     font-family:cambria; /* Now the font changes to Times New Roman when you hover on a link*/
  96.     color:{color:links hover}; /* Again, this is the color*/
  97.     letter-style:bold} /* Now when you hover, the text is italic. You can change it to say bold, too. */
  98.  
  99.  img {
  100.     border:none;
  101. }
  102.  
  103.  
  104. h1 {
  105. font-family:calibri;
  106. font-weight:normal;
  107. font-size:10px;
  108. text-align:center;
  109. font-style:normal;
  110. line-height:80%;
  111. letter-spacing:1px;
  112. text-transform:uppercase;
  113. color:{color:text};
  114. }
  115.  
  116.  
  117. blockquote {
  118. font-family: cambria;
  119. border-left:1px solid {color:text};
  120. padding-left:5px;
  121. margin:5px;
  122. }
  123.    
  124.     #theme {
  125.     background-color:{color:bg};
  126.     width:700px;
  127.     margin: 0 auto -12px auto;
  128.     text-align: center;
  129.     }
  130.  
  131.  
  132. h2 {
  133. font-family:cambria;
  134. font-size:15px;
  135. text-align:center;
  136.  
  137. color:{color:text};
  138. font-weight:normal;
  139. padding:5px;
  140. padding-bottom:2px;
  141. }
  142.  
  143.  
  144.    
  145.           /*Here is all the sidebar and description stuff*/
  146.    
  147.     #sidebar {
  148.     color:{color:text};
  149.     position:fixed;    /*Keep this here!*/
  150.     width:200px;
  151.     height:auto;       /*Keep it here!*/
  152.     margin-top:200px;
  153.     margin-left:-150px;
  154.     text-align:center;
  155.     }
  156.    
  157. /* Here is the sidebar image*/
  158.    
  159.     #sidebar img {
  160.     width:auto;          /* This is how big the sidebar image is.*/
  161.     height:200px;
  162.     margin-left:130px;
  163.     margin-top:-300px;
  164.     padding:3px;
  165.     border: 1px solid {color:border};  /*So yeah, just change the px if you want the border bigger, change solid to dashed or dotted. */
  166.     position:fixed;
  167.     }
  168.    
  169.    
  170.    
  171. /* --- EDIT SIDEBAR LINKS HERE ---*/
  172.  
  173.    
  174.    .links {
  175.     position:fixed; /* Keep this!!*/
  176.     margin-top:-125px;
  177.     margin-left:55px;
  178.     width:200px;
  179.     padding: 8px;
  180.     word-spacing:2px;   /* How much you want the words to be spaced*/
  181.     text-align:center;
  182.     text-transform:uppercase;  /* This makes the text automatically uppercase or lowercase */;
  183.     color:{color:links};
  184. }
  185.  
  186. .links a {
  187.     font-size: 10px;
  188.     color:{color:links};
  189. }
  190.  
  191. .links a:hover {
  192.    color:{color:links hover};
  193.    letter-spacing:1px;   /* When you hover, the letters will be spaced. */
  194. }  
  195.    
  196. /* --- EDIT DESCRIPTION HERE ---*/
  197.    
  198.     .description {
  199.     margin-top:115px;
  200.     margin-left:82px;
  201.     text-align:justify;
  202.     font-size:10px;
  203.     width:165px;
  204.     color:{color:text};
  205.     letter-spacing:0.65px;
  206.     line-height:120%;
  207.     }
  208.    
  209.     .description a {
  210.     color:{color:text};
  211.     }
  212.    
  213.  
  214. /* --- EDIT POST ENTRIES HERE ---*/
  215.    
  216.     #entries {
  217.     float:left;
  218.     margin-left:150px;
  219.     margin-top:40px;
  220.     text-align:justify;
  221.     background-color:{color:bg};
  222.     color:{color:text};
  223.     margin-bottom: 30px;
  224.     }
  225.    
  226. /* --- EDIT POSTS HERE ---*/
  227.      
  228.      
  229.     #posts {
  230.     width:500px;
  231.     margin-top:20px;
  232.     text-align:justify;
  233.     font-size:11px;
  234.     line-height:50%;
  235.     letter-spacing:0x;
  236.     color:{color:text};
  237.     padding:5px;
  238.     }
  239.  
  240.     .caption {
  241.     width:500px;
  242.     text-align:justify;
  243.     line-height:120%;
  244.     }
  245.    
  246. /* --- EDIT ASKS/ ANSWERS HERE ---*/
  247.    
  248.    
  249.     #ask {
  250.     background-color:{color:infobg};
  251.     text-align:justify;
  252.     line-height:160%;
  253.     color:{color:text};
  254.     padding:5px;
  255.     padding-bottom:10px;
  256.     padding-top:3px;
  257.     }
  258.    
  259.    
  260.     #asker img {
  261.     margin-left:-2px;
  262.     margin-bottom:-15px;
  263.     padding:3px;
  264.     padding-bottom:5px;
  265.     }
  266.    
  267.     #ans {
  268.     text-align:left;
  269.     padding:0px;
  270.     color:{color:text};
  271.     }
  272.    
  273. /* --- EDIT AUDIO STUFF HERE ---*/
  274.     .playerbuttonbg {
  275.     position: absolute;
  276.     left: 20px;
  277.     top: 20px;
  278.     width: 19px;
  279.     height: 19px;
  280.     background-color: #ffffff;
  281.     padding: 10px;
  282.     -webkit-border-radius: 40px;
  283.     -moz-border-radius: 40px;
  284.     border-radius: 40px;
  285.     opacity: .4;
  286.     filter: alpha(opacity=40);
  287.     opacity: 0.4;
  288.     -khtml-opacity: 0.4;
  289.            transition: opacity .7s ease-in-out;
  290.     -moz-transition: opacity .7s ease-in-out;
  291.     -webkit-transition: opacity .7s ease-in-out;
  292.     }
  293.            
  294.     .playerbuttonbg:hover {
  295.     opacity: 1;
  296.     filter: alpha(opacity=100);
  297.     -moz-opacity: 1;
  298.     -khtml-opacity: 1;
  299.     }
  300.        
  301.     .newplayerbutton {
  302.     position: relative;
  303.     width: 19px;
  304.     height: 19px;
  305.     overflow: hidden;
  306.     }
  307.            
  308.     .playerbuttonhug {
  309.     position: absolute;
  310.     top: -18px;
  311.     left: -7px;
  312.     }
  313.        
  314.     .tumblr_audio_player {
  315.     height: 90px;
  316.     width: 270px;
  317.     -moz-transform: scale(0.60, 0.60);
  318.     -webkit-transform: scale(0.60, 0.60);
  319.     -o-transform: scale(0.60, 0.60);
  320.     -ms-transform: scale(0.60, 0.60);
  321.     transform: scale(0.60, 0.60);
  322.     -moz-transform-origin: top left;
  323.     -webkit-transform-origin: top left;
  324.     -o-transform-origin: top left;
  325.     -ms-transform-origin: top left;
  326.     transform-origin: top left;
  327.     }
  328.            
  329.     .audioimgwrapper {
  330.     position: absolute;
  331.     left: 0px;
  332.     top: 0px;
  333.     -webkit-border-radius: 40px;
  334.     -moz-border-radius: 40px;
  335.     border-radius: 40px;
  336.     overflow: hidden;
  337.     width: 79px;
  338.     height: 79px;
  339.     }
  340.            
  341.     .audioimgwrapper img {
  342.     width: 100%;
  343.     height: auto;
  344.     -webkit-border-radius: 40px;
  345.     -moz-border-radius: 40px;
  346.     border-radius: 40px;                
  347.     }
  348.            
  349.     .trackdetails {
  350.     width: auto;
  351.     display:inline-block;
  352.     margin-left: 90px;
  353.     min-height: 85px;
  354.     }
  355.            
  356.     .audiowrapper {
  357.     position: relative;
  358.     display:inline-block;
  359.     }
  360.    
  361.    
  362. /* --- EDIT POST INFO HERE ---*/
  363.  
  364.     #postinfo {
  365.    
  366.     padding:2px;
  367.     margin-top:12px;
  368.     font-size:10px;
  369.     color:{color:link};
  370.     text-transform:lowercase;
  371.     font-style:italic;
  372.     letter-spacing:1px;
  373.     text-align:left;
  374.     -moz-transition-duration:0.5s;
  375.     -webkit-transition-duration:0.5s;
  376.     -o-transition-duration:0.5s;
  377.     }
  378.  
  379.     #postinfo a {
  380.     color:{color:link};
  381.     font-style:italic;
  382.     letter-spacing:1px;
  383.     }
  384.    
  385.     #postinfo a:hover {
  386.     color:{color:hover};
  387.     }
  388.    
  389.    
  390.    
  391. /* --- EDIT TAGS HERE ---*/
  392.        
  393.     .tags {
  394.     font-style:normal;
  395.     width:500px;
  396.     text-transform:uppercase;
  397.     font-style:normal;
  398.     color:{color:tags};
  399.     line-height:120%;
  400.     font-size:8px;
  401.     text-align:left;
  402.     padding:2px;
  403.     -moz-transition-duration:0.5s;
  404.     -webkit-transition-duration:0.5s;
  405.     -o-transition-duration:0.5s;
  406.     }
  407.    
  408.     .tags a {
  409.     color:{color:tags};
  410.     letter-spacing:0px;
  411.     padding:1px;
  412.     }
  413.    
  414.     .tags a:hover {
  415.     color:{color:link};
  416.     }
  417.    
  418. /* --- EDIT CHAT STUFF HERE ---*/
  419.    
  420.     ul.chat, .chat ol, .chat li {
  421.     list-style:none;
  422.     margin:0px;
  423.     padding:3px;
  424.     }
  425.    
  426.     .label {
  427.     text-decoration:underline;
  428.     font-weight:700;
  429.     margin-right:5px;
  430.     }
  431.    
  432. /* --- EDIT CREDIT HERE, you can change it to your blog if you want. ---*/
  433.    
  434.    
  435.  /*Don't touch this.. na na na na na na na na*/
  436.     {CustomCSS}
  437.    
  438. /*** Paginação by madlyluv.com ***/
  439. #paginacaoml {font-size: 10px; font-weight: bold; line-height: 21px; text-shadow: 0 1px 1px #fff;}
  440. #paginacaoml a {background: #fff; margin: 0 1px 0 0; padding: 2px 4px; color: #7b7a7a; text-decoration: none;}
  441. #paginacaoml a:hover {background: #e2e1e1; border: none;}
  442. #paginacaoml span.pagina_atual {background: #fff; margin: 0 1px 0 0; padding: 2px 4px; color: #7b7a7a; text-decoration: none;}
  443. #paginacaoml span.info {background: #fff; margin: 0 1px 0 0; padding: 2px 4px; color: #7b7a7a; text-decoration: none;}
  444.  
  445. img{-webkit-transition: all 0.8s linear;-moz-transition: all 0.8s linear;transition: all 0.8s linear}
  446.  
  447. img:hover{-webkit-filter: grayscale(100%);z-index: -99px;}
  448.  
  449.  
  450.  
  451.     </style>
  452.        <script language="javascript">
  453. var mensagem="Não copie, reblogue!";
  454. function clickIE() {if (document.all) {(mensagem);return false;}}
  455. function clickNS(e) {if
  456. (document.layers||(document.getElementById&&!document.all)) {
  457. if (e.which==2||e.which==3) {alert(mensagem);return false;}}}
  458. if (document.layers)
  459. {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
  460. else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
  461. document.oncontextmenu=new Function("return false")
  462. </script>
  463.     </head>
  464.    
  465.    
  466.  
  467. <body>
  468. <!--This is the stuff that makes the theme a theme. It is the thing that actually puts all the code there. If that makes sense? Sorry, I'm a pretty crappy explainer.-->
  469. <div id="theme">
  470. <div id="sidebar">
  471. <div id="sidebar">
  472. <img src="{image:sidebar}"></div>
  473. <div class="links">
  474. <a href="/">home</a>
  475. <a href="/ask">ask</a>
  476. {block:IfLinkA}
  477. <a href="{text:linkA url}">{text:linkA}</a>
  478. {/block:IfLinkA}
  479. {block:IfLinkB}
  480. <a href="{text:linkB url}">{text:linkB}</a>
  481. {/block:IfLinkB}
  482. </div>
  483. <div class="description">
  484. {Description}
  485. </div>
  486. <div id="paginacaoml"><span class="info" style="font-weight: normal;">  {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">&laquo;</a>{/block:PreviousPage}{/block:Pagination}
  487. {block:JumpPagination length="10"}
  488. {block:CurrentPage}<span class="pagina_atual">{PageNumber}</span>{/block:CurrentPage}
  489. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  490. {/block:JumpPagination}
  491. {block:Pagination}{block:NextPage}<a href="{NextPage}">&raquo;</a>{/block:NextPage}{/block:Pagination}
  492. </div>
  493. {block:Pagination}
  494. <div class="pagination">
  495. {block:PreviousPage}
  496. <a href="{PreviousPage}"></a>
  497. {/block:PreviousPage}
  498. {block:NextPage}
  499. <a href="{NextPage}"></a>
  500. {/block:NextPage}
  501. </div>
  502. {/block:Pagination}
  503. </div>
  504. <td style="text-align:right;">
  505.  
  506. <div id="entries">
  507.  
  508. {block:Posts}
  509.  
  510.  
  511.  
  512. <div id="posts">
  513.  
  514. {block:Text}{block:Title}<h2>{Title}</h2>{/block:Title}{Body}{/block:Text}
  515.  
  516. {block:Quote}<h2>“{Quote}”</h2><h1>{Source}</h1>{/block:Quote}
  517.  
  518. {block:Link}<a href="{URL}"><h2>{Name}</h2></a>
  519. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  520.  
  521. {block:Photo}<center><img src="{PhotoURL-500}"/></center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  522.  
  523. {block:Photoset}<center>{Photoset-500}</center>
  524. {block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  525.  
  526. {block:Chat}<ul class="chat">{block:Title}<h2>{Title}</h2>{/block:Title}{block:Lines}<li>{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>{/block:Chat}
  527.  
  528. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  529.  
  530. {block:Answer}<div id="ask"><div id="asker"><img src="{AskerPortraitURL-24}"> {Asker}asked: {Question}</div></div><div id="ans">{Answer}</div>{/block:answer}
  531.  
  532. {block:Audio}{block:AudioPlayer}
  533.         <div class="audiowrapper">
  534.         {block:AlbumArt}
  535.             <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  536.         {/block:AlbumArt}
  537.        
  538.         <div class="playerbuttonbg">
  539.             <div class="newplayerbutton">
  540.                 <div class="playerbuttonhug">
  541.            
  542.                     {AudioPlayerWhite}
  543.            
  544.                 </div>
  545.             </div>
  546.         </div>
  547.        
  548.         <div class="trackdetails">
  549.            
  550.                 {block:TrackName}{TrackName}{/block:TrackName}<br/>
  551.                 {block:Artist}Artist: {Artist}{/block:Artist}<br/>
  552.                 {block:Album}Album: {Album}{/block:Album}<br/>
  553.                 {PlayCountWithLabel}
  554.    
  555.         </div>
  556.         </div>
  557.         {/block:AudioPlayer}
  558.    
  559.         {block:Caption}{Caption}{/block:Caption}{/block:Audio}
  560.  
  561.  
  562. {block:Date} <div id="postinfo"> <a href="{ReblogURL}" target="_blank">reblog</a>  <a href="{Permalink}">{TimeAgo}</a>{block:NoteCount} with <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}{block:RebloggedFrom} via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
  563. {block:ContentSource}  from <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}</div>{/block:Date}
  564. {block:HasTags}
  565. <div class="tags">
  566. {block:Tags}<a href="{TagURL}">#&nbsp;{Tag}</a>{/block:Tags}</div>
  567. {/block:HasTags}
  568. <div class="note">
  569. {block:PostNotes}{PostNotes}{/block:PostNotes}
  570. </div>
  571. </div>
  572. {/block:Posts}
  573.  
  574.  
  575. </div>
  576.  {block:IfRolagemInfinita}<div class="autopagerize_page_element">
  577. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>{/block:IfRolagemInfinita}
  578. <div id="entry">
  579.  
  580. <div style="bottom:5px;left:10px;position:fixed;font-size:8px;"><a href="http://i-nspirador-a.tumblr.com/" title="theme por i-nspirador-a">CREDIT</a></div>
  581.  
  582. </div>
  583. </div>
  584. </div>
  585. </body>
  586. </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!