Recordad que para pedir soporte alguno, debéis facilitar los datos de soporte oportunos por favor, mirad aquí y leer las Normas generales del foro, esto nos servirá de ayuda para dar el mejor soporte..

Gracias.

La Administración de phpBB España.

Modificar ancho columnas en extensión Topic index

Soporte de Extensiones para phpBB 3.2
💡 Como instalar una Extensión
Responder
Avatar de Usuario
J_Sparrow
Moderador
Mensajes: 938
Registrado: 30 Oct 2009, 00:20
Nombre real: Jose Luis
Ubicación: España
Género:
Edad: 58

Modificar ancho columnas en extensión Topic index

#1

Mensaje por J_Sparrow »

Buenas, juro que lo he intentado, pero no lo he conseguido.
Uso la extensión Topic Index y me pasa algo parecido a lo que pasa en este Foro

Imagen

Me salen un "poco" anchas y se ven los encabezados (incluso algún nombre) a dos filas. He intentado localizar el fichero que controla los tamaños, posiciones, fuentes, etc y no soy capaz ni de acercarme. Si que he conseguido localizar el del texto del autor (en mi foro pone "Publicado por" y lo he cambiado a "Autor"), pero no encuentro el texto de "Respuestas" y menos el amaño del texto y demás.
¿Algún alma caritativa que me pueda explicar cómo localizar estos valores para poderlos cambiar a mi gusto?. Y digo "me pueda explicar", porque no quiero daros tanto trabajo y quiero aprender a localizar yo las cosas. Lo fácil es preguntar y ya está, pero a mi me gusta preguntar y lo mas importante, APRENDER.

Gracias chicos, sin vosotros hace tiempo hubiese abandonado el mundo del php :D :D :D



Contenido Oculto
Este foro requiere que este registrado e identificado para ver el contenido oculto.


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
AbaddonOrmuz
Moderador
Mensajes: 831
Registrado: 14 Ene 2017, 22:18
Nombre real: Alfredo
Ubicación: /dev/null
Género:
Contactar:

Modificar ancho columnas en extensión Topic index

#2

Mensaje por AbaddonOrmuz »

Es muy probable que este reusando traducciones, y definitivamente esta usando el estilo que viene por default.

Para cambiar el tamaño de letra:

Código: Seleccionar todo

/* Tamaño de letra */
#content_index .topiclist dl > dt,
#content_index .topiclist dl > dd {
	font-size: 1em;
}

Y para el ancho de las "columnas":

Código: Seleccionar todo

/* Ancho de columna "Por" */
#content_index .topics {
	width: 250px;
}

/* Ancho columna "Respuestas" */
#content_index .posts {
	width: 85px;
}

/* Ancho de columna "Borrar" */
#content_index .lastpost {
	width: 85px;
}

Puedes cambiarlo los valores mientras no sobrepasen (en mi caso) 1269.87 pixeles de ancho, todas las columnas en total.

Podría quedar mejor usando flexbox o grid (CSS), pero eso depende de cada autor.

Algunas de mis extensiones:
Imagen Imgur | :chart_with_upwards_trend: SEO Metadata | Imagen Markdown | :lock: Auto-lock Topics | :mermaid: Mermaid Diagrams
:trophy: Checa todas mi extensiones aprobadas :trophy:

:penguin: Usuario de Arch Linux :penguin:



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
ThE KuKa
Administrador
Mensajes: 9303
Registrado: 04 Ene 2004, 19:27
Nombre real: Raúl
Ubicación: Terrassa
Género:
Edad: 45
Contactar:

Modificar ancho columnas en extensión Topic index

#3

Mensaje por ThE KuKa »

Aprovecho para usarlo aquí tambien, gracias @AbaddonOrmuz :cafe:

📌 Raul [ThE KuKa] en phpBB 📌
✅ Jr. Extension Validator - Jr. Styles Validator - Style Customisations - Translator - International Support Team
✅



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
J_Sparrow
Moderador
Mensajes: 938
Registrado: 30 Oct 2009, 00:20
Nombre real: Jose Luis
Ubicación: España
Género:
Edad: 58

Modificar ancho columnas en extensión Topic index

#4

Mensaje por J_Sparrow »

Gracias @AbaddonOrmuz , me lo has explicado de maravilla, pero recuerda que yo de programación y de php, nada de nada, lo justo para cambiar cuatro cosas y siempre contando con vuestra ayuda y supervisión.
Perooooooo y perdona la pregunta que te puede parecer MUY tonta, ¿que hago con esta información que me has reportado, lo añado en un fichero .css?.

Lo siento, pero no se que tengo que hacer, estoy perdido en este inmenso océano.

Contenido Oculto
Este foro requiere que este registrado e identificado para ver el contenido oculto.


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
AbaddonOrmuz
Moderador
Mensajes: 831
Registrado: 14 Ene 2017, 22:18
Nombre real: Alfredo
Ubicación: /dev/null
Género:
Contactar:

Modificar ancho columnas en extensión Topic index

#5

Mensaje por AbaddonOrmuz »

@J_Sparrow puedes incluir ese código en algún fichero CSS, preferentemente en alguno que venga con la extensión.

@ThE KuKa ;)

Algunas de mis extensiones:
Imagen Imgur | :chart_with_upwards_trend: SEO Metadata | Imagen Markdown | :lock: Auto-lock Topics | :mermaid: Mermaid Diagrams
:trophy: Checa todas mi extensiones aprobadas :trophy:

:penguin: Usuario de Arch Linux :penguin:



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
J_Sparrow
Moderador
Mensajes: 938
Registrado: 30 Oct 2009, 00:20
Nombre real: Jose Luis
Ubicación: España
Género:
Edad: 58

Modificar ancho columnas en extensión Topic index

#6

Mensaje por J_Sparrow »

Nada, no soy capaz.
Hay un fichero en la ruta de la extensión ....ext\dmzx\topicindex\styles\all\theme , llamado topicindex.css y lo he añadido al final, quedando así:

Código: Seleccionar todo

#content_index { 

overflow:hidden ! important; 

}



#content_index_flow { 

overflow-y:auto !important; 

overflow-x:hidden !important; 

height: 800px !important; 

width: 100% !important; 

padding-right:4px; 

}



.content ul, .content ol {

margin: 0 ! important; 

}



.icenter { 

text-align:center; 

}



.itopic_num { 

text-align:center; 

width:30px; 

}



.itopic_titles { 

text-align:left ! important; 

float:left; 

}



.itopic_rep { 

text-align:center; 

width:80px; 

}



.itopic_poster { 

text-align:center; 

width:250px; 

}



.index_table { 

margin:0; 

padding:0; 

}



.tlisthead { 

color:#000000 !important; 

}



.topicindex {

font-size: 1.2em;

line-height: 2.2em;

padding: 4px 0;

}



.topicindexremove {

margin-top:5px;

font-size: 1.2em;

}



.filtrino { 

text-align:center;

margin:5px 5px 5px 5px; 

text-transform:uppercase; 

font-size:12px ! important; 

font-weight:bold; 

}



.i_abcdz { 

margin: 0 0 0 2px; 

padding: 0 4px 0 4px; 

background: #CADCEB; 

}



.i_abcdz:hover { 

margin: 0 0 0 2px; 

padding: 0 4px 0 4px; 

background: #9badb9; 

text-decoration:none ! important; 

}



.i_nourl{ 

margin: 0 0 0 2px; 

padding: 0 4px 0 4px; 

background:#FFFFFF !important; 

text-transform:uppercase; 

color: #c2c2c2 !important; 

}



.i_all { 

margin: 0 0 0 2px; 

padding: 0 4px 0 4px; 

background: #CADCEB;  

}



.i_all:hover { 

margin: 0 0 0 2px; 

padding: 0 4px 0 4px; 

background: #9badb9; 

text-decoration:none ! important; 

}



.ianytopuc { 

text-align:center; 

font-size:14px; 

}



@media (max-width: 850px) {

li.header dt {

	text-align: center;

	text-transform: none;

	line-height: 1em;

	font-size: 1.2em;

	padding-bottom: 4px;

}



ul.topiclist li.header dt, ul.topiclist li.header dt .list-inner {

	margin-right: 0 !important;

	padding-right: 0;

}



ul.topiclist dt, ul.topiclist dt .list-inner

{

	margin-right: 0;

}



ul.topiclist dd {

	display: none;

}

}
/* Tamaño de letra */
#content_index .topiclist dl > dt,
#content_index .topiclist dl > dd {
	font-size: 1em;
}

/* Ancho de columna "Por" */
#content_index .topics {
	width: 250px;
}

/* Ancho columna "Respuestas" */
#content_index .posts {
	width: 85px;
}

/* Ancho de columna "Borrar" */
#content_index .lastpost {
	width: 85px;
}

He limpiado el cache y "aparentemente" no hace nada por mucho que cambie un valor. Digo "aparentemente" porque le ponga 185 o 1185, se ve igual el ancho.
No se que estoy haciendo mal.

Lo reviso después de cenar, que para mi ya es hora.

Contenido Oculto
Este foro requiere que este registrado e identificado para ver el contenido oculto.


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
canidev
Moderador
Mensajes: 578
Registrado: 30 Jun 2011, 17:06
Nombre real: Iván
Género:
Edad: 33
Contactar:

Modificar ancho columnas en extensión Topic index

#7

Mensaje por canidev »

En la modificación que ha mencionado @AbaddonOrmuz cambia todos los "#content_index" por "#content_index_flow". Con eso debería funcionarte.



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
J_Sparrow
Moderador
Mensajes: 938
Registrado: 30 Oct 2009, 00:20
Nombre real: Jose Luis
Ubicación: España
Género:
Edad: 58

Modificar ancho columnas en extensión Topic index

#8

Mensaje por J_Sparrow »

Oye, pues parece que funciona, ahora solo tengo que ajustar los valores para que no se saga de la pantalla :D :D :D

Gracias @canidev y por supuesto a todos los demás.

Contenido Oculto
Este foro requiere que este registrado e identificado para ver el contenido oculto.


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
J_Sparrow
Moderador
Mensajes: 938
Registrado: 30 Oct 2009, 00:20
Nombre real: Jose Luis
Ubicación: España
Género:
Edad: 58

Modificar ancho columnas en extensión Topic index

#9

Mensaje por J_Sparrow »

Bueno, ya lo he corregido y está como me apetecía.
Aprovecho para una pregunta mas. Quiero desplazar el principio de las columnas

Imagen

Quiero moverlas en esa dirección y no se que comando controla la posición. He estado haciendo pruebas con Inspeccionar Elemento y no he conseguido gran cosa. No he encontrado el "punto" que me indique donde está para poder modificarla.

Contenido Oculto
Este foro requiere que este registrado e identificado para ver el contenido oculto.


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
AbaddonOrmuz
Moderador
Mensajes: 831
Registrado: 14 Ene 2017, 22:18
Nombre real: Alfredo
Ubicación: /dev/null
Género:
Contactar:

Modificar ancho columnas en extensión Topic index

#10

Mensaje por AbaddonOrmuz »

Con CSS lo veo un poco complicado en su estado actual, o mejor dicho, poco práctico porque necesitarías usar margin con valores negativos, dependiendo del ancho de la columna adyacente hacia donde lo quieres colocar.

Podrías intentar modificar la plantilla, si por ejemplo quieres que la columna "Autor" y "Respuestas" esté antes de "Título del tema", tomando como ejemplo la plantilla original (v1.0.5), tendrías que cambiar dd.posts y dd.topics antes del primer dt, todo ello dentro de la etiqueta dl, suena un poco confuso pero no lo es tanto viendo la estructura.

Archivo: ext/dmzx/topicindex/styles/all/template/official_topic_index.html [referencia]

Original

Código: Seleccionar todo

	{% if block_list.S_ISWITH2 %}
	<h3>{{ block_list.FILTRINO }}</h3>
	<div class="panel bg3">
		<div class="inner">
			<ul class="topiclist">
				<li class="header">
					<dl class="row-item">
						<dt>
							<div class="list-inner" style="color:#000000;">{{ lang('TOPIC_TITLE') }}</div>
						</dt>
						<dd class="topics" style="color:#000000;">{{ lang('POSTER') }}</dd>
						<dd class="posts" style="color:#000000;">{{ lang('REPLIES') }}</dd>
						{% if U_MCP %}<dd class="lastpost" style="color:#000000;"><span>{{ lang('REMOVE_FROM_LIST') }}</span></dd>{% endif %}
					</dl>
				</li>
			</ul>
			<ul class="topiclist forums">
			{% for block_topic_index in block_list.block_topic_index %}
				<li class="row {% if block_topic_index.S_ROW_COUNT is even %}bg1{% else %}bg2{% endif %}">
					<dl>
						<dt class="topicindex">
							<div class="list-inner">
								<a href="{{ block_topic_index.ITOPIC_URL }}"><strong>{{ block_topic_index.ITOPIC_TITLE }}</strong></a>
							</div>
						</dt>
						<dd class="topics">{{ block_topic_index.ITOPIC_POSTER }}</dd>
						<dd class="posts">{{ block_topic_index.ITOPIC_TOTREP }}</dd>
						{% if U_MCP %}<dd class="lastpost"><span class="topicindexremove">[<a href="{{ block_topic_index.U_REMOVE_FROM }}">{{ lang('REMOVE_FROM_LIST') }}</a>]</span></dd>{% endif %}
					</dl>
				</li>
			{% endfor %}
			</ul>
		</div>
	</div>
	{% endif %}

Modificado

Código: Seleccionar todo

	{% if block_list.S_ISWITH2 %}
	<h3>{{ block_list.FILTRINO }}</h3>
	<div class="panel bg3">
		<div class="inner">
			<ul class="topiclist">
				<li class="header">
					<dl class="row-item">
						<dd class="topics" style="color:#000000;">{{ lang('POSTER') }}</dd>
						<dd class="posts" style="color:#000000;">{{ lang('REPLIES') }}</dd>
						<dt>
							<div class="list-inner" style="color:#000000;">{{ lang('TOPIC_TITLE') }}</div>
						</dt>
						{% if U_MCP %}<dd class="lastpost" style="color:#000000;"><span>{{ lang('REMOVE_FROM_LIST') }}</span></dd>{% endif %}
					</dl>
				</li>
			</ul>
			<ul class="topiclist forums">
			{% for block_topic_index in block_list.block_topic_index %}
				<li class="row {% if block_topic_index.S_ROW_COUNT is even %}bg1{% else %}bg2{% endif %}">
					<dl>
						<dd class="topics">{{ block_topic_index.ITOPIC_POSTER }}</dd>
						<dd class="posts">{{ block_topic_index.ITOPIC_TOTREP }}</dd>
						<dt class="topicindex">
							<div class="list-inner">
								<a href="{{ block_topic_index.ITOPIC_URL }}"><strong>{{ block_topic_index.ITOPIC_TITLE }}</strong></a>
							</div>
						</dt>
						{% if U_MCP %}<dd class="lastpost"><span class="topicindexremove">[<a href="{{ block_topic_index.U_REMOVE_FROM }}">{{ lang('REMOVE_FROM_LIST') }}</a>]</span></dd>{% endif %}
					</dl>
				</li>
			{% endfor %}
			</ul>
		</div>
	</div>
	{% endif %}

O si eres más visual como yo: https://www.diffchecker.com/zMeWoZxD

Algunas de mis extensiones:
Imagen Imgur | :chart_with_upwards_trend: SEO Metadata | Imagen Markdown | :lock: Auto-lock Topics | :mermaid: Mermaid Diagrams
:trophy: Checa todas mi extensiones aprobadas :trophy:

:penguin: Usuario de Arch Linux :penguin:



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
J_Sparrow
Moderador
Mensajes: 938
Registrado: 30 Oct 2009, 00:20
Nombre real: Jose Luis
Ubicación: España
Género:
Edad: 58

Modificar ancho columnas en extensión Topic index

#11

Mensaje por J_Sparrow »

Gracias @AbaddonOrmuz , pensaba que era mas sencillo (que no dudo que lo sea), pero me había imaginado que con añadir un comando en ese estupendo fichero que creaste, era suficiente.
Haré pruebas en Local y si veo que merece la pena, lo paso al Foro oficial.

Gracias otra vez.

Contenido Oculto
Este foro requiere que este registrado e identificado para ver el contenido oculto.


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
andares
Moderador
Mensajes: 1289
Registrado: 18 Nov 2008, 03:32
Nombre real: Pedro
Ubicación: Barcelona
Género:
Edad: 53
Contactar:

Modificar ancho columnas en extensión Topic index

#12

Mensaje por andares »

También aprovecho la modificación, gracias a @AbaddonOrmuz y @canidev :clap:



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Responder
  • Temas similares
    Respuestas
    Vistas
    Último mensaje

Volver a “Soporte de Extensiones 3.2”