API tools faq
paste
Advertisement
Hardrockdesign

Theme TWD

Hardrockdesign
Jun 5th, 2015
2,161
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.45 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6. {block:Description}
  7. <meta name="description" content="{MetaDescription}" />
  8. {/block:Description}
  9. <meta name="image:Cabecera" content=""/>
  10. <meta name="image:Administrador 1" content=""/>
  11. <meta name="image:Administrador 2" content=""/>
  12. <meta name="image:Administrador 3" content=""/>
  13. <meta name="image:Administrador 4" content=""/>
  14. <meta name="color:Principal" content="#111111" />
  15. <meta name="color:Secundario" content="#4C4152" />
  16. <meta name="color:Terciario" content="#eeeeee" />
  17. <meta name="color:Cuaternario" content="#A9AC99" />
  18. <meta name="color:Fondo" content="#DBD1B8" />
  19. <meta name="text:Admin1 Nombre" content="" />
  20. <meta name="text:Admin2 Nombre" content="" />
  21. <meta name="text:Admin3 Nombre" content="" />
  22. <meta name="text:Admin4 Nombre" content="" />
  23. <meta name="text:Fecha noticia 1" content="" />
  24. <meta name="text:Contenido noticia 1" content="" />
  25. <meta name="text:Fecha noticia 2" content="" />
  26. <meta name="text:Contenido noticia 2" content="" />
  27. <meta name="text:Fecha noticia 3" content="" />
  28. <meta name="text:Contenido noticia 3" content="" />
  29. <meta name="text:Link 1" content="" />
  30. <meta name="text:Link 1 URL" content="" />
  31. <meta name="text:Link 2" content="" />
  32. <meta name="text:Link 2 URL" content="" />
  33. <meta name="text:Link 3" content="" />
  34. <meta name="text:Link 3 URL" content="" />
  35. <meta name="text:Link 4" content="" />
  36. <meta name="text:Link 4 URL" content="" />
  37. <meta name="text:Link 5" content="" />
  38. <meta name="text:Link 5 URL" content="" />
  39. <meta name="text:Link 6" content="" />
  40. <meta name="text:Link 6 URL" content="" />
  41. </head>
  42. <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'>
  43. <style type="text/css">
  44.  
  45. body {
  46. background: {color:Fondo};
  47. background-repeat: repeat;
  48. background-attachment: fixed;
  49. font-family: arial;
  50. }
  51.  
  52. #footer {
  53. margin-top: 10px;
  54. text-align: center;
  55. color: #111;
  56. font-size: 12px;
  57. text-transform: uppercase;
  58. font-weight: bold;
  59. position: absolute;
  60. font-family: Arial;
  61. right: 0px;
  62. bottom: 0px;
  63. }
  64.  
  65. #footer a {
  66. color: #111;
  67. }
  68.  
  69. ::-webkit-scrollbar {background-color: {color:Cuaternario}; height:8px; width:8px}
  70. ::-webkit-scrollbar-thumb:vertical {background-color: {color:Secundario};}
  71. ::-webkit-scrollbar-thumb:horizontal {background-color: {color:Secundario}; height:8px!important}
  72.  
  73. img {
  74. max-width: 100%;
  75. }
  76.  
  77. a {
  78. text-decoration: none;
  79. color: {color:Cuaternario};
  80. font-weight: bold;
  81. }
  82.  
  83. .notas li {
  84. list-style-type:none;
  85. }
  86.  
  87. .notas img {
  88. display:none!important;
  89. }
  90.  
  91. .notas a {
  92. color: {color:Principal};
  93. }
  94.  
  95. .posts {
  96. width: 500px;
  97. padding: 5px;
  98. text-align: justify;
  99. background: {color:Terciario};
  100. margin-bottom: 20px;
  101. border-top: 30px solid {color:Secundario};
  102. border-bottom: 30px solid {color:Secundario};
  103. }
  104.  
  105. .notasindex {
  106. position: absolute;
  107. right: 0px;
  108. top: 30px;
  109. }
  110.  
  111. .notasindex a {
  112. display: block;
  113. background: {color:Secundario};
  114. font-family: Open Sans Condensed;
  115. text-align: center;
  116. line-height: 100%;
  117. text-transform: uppercase;
  118. width: 190px;
  119. border-radius: 20px;
  120. margin-bottom: 4px;
  121. padding-top: 5px;
  122. padding-bottom: 5px;
  123. }
  124.  
  125. .caption {
  126. font-size: 11px;
  127. }
  128.  
  129. #navegador {
  130. width: 100%;
  131. position: fixed;
  132. top: 0px;
  133. z-index: 999;
  134. text-align:center;
  135. font-family: Open Sans Condensed;
  136. text-transform: uppercase;
  137. font-size: 11px;
  138. padding-top: 5px;
  139. padding-bottom: 5px;
  140. background: {color:Cuaternario};
  141. line-height: 100%;
  142. left: 0px;
  143. right: 0px;
  144. }
  145.  
  146. #navegador a {
  147. color: #000;
  148. }
  149.  
  150. .cmn-t-underline {
  151. line-height: 100%;
  152. margin-bottom:6px;
  153. transition: 1s;
  154. width: 80px;
  155. display: inline-block;
  156. text-align: center;
  157. position: relative;
  158. }
  159. .cmn-t-underline:after {
  160. display: block;
  161. position: absolute;
  162. left: 0;
  163. bottom: -6px;
  164. width: 0;
  165. height: 2px;
  166. background-color: {color:Secundario};
  167. content: "";
  168. transition: width 1s;
  169. }
  170.  
  171. .cmn-t-underline:hover:after {
  172. width: 100%;
  173. }
  174.  
  175. #cuerpo {
  176. width: 820px;
  177. margin-right: auto;
  178. margin-left: auto;
  179. background: {color:Principal};
  180. padding-bottom: 40px;
  181. bottom: -20px;
  182. position: relative;
  183. top: 19px;
  184. }
  185.  
  186. .fotocabecera {
  187. width: 500px;
  188. height: 312px;
  189. background:url('{image:Cabecera}');
  190. display: inline-block;
  191. margin-right: 10px;
  192. }
  193.  
  194. #cabecera {
  195. width: 800px;
  196. padding: 10px;
  197. background: {color:Terciario};
  198. margin-bottom: 30px;
  199. position: relative;
  200. }
  201.  
  202. .informacion {
  203. height: 312px;
  204. position: absolute;
  205. top: 0px;
  206. width: 200px;
  207. display: inline-block;
  208. }
  209.  
  210. .titulo {
  211. background: {color:Secundario};
  212. color: {color:Cuaternario};
  213. line-height: 100%;
  214. padding-top: 10px;
  215. padding-bottom: 10px;
  216. display: block;
  217. font-size: 30px;
  218. font-family: Open Sans Condensed;
  219. text-transform: uppercase;
  220. width: 290px;
  221. text-align: center;
  222. margin-top: 5px;
  223. }
  224.  
  225. h3 {
  226. background: {color:Secundario};
  227. color: {color:Cuaternario};
  228. line-height: 100%;
  229. padding-top: 10px;
  230. padding-bottom: 10px;
  231. display: block;
  232. font-size: 20px;
  233. font-family: Open Sans Condensed;
  234. text-transform: uppercase;
  235. width: 100%;
  236. margin-top: 0px;
  237. margin-bottom: 0px;
  238. text-align: center;
  239. }
  240.  
  241. .texto {
  242. padding: 15px;
  243. font-size: 13px;
  244. }
  245.  
  246. .tabs { /* es el rectángulo contenedor */
  247. margin: 0 auto;
  248. height: 267px;
  249. position: relative;
  250. width: 290px;
  251. }
  252. .tab { /* cada una de las pestañas */
  253. float: left;
  254. }
  255. .tab label {
  256. background: {color:Secundario};
  257. color: {color:Cuaternario};
  258. width: 94px;
  259. margin-top: 10px;
  260. cursor: pointer;
  261. left: 0;
  262. text-align: center;
  263. font-size: 30px;
  264. font-family: Open Sans Condensed;
  265. position: relative;
  266. line-height: 100%;
  267. display: inline-block;
  268. margin-right: 2px;
  269. font-weight: bold;
  270. padding-top: 10px;
  271. padding-bottom: 10px;
  272. }
  273. /* el control input sólo lo necesitamos para que las pestañas permanezcan abiertas así que lo ocultamos */
  274. .tab [type=radio] { display: none; }
  275.  
  276. /* el contenido de las pestañas */
  277. .content {
  278. background-color: {color:Principal};
  279. color: #ababab;
  280. bottom: 0;
  281. left: 0;
  282. overflow: auto;
  283. padding: 10px;
  284. position: absolute;
  285. right: 0;
  286. top: 65px;
  287. }
  288. /* y un poco de animación */
  289. .content > * {
  290. opacity: 0;
  291. transform: translateX(-200px);
  292. transition: 1s;
  293. }
  294.  
  295. /* controlamos la pestaña activa */
  296. [type="radio"]:checked ~ label {
  297. background: {color:Secundario};
  298. color: {color:Cuaternario};
  299. z-index: 2;
  300. }
  301. [type=radio]:checked ~ label ~ .content { z-index: 1; }
  302. [type=radio]:checked ~ label ~ .content > * {
  303. opacity: 1;
  304. transform: translateX(0);
  305. transition: 1s;
  306. }
  307.  
  308. #description {
  309. margin-top: 0px;
  310. font-size: 12px;
  311. text-align: justify;
  312. font-family: arial;
  313. }
  314.  
  315. .postcontenedor {
  316. margin-left: 50px;
  317. width: 730px;
  318. position: relative;
  319. }
  320.  
  321. .submitter {
  322. line-height: 100%;
  323. margin: 0px;
  324. font-size: 10px;
  325. text-transform: uppercase;
  326. bottom: -15px;
  327. position: relative;
  328. height: 20px;
  329. padding-left: 15px;
  330. }
  331.  
  332. .caption {
  333. margin: 15px;
  334. padding: 15px;
  335. background: {color:Secundario};
  336. color: #ababab;
  337. font-size: 12px;
  338. }
  339.  
  340. blockquote {
  341. border-left: 3px solid {color:Terciario};
  342. padding-left: 8px;
  343. }
  344.  
  345. .admin {
  346. width: 120px;
  347. background: {color:Secundario};
  348. font-size: 10px;
  349. text-transform: uppercase;
  350. line-height: 100%;
  351. padding-top: 3px;
  352. padding-bottom: 3px;
  353. padding-left: 10px;
  354. font-weight: bold;
  355. text-align: left;
  356. font-family: Open Sans Condensed;
  357. border-radius: 0px 0px 5px 5px;
  358. color: #ababab;
  359. }
  360.  
  361. .fotoadmin {
  362. border-radius: 5px 5px 0px 0px;
  363. width: 130px;
  364. height: 65px;
  365. }
  366.  
  367. .fecha {
  368. font-size: 20px;
  369. font-weight: bold;
  370. line-height: 100%;
  371. padding: 5px;
  372. background: {color:Secundario};
  373. color: {color:Cuaternario};
  374. margin-bottom: 2px;
  375. float:left;
  376. margin-right: 8px;
  377. }
  378.  
  379. .question {
  380. font-size: 11px;
  381. padding: 25px;
  382. margin-top:5px;
  383. }
  384.  
  385. .autorquest {
  386. text-align: right;
  387. margin-top: 5px;
  388. }
  389.  
  390. .replies {
  391. padding-left: 10px;
  392. padding-right: 10px;
  393. padding-bottom: 10px;
  394. font-size: 13px;
  395. }
  396. </style>
  397. <body>
  398. <div id="navegador"><a href="/" style="margin-right:2px;" class="cmn-t-underline">Inicio</a><a href="/ask" style="margin-right:2px;" class="cmn-t-underline">Pregunta</a><a href="/submit" style="margin-right:2px;" class="cmn-t-underline">Colabora</a><a href="{text:Link 1 URL}" style="margin-right:2px;" class="cmn-t-underline">{text:Link 1}</a><a href="{text:Link 2 URL}" style="margin-right:2px;" class="cmn-t-underline">{text:Link 2}</a><a href="{text:Link 3 URL}" style="margin-right:2px;" class="cmn-t-underline">{text:Link 3}</a><a href="{text:Link 4 URL}" style="margin-right:2px;" class="cmn-t-underline">{text:Link 4}</a><a href="{text:Link 5 URL}" style="margin-right:2px;" class="cmn-t-underline">{text:Link 5}</a><a href="{text:Link 6 URL}" style="margin-right:2px;" class="cmn-t-underline">{text:Link 6}</a><a href="http://thecaptainknowsbest.tumblr.com" class="cmn-t-underline">Créditos</a></div><div id="cuerpo">
  399. <div id="cabecera"><div class="fotocabecera"></div><div class="informacion"><div class="tabs">
  400. <div class="tab">
  401. <input type="radio" id="tab-1" name="tab-group-1" checked>
  402. <label for="tab-1">1</label>
  403. <div class="content">{block:Description}
  404. <p id="description">{Description}</p>
  405. {/block:Description}</div>
  406. </div>
  407. <div class="tab">
  408. <input type="radio" id="tab-2" name="tab-group-1">
  409. <label for="tab-2">2</label>
  410. <div class="content"><center><div style="width: 130px; margin-right: 5px; display: inline-block;"><div style="background:url('{image:Administrador 1}');" class="fotoadmin"></div><div class="admin">{text:Admin1 Nombre}</div></div><div style="width: 130px; display: inline-block;"><div style="background:url('{image:Administrador 2}');" class="fotoadmin"></div><div class="admin">{text:Admin2 Nombre}</div></div>
  411. <div style="height: 8px;"></div><div style="width: 130px; margin-right: 5px; display: inline-block;"><div style="background:url('{image:Administrador 3}');" class="fotoadmin"></div><div class="admin">{text:Admin3 Nombre}</div></div><div style="width: 130px; display: inline-block;"><div style="background:url('{image:Administrador 4}');" class="fotoadmin"></div><div class="admin">{text:Admin4 Nombre}</div></div></center>
  412. </div>
  413. </div>
  414. <div class="tab">
  415. <input type="radio" id="tab-3" name="tab-group-1">
  416. <label for="tab-3">3</label>
  417. <div class="content"><div style="font-size: 10px; text-align: justify;"><span class="fecha">{text:Fecha noticia 1}</span> {text:Contenido noticia 1}
  418. <br><br><span class="fecha">{text:Fecha noticia 2}</span> {text:Contenido noticia 2}
  419. <br><br><span class="fecha">{text:Fecha noticia 3}</span> {text:Contenido noticia 3}
  420. </div>
  421. </div></div>
  422. </div>
  423. <h1 class="titulo">{Title}</h1>
  424. </div></div>
  425.  
  426. {block:Posts}<div class="postcontenedor"><div class="posts">{block:Title}
  427. <h3><a href="{Permalink}">{Title}</a></h3>
  428. {/block:Title}{block:Text}
  429. {block:Submission}<a href="{SubmitterURL}" class="submitter">Enviado por {Submitter}:</a>{/block:Submission}
  430. <div class="texto">{Body}</div>
  431. {block:More}<a href="{Permalink}">{lang:Read more}</a>{/block:More}
  432. {/block:Text}{block:Photo}
  433. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  434.  
  435. {block:Caption}
  436. <div class="caption">{Caption}</div>
  437. {/block:Caption}
  438. {/block:Photo}{block:Panorama}
  439. {LinkOpenTag}
  440. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  441. {LinkCloseTag}{block:Caption}
  442. <div class="caption">{Caption}</div>
  443. {/block:Caption}
  444. {/block:Panorama}{block:Photoset}
  445. {Photoset-500}{block:Caption}
  446. <div class="caption">{Caption}</div>
  447. {/block:Caption}
  448. {/block:Photoset}
  449. {block:Answer}<h3>Pregunta</h3><div class="question">{Question}<div class="autorquest">─ {Asker}.</div></div>
  450. <div class="replies">{Replies}</div>{/block:Answer}
  451. {block:Quote}
  452. "{Quote}"
  453.  
  454. {block:Source}
  455. <div class="source">{Source}</div>
  456. {/block:Source}
  457. {/block:Quote}{block:Link}
  458. <a href="{URL}" class="link" {Target}>{Name}</a>
  459.  
  460. {block:Description}
  461. <div class="description">{Description}</div>
  462. {/block:Description}
  463. {/block:Link}{block:Chat}
  464. {block:Title}
  465. <h3><a href="{Permalink}">{Title}</a></h3>
  466. {/block:Title}
  467.  
  468. <ul class="chat">
  469. {block:Lines}
  470. <li class="{Alt} user_{UserNumber}">
  471. {block:Label}
  472. <span class="label">{Label}</span>
  473. {/block:Label}{Line}
  474. </li>
  475. {/block:Lines}
  476. </ul>
  477. {/block:Chat}{block:Video}
  478. {Video-500}{block:Caption}
  479. <div class="caption">{Caption}</div>
  480. {/block:Caption}
  481. {/block:Video}{block:Audio}
  482. {AudioEmbed}{block:Caption}
  483. <div class="caption">{Caption}</div>
  484. {/block:Caption}
  485. {/block:Audio}
  486. </div>{block:indexpage}<div class="notasindex">{block:Date}<a href="{Permalink}">{TimeAgo}</a><a href="{ReblogURL}" target="_blank" class="details">Reblog</a>{/block:Date} {block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}</div>{/block:indexpage}</div>
  487. {block:permalinkpage}{block:PostNotes}<div class="notas">{PostNotes}</div>{/block:PostNotes}{/block:permalinkpage}{/block:Posts}
  488.  
  489. </div><p id="footer">
  490. {block:PreviousPage}
  491. <a href="{PreviousPage}">&#171; Previous</a>
  492. {/block:PreviousPage}{block:NextPage}
  493. <a href="{NextPage}">Next &#187;</a>
  494. {/block:NextPage}
  495. </p>
  496. </body>
  497. </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!