[Duda] Resuelto | Últimos temas en Tablón de anuncios

Holi, aquí de nuevo yo con otra duda

Estuve intentando hacer un tablón de anuncios por mi cuenta, siguiendo el bello tutorial de Roshio. Todo iba bien, hasta que me aventé a ponerle los últimos temas... y decir que se ha desconfigurado como unas cinco veces tras cada tutorial que intento seguir, es quedarse corto

Aquí una imagen de cómo luce el tablón (sigue muy sencillo porque todavía no he editado los colores ni nada): https://i.imgur.com/c7pC9Nu.jpg

Intenté meterle CSS a este apartado, pero lo único que cambió fue el tamaño y la font del título. Traté con otro tutorial diferente, pero en esta ocasión se desconfiguró totalmente, así que regresé al original. Sin embargo, no sólo no puedo editar el widget, sino que también se "resetean" los links de los temas tan pronto el primero toca el borde superior. Ya no tengo idea de qué mover, o si incluso los códigos están bien o mal. Agradecería mucho que intentaran orientarme con esto

Los códigos HTML usados son estos:

Código:

<div class="tablon">
        
 <table>
    
 </table>
  
 <table>
  <tbody> </tbody> <tbody></tbody> <tbody></tbody>
 <tr style="">
          
 <td>
  
 <div class="links">
        <a class="linksitos" href="/">reglamento</a>      <a class="linksitos" href="/">ambientación</a>      <a class="linksitos" href="/">guia de usuario nuevo</a>      <a class="linksitos" href="/">grupos y rangos</a>      <a class="linksitos" href="/">fichas de PJ</a>      <a class="linksitos" href="/">registros</a>      <a class="linksitos" href="/">dudas y sugerencias</a>        
 </div>
  
 </td>
          
 <td>
 
 <div class="staff">
      
 <div class="S2" style="background-image:url(http://placehold.it/100x70)">
 
 <div class="S3">
 <span style="font-size:18px; letter-spacing:-2px; font-family:montserrat;">NOMBRE</span><br />MODERADOR - <a href="/">MP</a>
 </div>
 
 </div>
          
 <div class="S2" style="background-image:url(http://placehold.it/100x70)">
 
 <div class="S3">
 <span style="font-size:18px; letter-spacing:-2px; font-family:montserrat;">NOMBRE</span><br />MODERADOR - <a href="/">MP</a>
 </div>
 
 </div>
            
 <div class="S2" style="background-image:url(http://placehold.it/100x70)">
 
 <div class="S3">
 <span style="font-size:18px; letter-spacing:-2px; font-family:montserrat;">NOMBRE</span><br />MODERADOR - <a href="/">MP</a>
 </div>
 
 </div>
            
 <div class="S2" style="background-image:url(http://placehold.it/100x70)">
 
 <div class="S3">
 <span style="font-size:18px; letter-spacing:-2px; font-family:montserrat;">NOMBRE</span><br />MODERADOR - <a href="/">MP</a>
 </div>
 
 </div>
        
 </div>
 
 </td>
          
 <td>
 <div class="news">
      
 <div class="novedades">
      <span style="color:#e3848e;">20.03.2014</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non metus ut ex euismod pretium.         Etiam vitae sagittis felis, nec molestie ex. Praesent pulvinar sodales vulputate. Nulla tincidunt id mi a egestas.<br /><br />      <span style="color:#e3848e;">20.03.2014</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non metus ut ex euismod pretium.       Etiam vitae sagittis felis, nec molestie ex. Praesent pulvinar sodales vulputate. Nulla tincidunt id mi a egestas.<br /><br />      <span style="color:#e3848e;">20.03.2014</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non metus ut ex euismod pretium.       Etiam vitae sagittis felis, nec molestie ex. Praesent pulvinar sodales vulputate. Nulla tincidunt id mi a egestas.      
 </div>
                
 </div>
 </td>
      
      <td>
        <div id="tituloultimostemas" style="height:200px">ULTIMOS TEMAS<div id="contenedorultimostemas"><div id="micontenedor"></div></div></div>
      </td>
    
 </tr><tbody></tbody>
 </table>
    
</div>

CSS:

Código:

.tablon {
    width: 900px;
    background: #a9b2ce;
    height: 250px;
    padding-top: 30px;
    border-top: 4px solid #ffffff;
    margin: auto;
}

.links {
    margin-right: 20px;
    border: 1px solid #ffffff;
    width: 110px;
    padding: 7px;
}

a.linksitos {
    width: 100px;
    background: #fff;
    display: block;
    color: #000;
    margin: 1px;
    padding: 5px;
    font-family: calibri, arial;
    font-size: 9px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
}

a.linksitos:hover { background: #7afbaf; transition: 0.3s linear;}

.staff {
    width: 210px;
    text-align: center;
    border: 1px solid #ffffff;
    padding: 5px;
}

.S2 {
    width: 100px;
    height: 70px;
    display: inline-block;
    background-position: 50%;
    border: 1px solid #fff;
    overflow: hidden;
    margin: 2px 0;
}

.S3 {
    background: rgb(255, 255, 255);
    color: #af7581;
    padding-top: 20px;
    height: 50px;
    width: 100px;
    font-size: 8px;
    font-family: calibri;
    opacity: 0;
    transform: scale(2,2);
}

.S3 a {
    font-size:8px;
    font-family:calibri;
    color:#333;  }

.S2:hover .S3 { opacity:1;
    transition:0.4s linear;
    transform: scale(1,1);
}

.news {
    width: 220px;
    border: 1px solid #ffffff;
    padding: 5px;
    margin-left: 20px;
}

.novedades {
    width: 200px;
    height: 140px;
    padding: 10px;
    overflow: auto;
    background: #fff;
    color: #000;
    font-size: 11px;
    text-align: justify;
    font-family: calibri, arial;
}

.tituloultimostemas {
  text-align: center;
  font-size: 14px;
  font-family: calibri, arial;
  padding: 10px;
  overflow: auto;
}
#comments_scroll_container {
    height: 200px;
    width: 200px;

#left{display:none;}

(incluso le puse margin, pero nunca reaccionó el código)

JavaScript:

Código:

jQuery(document).ready(function(){
    jQuery("#micontenedor").replaceWith(jQuery("#comments_scroll_div"));
    });

Incluso los intenté probar en CodePen pero no hubo resultado. Pensé que era porque por obvias razones no está el widget, pero ni siquiera en el foro se ve bien y ahhhh. Los códigos me odian Gracias de antemano por su ayuda.

¡Hola Stellyx!
Tranquila vamos paso a paso y veras que no es tan dificil como piensas, a veces sucede que le damos muchas vueltas a las cosas y terminamos más confundidas que nunca cuando la respuesta esta casi en nuestras narices jeje (Siempre me pasa)

1. Bueno primero lo primero, la base HTML que tienes esta bien, pero te recomendaria separar el div del titulito (el que dice Ultimos temas) del resto, asi podras editarlo sin que te cause problemas más adelante con el CSS

Código:

<td>
 <div id="tituloultimostemas">ULTIMOS TEMAS</div>
<div id="contenedorultimostemas"><div id="micontenedor"></div></div>
</td>

2. Ahora vamos con el CSS, te recomiendo darle forma a cada parte separadamente, primero al div de titulo y luego al contenedor de los ultimos temas.

Código:

.tituloultimostemas {
background: white;
color:black;
text-align: center;
font-size: 12px;
font-family: calibri, arial;
padding: 10px;
}

.contenedorultimostemas {
height:200px;
background:white;
padding:5px;
width:200px;
}.

#comments_scroll_container { /* Tambien puedes editar este contenedor un poco */
height: 200px;
width: 200px;
text-align:center;
font-size:10px;
}


OJO: Lo que no debes hacer, y que te está generando el error, es usar el display: none; para ocultar los widgets.

Código:

#left{display:none;}

Por eso es MUY importante seguir el siguiente paso del tutorial que dice:

[Tutorial] Tablón de Anuncios en Template (Skin) escribió:IMPORTANTE: Una vez que ya te salga el widget de ultimos temas donde quieres en el template vamos a editar el código CSS de la columna de widgets que dejamos flotando anteriormente de la siguiente manera:

Código:

#content-container div#left {
  background-color: transparent;
  top: -255px;
  position: fixed;
  left: 0;
  overflow: hidden;
  width: 0px;
}

Una vez hecho esto debería acomodarse ya con normalidad, ¡pruebalo y dime si te funciono!
 

¡Gracias por venir a mi rescate!

Seguí los pasos a la letra del pie [?], pero los CSS siguen sin hacer efecto en el tablón (aunque ya se solucionó el error de que los links se reseteaban, te adoro ). Tuve que leer varias veces tu respuesta y ver mil veces los códigos para asegurarme de que no metí mal algún dive o así, hasta que me percaté de algo. Coloqué el HTML en la parte del "índice" en el PA, pero viendo tu respuesta aquí (y en el tutorial del tablón sencillo), vi que es recomendable meter el HTML en los templantes. Si te soy sincera, nunca le he metido mano a esas cosas, ya que me da miedo desconfigurar totalmente el foro.

Traté de buscar el tutorial que citaste, pero no lo encuentro. ¿Podrías pasarme el link? Muchísimas gracias

¡Ya veo! Con razón. Yo no uso esa zona por que cada que editas algo ahí foroactivo cambia el código por nose cual motivo y hace un caos, lo mismo con el código que pones en los widgets, a veces te genera errores.

Te dejo el Indice de Tutoriales espero que te sirva, y también el tutorial Tablón de anuncios en el Template

Cualquier otra duda hazmelo saber

Eres un cielo aunque aún no tengo los mensajes requeridos para poder ver tutoriales avanzados

Sin embargo, tan pronto pueda, le echaré un ojo al tutorial. ¡Muchísimas gracias! Mientras me dedicaré a mejorar en otras cosas sencillas como las tablillas y demás, a ver si también puedo comenzar a subir una que otra contribución por mi parte. De verdad mil gracias por tu ayuda