API tools faq
paste
Advertisement
Guest User

Tablón Fully

a guest
Sep 11th, 2015
1,491
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.07 KB | None | 0 0
raw download clone embed print report
  1. ---- JAVASCRIPT. Posición: inicio ----
  2.  
  3. jQuery(document).ready(function(){
  4. jQuery('#botonA').click( function() {
  5. jQuery('.infos').slideUp('slow');
  6. jQuery('#contA').slideDown('slow');
  7. });
  8. jQuery('#botonB').click( function() {
  9. jQuery('.infos').slideUp('slow');
  10. jQuery('#contB').slideDown('slow');
  11. });
  12. jQuery('#botonC').click( function() {
  13. jQuery('.infos').slideUp('slow');
  14. jQuery('#contC').slideDown('slow');
  15. });
  16. });
  17.  
  18. ---- CSS ----
  19.  
  20. /*** Tablon de anuncios por Haiass ***/
  21. #haiass-tab .sociales {
  22. text-align: center;
  23. font-size: 10px;
  24. text-transform: uppercase;
  25. width: 50px;
  26. position: relative;
  27. top: -10px;
  28. line-height: 100%;
  29. font-family: calibri;
  30. display: inline-block;
  31. font-weight: bold;
  32. }
  33.  
  34. .noticias .fecha {
  35. display: inline-block;
  36. font-weight: bold;
  37. text-align: center;
  38. color: #72cacc;
  39. line-height: 100%;
  40. font-size: 15px;
  41. font-style: italic;
  42. font-family: georgia;
  43. }
  44.  
  45. .titulo-ev {
  46. text-transform: uppercase;
  47. line-height: 100%; margin-bottom: 10px;
  48. font-weight: bold;
  49. font-size: 10px;
  50. }
  51.  
  52. #haiass-tab .noticias {
  53. height: 190px;
  54. margin-left: 10px;
  55. line-height: 110%;
  56. margin-right: 10px;
  57. text-align: justify;
  58. font-size: 11px;
  59. width: 210px;
  60. }
  61.  
  62. #haiass-tab .eventos {
  63. width: 200px;
  64. height: 190px;
  65. text-align: justify;
  66. line-height: 110%;
  67. font-size: 11px;
  68. font-family: calibri;
  69. }
  70.  
  71. .eventos img {
  72. display: inline-block;
  73. margin-left: 3px;
  74. }
  75.  
  76. #haiass-tab #contenido .clima .temp .max, #haiass-tab #contenido .clima .temp .min {display: inline-block; font-size: 15px; font-family: georgia; font-style: italic; width: 70px;}
  77. .temp .max::after {
  78. content: 'Máximo';
  79. display: block;
  80. text-transform: uppercase;
  81. font-family: calibri;
  82. font-size: 10px;
  83. line-height: 110%;
  84. font-style: normal;
  85. }
  86.  
  87. .clima .estacion {
  88. width: 100%;
  89. display: block;
  90. letter-spacing: 4px;
  91. font-weight: bold;
  92. line-height: 100%;
  93. text-transform: uppercase;
  94. font-size: 10px;
  95. font-family: calibri;
  96. color: #6b6b6b;
  97. position: relative;
  98. top: 168px;
  99. padding-top: 5px;
  100. padding-bottom: 5px;
  101. background: #ebebed;
  102. text-align: center;
  103. }
  104.  
  105. .temp .min::after {
  106. font-style: normal;
  107. content: 'Mínimo';
  108. font-size: 10px;
  109. display: block;
  110. text-transform: uppercase;
  111. font-family: calibri;
  112. line-height: 110%;
  113. }
  114.  
  115. #haiass-tab #contenido .clima {
  116. position: relative;
  117. width: 200px;
  118. height: 190px;
  119. }
  120.  
  121. #haiass-tab #contenido .clima img {
  122. position: absolute;
  123. top: 0px;
  124. left: 0px;
  125. }
  126.  
  127. #haiass-tab #contenido .temp {
  128. background: #ebebed;
  129. top: 0px;
  130. position: absolute;
  131. right: 0px;
  132. font-family: georgia;
  133. font-size: 15px;
  134. font-weight: bold;
  135. font-style: italic;
  136. display: inline-block;
  137. line-height: 100%;
  138. padding-top: 7px;
  139. padding-bottom: 7px;
  140. color: #6b6b6b;
  141. text-align: center;
  142. width: 159px;
  143. }
  144.  
  145. .links-tab {
  146. margin-left: 5px;
  147. margin-right: 10px;
  148. line-height: 100%;
  149. width: 210px;
  150. height: 190px;
  151. font-size: 10px;
  152. }
  153.  
  154. .links-tab .largo {
  155. display: block;
  156. line-height: 100%;
  157. width: 195px;
  158. font-style: italic;
  159. font-family: georgia;
  160. padding-bottom: 2px;
  161. padding-top: 3px;
  162. margin-bottom: 1px;
  163. }
  164.  
  165. .links-tab a {
  166. display: inline-block;
  167. line-height: 100%;
  168. width: 89px;
  169. text-align: left;
  170. font-style: italic;
  171. font-family: georgia;
  172. color: #6b6b6b;
  173. background: #ebebed;
  174. border-left: 10px solid #72cacc;
  175. padding-bottom: 3px;
  176. padding-top: 3px;
  177. padding-left: 5px;
  178. margin-bottom: 1px;
  179. transition: 1s;
  180. }
  181.  
  182. .links-tab a:hover {transition: 1s; border-left: 10px solid #edeb5a;}
  183.  
  184. .credit::first-letter {
  185. font-style: italic;
  186. font-family: georgia;
  187. font-size: 14px;
  188. padding-right: 4px;
  189. font-weight: bold;
  190. color: #86a258;
  191. }
  192.  
  193. .admin {
  194. width: 87px;
  195. height: 40px;
  196. position: relative;
  197. border: 5px solid #edeb5a;
  198. display: inline-block;
  199. margin-bottom: 3px;
  200. }
  201.  
  202. .admin-cont:hover {
  203. opacity: 1;
  204. transition: 1s;
  205. }
  206.  
  207. .admin-cont {
  208. padding: 3px;
  209. padding-top: 6px;
  210. width: 81px;
  211. height: 31px;
  212. line-height: 110%;
  213. top: -5px;
  214. left: -5px;
  215. background: #ebebed;
  216. text-align: center;
  217. font-size: 10px;
  218. text-transform: uppercase;
  219. border: 5px solid #edeb5a;
  220. position: absolute;
  221. opacity: 0;
  222. transition: 1s;
  223. }
  224.  
  225. .admin-cont a {color: #72cacc; font-weight: bold;}
  226.  
  227.  
  228. .credit {
  229. width: 200px;
  230. height: 190px;
  231. overflow-y: auto;
  232. text-align: justify;
  233. line-height: 110%;
  234. font-size: 11px;
  235. font-family: calibri;
  236. }
  237.  
  238. .historia {
  239. width: 200px;
  240. height: 190px;
  241. overflow-y: auto;
  242. text-align: justify;
  243. line-height: 110%;
  244. font-size: 11px;
  245. font-family: calibri;
  246. }
  247. .admin-tab {
  248. width: 200px; height: 190px;
  249. }
  250.  
  251. .sub-tit-tab {
  252. width: 200px;
  253. line-height: 100%;
  254. text-align: center;
  255. font-style: italic;
  256. font-family: georgia;
  257. font-size: 11px;
  258. display: block;
  259. border-bottom: 1px solid #6b6b6b;
  260. padding-bottom: 3px;
  261. }
  262.  
  263. .historia::first-letter {
  264. font-style: italic;
  265. font-family: georgia;
  266. font-size: 20px;
  267. font-weight: bold;
  268. color: #86a258;
  269. }
  270.  
  271. #comments_scroll_div {
  272. margin-left: 10px;
  273. margin-right: 10px;
  274. line-height: 110%;
  275. width: 210px;
  276. height: 190px;
  277. overflow: hidden;
  278. font-size: 11px;
  279. }
  280.  
  281. #comments_scroll_div a {
  282. font-style: italic;
  283. font-family: georgia;
  284. }
  285.  
  286. .titulo-tab {
  287. text-align: center;
  288. line-height: 100%;
  289. padding-top: 20px;
  290. padding-bottom: 20px;
  291. font-style: italic;
  292. width: 656px;
  293. color: #eee;
  294. margin-bottom: 3px;
  295. font-size: 14px;
  296. font-family: Georgia;
  297. font-weight: normal;
  298. text-transform: none;
  299. background: #86a258;
  300. }
  301.  
  302. #haiass-tab {
  303. width: 656px; /*Ancho del tablón */
  304. height:290px; /* Alto del tablon */
  305. }
  306. #haiass-tab #botones {
  307. width: 656px;
  308. overflow: hidden; /*Ancho de la zona de botones */
  309. }
  310. #botones .botoncito { /*Estilo de cada botón*/
  311. background: #86a258;
  312. display: inline-block;
  313. font-size: 11px;
  314. margin-bottom: 3px;
  315. color: #eee;
  316. font-style: italic;
  317. font-family: georgia;
  318. text-align:center;
  319. width: 210px;
  320. padding:3px;
  321. }
  322. #haiass-tab #contenido {
  323. font-family: calibri;
  324. background: #f2f2f2; /*Color de fondo de la zona de botones */
  325. height:230px;
  326. padding: 10px;
  327. width:636px; /*Ancho de la zona de paneles */
  328. color: #6b6b6b;
  329. padding-bottom: 0px;
  330. }
  331. .infos {
  332. display:none;
  333. }
  334.  
  335. /*Fin de tablon*/
  336.  
  337. ---- HTML. PA > Visualización > General > Mensaje del índice ----
  338.  
  339. <center>
  340.  
  341. <div class="titulo-tab">
  342. Tablón de anuncios
  343. </div>
  344.  
  345. <div id="haiass-tab">
  346.  
  347. <div id="botones">
  348.  
  349. <div class="botoncito" id="botonA">
  350. Inicio
  351. </div>
  352.  
  353. <div class="botoncito" id="botonB">
  354. Situación Actual
  355. </div>
  356.  
  357. <div class="botoncito" id="botonC">
  358. Información extra
  359. </div>
  360.  
  361. </div>
  362.  
  363. <div id="contenido">
  364.  
  365. <div style="display:block;" class="infos" id="contA">
  366.  
  367. <table cellspacing="0">
  368.  
  369. <tbody>
  370.  
  371. <tr>
  372.  
  373. <td>
  374.  
  375. <div class="historia">
  376. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  377. </div><br />
  378. <div class="sub-tit-tab">
  379. Historia
  380. </div>
  381.  
  382. </td>
  383.  
  384. <td>
  385.  
  386. <div id="contenedor-UltimosTemas">
  387.  
  388. </div><br />
  389. <div style="margin-left: 10px; width: 210px;" class="sub-tit-tab">
  390. Últimos Temas
  391. </div>
  392.  
  393. </td>
  394.  
  395. <td>
  396.  
  397. <div class="admin-tab">
  398.  
  399. <div style="background:url(http://i.imgur.com/YGiBAb0.png); margin-right: 3px;" class="admin">
  400.  
  401. <div class="admin-cont">
  402. Nombre Apellido<br /><a href="url">Enviar MP</a>
  403. </div>
  404.  
  405. </div>
  406.  
  407. <div style="background:url(http://i.imgur.com/YGiBAb0.png);" class="admin">
  408.  
  409. <div class="admin-cont">
  410. Nombre Apellido<br /><a href="url">Enviar MP</a>
  411. </div>
  412.  
  413. </div>
  414.  
  415. <div style="background:url(http://i.imgur.com/YGiBAb0.png); margin-right: 3px;" class="admin">
  416.  
  417. <div class="admin-cont">
  418. Nombre Apellido<br /><a href="url">Enviar MP</a>
  419. </div>
  420.  
  421. </div>
  422.  
  423. <div style="background:url(http://i.imgur.com/YGiBAb0.png);" class="admin">
  424.  
  425. <div class="admin-cont">
  426. Nombre Apellido<br /><a href="url">Enviar MP</a>
  427. </div>
  428.  
  429. </div>
  430.  
  431. <div style="background:url(http://i.imgur.com/YGiBAb0.png); margin-right: 3px;" class="admin">
  432.  
  433. <div class="admin-cont">
  434. Nombre Apellido<br /><a href="url">Enviar MP</a>
  435. </div>
  436.  
  437. </div>
  438.  
  439. <div style="background:url(http://i.imgur.com/YGiBAb0.png);" class="admin">
  440.  
  441. <div class="admin-cont">
  442. Nombre Apellido<br /><a href="url">Enviar MP</a>
  443. </div>
  444.  
  445. </div>
  446.  
  447. </div><br />
  448. <div class="sub-tit-tab">
  449. Administradores
  450. </div>
  451.  
  452. </td>
  453.  
  454. </tr>
  455.  
  456. </tbody>
  457.  
  458. </table>
  459.  
  460. </div>
  461.  
  462. <div class="infos" id="contB">
  463.  
  464. <table cellspacing="0">
  465.  
  466. <tbody>
  467.  
  468. <tr>
  469.  
  470. <td>
  471.  
  472. <div class="clima">
  473. <img src="http://i.imgur.com/SeJGstI.jpg" style="display: inline-block; margin-right: 1px;" />
  474. <div class="temp">
  475.  
  476. <div class="min">
  477. -10º
  478. </div>
  479. a
  480. <div class="max">
  481. 15º
  482. </div>
  483.  
  484. </div><img src="http://40.media.tumblr.com/tumblr_marmewSdkO1qb30dwo1_500.jpg" style="width: 200px; margin-top: 43px; height: 122px;" />
  485. <div class="estacion">
  486. Otoño
  487. </div>
  488.  
  489. </div><br />
  490. <div class="sub-tit-tab">
  491. Clima y estación
  492. </div>
  493.  
  494. </td>
  495.  
  496. <td>
  497.  
  498. <div class="noticias">
  499.  
  500. <div class="fecha">
  501. #01
  502. </div>
  503. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br /><br />
  504. <div class="fecha">
  505. #02
  506. </div>
  507. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  508. </div>
  509. <br />
  510. <div style="margin-left: 10px; width: 210px;" class="sub-tit-tab">
  511. Noticias
  512. </div>
  513.  
  514. </td>
  515.  
  516. <td>
  517.  
  518. <div class="eventos">
  519.  
  520. <div class="titulo-ev">
  521. Título: Fiesta de fin de curso.<br />Duración: 23 junio a 27 julio.
  522. </div>
  523. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br /><br /><img src="http://i.imgur.com/SmlOejy.jpg" /><img src="http://i.imgur.com/VyLCyHi.jpg" /><img src="http://i.imgur.com/0m0BSNz.jpg" />
  524. <div class="sociales">
  525. Redes<br />Sociales
  526. </div>
  527.  
  528. </div>
  529. <br />
  530. <div class="sub-tit-tab">
  531. Eventos
  532. </div>
  533.  
  534. </td>
  535.  
  536. </tr>
  537.  
  538. </tbody>
  539.  
  540. </table>
  541.  
  542. </div>
  543.  
  544. <div class="infos" id="contC">
  545.  
  546. <table cellspacing="0">
  547.  
  548. <tbody>
  549.  
  550. <tr>
  551.  
  552. <td>
  553.  
  554. <div class="credit" style="padding: 4px; height: 186px;">
  555. ©Tablón de anuncios hecho por <a href="thecaptainknowsbest.tumblr.com">Hardrock</a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  556. </div><br />
  557. <div class="sub-tit-tab">
  558. Créditos
  559. </div>
  560.  
  561. </td>
  562.  
  563. <td>
  564.  
  565. <div class="links-tab">
  566. <a href="url" style="margin-right: 2px;">Link 1</a><a href="url">Link 2</a><a href="url" style="margin-right: 2px;">Link 3</a><a href="url">Link 4</a><a href="url" style="margin-right: 2px;">Link 5</a><a href="url">Link 6</a><a href="url" style="margin-right: 2px;">Link 7</a><a href="url">Link 8</a><a href="url" class="largo">Link largo 1</a><a href="url" class="largo">Link largo 2</a><a href="url" class="largo">Link largo 3</a><a href="url" class="largo">Link largo 4</a><a href="url" class="largo">Link largo 5</a>
  567. </div><br />
  568. <div style="margin-left: 5px; width: 210px;" class="sub-tit-tab">
  569. Enlaces rápidos
  570. </div>
  571.  
  572. </td>
  573.  
  574. <td>
  575.  
  576. <div class="admin-tab">
  577.  
  578. <div style="background:url(http://i.imgur.com/YGiBAb0.png); margin-right: 3px;" class="admin">
  579.  
  580. <div class="admin-cont">
  581. Nombre Apellido<br /><a href="url">Premio ganado</a>
  582. </div>
  583.  
  584. </div>
  585.  
  586. <div style="background:url(http://i.imgur.com/YGiBAb0.png);" class="admin">
  587.  
  588. <div class="admin-cont">
  589. Nombre Apellido<br /><a href="url">Premio ganado</a>
  590. </div>
  591.  
  592. </div>
  593.  
  594. <div style="background:url(http://i.imgur.com/YGiBAb0.png); margin-right: 3px;" class="admin">
  595.  
  596. <div class="admin-cont">
  597. Nombre Apellido<br /><a href="url">Premio ganado</a>
  598. </div>
  599.  
  600. </div>
  601.  
  602. <div style="background:url(http://i.imgur.com/YGiBAb0.png);" class="admin">
  603.  
  604. <div class="admin-cont">
  605. Nombre Apellido<br /><a href="url">Premio ganado</a>
  606. </div>
  607.  
  608. </div>
  609.  
  610. <div style="background:url(http://i.imgur.com/YGiBAb0.png); margin-right: 3px;" class="admin">
  611.  
  612. <div class="admin-cont">
  613. Nombre Apellido<br /><a href="url">Premio ganado</a>
  614. </div>
  615.  
  616. </div>
  617.  
  618. <div style="background:url(http://i.imgur.com/YGiBAb0.png);" class="admin">
  619.  
  620. <div class="admin-cont">
  621. Nombre Apellido<br /><a href="url">Premio ganado</a>
  622. </div>
  623.  
  624. </div>
  625.  
  626. </div><br />
  627. <div class="sub-tit-tab">
  628. Premiados
  629. </div>
  630.  
  631. </td>
  632.  
  633. </tr>
  634.  
  635. </tbody>
  636.  
  637. </table>
  638.  
  639. </div>
  640.  
  641. </div>
  642.  
  643. </div>
  644. </center><script>
  645. jQuery(function() {
  646. var a = jQuery("#comments_scroll_div").clone();
  647. var c = [];
  648. jQuery('.module .h3:contains("Últimos temas")').closest('.inner').find('script').each(function() {
  649. if (!jQuery(this).attr('src')) c.push('<script>'+ jQuery(this).html() + '</' + 'script>');
  650. });
  651. jQuery("#contenedor-UltimosTemas").replaceWith('<div id="comments_scroll_div">' + a.html() + '</div>' + c.join(" "));
  652. jQuery(".module .inner #comments_scroll_div ").remove()
  653. });
  654. </script>
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!