Tengo duda sobre java en el perfil de usuario (Resuelto)

No es en el mini-profile, que eso si se hacer y lo hice de varias formas que nunca antes se haya visto. Mi duda se trata del perfil de usuario. Estoy creando un sistema nuevo para un foro que debo hacer skin. Okay, sé que no he posteado mucho aquí de hace tiempo, creo que incluso años hahaha sorry, he estado ocupado con los foros que he estado muy pensiente y estaba dedicando las 24/7 a los usuarios y tal. Pero les pido que me den una mano, por favor.

Ahora si, el punto es saber cómo se consigue poner los botones en el perfil. Les doy un ejemplo.

Spoiler:

O sea, el estilo css y html puedo hacerlo, y no, no quiero una copia parcial del perfil, sólo quiero el funcionamiento de los botones y revelar la información que contiene cada uno. Sé poner las imágenes, imágenes pequeñas, texto y tal pero los codenados botones no me funcionan.

Tengo un foro de prueba pero no he copiado tal cual, sólo copiaba el java de los botones pero algo no me va bien y no quiero copiar exactamente como en ese hermoso foro. Así que, esa es mi duda.
El jodido java me hace patalear (?

Si alguien conoce otro código que funcione para hacer botones y que se abra la información específica, se lo agradecería, en serio. Le doy lo que quiera (?

Plis, no es urgente y no presionaré, lo juro.

WOWOO miren cuanto blood tengo o: quien me ayude con el problema, le doy toda mi sangre

Hola bae! Te comento. Personalizar así de mucho los perfiles, requiere que uses un java sencillo, de forma repetida para cada campo, de modo que puedas acomodarlo en las pestañas.

Para no complicarte la vida, voy a pasarte un code para pestañas de puro CSS. Es super útil.

Tenés que pegar todo esto:

Código:

<div class="tabBlock">
  <ul class="tabBlock-tabs">
    <li class="tabBlock-tab">Tab 1</li>
    <li class="tabBlock-tab is-active">Tab 2</li>
  </ul>
  <div class="tabBlock-content">
    <div class="tabBlock-pane">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint et accusamus cumque soluta iste quasi ad blanditiis expedita minus quos amet neque illo praesentium nostrum asperiores quisquam atque est repudiandae assumenda ipsum repellat ipsa impedit! Ipsum unde sapiente exercitationem tenetur repellendus nemo harum reiciendis ipsam quo iusto esse temporibus itaque.</p>
    </div>
    <div class="tabBlock-pane">
      Contenido 2
    
    </div>
  </div>
</div>


<style>
/* el CSS de las tablitas. Podés ponerlo en el panel de administración si querés */
  .group::after, .tabBlock-tabs::after {
  clear: both;
  content: "";
  display: table;
}

p, ol, ul {
  margin-bottom: 1.25rem;
  margin-top: 0;
}

ol, ul {
  padding: 0;
  margin-left: 1.25rem;
}

.unstyledList, .tabBlock-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tabBlock {
  margin: 0 0 2.5rem;
}

.tabBlock-tab {
  background-color: #fff;
  border-color: #d8d8d8;
  border-left-style: solid;
  border-top: solid;
  border-width: 2px;
  color: #b5a8c5;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  float: left;
  padding: 0.625rem 1.25rem;
  position: relative;
  -webkit-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.tabBlock-tab:last-of-type {
  border-right-style: solid;
}
.tabBlock-tab::before, .tabBlock-tab::after {
  content: "";
  display: block;
  height: 4px;
  position: absolute;
  -webkit-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.tabBlock-tab::before {
  background-color: #b5a8c5;
  left: -2px;
  right: -2px;
  top: -2px;
}
.tabBlock-tab::after {
  background-color: transparent;
  bottom: -2px;
  left: 0;
  right: 0;
}
@media screen and (min-width: 700px) {
  .tabBlock-tab {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
.tabBlock-tab.is-active {
  position: relative;
  color: #975997;
  z-index: 1;
}
.tabBlock-tab.is-active::before {
  background-color: #975997;
}
.tabBlock-tab.is-active::after {
  background-color: #fff;
}

.tabBlock-content {
  background-color: #fff;
  border: 2px solid #d8d8d8;
  padding: 1.25rem;
}

.tabBlock-pane > :last-child {
  margin-bottom: 0;
}

</style>

<!-- El script que lo hace funcionar, no hay necesidad de que lo toques, pero es aconsejable que lo resubas -->
<script src="http://entourage02.foroactivo.com/10982.js" type="text/javascript"></script>


Ahí tendrías las pestañas, pero tenés que irlo modificando, colores, posición y demases para que quede como querés. Si necesitás ayuda con eso, solo decinos (Y).

Y me falta una parte de la explicación, pero tengo que irme a trabajar, cuando vuelva edito y te cuento lo que falta, que sería el llamar los campos a las pestañas que a vos te gustaría.

Podrías también decirnos de paso cuántas te gustarían que hubiera, así ya te lo dejo puesto si querés y así solo tenés que editar el CSS. Pero ya, nos leemos en un ratito


P/D: Mientras, te dejo como iría quedando en vivo: http://entourage02.foroactivo.com/u1
Vas a ver cómo en la primera pestaña, adosé los campos de sexo, localización y empleo.


EDITADO.

Continuando(?), ahora vamos a la segunda parte: llamar los campos al lugar deseado.
Seguro alguna vez usaste un javascript para adosar los afiliados al final del foro. Si te acordás de él... es el que vamos a usar 1313 (?). También vamos a necesitar del inspector de elementos.

Entonces:
Paso 1 Creamos un elemento, o contenedor (es a donde van a terminar los campos):

Código:

<div id="cajita-perfil"></div>

No hay necesidad de poner nada adentro, pero si querés, be my guest(?).
Paso 2 Usamos el javascript:

Código:

<script>jQuery(document).ready(function(){jQuery('#field_id-7').appendTo('#cajita-perfil')});</script>

Lo que está diciendo este code es básicamente «Quiero que este campo de perfil se quede dentro de "cajita-perfil"».
Para saber el nombre del campo que querés llamar/meter-dentro-de-la-cajita, tenés que usar el inspector. Me da la impresión que sabés, pero para los televidentes que puedan llegar a leer esto(?), tenemos que hacer click derecho sobre el campo deseado y le damos a inspeccionar, como en la imagen:


En este caso el campo se llama "field_id-4", pero es una ID, así que hay que agregarle el "#" cuando cambies los nombres. Entonces quedaría por ejemplo:

Código:


<script>
jQuery(document).ready(function(){jQuery('#field_id-7').appendTo('#cajita-perfil')});
jQuery(document).ready(function(){jQuery('#field_id-4').appendTo('#cajita-perfil')});
</script>


Con ese código, ambos campos van a terminar dentro de "cajita-perfil".

Entonces, tu código quearía algo así:

Código:



<div class="tabBlock">
  <ul class="tabBlock-tabs">
    <li class="tabBlock-tab is-active">Tab 1</li>
    <li class="tabBlock-tab">Tab 2</li>
  </ul>
  <div class="tabBlock-content">
    <div class="tabBlock-pane">
      <div id="caja-pefil"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint et accusamus cumque soluta iste quasi ad blanditiis expedita minus quos amet neque illo praesentium nostrum asperiores quisquam atque est repudiandae assumenda ipsum repellat ipsa impedit! Ipsum unde sapiente exercitationem tenetur repellendus nemo harum reiciendis ipsam quo iusto esse temporibus itaque.</p>
    </div>
    <div class="tabBlock-pane">
      Contenido 2
   
    </div>
  </div>
</div>


<style>
  .group::after, .tabBlock-tabs::after {
  clear: both;
  content: "";
  display: table;
}



.unstyledList, .tabBlock-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tabBlock {
  margin: 0 0 2.5rem;
}

.tabBlock-tab {
  background-color: #fff;
  border-color: #d8d8d8;
  border-left-style: solid;
  border-top: solid;
  border-width: 2px;
  color: #b5a8c5;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  float: left;
  padding: 0.625rem 1.25rem;
  position: relative;
  -webkit-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.tabBlock-tab:last-of-type {
  border-right-style: solid;
}
.tabBlock-tab::before, .tabBlock-tab::after {
  content: "";
  display: block;
  height: 4px;
  position: absolute;
  -webkit-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.tabBlock-tab::before {
  background-color: #b5a8c5;
  left: -2px;
  right: -2px;
  top: -2px;
}
.tabBlock-tab::after {
  background-color: transparent;
  bottom: -2px;
  left: 0;
  right: 0;
}

.tabBlock-tab.is-active {
  position: relative;
  color: #975997;
  z-index: 1;
}
.tabBlock-tab.is-active::before {
  background-color: #975997;
}
.tabBlock-tab.is-active::after {
  background-color: #fff;
}

.tabBlock-content {
  background-color: #fff;
  border: 2px solid #d8d8d8;
  padding: 1.25rem;
}

.tabBlock-pane > :last-child {
  margin-bottom: 0;
}

</style>


<script src="http://entourage02.foroactivo.com/10982.js" type="text/javascript"></script>

<script>
 
    jQuery(document).ready(function(){jQuery('#field_id-7').appendTo('#caja-pefil')});
      jQuery(document).ready(function(){jQuery('#field_id-11').appendTo('#caja-pefil')});
        jQuery(document).ready(function(){jQuery('#field_id-9').appendTo('#caja-pefil')});
 
</script>




De paso, retiré otras cosas del CSS que no ibas a estar necesitando. Me decís si se entendió, si lo lograste y demases (?).

Oh, YES. Heya!   ¡Gracias por auxiliarme pero tómate tu tiempo! No hay tantas prisas. ¡Suerte en el trabajo!

Los botones que me pasaste me gustan aunque ya tenía algunas en mente. De todos modos le voy a dar práctica y supongo que eso afectaría a los campos ¿verdad? No lo sé, con ese condenado javascript me solucionaría la vida (???

Por cierto, los botones serían sólo tres. Sé mover cada botón, sólo me falta ese código en javascript para cada #field_idX diferente dentro de esos botones, ya me entendés. Y si no, bueno, cada campo voy a editarlo só, sólo ya sabes, me falta ese code para incluir cada uno a su respectivo botón. Y si eso no es suficiente y si no me dejo entender, dejaré un dibujo bien hecho de lo que prácticamente quiero (?

¡Saludos, sweetie!

¡Listorti! Edité mi respuesta para que no quede tan desperdigado. Ya me dirás qué tal te va!

OMG OMG ES JUSTO LO QUE BUSCABA
Se te entendió perfectamente, está muy bien explicado todo y me encantó. Y al fin encontré ese bendito "jQuery" -acaricia el code softy (?- Yo ya tenía un code java para meter cosas al final del foro pero ahora que se puede modificar los templates, pos lo perdí por ahí (???
¡Muchas, Muchas gracias!  

Aunque siento que sólo decirte las gracias no es suficiente, te debo mucho. Ahora llévate toda mi sangre, rlly. (?
Eres master, te admiro

(Edito el tema, porque está resuelto o:)