API tools faq
paste
Advertisement
missdreamer

Facebook (theme)

missdreamer
Apr 2nd, 2015
1,080
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.83 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------
  6. -------------------------------------------------------------------
  7.  
  8.        THEME   BY  MISSNK    /    NICKYSTASH.TUMBLR.COM
  9.       please do not remove credit, reblog or use as base
  10.  
  11. -------------------------------------------------------------------
  12. ------------------------------------------------------------------>
  13.  
  14.     <meta name="text:Title I" content="General">
  15.     <meta name="text:Title II" content="Pages">
  16.     <meta name="text:Title III" content="Blogroll">
  17.     <meta name="color:Blockquote" content="#9197a3">
  18.     <meta name="color:Accent Color" content="#43609c">
  19.     <meta name="color:Accent Color Dark" content="#3a548b">
  20.     <meta name="color:Accent Color Light" content="#f6f7f8">
  21.    
  22.     <meta name="text:Name" content="Name"/>
  23.     <meta name="text:Extra Info" content="age; gender; occupation"/>
  24.    
  25.     <meta name="text:Extra Links" content=""/>
  26.     <meta name="text:Tagbox" content=""/>
  27.          
  28.     <title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  29.     {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  30.     <link rel="shortcut icon" href="{Favicon}" />
  31.          
  32.    <link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
  33.     <link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'>
  34.  
  35. <!----------------------------------------------------------------
  36. ------------------------------------------------------------------>
  37.          
  38. <!-- STYLESHEET -->
  39. <style type="text/css">
  40. /* MAIN */
  41. body {
  42.     background-color: #e9eaed;
  43.     font-family: Arial;
  44.     font-size: 13px;
  45.     background-attachment: fixed;
  46.     margin: 0;
  47.     word-wrap: break-word;
  48.     color: #000;
  49. }
  50.          
  51. a {
  52.     color: {color:Accent Color};
  53.     text-decoration: none;
  54.     -webkit-transition: 300ms ease-in-out;
  55.     -moz-transition: 300ms ease-in-out;
  56.     -o-transition: 300ms ease-in-out;
  57.     transition: 300ms ease-in-out;
  58. }
  59.          
  60. img {
  61.     border: 0;
  62.     max-width: 100%;
  63. }
  64.  
  65. h1 {
  66.     font-size: 13px;
  67.     text-transform: uppercase;
  68.     color: #9197a3;
  69.     display: block;
  70.     margin-bottom: 0px;
  71. }
  72.  
  73. /*****************************************************************
  74. ******************************************************************/
  75.  
  76. #wrap {
  77.     width: 1050px;
  78.     margin: 0 auto;
  79. }
  80.  
  81. #wrap-top {
  82.     width: 1050px;
  83.     margin: 0 auto;
  84. }
  85.  
  86. /* TOPBAR */
  87. #topbar {
  88.     position: fixed;
  89.     top: 0;
  90.     height: 45px;
  91.     width: 100%;
  92.     background-color: {color:Accent Color};
  93.     border-bottom: 1px solid {color:Accent Color Dark};
  94.     line-height: 45px;
  95. }
  96.  
  97. #topbar img {
  98.     vertical-align: middle;
  99.     border-radius: 5px;
  100. }
  101.  
  102. #topbar a {
  103.     font-weight: bold;
  104.     color: #fff;
  105.     padding: 5px 10px;
  106.     background-color: {color:Accent Color};
  107.     border-radius: 5px;
  108. }
  109.  
  110. #topbar a:hover {
  111.     background-color: {color:Accent Color Dark};
  112. }
  113.  
  114. #topbar .borders {
  115.     border-left: 1px solid {color:Accent Color Dark};
  116.     border-right: 1px solid {color:Accent Color Dark};
  117. }
  118.  
  119. /* SEARCH */
  120. .sfm input {
  121.     background-color: #fff;
  122.     border: 0px;
  123.     text-transform: uppercase;
  124.     margin: 0px -4px 0px 0px;
  125.     color: #000;
  126.     letter-spacing: 1px;
  127.     padding: 4px 8px;
  128.     height: 16px;
  129.     vertical-align: middle;
  130.     width: 375px;
  131.     border-radius: 5px 0 0 5px;
  132. }
  133.  
  134. .sfm {
  135.     display: inline-block;
  136. }
  137.  
  138. #sb {
  139.     height: 24px;
  140.     width: 25px;
  141.     padding: 0px;
  142.     border-radius: 0 5px 5px 0;
  143. }
  144.  
  145. /*****************************************************************
  146. ******************************************************************/
  147.  
  148. /* SIDEBAR LEFT */
  149. #sideleft {
  150.     width: 175px;
  151.     margin-top: 60px;
  152.     background-color: #e9eaed;
  153.     display: inline-block;
  154.     vertical-align: top;
  155. }
  156.  
  157. #sideleft #info {
  158.     height: 40px;
  159.     overflow: hidden;
  160.     line-height: 13px;
  161.     width: 175px;
  162.     margin-bottom: 10px;
  163.     text-align: left;
  164.     font-size: 10px;
  165.     display: table-cell;
  166.     vertical-align: top;
  167. }
  168.  
  169. #sideleft #info b {
  170.     font-size: 13px;
  171. }
  172.  
  173. #sideleft #info img {
  174.     float: left;
  175.     margin-right: 5px;
  176. }
  177.  
  178. #sideleft a {
  179.     font-size: 12px;
  180.     color: #000;
  181.     display: block;
  182.     background-color: #e9eaed;
  183.     padding: 2px 0 2px 20px;
  184. }
  185.  
  186. #sideleft a:hover {
  187.     background-color: #dcdee3;
  188. }
  189.  
  190. #sideleft .blogroll {
  191.     max-height: 175px; /* max-height blogroll */
  192.     overflow: auto;
  193. }
  194.  
  195. #sideleft .blogroll .follow {
  196.     padding: 0;
  197.     display: inline;
  198.     opacity: 0.6;
  199. }
  200.  
  201. #sideleft .blogroll .follow:hover {
  202.     background-color: #e9eaed;
  203.     opacity: 1;
  204. }
  205.  
  206. /*****************************************************************
  207. ******************************************************************/
  208.  
  209. /* SIDEBAR RIGHT */
  210.  
  211. #sideright {
  212.     position: fixed;
  213.     margin-top: 60px;
  214.     margin-left: 560px;
  215.     display: inline-block;
  216. }
  217.  
  218. #sideright #desc {
  219.     width: 280px;
  220.     background-color: #fff;
  221.     border: 1px solid #d0d1d5;
  222.     border-radius: 5px;
  223.     padding: 10px;
  224. }
  225.  
  226. #sideright #desc a {
  227.     font-weight: bold;
  228.     padding: 0 3px;
  229. }
  230.  
  231. #sideright #desc a:hover {
  232.     background-color: {color:Accent Color Light};
  233. }
  234.  
  235. #sideright #credit {
  236.     padding: 5px 10px;
  237.     color: #898f9c;
  238.     font-size: 10px;
  239.     text-align: center;
  240. }
  241.  
  242. #sideright #credit a {
  243.     color: #898f9c;
  244. }
  245.      
  246. #sideright #credit a:hover {
  247.     text-decoration: underline;
  248. }
  249.  
  250. #sideright .tagbox {
  251.     width: 280px;
  252.     background-color: #fff;
  253.     border: 1px solid #d0d1d5;
  254.     border-radius: 5px;
  255.     padding: 10px;  
  256.     margin-top: 15px;
  257. }
  258.  
  259. #sideright .tagbox h1 {
  260.     margin-top: 0;
  261. }
  262.  
  263. #sideright .tagbox a {
  264.     padding: 1px 4px;
  265. }
  266.  
  267. #sideright .tagbox a:hover {
  268.     background-color: {color:Accent Color Light};
  269. }
  270.          
  271. /*****************************************************************
  272. ******************************************************************/
  273.          
  274. /* MAIN CONTENT */
  275. #content {
  276.     margin: 60px 0;
  277.     width: 560px;
  278.     height: 200px;
  279.     display: inline-block;
  280. }
  281.          
  282. #content blockquote {
  283.     border-left: solid 2px {color:Blockquote};
  284.     margin-left: 20px;
  285.     padding-left: 10px;
  286.     color: {color:Blockquote};
  287.     margin-right: 15px;
  288. }
  289.          
  290. #content .posts {
  291.     background-color: {color:Post Background};
  292.     width: 500px;
  293.     margin: 0 auto 15px;
  294.     background-color: #fff;
  295.     border: 1px solid #d0d1d5;
  296.     border-radius: 5px;
  297.     padding: 10px;
  298. }
  299.  
  300. #content .posts a:hover {
  301.     text-decoration: underline;
  302. }
  303.          
  304. #content .posts .title {
  305.     font-size: 16px;
  306.     color: {color:Accent Color};
  307.     font-weight: bold;
  308.  
  309. }
  310.          
  311. /*****************************************************************
  312. ******************************************************************/
  313.        
  314. /* QUOTES */
  315. #content .posts .quote {
  316.     font-size: 18px;
  317.     line-height: 27px;
  318.     text-align: center;
  319.     margin-bottom: 5px;
  320. }
  321.          
  322. #content .posts .poster .source {
  323.     color: #9197a3;
  324.     display: inline;
  325. }
  326.  
  327. #content .posts .poster .source p {
  328.     display: none;
  329. }
  330.  
  331. #content .posts .poster .source a {
  332.     color: {color:Accent Color};
  333. }
  334.          
  335. /* QUESTIONS */
  336. #content .posts .question {
  337.     background-color: #f6f7f8;
  338.     border: 1px solid #d0d1d5;
  339.     width: 500px;
  340.     padding: 10px;
  341.     margin: 0 0 15px -11px;
  342. }
  343.  
  344. #content .posts .question img {
  345.     border-right: 10px solid #f6f7f8;
  346.     float: left;
  347. }
  348.  
  349. #content .posts .question .asker {
  350.     min-height: 40px;
  351.     margin-bottom: 10px;
  352. }
  353.  
  354. #content .posts .question .answer {
  355.     min-height: 40px;
  356. }
  357.  
  358. #content .posts .question .answer p {
  359.     display: inline;
  360. }
  361.  
  362. /* CHAT */
  363. #content .posts .chat {
  364.     background-color: #f6f7f8;
  365.     border: 1px solid #d0d1d5;
  366.     width: 500px;
  367.     padding: 10px;
  368.     margin: 0 0 15px -11px;
  369. }
  370.  
  371. #content .posts .chat .lines {
  372.     margin: 5px 0 5px 45px;
  373.     display: block;
  374. }
  375.  
  376. #content .posts .chat .lines .label {
  377.     font-weight: bold;
  378.     color: {color:Accent Color};
  379. }
  380.  
  381. /* LINK */
  382. #content .posts .link {
  383.     border: 1px solid #d0d1d5;
  384.     padding: 10px;
  385.     margin-bottom: 10px;
  386. }
  387.  
  388. #content .posts .link .thumbnail {
  389.     background-size: cover;
  390.     width: 499px;
  391.     height: 245px;
  392.     margin-left: -10px;
  393.     margin-top: -10px;
  394. }
  395.  
  396. #content .posts .link h2 {
  397.     font-family: "Times New Roman", Georgia, Serif;
  398.     font-size: 20px;
  399.     color: #000;
  400.     font-weight: normal;
  401.     margin-bottom: 0;
  402.     margin-top: 5px;
  403. }
  404.  
  405. #content .posts .link p {
  406.     margin-top: 5px;
  407. }
  408.  
  409. #content .posts .link a {
  410.     color: #9197a3;
  411. }
  412.          
  413. /*****************************************************************
  414. ******************************************************************/
  415.  
  416. /* POST HEADING */
  417. #content .posts .poster {
  418.     height: 40px;
  419.     width: 500px;
  420.     line-height: 18px;
  421.     margin-bottom: 10px;
  422. }
  423.  
  424. #content .posts .poster b {
  425.     color: {color:Accent Color};
  426. }
  427.  
  428. #content .posts .poster a {
  429.     color: #9197a3;
  430. }
  431.  
  432. #content .posts .poster img {
  433.     float: left;
  434.     margin-right: 5px;
  435. }
  436.  
  437.        
  438. /* PERMALINK */
  439. #content .posts .permalink {
  440.     color: #9197a3;
  441. }
  442.  
  443. #content .posts .permalink a {
  444.     color: #9197a3;
  445. }
  446.  
  447. #content .posts .permalink ul {
  448.     display: inline;
  449.     margin-left: -35px;
  450. }
  451.  
  452. #content .posts .permalink li {
  453.     display: inline-block;
  454. }
  455.  
  456. /* TAGS */  
  457. #content .posts .tags {
  458.     background-color: #f6f7f8;
  459.     border: 1px solid #d0d1d5;
  460.     width: 500px;
  461.     padding: 10px;
  462.     margin: 15px 0 -11px -11px;
  463.     border-radius: 0 0 5px 5px;
  464. }
  465.          
  466. /* NOTES */
  467. #notecontainer {
  468.     background-color: #f6f7f8;
  469.     border: 1px solid #d0d1d5;
  470.     width: 500px;
  471.     padding: 10px;
  472.     margin: 8px 0 -11px -11px;
  473.     border-radius: 0 0 5px 5px;
  474. }
  475.          
  476. #notecontainer ol.notes {
  477.     list-style-type: none;
  478.     margin: 0;
  479.     padding: 0;
  480. }
  481.  
  482. #notecontainer ol.notes li.note {
  483.     display: block;
  484.     min-height: 40px;
  485.     margin: 5px;
  486. }
  487.  
  488. #notecontainer ol.notes li.note blockquote {
  489.     display: inline;
  490. }
  491.          
  492. #notecontainer img.avatar {
  493.     margin-right: 10px;
  494.     width: 40px;
  495.     height: 40px;
  496.     float: left;
  497. }
  498.  
  499. /*****************************************************************
  500. ******************************************************************/
  501.          
  502. {CustomCSS}    
  503. </style>
  504. <!-- END STYLESHEET -->
  505.          
  506. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  507.    
  508. </head>
  509. <body>
  510.  
  511. <!-- TOPBAR -->
  512. <div id="topbar">
  513. <div id="wrap-top">
  514.     <img style="width: 23px; height: 23px; margin-right: 5px" src="http://s26.postimg.org/6elckwumt/icon_3.png" /> <!-- tumblr logo -->
  515.     <script language="javascript">
  516.         function send()
  517.         {document.theform.submit()}
  518.     </script>
  519.     <form action="/search" method="get" class="sfm" name="theform">
  520.         <input type="text" name="q" value="{SearchQuery}" id="sf"/>
  521.         <input type="image" value="Search" src="http://s26.postimg.org/djzbi4zkl/search.png" id="sb"/>
  522.     </form>
  523.  
  524.     <div style="display: inline-block; margin-left: 100px;">
  525.         <img src="{PortraitURL-24}"><!-- Default Icon-->  
  526.         <a href="/">{Title}</a><!-- Default Blog Title --><a class="borders" href="/submit">Submit</a><a href="/ask">Ask</a>
  527.     </div>
  528. </div> <!-- /wrap -->    
  529. </div> <!-- /topbar -->
  530.  
  531.  
  532.  
  533. <!----------------------------------------------------------------
  534. ------------------------------------------------------------------>
  535. <div id="wrap">
  536.  
  537. <!-- SIDE LEFT -->
  538. <div id="sideleft">
  539.     <div id="info">
  540.         <img src="{PortraitURL-40}">
  541.         <b>{text:Name}</b><br />
  542.         {text:Extra Info}
  543.     </div>
  544.  
  545.     <h1>{text:Title I}</h1>
  546.     <a href="/random">Random</a>
  547.     <a href="/archive">Archive</a>
  548.     {block:ifExtraLinks}{text:Extra Links}{/block:ifExtraLinks}
  549.    
  550.     {block:HasPages}
  551.         <h1>{text:Title II}</h1>
  552.         {block:Pages}<a href="{url}">{Label}</a>{/block:Pages}
  553.     {/block:HasPages}
  554.    
  555.    
  556.     {block:Following}
  557.     <h1>{text:Title III}</h1>
  558.     <div class="blogroll">
  559.     {block:Followed}
  560.     <a class="follow" href="{FollowedURL}"><img src="{FollowedPortraitURL-16}" /></a>
  561.     {/block:Followed}
  562.     </div>
  563.     {/block:Following}
  564. </div>
  565.  
  566. <!-- SIDE RIGHT -->
  567. <div id="sideright">
  568.     <div id="desc">{Description}</div>
  569.    
  570.     {block:IfTagbox}
  571.     <div class="tagbox">
  572.     {text:Tagbox}
  573.     </div>
  574.     {/block:IfTagbox}
  575.    
  576.    
  577.     <div id="credit">theme by <a href="nickystash.tumblr.com">missNK</a> &middot; based on <a href="www.facebook.com">facebook</a> layout</div>
  578. </div> <!-- you are NOT allowed to touch this! -->
  579.          
  580. <!----------------------------------------------------------------
  581. ------------------------------------------------------------------>
  582.          
  583. <!-- MAIN CONTENT -->
  584. <div id="content">
  585.     <div class="autopagerize_page_element">
  586.    
  587.     {block:Posts}
  588.     <div class="posts">
  589.    
  590. <!-- POSTER -->    
  591.     <div class="poster">
  592.         {block:NotReblog}<a href="/"><img src="{PortraitURL-40}" /></a>{/block:NotReblog}
  593.         {block:RebloggedFrom}<a href="{ReblogParentURL}" title="via {ReblogParentTitle}" target="_blank"><img src="{ReblogParentPortraitURL-40}" /></a>{/block:RebloggedFrom}
  594.         {block:NotReblog}<a href="/"><b>{Title}</b></a>{/block:NotReblog}
  595.         {block:RebloggedFrom}<a href="{ReblogParentURL}"><b>{ReblogParentName}</b></a>{/block:RebloggedFrom}
  596.         {block:Quote}
  597.             {block:Source}
  598.                 <div class="source">&#8212; with {Source}</div>
  599.             {/block:Source}
  600.         {/block:Quote}
  601.         {block:Date}<br /><a href="{Permalink}">{TimeAgo}</a>{/block:Date}
  602.        
  603.     </div>
  604.  
  605. <!-- POST CONTAINS -->        
  606.         {block:Photo}
  607.         {LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
  608.         {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  609.         {/block:Photo}
  610.          
  611.         {block:Photoset}
  612.         {Photoset-500}
  613.         {block:Caption}{Caption}{/block:Caption}
  614.         {/block:Photoset}
  615.          
  616.         {block:Video}
  617.         {Video-500}{block:Caption}{Caption}{/block:Caption}
  618.         {/block:Video}
  619.          
  620.         {block:Audio}
  621.         {AudioPlayerBlack}
  622.         ~ {PlayCountWithLabel}
  623.         {block:Caption}{Caption}{/block:Caption}
  624.         {/block:Audio}
  625.          
  626.         {block:Quote}
  627.             <div class="quote">“{Quote}”</div>
  628.         {/block:Quote}
  629.          
  630.         {block:Text}
  631.         {block:Title}<div class="title">{Title}</div>{/block:Title}
  632.         {Body}
  633.         {/block:Text}
  634.          
  635.         {block:Answer}
  636.         <div class="question">
  637.             <div class="asker">
  638.                 <img src="{AskerPortraitURL-40}" />
  639.                 <b>{Asker}</b> {Question}
  640.             </div>
  641.             <div class="answer">
  642.                 <img src="{PortraitURL-40}" />
  643.                 <a><b>{Title}</b></a> {Answer}
  644.             </div>
  645.         </div>
  646.         {block:Answer}
  647.          
  648.         {block:Chat}
  649.         <div class="chat">
  650.             {block:Title}<div class="title">{Title}</div>{/block:Title}
  651.             {block:Lines}<div class="lines">
  652.            
  653.                 {block:Label}
  654.                     <span class="label">{Label}</span>
  655.                 {/block:Label}
  656.                 {Line}
  657.            
  658.             </div>{/block:Lines}
  659.         </div>
  660.         {/block:Chat}
  661.          
  662.         {block:Link}
  663.             <div class="link">
  664.                 {block:Thumbnail}<div class="thumbnail" style="background-image: url({Thumbnail})"></div>{/block:Thumbnail}
  665.                 <h2>{Name}</a></h2>
  666.                 {block:Description}{Description}{/block:Description}
  667.                 <a href="{URL}" target="{Target}">{URL}</a>
  668.             </div>
  669.         {/block:Link}
  670.          
  671. <!----------------------------------------------------------------
  672. ------------------------------------------------------------------>
  673.          
  674.         <!-- NOTECOUNT -->
  675.         <div class="permalink">
  676.         <a href="{ReblogURL}">Reblog</a> {block:NoteCount}&middot; <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount} &middot;
  677.         <ul><li>{LikeButton color="grey" size="14"}</li></ul>
  678.         </div>
  679.        
  680.         <!-- TAGS -->
  681.         {block:HasTags}
  682.             <div class="tags">
  683.                 {block:Tags}<a href="{TagURL}">{Tag}</a>  &middot; {/block:Tags}
  684.             </div>
  685.         {/block:HasTags}
  686.        
  687.     <!-- NOTES -->
  688.     {block:PostNotes}
  689.         <div id="notecontainer">{PostNotes-64}</div>
  690.     {/block:PostNotes}
  691.          
  692.          
  693.     </div> <!-- END POSTS -->
  694.     {/block:Posts}
  695.    
  696.     </div> <!-- /autopagerize_page_element-->
  697. </div> <!-- /content-->
  698. </div><!-- /wrap -->
  699. </body>
  700. </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!