Centrar campo de perfil e información de perfil en los mensajes en Curve2

Started by Ibues, July 28, 2022, 06:52:08 PM

Previous topic - Next topic

Ibues

Hola,

Me gustaría saber cómo puedo hacer para centrar el perfil y su información en los mensajes del foro.

Adjunto una imagen para precisar a qué campo me refiero.

Me gustaría poder centrarlo para hacerlo más agradable visualmente.

-Rock Lee-

Bueno eso podes hacerlo desde el panel administrativo, lo que respecto a la informacion de perfil que lo podes ver en ► Centro de Administración ► Características y Opciones ► Campos del Perfil. Ahora en cuanto al diseño tenes tener algo de conocimiento de css, html y php para poder cambiarlo a tu gusto pero para centrar en ../Themes/default/css/index.css en la linea 3221-3331 esta lo referente a lo que apuntas a la imagen tenes agregar "text-align: center:"
 

Saludos!
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

Ibues

Quote from: -Rock Lee- on July 28, 2022, 08:29:50 PMBueno eso podes hacerlo desde el panel administrativo, lo que respecto a la informacion de perfil que lo podes ver en ► Centro de Administración ► Características y Opciones ► Campos del Perfil. Ahora en cuanto al diseño tenes tener algo de conocimiento de css, html y php para poder cambiarlo a tu gusto pero para centrar en ../Themes/default/css/index.css en la linea 3221-3331 esta lo referente a lo que apuntas a la imagen tenes agregar "text-align: center:"
 

Saludos!

Hola, Rock, estas son las líneas desde 3221 a 3331.

#topic_icons .information {
    font-size: .9em;
    border-radius: 4px;
   
}
#topic_icons p {
    padding: 0 12px 0 4px;
    line-height: 2em;
}
/* Should lose this before RC1. It's a kludge. Can be fixed by new image */
#topic_icons .floatleft img:first-child {
    padding: 0 2px;
   
}

/* Display */
/* Poll question */
#poll {
    overflow: hidden;
}

/* Poll vote options */
#poll_options ul.options li {
    padding: 6px 0 6px 25px;
}

/* Poll results */
#poll_options dl.options {
    padding: 12px 0 12px 25px;
    line-height: 1.4em;
}
#poll_options dl.options dt {
    padding: 4px 0;
    width: 30%;
    max-width: 30em;
    float: left;
    clear: left;
}
#poll_options dl.options .voted {
    font-weight: bold;
}
#poll_options dl.options dd {
    width: 60%;
    max-width: 45em;
    float: left;
    margin: 0 0 4px 0;
    text-align: right;
}

/* Poll notices */
#poll_options p {
    margin: 0 18px 2px 18px;
    padding: 0 6px 6px 6px;
}

div#pollmoderation {
    overflow: auto;
}

/* Styles for edit poll section. */
#edit_poll dl.poll_options dt {
    width: 33%;
}
#edit_poll dl.poll_options dd {
    width: 65%;
}

/* Linked events */
.event_title {
    font-size: larger;
    vertical-align: middle;
}
.event_title + a {
    margin-left: 1em;
}

/* On to the posts */
#forumposts {
    clear: both;
    margin: 8px 0 0 0;
}
#forumposts .cat_bar {
    margin: 0 0 -4px 0;
}
/* Topic information */
#forumposts .catbg img {
    margin: 0 4px -2px 0;
}
#forumposts .catbg span {
    white-space: pre;
    /* Specific sizing for clarity without ClearType. */
    font-size: 0.818em;
    font-weight: normal;
    padding: 2px 0;
}
/* poster and postarea + moderation area underneath */
.post_wrapper::after {
    content: "";
    display: block;
    clear: both;
}
/* poster details and list of items */
.poster {
    float: left;
    /* Don't set this in em.It will eat too much space if people need to set large text sizes. */
    width: 160px;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word; /* IE fallback */
    overflow-wrap: break-word;

¿Podrías indicarme cómo hacerlo exactamente?, ya que yo puse "text-align: center;" en estos sitios y no vi cambios.

#topic_icons .information {
    font-size: .9em;
    border-radius: 4px;
    text-align: center; (AQUÍ)
   
}
#topic_icons p {
    padding: 0 12px 0 4px;
    line-height: 2em;
    text-align: center; (AQUÍ)
}
/* Should lose this before RC1. It's a kludge. Can be fixed by new image */
#topic_icons .floatleft img:first-child {
    padding: 0 2px;
    text-align: center; (AQUÍ)
}

No sé si no vi cambios por el caché del navegador (aunque probé con otro también y en modo incógnito) o porque directamente no lo hice bien.


Añado: He logrado centrar casi todo, me faltan los iconos, añadí aquí:

/* poster details and list of items */
.poster {
    float: left;
    text-align: center; (AQUÍ)
    /* Don't set this in em.It will eat too much space if people need to set large text sizes. */
    width: 160px;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word; /* IE fallback */
    overflow-wrap: break-word;
}

El resultado por ahora es así:

https://tinyurl.com/25phqvac

Faltaría por centrar lo que marqué en rojo.

Danielㅤ

Ibues por favor no uses acortadores de URL porque no son necesarios y además es tedioso tener que entrar a un sitio web a ver la imagen, además es molesta esa redireccion, tenes que dejar la imagen  embebida en el post.

Aqui dejo la imagen de la captura de pantalla que dejaste en el anterior post (en forma de URL):



Saludos

-Rock Lee-

Bueno tomo el archivo limpio sin modificaciones por eso puede variar las lineas, por que no se si se agrego/borro codigo en el css de antemano por alguna modificacion. No basta solo con el css al parecer, adjuntame tu display.template.php


Saludos!
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

Ibues

Quote from: -Rock Lee- on July 29, 2022, 12:08:44 PMBueno tomo el archivo limpio sin modificaciones por eso puede variar las lineas, por que no se si se agrego/borro codigo en el css de antemano por alguna modificacion. No basta solo con el css al parecer, adjuntame tu display.template.php


Saludos!

Aquí adjunto.

Añado:
He investigado como centrar en .php, he buscado en el código alguna parte donde dijera icons, o buttons, etc., profile, he encontrado el siguiente código, he probado poner un "echo <center>" y ha funcionado, para sorpresa mía, porque aunque tengo conocimientos muy básicos, sigo aprendiendo.

Quote// Show the website and email address buttons.
      
      if ($message['member']['show_profile_buttons'])
      {
         echo '
         <center> (línea añadida)
                        <li class="profile">
                           <ol class="profile_icons">';

Me gustaría confirmar que está bien y no hay o puede generar conflictos o problemas en el futuro. Cuanto más limpio sea el código, ya sabemos que es mejor.

Adjunto imagen del resultado también. Cierto es que parece estar LEVEMENTE hacia la izquierda, ¿verdad?, quizás sea por el tamaño del icono de enviar mensaje privado, que tenga un contorno transparente que hace que empuje de manera no visible, la parte visible hacia la izquierda. No sé si me explico bien... En resumen, parece estar levemente hacia la izquierda, pero creo que es esa explicación. He probado con otros icons y se ven correctamente centrado, así que sin duda la explicación a ese "efecto visual" es el icons de mensaje privado como dije.

Comentame si el code está bien empleado.

-Rock Lee-

No llegue a probarlo pero basicamente es lo que se tiene que hacer, es lo que me referia tener conocimiento basico de HTML-CSS-PHP, aunque podes omitir lo del css si lo agregas directo a todo. En el css en el apartado iconos tiene un padding de 5px sino me equivoco, igual es comun como tiene adaptarse a muchas resoluciones tomando alguna referencia que a veces hace no se centre bien, seria probar con los numeros.


Saludos!
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

Ibues

Está bien, he tratado de buscar en el css ese padding (de icons) pero no lo encuentro, básicamente porque veo muchos, he probado cambiar el px en alguno pero no muestra diferencia así que no deben ser los que he tocado, ¿podrías indicarme cual es?, por lo que he percibido sí, existe un padding entre botones y también un padding que deja a la derecha el boton de "mensaje privado", no sé si ese padding es automático para dejar un espacio con el siguiente botón (podría ser) y que el último botón que iría a la derecha del todo sea el que no tiene padding a su derecha. Espero haberme explicado bien.
Me gustaría saber eso, porque si quito el padding de la derecha del botón en cuestión (en caso que así sea para ese solo botón) quizá luego cuando haya otro botón a la derecha de "enviar mensaje privado" no deje espacio entre ambos. En el caso de ser cuestión del propio bloque donde van los botones y no afectar al espacio entre botones, entonces sí, estaría bien poder ubicar donde está en el css y quitar ese padding.

Y mi última solicitud respecto a este tema. Me gustaría saber si es posible (supongo que sí) centrar el botón verde/gris de online y offline, sobre el nombre de usuario, adjunto una imagen como guía para que te hagas una mejor idea de a qué me refiero.

De este modo, como muestro en la img adjunta, el nombre/nick de usuario quedaría totalmente centrado y el botón quedaría encima del nombre, dando un aspecto más centrado a todo e incluso (desde mi punto de vista) más organizado. He estado buscando en este último .php de display.template pero, pese a que creo haber encontrado la zona (porque pone algo de offline/online) no he logrado hacer que haga ese salto de línea entre botón/icon de conexión y nick.

Muchas gracias, Rock, valoro mucho tu ayuda.

Diego Andrés

.poster .on, .poster .off {
  display: block;
  text-align: center;
  margin: 0 auto;
}

SMF Tricks - Free & Premium Responsive Themes for SMF.

Ibues

Quote from: Diego Andrés on July 29, 2022, 03:39:40 PM.poster .on, .poster .off {
  display: block;
  text-align: center;
  margin: 0 auto;
}

Hola, Diego,

no entiendo exactamente este código para qué es, o sea, veo que es la parte de campo de perfil en los mensajes, pero no sé a qué cuestión hace referencia.

Diego Andrés

Lo agregas al css y hace lo que quieres, centrar el ícono y que aparezca arriba del nombre.

SMF Tricks - Free & Premium Responsive Themes for SMF.

Ibues

Quote from: Diego Andrés on July 29, 2022, 03:53:43 PMLo agregas al css y hace lo que quieres, centrar el ícono y que aparezca arriba del nombre.

Oh, sí, muchas gracias a ambos por ayudarme.

Ya solo quedaría ese pequeño detalle sin importancia (soy así de maniático, jajaja) del padding que al parecer hay a la derecha de los iconos de mensaje privado, website, etc... ¿dónde podría localizarlo para quitarle el supuesto padding que tiene de serie?

De momento va quedando así, me gusta el resultado!

(He marcado con una pequeña línea roja donde está el supuesto espacio/padding que me gustaría quitar.

You cannot view this attachment.

Diego Andrés

Agrega esto al final
.poster ol.profile_icons {
  display: flex;
  justify-content: center;
  gap: 5px;
}
.poster .profile ol.profile_icons li {
  padding: 0;
}


SMF Tricks - Free & Premium Responsive Themes for SMF.

Ibues

Perfecto, Diego, muchas gracias.

Ha funcionado. Marco como solucionado.

Para quien le pueda interesar estas modificaciones, tal y como se explica en este hilo, el campo de perfil en los mensajes pasaría a quedar así.

You cannot view this attachment.

Advertisement: