Personalización de leyenda desde el template | Resuelto

¡Hola!  

Bueno, llego de nuevo con una duda que seguramente es lo más fácil del mundo y yo aquí preguntando, pero es mi ultima opción xD
La cosa es que, me puse a editar las estadísticas de mi foro hace poco y bueno todo perfecto con el tutorial de editar las estadísticas del foro desde el template, sin embargo, cuando llegue a la parte de los grupos simplemente no supe que hacer, ya que como había puesto un div para esto puedo solo me modifica como "lo de afuera" y pues yo quisiera personalizar de una manera más bonita a los grupos.

Lo que tengo en el template para los grupos es esto:

Código:

<table>
    <tbody>
      <tr>
        <td><div class="weare">{LEGEND} :&nbsp;{GROUP_LEGEND}</div></td>
      </tr>
    </tbody>
  </table>

Quisiera saber que puedo hacer para ponerles un fondo y dimensiones con todo y hovers, no sabría si eso requiere de alguna otra cosa o solo es css con ese div, he buscado tutoriales por doquier y algunos ponen cosas en el template, pero sinceramente no lo entendí y como plus xD tengo miedo de modificar algo más ahí por que ya he roto el foro dos veces xD.

Pero bueno, el foro donde estoy trabajando es este


Muchas garcias por pasarte por esta duda y tomarte el tiempo para leerla uwu

Nos leemos, desde ya muchas gracias.

Hola hola, brujita:

Hay dos maneras de hacer lo que te propones. La primera es utilizar la estructura que te proporciona Foroactivo con el {GROUP_LEGEND}. Esto genera una estructura como la siguiente:

Código:

<table>
    <tbody>
      <tr>
        <td><div class="weare">[<b><a style="color: #130A85" class="gensmall" href="/URL grupo">Nombre del grupo</a></b>]
[<b><a style="color: #130A85" class="gensmall" href="/URL grupo">Nombre del grupo</a></b>]
[<b><a style="color: #130A85" class="gensmall" href="/URL grupo">Nombre del grupo</a></b>]
[<b><a style="color: #130A85" class="gensmall" href="/URL grupo">Nombre del grupo</a></b>]
[<b><a style="color: #130A85" class="gensmall" href="/URL grupo">Nombre del grupo</a></b>]</td>
      </tr>
    </tbody>
  </table>

Es decir, crea un elemento a con el color del grupo que redirige al grupo dentro de un elemento b. Puedes modificar esto con un poco de CSS y el selector :nth-of-type(N), que te permite modificar un elemento en concreto (b:nth-of-type(1) afecta al primer grupo, b:nth-of-type(2) afecta al segundo, y así...).

Otra cosa que he visto hacer es crear la estructura a mano, es decir, en lugar de poner el código que te proporciona foroactivo, hacer uno tú misma. Por ejemplo:

Código:

<table>
    <tbody>
      <tr>
        <td><a href="url del grupo"><div class="grupos" id="grupo1">Nombre del grupo</div></a></td>
        <td><a href="url del grupo"><div class="grupos" id="grupo2">Nombre del grupo</div></a></td>
        <td><a href="url del grupo"><div class="grupos" id="grupo3">Nombre del grupo</div></a></td>
      </tr>
      <tr>
        <td><a href="url del grupo"><div class="grupos" id="grupo4">Nombre del grupo</div></a></td>
        <td><a href="url del grupo"><div class="grupos" id="grupo5">Nombre del grupo</div></a></td>
        <td><a href="url del grupo"><div class="grupos" id="grupo6">Nombre del grupo</div></a></td>
      </tr>
    </tbody>
  </table>

Esto tiene el beneficio de que tienes muchísimo más control sobre la estructura de los grupos y puedes hacer diseños más complejos que modificando la estructura que te proporciona Foroactivo porque puedes modificar los grupos uno a uno y añadir todas las cosas que creas que necesiten. Lo malo que tiene es que tienes que hacer tú todo el trabajo: poner los enlaces, el color del grupo, etc. Sin embargo, podrás conseguir un buen resultado utilizando cualquiera de estos métodos.

Hola @The Witch hay dos formas para hacer lo que deseas:

1) Para editar los grupos usando CSS, asi como tienes en tu código, no es necesario poner esa una tabla porque los grupos saldrán condensados en un solo elemento, es decir, automáticamente juntos y no separados por columnas.  

Código:

{LEGEND} : {GROUP_LEGEND}

Para eso puedes seguir este tutorial: Editar estadisticas CSS only


2) La opción más fácil si vas a editar esta zona en template, y que yo recomiendo, es hacer los grupos aparte, osea ponerlos de nuevo con HTML. Ojo: Puedes ponerlo como link (usando a y el enlace al grupo) o solo como div.

Código:

<div class="Grupos">
<a href="#" class="grupito" style="background: #COLOR;">GRUPO UNO</a>
<a href="#" class="grupito" style="background: #COLOR;">GRUPO DOS</a>
<a href="#" class="grupito" style="background: #COLOR;">GRUPO TRES</a>
<a href="#" class="grupito" style="background: #COLOR;">GRUPO CUATRO</a>
<a href="#" class="grupito" style="background: #COLOR;">GRUPO CINCO</a>
</div>

o

Código:

<div class="Grupos">
<div class="grupito" style="background: #COLOR;">GRUPO UNO</div>
<div class="grupito" style="background: #COLOR;">GRUPO DOS</div>
<div class="grupito" style="background: #COLOR;">GRUPO TRES</div>
<div class="grupito" style="background: #COLOR;">GRUPO CUATRO</div>
<div class="grupito" style="background: #COLOR;">GRUPO CINCO</div>
</div>

Y en el CSS ponga los elementos correspondientes para cada grupo, tipo:

Código:

.grupito {
width: 100px;
display: inline-block;
text-align: center;
font-size: 10px;
color: #fff;
padding: 10px;
}

Puedes ver este tutorial sobre como editar estadísticas en el template




PD. Te dejo un fiddle que podria ayudarte mejor

¡Eine, Ros! De verdad aksjdlaksjd gracias por venir a rescatarme cuando ando apuros, quedó hermoso, lo intenté de las dos maneras y simplemente quedó, me costó un poco por que seguía poniendolo dentro de tablas hasta que al final me arte y solo lo dejé así y funcionó perfectamente.

Muchísimas gracias por ayudarme <3 se les quiere