badmecha007

TF2 Theme v1.1 (OUTDATED - DOWNLOAD NEW VERSION))

Jan 25th, 2018
617
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 35.91 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!------------VERSION 1.2 IS OUT WITH FIXES TO HTML AND INDIVIDUAL COLOR CHANGES TO ALL WEAPONS BOXES! PLEASE DOWNLOAD THAT VERSION
  5. INSTEAD OF THIS ONE AT https://pastebin.com/AEQJBQHE ------->
  6.  
  7.  
  8.  
  9. <!--
  10. ---------------------
  11. ---CROCKETT'S------==
  12. ----THEMES-------==
  13. -(BADMECHA007)-==
  14. -------------==
  15. -----------==
  16. ---------==
  17. -------==
  18. -----==
  19. ---==
  20. -== @2016 ~ badmecha007
  21. =
  22.  
  23. -----------------=========RULES:
  24. | 1. Do not steal or claim as your own.
  25. | 2. Do not use as base code. As well
  26. | as my coding system being fucking
  27. | confusing, my code is not up for
  28. | base use, period as some of it
  29. | is used from another person's base.
  30. | 3. Leave the watermark intact.
  31. | Do not remove it from the code
  32. | when customising.
  33. | 4. Minor modifications are fine.
  34. | You may take inspiration from my CSS
  35. | (check on my blog or ask
  36. | for specific css if you wish)
  37. | but try not to take giant snippets
  38. | of code (+8 lines of CSS).
  39. | 5. Share and reblog the original
  40. | post in goodwill if you do use this theme.
  41.  
  42.  
  43. Big thanks to SMT tooltips for the tooltip
  44. java code, themesbyeris for her base code, w3schools and
  45. various nameless peeps on jsfiddle for inspiration
  46. and help. Go there if you want the tooltips, base code,
  47. and general coding assistance unrelated to this theme
  48. respectively.
  49.  
  50. Team Fortress 2 belongs to Valve. Best hat simulator there is.
  51.  
  52. ========================valve - tf2 - loadout v1==============================
  53.  
  54.  
  55. COLORS:
  56. ORIGINAL TF2 LOADOUT:
  57. bg grey = #322E2B
  58. button light grey = #7F7367
  59. highlight salmon pink = #E06A5C
  60. border grey = #867C73
  61. bottom banner grey = #3d3834
  62. text color white = #e9e9e9
  63.  
  64. RED = #bd3a3a
  65. BLU = #5b7a8c
  66.  
  67.  
  68. NOTICE: This code uses #rrggbbaa hex notation, and thus will require Chrome 62 or higher to run fully.
  69. -->
  70.  
  71. <meta name="color:Highlights" content="#8B8279"/>
  72. <meta name="color:Background" content="#322E2B" />
  73. <meta name="color:SecondTab" content="#302C2B" />
  74. <meta name="color:Bottom" content="#3d3834" />
  75. <meta name="color:Stripe1" content="#322E2B" />
  76. <meta name="color:Stripe2" content="#2F2A27" />
  77. <meta name="color:Text" content="#e9e9e9" />
  78. <meta name="color:headerBG" content="#322E2B" />
  79. <meta name="image:headerBG" content="" />
  80. <meta name="color:AskBG" content="" />
  81. <meta name="color:PostBG" content="#322E2B" />
  82. <meta name="image:PostBG" content="" />
  83. <meta name="text:TabName" content=""/>
  84. <meta name="text:Tab2Name" content=""/>
  85. <meta name="if:Link 1 enabled" content="1"/>
  86. <meta name="text:Link1" content=""/>
  87. <meta name="text:Link1URL" content=""/>
  88. <meta name="text:Link1Img" content=""/>
  89. <meta name="if:Link 2 enabled" content="1"/>
  90. <meta name="text:Link2" content=""/>
  91. <meta name="text:Link2URL" content=""/>
  92. <meta name="text:Link2Img" content=""/>
  93. <meta name="if:Link 3 enabled" content="1"/>
  94. <meta name="text:Link3" content=""/>
  95. <meta name="text:link3URL" content=""/>
  96. <meta name="text:Link3Img" content=""/>
  97. <meta name="if:Link 4 enabled" content="1"/>
  98. <meta name="text:Link4" content=""/>
  99. <meta name="text:link4URL" content=""/>
  100. <meta name="text:Link4Img" content=""/>
  101. <meta name="if:Link 5 enabled" content="1"/>
  102. <meta name="text:Link5" content=""/>
  103. <meta name="text:link5URL" content=""/>
  104. <meta name="text:Link5Img" content=""/>
  105. <meta name="if:Link 6 enabled" content="1"/>
  106. <meta name="text:Link6" content=""/>
  107. <meta name="text:link6URL" content=""/>
  108. <meta name="text:Link6Img" content=""/>
  109. <meta name="if:Link 7 enabled" content="1"/>
  110. <meta name="text:Link7" content=""/>
  111. <meta name="text:link7URL" content=""/>
  112. <meta name="text:Link7Img" content=""/>
  113. <meta name="if:Link 8 enabled" content="1"/>
  114. <meta name="text:Link8" content=""/>
  115. <meta name="text:link8URL" content=""/>
  116. <meta name="text:Link8Img" content=""/>
  117. <meta name="text:SmallButtonOne" content=""/>
  118. <meta name="text:SmallButton1URL" content=""/>
  119. <meta name="text:SmallButtonTwo" content=""/>
  120. <meta name="text:SmallButton2URL" content=""/>
  121. <meta name="text:SmallButtonThree" content=""/>
  122. <meta name="text:SmallButton3URL" content=""/>
  123. <meta name="text:SmallButtonFour" content=""/>
  124. <meta name="text:SmallButton4URL" content=""/>
  125. <meta name="text:SecondaryMenu1Title" content=""/>
  126. <meta name="text:SecondaryMenu2Title" content=""/>
  127.  
  128. <meta name="select:Quality" content="#B2B2B2" title="Stock">
  129. <meta name="select:Quality" content="#FFD700" title="Unique">
  130. <meta name="select:Quality" content="#476291" title="Vintage">
  131. <meta name="select:Quality" content="#4D7455" title="Genuine">
  132. <meta name="select:Quality" content="#CF6A32" title="Strange">
  133. <meta name="select:Quality" content="#8650AC" title="Unusual">
  134. <meta name="select:Quality" content="#38F3AB" title="Haunted">
  135. <meta name="select:Quality" content="#AA0000" title="Collector&#39;s">
  136. <meta name="select:Quality" content="#B0C3D9" title="Civilian">
  137. <meta name="select:Quality" content="#5E98D9" title="Freelance">
  138. <meta name="select:Quality" content="#4B69FF" title="Mercenary">
  139. <meta name="select:Quality" content="#8847FF" title="Commando">
  140. <meta name="select:Quality" content="#D32CE6" title="Assassin">
  141. <meta name="select:Quality" content="#EB4B4B" title="Elite">
  142. <meta name="select:Quality" content="#70B04A" title="Community">
  143. <meta name="select:Quality" content="#A50F79" title="Valve">
  144.  
  145. <meta name="select:QualityLinks" content="#B2B2B2" title="Stock">
  146. <meta name="select:QualityLinks" content="#FFD700" title="Unique">
  147. <meta name="select:QualityLinks" content="#476291" title="Vintage">
  148. <meta name="select:QualityLinks" content="#4D7455" title="Genuine">
  149. <meta name="select:QualityLinks" content="#CF6A32" title="Strange">
  150. <meta name="select:QualityLinks" content="#8650AC" title="Unusual">
  151. <meta name="select:QualityLinks" content="#38F3AB" title="Haunted">
  152. <meta name="select:QualityLinks" content="#AA0000" title="Collector&#39;s">
  153. <meta name="select:QualityLinks" content="#B0C3D9" title="Civilian">
  154. <meta name="select:QualityLinks" content="#5E98D9" title="Freelance">
  155. <meta name="select:QualityLinks" content="#4B69FF" title="Mercenary">
  156. <meta name="select:QualityLinks" content="#8847FF" title="Commando">
  157. <meta name="select:QualityLinks" content="#D32CE6" title="Assassin">
  158. <meta name="select:QualityLinks" content="#EB4B4B" title="Elite">
  159. <meta name="select:QualityLinks" content="#70B04A" title="Community">
  160. <meta name="select:QualityLinks" content="#A50F79" title="Valve">
  161.  
  162. <meta name="select:QualityLinksHover" content="#B2B2B2" title="Stock">
  163. <meta name="select:QualityLinksHover" content="#FFD700" title="Unique">
  164. <meta name="select:QualityLinksHover" content="#476291" title="Vintage">
  165. <meta name="select:QualityLinksHover" content="#4D7455" title="Genuine">
  166. <meta name="select:QualityLinksHover" content="#CF6A32" title="Strange">
  167. <meta name="select:QualityLinksHover" content="#8650AC" title="Unusual">
  168. <meta name="select:QualityLinksHover" content="#38F3AB" title="Haunted">
  169. <meta name="select:QualityLinksHover" content="#AA0000" title="Collector&#39;s">
  170. <meta name="select:QualityLinksHover" content="#B0C3D9" title="Civilian">
  171. <meta name="select:QualityLinksHover" content="#5E98D9" title="Freelance">
  172. <meta name="select:QualityLinksHover" content="#4B69FF" title="Mercenary">
  173. <meta name="select:QualityLinksHover" content="#8847FF" title="Commando">
  174. <meta name="select:QualityLinksHover" content="#D32CE6" title="Assassin">
  175. <meta name="select:QualityLinksHover" content="#EB4B4B" title="Elite">
  176. <meta name="select:QualityLinksHover" content="#70B04A" title="Community">
  177. <meta name="select:QualityLinksHover" content="#A50F79" title="Valve">
  178.  
  179. <meta name="select:QualityText" content="#B2B2B2" title="Stock">
  180. <meta name="select:QualityText" content="#FFD700" title="Unique">
  181. <meta name="select:QualityText" content="#476291" title="Vintage">
  182. <meta name="select:QualityText" content="#4D7455" title="Genuine">
  183. <meta name="select:QualityText" content="#CF6A32" title="Strange">
  184. <meta name="select:QualityText" content="#8650AC" title="Unusual">
  185. <meta name="select:QualityText" content="#38F3AB" title="Haunted">
  186. <meta name="select:QualityText" content="#AA0000" title="Collector&#39;s">
  187. <meta name="select:QualityText" content="#B0C3D9" title="Civilian">
  188. <meta name="select:QualityText" content="#5E98D9" title="Freelance">
  189. <meta name="select:QualityText" content="#4B69FF" title="Mercenary">
  190. <meta name="select:QualityText" content="#8847FF" title="Commando">
  191. <meta name="select:QualityText" content="#D32CE6" title="Assassin">
  192. <meta name="select:QualityText" content="#EB4B4B" title="Elite">
  193. <meta name="select:QualityText" content="#70B04A" title="Community">
  194. <meta name="select:QualityText" content="#A50F79" title="Valve">
  195.  
  196.  
  197. <meta name="select:Team" content="rgba(91,122,140,0.7)" title="Blu">
  198. <meta name="select:Team" content="rgba(189,58,58,0.7)" title="Red">
  199.  
  200. <title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  201. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  202. <link rel="shortcut icon" href="{Favicon}" />
  203.  
  204.  
  205.  
  206. <link href='http://fonts.googleapis.com/css?family=Carme' rel='stylesheet' type='text/css'>
  207.  
  208. <link href='http://fonts.googleapis.com/css?family=Anaheim' rel='stylesheet' type='text/css'>
  209.  
  210. <link href='http://fonts.googleapis.com/css?family=Play' rel='stylesheet' type='text/css'>
  211.  
  212. <link href='http://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
  213.  
  214. <link href='https://fonts.googleapis.com/css?family=Archivo+Black' rel='stylesheet' type='text/css'>
  215.  
  216. <link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet">
  217. <link href="https://fonts.googleapis.com/css?family=McLaren" rel="stylesheet">
  218. <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
  219. <link href="https://fonts.googleapis.com/css?family=Bangers|Geostar|Henny+Penny|Satisfy|Shadows+Into+Light|Smythe|Stalinist+One|Timmana" rel="stylesheet">
  220.  
  221. <!--
  222.  
  223. font-family: 'Shadows Into Light', cursive;
  224.  
  225. font-family: 'Stalinist One', cursive;
  226.  
  227. font-family: 'Geostar', cursive;
  228.  
  229. font-family: 'Satisfy', cursive;
  230.  
  231. font-family: 'Bangers', cursive;
  232.  
  233. font-family: 'Henny Penny', cursive;
  234.  
  235. font-family: 'Timmana', sans-serif;
  236.  
  237. font-family: 'Smythe', cursive;
  238.  
  239.  
  240. -->
  241. <style type="text/css">
  242.  
  243.  
  244.  
  245.  
  246. body {
  247. background: {color:Background};
  248. margin-left: auto;
  249. margin-right: auto;
  250. padding: 0;
  251. font:normal 20px 'Anaheim', sans-serif;
  252. font-size: 20px;
  253. color: {color:Text};
  254. }
  255.  
  256. img {
  257. border: 0;
  258. max-width: 100%;
  259. height: auto;
  260. }
  261.  
  262. @font-face {
  263. font-family: 'tf2build';
  264. src: url('http://static.tumblr.com/jcho88r/JDfoiw991/tf2build.ttf') format('truetype');
  265. font-weight: normal;
  266. font-style: normal;
  267. }
  268.  
  269.  
  270. #header {
  271. border-bottom: 3px solid #867C73;
  272. height: 12%;
  273. width: 100% ;
  274. position: fixed;
  275. margin-left: auto;
  276. margin-right: auto;
  277. background-image: repeating-linear-gradient(-70deg, {color:Stripe1}, {color:Stripe1} 10px, {color:Stripe2} 9px, {color:Stripe2} 14px);
  278.  
  279. /* background: url('http://i.imgur.com/UO6YnJZ.png') top left fixed repeat ;*/
  280. z-index: 94;
  281. top: 0px;
  282. }
  283.  
  284. .partitions {
  285. border-top-left-radius: 18px;
  286. border-top-right-radius:18px;
  287. border-top: 3px solid {color:Highlights};
  288. border-right:3px solid {color:Highlights};
  289. border-left:3px solid {color:Highlights};
  290. position: absolute;
  291. bottom: -3px;
  292. margin-left: 50%;
  293. margin-right:50%;
  294. font: 30px 'Archivo Black', sans-serif;
  295. text-align:center;
  296. letter-spacing: 1px;
  297. text-transform: uppercase;
  298. }
  299.  
  300. #header #partitionmain {
  301. width: 400px;
  302. height:50px;
  303. transform: translate(-135%, 0);
  304. background: {color:Background};
  305. border-top: 3px solid {color:Highlights};
  306. border-right:3px solid {color:Highlights};
  307. border-left:3px solid {color:Highlights};
  308. color: rgb(198, 190, 170);
  309. }
  310.  
  311. #header #partitionsecd {
  312. width: 400px;
  313. height:47px;
  314. transform: translate(-30%, -3px);
  315. background: {color:SecondTab};
  316. border-top: 3px solid #403D38;
  317. border-right:3px solid #403D38;
  318. border-left:3px solid #403D38;
  319. color: rgb(130, 121, 112);
  320.  
  321. }
  322.  
  323.  
  324. #header #pages a {
  325. width: 129px;
  326. height: 129px;
  327. margin-bottom: 15px;
  328. font-size: 12px;
  329. }
  330.  
  331. #top {
  332. height: 25vh;
  333. width:100%;
  334. position:fixed;
  335. z-index:20 !important;
  336. margin-left: auto;
  337. margin-right: auto;
  338. top: 0px;
  339. }
  340.  
  341. #top2 {
  342. height: 25%;
  343. width:100%;
  344. position:fixed;
  345. z-index:99;
  346. margin-left: auto;
  347. margin-right: auto;
  348. top: 0px;
  349. pointer-events:none;
  350. }
  351.  
  352. #top #topmid {
  353. height:100%;
  354. width: 1000px ;
  355. margin-left: auto ;
  356. margin-right: auto ;
  357. background: {color:Background};
  358.  
  359. }
  360.  
  361. #hide{
  362. height:calc(100% + 60px);
  363. width: 600px ;
  364. background: {color:Background};
  365. margin-left: auto ;
  366. margin-right: auto ;
  367. z-index:999;
  368. }
  369.  
  370. #hide2{
  371. height: calc(100% + 60px);
  372. width: 150px ;
  373. background: {color:Background};
  374. margin-left: auto ;
  375. margin-right: auto ;
  376. right:0;
  377. left:0;
  378. transform:translate(360px ,0);
  379. top:0;
  380. position:absolute;
  381. z-index:-14 !important;
  382. }
  383.  
  384.  
  385. #top #topmid .maintitle {
  386. letter-spacing: 1px;
  387. text-transform: uppercase;
  388. position: absolute;
  389. bottom: 25px;
  390. margin-left: 30px;
  391. color: {color:Text};
  392. pointer-events:auto !important;
  393. }
  394.  
  395. #top #topmid .maintitle a {
  396. color: {color:Text};
  397. font: 30px 'Archivo Black', sans-serif;
  398. letter-spacing: 1px;
  399. text-transform: uppercase;
  400. text-decoration: none;
  401. z-index:999999999999999 !important;
  402. transition: font-size .25s ;
  403. -webkit-transition: font-size .25s ;
  404. }
  405. #top #topmid .maintitle a:hover {
  406. color: #fff;
  407. }
  408.  
  409. #top #topmid #arrows {
  410. font-size: 25px;
  411. color: #C35E52;
  412. bottom: 30px;
  413. position:absolute;
  414. }
  415. #top #topmid #dots {
  416. font-size: 50px;
  417. color: {color:Highlights};
  418. bottom: 5px;
  419. position:absolute;
  420. }
  421.  
  422.  
  423. #bbanner
  424. {
  425. position:fixed;
  426. width:100%;
  427. height:12%;
  428. background-color:{color:Bottom};
  429. bottom:0px;
  430. z-index: 99999999;
  431. border-top: 3px solid #867C73;
  432. }
  433.  
  434. #anchor{
  435. position:relative;
  436. height:1000px;
  437. width:1200px;/*250px*/
  438. top:25vh;
  439. left:2.5vw;
  440. margin-right: auto;
  441. margin-left: auto;
  442. pointer-events:none;
  443. z-index:60;
  444. }
  445.  
  446.  
  447.  
  448. .wepbox{
  449. letter-spacing: 1px;
  450. text-transform: lowercase;
  451. display: inline-block;
  452. vertical-align: top;
  453. border-radius: 10px;
  454. font: 15px 'Archivo Black', sans-serif;
  455. color: {select:Quality};
  456. background: {color:AskBG};
  457. border: 3px solid {select:Quality};
  458. width: 225px;
  459. height: 104px;
  460. text-transform: uppercase;
  461. text-decoration: none;
  462. margin: 5px 0px 5px 0px;
  463. padding: 8px 0 0 0;
  464. pointer-events:all !important;
  465.  
  466. }
  467.  
  468. .wepbox:nth-child(odd) {
  469. margin: 5px 650px 5px 0px;
  470. z-index:99 !important;
  471. }
  472. /* .wepbox:nth-child(even) {
  473. margin: 30px 0px 30px 0px;
  474. background:blue;
  475. }*/
  476.  
  477. .wepbox:hover{
  478. background: {select:Quality}AF;
  479.  
  480. }
  481.  
  482. .wepbox:active{
  483. background: #FFF;
  484.  
  485. }
  486.  
  487. .wepbox a{
  488. text-decoration: none;
  489. color: {select:Quality};
  490. }
  491.  
  492. .wepboxtxt{
  493. text-align: center;
  494. position:relative;
  495. width:100%;
  496. margin-left:auto;
  497. margin-right:auto;
  498. bottom: 0;
  499. }
  500.  
  501. .weppic{
  502. height:80px;
  503.  
  504. }
  505. /* #askbox #wepprim {
  506. background: url('http://i.imgur.com/jYJxkzS.png') center no-repeat;
  507. height:80%;
  508. width:80%;
  509. margin-left:auto;
  510. margin-right:auto;
  511. background-size: contain;
  512. }
  513. */
  514. .contheaders{
  515. color: #e9e9e9;
  516. font: 20px 'McLaren', cursive;
  517. border: 3px solid #e9e9e9;
  518. border-radius: 10px;
  519. padding: 5px 15px;
  520. background:{select:Team};
  521. list-style:none;
  522. line-height:14px;
  523. margin-bottom: 10px;
  524. }
  525.  
  526. .conttext{
  527. display:inline-block;
  528.  
  529. }
  530.  
  531. #content {
  532. left: 0;
  533. right: 0;
  534. top: calc(25vh + 60px);
  535. position:relative;
  536. z-index:3;
  537. width: 500px;
  538. background:{color:Background};
  539. color: #fff;
  540. padding-bottom:12vh;
  541. float: center;
  542. margin: auto;
  543.  
  544. }
  545.  
  546. #content a{
  547. text-decoration: none;
  548. transition: color .25s;
  549. }
  550.  
  551. #content a:hover{
  552. color: #fafafa;
  553.  
  554. }
  555.  
  556. #content blockquote {
  557. border-left: 3px inset {color:Highlights};
  558. margin-left: 10px;
  559. padding: 0px 0px 0px 8px;
  560. margin-right: 0;
  561. }
  562.  
  563. #content #posts {
  564. background: ;
  565. margin: auto;
  566. border-radius: 10px;
  567. font: 15px 'McLaren', cursive;
  568. color: {select:Quality};
  569. padding: .8em .8em;
  570. width: 100%;
  571. background-attachment: inherit;
  572. margin-bottom: 30px;
  573. border: 3px solid {color:Highlights};
  574. z-index:10;
  575. }
  576. #posts .text {
  577. color:{select:QualityText};
  578. }
  579.  
  580. #posts .text a{
  581. color:{select:QualityLinks};
  582. }
  583. #posts .text a:hover{
  584. color:{select:QualityLinksHover};
  585. }
  586.  
  587.  
  588. #posts > #notebox{
  589. display:none;
  590. }
  591.  
  592. #posts:hover > #notebox {
  593. display: block;
  594. }
  595.  
  596. #content #posts .title{
  597. font-size:40px;
  598. font-family: 'Smythe', cursive;
  599. text-transform:uppercase;
  600. }
  601.  
  602. #content #posts #photo img{
  603. width:100%;
  604. height:auto;
  605. }
  606.  
  607. #content #posts #permabox {
  608. margin-top:10px;
  609. color: #fff;
  610. width:100%;
  611. }
  612.  
  613.  
  614. #content #posts #permabox a{
  615. color: {color:Text};
  616. font-size:17px
  617. text-decoration: none;
  618. }
  619.  
  620.  
  621. #content #posts #permalink {
  622. font-size:15px;
  623. list-style-type: none;
  624. display:inline-block;
  625. margin-bottom:5px;
  626. }
  627.  
  628.  
  629. #content #posts #permalink li{
  630. list-style-type: none;
  631. }
  632.  
  633. #content #posts #tags {
  634. font-size: 12px;
  635. color: {color:Text};
  636. text-transform: uppercase;
  637. }
  638.  
  639. #content #posts #tags .comma:last-child {
  640. display: none;
  641.  
  642. }
  643. #player {
  644. margin-top: 5px;
  645. }
  646.  
  647. #content #notecontainer {
  648. margin: 20px auto;
  649. font: 15px 'Ubuntu', sans-serif;
  650. font-weight: normal;
  651. width: 100%;
  652. font-weight: 900;
  653.  
  654. }
  655.  
  656. #notecontainer a{
  657. color:{select:QualityLinks};
  658. }
  659.  
  660. #content #notecontainer ol.notes {
  661. list-style-type: none;
  662. margin: 0;
  663. padding: 0;
  664. }
  665.  
  666. #content #notecontainer img.avatar {
  667. margin-right: 10px;
  668. width: 16px;
  669. height: 16px;
  670. }
  671.  
  672. #notecontainer li{
  673. background: rgb(241,233,203);
  674. border-radius: 5px;
  675. margin-bottom: 5px;
  676. padding: 4px;
  677. }
  678.  
  679. #minbuttonsanc{
  680. width: 235px;
  681. height:40px;
  682. line-height: 34px !important;
  683. text-align: center;
  684. bottom:-55px;
  685. font: 30px 'Archivo Black', sans-serif;
  686. right:0;
  687. left:0;
  688. position:absolute;
  689. }
  690.  
  691. #minbuttonsanc a{
  692. color:{color:Text};
  693. }
  694.  
  695. #askert{
  696. color: {color:Text} !important;
  697. }
  698. #audiob{
  699. display:inline-block;
  700. position:relative;
  701. margin:auto;
  702. }
  703.  
  704. /* code to edit audioplayer */
  705. .simple-player .audio-player .play-pause {
  706. font-size: 19px;
  707. padding: 0 30px !important;
  708. width: auto;
  709. }
  710.  
  711. .simple-player .audio-player{
  712. background:transparent !important;
  713. border: 2px solid {color:Text};
  714. }
  715. .audio-player.has-art {
  716. background:red !important;
  717. }
  718. .audio-player {
  719. background:red !important;
  720. }
  721.  
  722.  
  723. /*end*/
  724. #postdate{
  725. margin-bottom:5px;
  726.  
  727. }
  728.  
  729.  
  730. .headbox{
  731. border: 3px solid #8B8279;
  732. border-radius: 15px;
  733. padding: 15px;
  734. color: #e9e9e9;
  735. background:{select:Team};
  736. }
  737.  
  738. #asker{
  739. display: inline-block;
  740. max-width: 350px;
  741. padding-left: 10px;
  742. }
  743.  
  744. #asktitle{
  745. font: 15px 'Archivo Black', sans-serif !important;
  746.  
  747.  
  748. }
  749.  
  750. .notebutton{
  751. background: #7F7367;
  752. height: 20px;
  753. border-radius: 5px;
  754. font: 12px 'Archivo Black', sans-serif;
  755. text-align:center;
  756. cursor: cell;
  757. position:relative;
  758. display: inline-block;
  759. vertical-align: top;
  760. padding: 0px 5px;
  761. }
  762.  
  763. .notebutton:hover {
  764. background: #E06A5C;
  765. }
  766.  
  767.  
  768. .minorbutton {
  769. background: #7F7367;
  770. width: 40px;
  771. height: 40px;
  772. border-radius: 10px;
  773. position:relative;
  774. display:inline-block;
  775. bottom:5px;
  776. cursor:crosshair;
  777. float:center;
  778. margin: 0 5px 0 5px;
  779. color: {color:Titletext};
  780. }
  781.  
  782. .minorbutton:hover {
  783. background: #E06A5C;
  784. }
  785.  
  786. /*
  787. #reblogbutton {
  788. left: 515px;
  789. background-size: contain;
  790. }
  791.  
  792. #reblogbutton #letterbutton {
  793. width:55%;
  794. height:55%;
  795. top:9px;
  796. left: 9px;
  797. background: url('http://i.imgur.com/NnrOvrt.png') center no-repeat;
  798. background-size: contain;
  799. z-index:10;
  800. position:relative;
  801.  
  802. }*/
  803.  
  804.  
  805. #notebox{
  806. width:150px;
  807. border:2px solid black;
  808. font: 22px 'McLaren', cursive;
  809. font-weight:550;
  810. color:white;
  811. background: rgb(20,20,20);
  812. position:absolute;
  813. right:-180px;
  814. z-index:-99 !important;
  815. }
  816.  
  817. #notebox a{
  818. width:150px;
  819. }
  820.  
  821. .nboxdes{
  822. border-bottom:2px solid rgb(240, 240 ,240);
  823. width:150px;
  824. color:rgb(240, 240 ,240);
  825. }
  826. .nboxdes:hover{
  827. background: rgba(240, 240 ,240, 0.2);
  828. }
  829. .nboxdes:active{
  830. background: rgba(240, 240 ,240, 0.4);
  831. }
  832.  
  833. .nboxdes a{
  834. border-bottom:2px solid rgb(240, 240 ,240);
  835. color:rgb(240, 240 ,240);
  836. }
  837.  
  838.  
  839. #content #navigation a {
  840. background-color: #000;
  841. color: {color:Posts};
  842. padding: 5px 10px;
  843. text-decoration: none;
  844. margin-left: 25px;
  845. border: 3px solid {color:Trimmings};
  846. }
  847.  
  848. #content #navigation a:hover {
  849. opacity: 0.9;
  850. }
  851.  
  852.  
  853. #ident {
  854. background: url('http://i.imgur.com/K59aJgC.png') center no-repeat;
  855. background-size: contain;
  856. height:40px;
  857. width:40px;
  858. top:20px;
  859. cursor:cell;
  860. z-index:99999999;
  861.  
  862.  
  863. border-radius: 5px;
  864.  
  865.  
  866. position:fixed;
  867. right:20px;
  868. opacity:0.3;
  869. transition: opacity 0.6s;
  870. }
  871. #ident:hover {
  872. opacity:0.6;
  873. }
  874.  
  875.  
  876. #s-m-t-tooltip {
  877. max-width:300px;
  878. height:18px;
  879. border-radius: 0px;
  880. text-transform:uppercase;
  881. padding:4px;
  882. color:#fff;
  883. border-top: 2px solid {color:Highlights};
  884. border-bottom: 2px solid {color:Highlights};
  885. letter-spacing:1px;
  886. background:{color:Background};
  887. font: 15px 'Archivo Black', sans-serif;
  888. z-index:99999;}
  889.  
  890. .linkblock{
  891. border: 3px solid {color:Highlights};
  892. border-radius:15px;
  893. padding: 10px 5px;
  894. text-align:center;
  895. }
  896.  
  897. .linkblock a{
  898. font-size:20px;
  899. color:{select:QualityText};
  900.  
  901. }
  902.  
  903. .linkblock a:hover{
  904. font-size:20px;
  905. color:rgb(240,240,240);
  906. }
  907.  
  908.  
  909.  
  910.  
  911. /*tumblr controls edit*/
  912.  
  913.  
  914. .tumblr_blog {
  915. text-transform:uppercase;
  916. color:#fff !important;
  917. font: 15px 'Archivo Black', sans-serif;
  918. }
  919.  
  920. .iframe-controls-container.iframe-controls-container--logged-in .tx-button {
  921. background-color:{color:Background} !important;
  922.  
  923. border-radius: 5px;
  924.  
  925. }
  926.  
  927.  
  928. .iframe-controls-container.iframe-controls-container--logged-in .tx-button:hover {
  929. background-color: #E06A5C !important;
  930.  
  931. }
  932.  
  933. .tx-button message-button a{
  934. background-color:{color:Background} !important;
  935. border-radius: 5px;
  936. }
  937.  
  938. .tx-button message-button a:hover{
  939.  
  940. background-color: #E06A5C !important;
  941.  
  942. }
  943. /*
  944. .tmblr-iframe{
  945. background:{color:Background} !important;
  946.  
  947. border-radius: 5px;
  948. }
  949.  
  950. .tmblr-iframe:hover {
  951. background: #E06A5C !important;
  952.  
  953. }
  954.  
  955.  
  956.  
  957. */
  958. </style>
  959.  
  960.  
  961. <script type="text/javascript" src="http://static.tumblr.com/q0etgkr/EIBmz7s0p/infinitescrolling.js"></script>
  962.  
  963. <script src="jquery-3.2.1.min.js"></script>
  964.  
  965. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  966.  
  967. <script src="http://static.tumblr.com/fiw4iub/4jdnu5ta4/jquery.style-my-tooltips.js"></script>
  968.  
  969. <script>
  970. (function($){
  971. $(document).ready(function(){
  972. $("[title],a[title],img[title]").style_my_tooltips({
  973. tip_follows_cursor:true,
  974. tip_delay_time:0,
  975. tip_fade_speed:0,
  976. attribute:"title"
  977. });
  978. });
  979. })(jQuery);
  980. </script>
  981.  
  982. <script>
  983. $("iframe.tumblr_audio_player").on("load", function() {
  984. $(this).contents().find("div.audio_player,div.audio_controls,div.audio_player_overlay").css("background","transparent");
  985. $(this).closest("div._audio-wrapper").show();
  986. });
  987. </script>
  988.  
  989. </head>
  990. <body>
  991. <a href="http://crocketts-themes.tumblr.com/" title="theme by crockett">
  992. <div id="ident"></div></a>
  993.  
  994. <div id="header">
  995. <div id="partitionmain" class="partitions">{text:TabName}</div>
  996. <div id="partitionsecd" class="partitions">{text:Tab2Name}</div>
  997.  
  998. </div>
  999.  
  1000. <div id="top">
  1001. <div id="topmid">
  1002. <div id="arrows">››</div>
  1003. <div id="dots">............................................................................................</div>
  1004. <div class="maintitle"><a href="/">{Title}</a></div>
  1005. <div id="hide"></div>
  1006. <div id="hide2"></div>
  1007.  
  1008. <div id="minbuttonsanc">
  1009. <a href="{text:SmallButton1URL}" target="_blank"><div class="minorbutton" title="{text:SmallButtonOne}">A</div></a>
  1010. <a href="{text:SmallButton2URL}" target="_blank"><div class="minorbutton" title="{text:SmallButtonTwo}">B</div></a>
  1011. <a href="{text:SmallButton3URL}" target="_blank"><div class="minorbutton" title="{text:SmallButtonThree}">C</div></a>
  1012. <a href="{text:SmallButton4URL}" target="_blank"><div class="minorbutton" title="{text:SmallButtonFour}">D</div></a>
  1013. </div>
  1014.  
  1015. </div>
  1016.  
  1017. </div>
  1018.  
  1019.  
  1020. <div id="top2">
  1021.  
  1022. <div id="anchor">
  1023.  
  1024. {block:IfLink1Enabled}
  1025. <div class="wepbox">
  1026. <a href="{text:Link1URL}" target="_blank">
  1027. <div class ="weppic">
  1028. <img src="{text:Link1Img}" style="height:75px; float:center;margin-top:5px;display: block;margin: auto;">
  1029. </div>
  1030. <div class="wepboxtxt" >
  1031. {text:Link1}
  1032. </div>
  1033. </a>
  1034. </div>
  1035.  
  1036. {/block:IfLink1Enabled}
  1037. {block:IfLink2Enabled}
  1038. <div class="wepbox">
  1039. <a href="{text:Link2URL}" target="_blank">
  1040. <div class ="weppic">
  1041. <img src="{text:Link2Img}" style="height:75px; float:center;margin-top:5px;display: block;margin: auto;">
  1042. </div>
  1043. <div class="wepboxtxt">
  1044. {text:Link2}
  1045. </div>
  1046. </a>
  1047. </div>
  1048. {/block:IfLink2Enabled}
  1049. {block:IfLink3Enabled}
  1050.  
  1051. <div class="wepbox">
  1052. <a href="{text:Link3URL}" target="_blank">
  1053. <div class ="weppic">
  1054. <img src="{text:Link3Img}" style="height:75px; float:center;margin-top:5px;display: block;margin: auto;">
  1055. </div>
  1056.  
  1057. <div class="wepboxtxt">
  1058. {text:Link3}
  1059. </div>
  1060. </a>
  1061. </div>
  1062. {/block:IfLink3Enabled}
  1063. {block:IfLink4Enabled}
  1064.  
  1065. <div class="wepbox">
  1066. <a href="{text:Link4URL}" target="_blank">
  1067. <div class ="weppic">
  1068. <img src="{text:Link4Img}" style="height:75px; float:center;margin-top:5px;display: block;margin: auto;">
  1069. </div>
  1070.  
  1071. <div class="wepboxtxt">
  1072. {text:Link4}
  1073. </div>
  1074. </a>
  1075. </div>
  1076. {/block:IfLink4Enabled}
  1077. {block:IfLink5Enabled}
  1078.  
  1079. <div class="wepbox">
  1080. <a href="{text:Link5URL}" target="_blank">
  1081. <div class ="weppic">
  1082. <img src="{text:Link5Img}" style="height:75px; float:center;margin-top:5px;display: block;margin: auto;">
  1083. </div>
  1084. <div class="wepboxtxt">
  1085. {text:Link5}
  1086. </div>
  1087. </a>
  1088. </div>
  1089. {/block:IfLink5Enabled}
  1090. {block:IfLink6Enabled}
  1091.  
  1092. <div class="wepbox">
  1093. <a href="{text:Link6URL}" target="_blank">
  1094. <div class ="weppic">
  1095. <img src="{text:Link6Img}" style="height:75px; float:center;margin-top:5px;display: block;margin: auto;">
  1096. </div>
  1097.  
  1098. <div class="wepboxtxt">
  1099. {text:Link6}
  1100. </div>
  1101. </a>
  1102. </div>
  1103. {/block:IfLink6Enabled}
  1104. {block:IfLink7Enabled}
  1105.  
  1106. <div class="wepbox">
  1107. <a href="{text:Link7URL}" target="_blank">
  1108. <div class ="weppic">
  1109. <img src="{text:Link7Img}" style="height:75px; float:center;margin-top:5px;display: block;margin: auto;">
  1110. </div>
  1111.  
  1112. <div class="wepboxtxt">
  1113. {text:Link7}
  1114. </div>
  1115. </a>
  1116. </div>
  1117. {/block:IfLink7Enabled}
  1118. {block:IfLink8Enabled}
  1119.  
  1120. <div class="wepbox">
  1121. <a href="{text:Link8URL}" target="_blank">
  1122. <div class ="weppic">
  1123. <img src="{text:Link8Img}" style="height:75px; float:center;margin-top:5px;display: block;margin: auto;">
  1124. </div>
  1125.  
  1126. <div class="wepboxtxt">
  1127. {text:Link8}
  1128. </div>
  1129. </a>
  1130. </div>
  1131. {/block:IfLink8Enabled}
  1132. </div><!--anchor-->
  1133.  
  1134.  
  1135.  
  1136.  
  1137. </div>
  1138.  
  1139.  
  1140.  
  1141.  
  1142.  
  1143.  
  1144.  
  1145. <!---->
  1146.  
  1147. <div id="content">
  1148.  
  1149. <div class = "autopagerize_page_element" >
  1150.  
  1151. {block:Posts}
  1152. <div id="posts">
  1153.  
  1154.  
  1155. <!--
  1156. <a href="{ReblogURL}" target="_blank" title="REBLOG">
  1157. <div id="reblogbutton" class="minorbutton">
  1158. <div id="letterbutton"></div>
  1159. </div>
  1160. </a> -->
  1161.  
  1162. <!--
  1163. <div id="notebox">
  1164. <div id="nboxpermalink" class="nboxdes"><a href="{ReblogURL}" target="_blank">Reblog</a></div>
  1165. <div id="nboxpermalink" class="nboxdes"><a href="{Permalink}" >Permalink</a></div>
  1166. {block:NoteCount}<div id="nboxnotes" class="nboxdes">{NoteCountWithLabel}</div>{/block:NoteCount}
  1167.  
  1168.  
  1169.  
  1170. </div>
  1171. -->
  1172.  
  1173. {block:Photo}
  1174. <div id ="photohead" class="contheaders"><img src="http://2.bp.blogspot.com/-bBEAeDB3Pkg/UhkoIqVexRI/AAAAAAAAAGo/KJPoHiNWtLo/s1600/Six+string+stinger.jpg" height="25px" width="25px"> <div class="conttext"><li style="font-size:8px !important;">This post is a </li><li>Photo</li></div></div>
  1175. {LinkOpenTag}<div id="photo"><img src="{PhotoURL-HighRes}" /></div>{LinkCloseTag}
  1176. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  1177. {/block:Photo}
  1178.  
  1179. {block:Photoset}
  1180. <div id ="photosethead" class="contheaders"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHZiUQ4VA2vjfZBekQ9Mt3wBbQ7l9rWCiClOFOeB4Vl2gEVT7j" height="25px" width="25px"> <div class="conttext"><li style="font-size:8px !important;">This post is a </li><li>Photoset</li></div></div>
  1181. {Photoset-500}
  1182. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  1183. {/block:Photoset}
  1184.  
  1185. {block:Video}
  1186. <div id ="vidhead" class="contheaders"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoZTA9WMxNRFstJB3NhOSeVHTpaZjgXzr1zZPv9Qf672RlayUopw" height="25px" width="25px"> <div class="conttext"><li style="font-size:8px !important;">This post is a </li><li>Video</li></div></div>
  1187. {Video-500}
  1188. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  1189. {/block:Video}
  1190.  
  1191. {block:Audio}
  1192. <div id="askcont" class="headbox">
  1193. {block:AlbumArt}<img src="{AlbumArtURL}" width="100" height="100">{/block:AlbumArt}
  1194.  
  1195. <div id="audiob">
  1196. {block:Artist}<div class="text">{Artist}</div>{/block:Artist}
  1197. {block:TrackName}<div id ="asktitle" class="title">{TrackName}</div>{/block:TrackName}
  1198.  
  1199. {AudioPlayerBlack}
  1200.  
  1201. </div></div>
  1202.  
  1203. <div class="text">~ {PlayCountWithLabel}</div>
  1204. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  1205. {/block:Audio}
  1206.  
  1207. {block:Quote}
  1208. <div class="title">“{Quote}”</div>
  1209. {block:Source}<div class="text"><br>~ {Source}</div>{/block:Source}
  1210. {/block:Quote}
  1211.  
  1212. {block:Text}
  1213. {block:Title}<div class="title">{Title}</div>{/block:Title}
  1214. <div class="text">{Body}</div>
  1215. {/block:Text}
  1216.  
  1217. {block:Answer}
  1218. <div id="askcont" class="headbox">
  1219. <img src="http://i.imgur.com/YrLUaTf.png" width="100" height="100">
  1220. <div id="asker">
  1221. <div class="text" id="askert">You were questioned by {Asker}</div>
  1222. <div id ="asktitle" class="title">{Question}</div>
  1223. </div></div>
  1224. <div class="text">{Answer}</div>
  1225. {block:Answer}
  1226.  
  1227. {block:Chat}
  1228. {block:Title}<div class="title">{Title}</div>{/block:Title}
  1229. <div class="text">
  1230. {block:Lines}
  1231. {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
  1232. {/block:Lines}
  1233. </div> <!--text-->
  1234. {/block:Chat}
  1235.  
  1236. {block:Link}
  1237. <div id ="photohead" class="contheaders"><img src="https://wiki.teamfortress.com/w/images/4/4d/Tf_play_game_everymap.png?t=20120903063544" height="25px" width="25px"> <div class="conttext"><li style="font-size:8px !important;">This post is a </li><li>Link</li></div></div>
  1238. <div class="linkblock">{block:Thumbnail}
  1239. <img src="{Thumbnail-HighRes}" target="_blank" width="200px" height="auto" >
  1240. {/block:Thumbnail}
  1241.  
  1242.  
  1243.  
  1244.  
  1245.  
  1246. <p style="font: 20px 'Archivo Black', sans-serif; text-transform:uppercase;margin-top:-5px"><a href="{URL}">{Name}</a></p>
  1247. <p style="line-height: 20%; font-size:12px">{block:Host} ({Host}) {/block:Host}</p>
  1248. </div>
  1249. {block:Description}
  1250. <div class="text">{Description}</div>
  1251. {/block:Description}
  1252. {/block:Link}
  1253.  
  1254. <div id="permabox">
  1255. <div id="permalink">
  1256. {block:Date}
  1257. <a href="{Permalink}">
  1258. <div id="postdate" class="notebutton">
  1259. POSTED {MonthNumberWithZero}{DayOfMonthWithZero}-{Year} AT {24HourwithZero}{Minutes}
  1260. </div>
  1261. </a>
  1262. {/block:Date}
  1263. </div>
  1264.  
  1265.  
  1266.  
  1267.  
  1268. {block:HasTags}
  1269.  
  1270.  
  1271.  
  1272. <div id="inditag">
  1273. {block:Tags}<a href="{TagURL}" class="notebutton">{Tag}</a><span class="comma"> </span>{/block:Tags}
  1274. </div>
  1275.  
  1276.  
  1277. {/block:HasTags}
  1278.  
  1279.  
  1280.  
  1281. </div> <!--permabox-->
  1282.  
  1283.  
  1284.  
  1285. {block:PostNotes}
  1286. <div id="notecontainer">{PostNotes}</div>
  1287. {/block:PostNotes}
  1288. </div><!--posts-->
  1289.  
  1290.  
  1291. {/block:Posts}
  1292. </div> <!--autoresize for inf scroll-->
  1293.  
  1294.  
  1295.  
  1296.  
  1297. </div> <!--content-->
  1298. <div id ="bbanner"></div>
  1299. </body>
Advertisement
Add Comment
Please, Sign In to add comment