Modificar estilo theme Fusion

[pulgatomika]

Hola a tod@s.
A ver si hay suerte y me podéis echar una mano, para modificar un poco o bastante el estilo del theme, ya que son unas cuantas cosas, para que quede a mi gusto.
Bueno empezare por lo primero, os diré lo que quiero hacer y pondré imágenes, tambien claro es si se puede hacer y si lo puedo hacer yo, que lo que no quiero es molestar tampoco.

1· Lo primero es cambiar el header, es poner una imagen que ocupe el 100% de la cabecera y hacer esta mas grande. Tambien que no aparezca el nombre de la web, os dejo imagen a continuación, por si no me explicado del todo bien.



2. Cambiar el diseño del menú y quitar los iconos de el, os lo enseño mejor en imágenes, espero que de esto haya un mod.

El menú es asi:



Me gustaría si es posible que tenga este estilo o parecido, pero los iconos si es posible que no se muestren en el menú:



3· No se si se puede, pero se puede hacer mas grande que ocupe 80% o asi, no se como se llama creo que es wrapper no lo se, lo enseño una imagen, vamos lo que quiero es que sea un poco mas grande:



Eh de suponer que si se hace mas grande el wrapper, tambien cambia el tamaño de los temas no?

4· Cambiar tamaño y fuente de letra de los títulos cuando entras en un foro o tema o entrada, muestro imágenes:





5· Estos iconos no se como se llaman y no se si es posible que se muestren en vez de debajo de iconos de mensajes, en el lado izquierdo, os enseño una imagen retocada para mostrar a que me refiero:



6· Me gustaría separar un poco, los iconos de mensajes de los titulos de los temas, creo que es por que estos ocuparan el 100%, pero tampoco estoy seguro, os muestro imagen:



6· Me gustaría tambien cambiar de color, el amarillo que se muestro en la respuesta, tema etc... cuando este a sido editado, por otro color:



Se que son muchas cosas, seis cambios pero mucho y perdonar las molestias, pero yo si me lo explican se hacerlo, pero si no, yo no tengo ni idea, doy gracias de que haya un foro asi.

Uso el theme Fusion, con la versión SMF 2.1.3. Adjuntare el index.css, que se supongo que se necesita.

https://custom.simplemachines.org/index.php?theme=2960

Saludos y perdonar las molestias.

[pulgatomika]

4. Solucionado Hacer mas pequeño el tamaño de las letras, lo único que no se es como poner una fuente de letra diferente, a eso títulos.
Yo voy mirando manuales por el foro y si doy con la solución las iré tachando de aquí.
Saludos.

6· Solucionado tambien. Cambiar color amarillo, que sale después de editar un tema.
Por cierto por que no puedo editar el tema, que quiere ir tachando cosas.
Saludos.

[pulgatomika]

3· Solucionado tambien. Hacer mas grande el foro.

[pulgatomika]

Lo demás, busco, busco y busco y no doy con la respuesta.
Seguiré buscando, pero de momento, yo no encuentro nada.
Saludos.

[-Rock Lee-]

1- En el index.template.php busca entre las lineas 312-315 tenes que comentar/quitar:

Code Select Expand

echo'
            <h1 class="forumtitle">
                 <a id="top" href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name_html_safe'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name_html_safe'] . '">', '</a>
            </h1>';
Y en el index.css tenes que buscar:

Code Select Expand

#header {
 padding:20px;
 width:90%;
 display:block;
 background-color:none
}cover;
y agregar background-image: url("../ejemplo/mi_imagen.png"); height: 150px;

2- Tengo investigar algo mas pero creo va de la mano con los archivos por defecto...

5- Debería acomodarse bien, puede algo en el css lo mueva pero hice varias pruebas. ¿Cual es la url para verlo mejor?


Saludos!

PD: No podes editar el primer mensaje por que existe un limite de tiempo para modificar.

[pulgatomika]

Hola Rock Lee, lo primero gracias por la ayuda, me surgen unas dudas.

1- En el index.template.php busca entre las lineas 312-315 tenes que comentar/quitar:

Code Select Expand

echo'
            <h1 class="forumtitle">
                <a id="top" href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name_html_safe'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name_html_safe'] . '">', '</a>
            </h1>';

Exactamente que tengo que hacer? Eliminar el código que pones arriba? Es que pones comentar/ quitar y no me queda claro.

Y en el index.css tenes que buscar:

Code Select Expand

#header {
 padding:20px;
 width:90%;
 display:block;
 background-color:none
}cover;
y agregar background-image: url("../ejemplo/mi_imagen.png"); height: 150px;

Y en este que hago, agrego el código debajo de background-color no?
background-image: url("../ejemplo/mi_imagen.png"); height: 150px;
O tengo que quitar el background-color
El cover; se tiene que poner tambien, en algún lado.

2- Tengo investigar algo mas pero creo va de la mano con los archivos por defecto...

5- Debería acomodarse bien, puede algo en el css lo mueva pero hice varias pruebas. ¿Cual es la url para verlo mejor?

Te paso usuario por correo privado del foro, que de momento tengo desactivados los registros y si no estas registrado no se ve.

Y perdona que no me haya quedado claro, se agradece mucho la ayuda.

Saludos y gracias.

[-Rock Lee-]

Exactamente que tengo que hacer? Eliminar el código que pones arriba? Es que pones comentar/ quitar y no me queda claro.

Yo suelo comentar por si necesito restaurarlo pero otros directamente lo quitan por eso te deje ambas opciones, el punto es quitar ese echo.

Y en este que hago, agrego el código debajo de background-color no?
background-image: url("../ejemplo/mi_imagen.png"); height: 150px;
O tengo que quitar el background-color
El cover; se tiene que poner tambien, en algún lado.

En este caso quedaría:

Code Select Expand

#header {
 padding:20px;
 width:90%;
 display:block;
 background-color:none;
 background-image: url("../ejemplo/mi_imagen.png");
 height: 150px;
}
Bueno queda de mas decir que donde dice 150px lo cambias a lo que vos necesitas claro esta, y por las propiedades del theme en si no es necesario usar cover al momento de probar ya cubría todo el header.

Te paso usuario por correo privado del foro, que de momento tengo desactivados los registros y si no estas registrado no se ve.

Y perdona que no me haya quedado claro, se agradece mucho la ayuda.

Saludos y gracias.

De acuerdo luego miro tu mensaje pero en mi localhost va bien pero casi seguro algún valor en el css desborda y pega ese salto.


Saludos!

[pulgatomika]

Muchas gracias Rock Lee, por la explicación, ahora mismo lo pruebo, a ver que tal.
Saludos.

[pulgatomika]

Hola Rock Lee, todo realizado y todo perfecto.
1. Realizado.
Pues muchas gracias, es como has dicho ir tocando, hasta que a quedado como quería.
Muchas gracias.

[pulgatomika]

Pero no se si lo e echo bien, e tocado esta parte del index.css

Code Select Expand

#top_section .inner_wrap, #wrapper, #header, #footer .inner_wrap {
max-width: 1920px;
margin: 0 auto;
width: 90%;
Eh cambiado el max-width a 1920px.
Esta bien o tendría que tocar otra cosa, para que ocupe todo el ancho en otras resoluciones como quien tenga una pantalla en 4k, por que creo, no lo se, que esta mal echo, como lo e realizado.
Saludos.

[Irisado]

PD: No podes editar el primer mensaje por que existe un limite de tiempo para modificar.

El límite es una hora para ser preciso .

@pulgatomika - Si quieres añadir más información dentro de una hora, por favor modifica el mensaje.  He combinado dos mensajes arriba.

[-Rock Lee-]

Pero no se si lo e echo bien, e tocado esta parte del index.css

Code Select Expand

#top_section .inner_wrap, #wrapper, #header, #footer .inner_wrap {
max-width: 1920px;
margin: 0 auto;
width: 90%;
Eh cambiado el max-width a 1920px.
Esta bien o tendría que tocar otra cosa, para que ocupe todo el ancho en otras resoluciones como quien tenga una pantalla en 4k, por que creo, no lo se, que esta mal echo, como lo e realizado.
Saludos.

Esta mas que bien porque es un resolución promedio, ya mas altas resoluciones no es tan común aunque si le pones mas se deforma demasiado por experiencia a si que creo esta bien.


Saludos!

[pulgatomika]

Bueno pues esto e mirado y mirado, probado de todo, con conocimientos claro que son pocos y no doy con la manera, que se muestren estos iconos en el lado izquierdo del icono de montajes.
-Rock Lee- me explico que es cosa de CSS y de ir probando, pero lo único que e logrado, es moverlo a la izquierda o derecha y siempre por debajo del icono de mensaje.
Tenéis algún consejo?
Saludos y perdonar las molestias.

[-Rock Lee-]

Estuve mirando por varios lados navegando y lo muestra correctamente, puede ser algo en el css pero esta toco correcto. Incluso probé con varias resoluciones pero no se mueve hacia abajo... Dando a inspeccionar elemento en el apartado de código que te marca? capas algún valor heredado no funciona?


Saludos!

[pulgatomika]

Estuve mirando por varios lados navegando y lo muestra correctamente, puede ser algo en el css pero esta toco correcto. Incluso probé con varias resoluciones pero no se mueve hacia abajo... Dando a inspeccionar elemento en el apartado de código que te marca? capas algún valor heredado no funciona?
Saludos!

Hola Rock Lee, gracias por la ayuda.
Cuando le doy a inspeccionar el elemento, mes sale esto, te muestro las dos capturas como archivos adjunto.
Y lo del valor heredero, pues no lo se la verdad, ya sabes que yo ni idea de código, se seguir instrucciones solo.
Y gracias. Saludos.

[-Rock Lee-]

¿Probaste borrar cache o entrar desde otro dispositivo? por lo que veo lo toma desde el css comprimido puede ser como se aplicaron cambios no termina de ver los cambios, algunas veces sucede. También explicaría cuando entre me lo muestra correctamente...


Saludos!

[pulgatomika]

¿Probaste borrar cache o entrar desde otro dispositivo? por lo que veo lo toma desde el css comprimido puede ser como se aplicaron cambios no termina de ver los cambios, algunas veces sucede. También explicaría cuando entre me lo muestra correctamente...
Saludos!

Hola Rock Lee.
Eh probado si entrar por firefox tambien y sale igual abajo.
Lo del cache, no te refieres al del buscador no, te refieres desde la administración.
Bueno por lo que veo, como dices en el usuario de prueba no sale, solo sale el icono de mensaje, a mi claro me sale, por que es el icono de Temas en los que has publicado.
No se si es posible, pero para que no salga el icono hay, se podría mover de posición al lado de el icono de fijar tema.
Saludos y gracias por la ayuda.

[pulgatomika]

Hola, yo sigo buscando y no se si es una solucion, pero lo unico que veo y que no elimina iconos de otras partes excepto del board icon, es en este codigo:

Code Select Expand

<div class="board_icon">
                        <img src="http://cinemalamorte.es/Themes/Fusion/images/post/Poliziesco.png" alt="">
                        <span class="main_icons profile_sm"></span>
                    </div>
Es eliminar el <span class="main_icons profile_sm"></span>, es una solución? Es que ni idea que archivo tiene este código y no lo puedo probar.
Saludos.

[-Rock Lee-]

Ah eso explicaría el por que no me sale el error a mi, aunque trate de probar en un sitio de pruebas tengo pero tampoco me mostraba esa falla. Es una clase por que esta en varios lados pero quitando ese en especifico no debería afectar, aunque es probar por que no pude reproducir el problema. Buscando algo rápido en el MessageIndex.template.php en la linea 182 debería aparecer pero si tenes dudas comentarlo y proba si soluciona sino tocaría ver el resto de archivos.


Saludos!

[pulgatomika]

Ah eso explicaría el por que no me sale el error a mi, aunque trate de probar en un sitio de pruebas tengo pero tampoco me mostraba esa falla. Es una clase por que esta en varios lados pero quitando ese en especifico no debería afectar, aunque es probar por que no pude reproducir el problema. Buscando algo rápido en el MessageIndex.template.php en la linea 182 debería aparecer pero si tenes dudas comentarlo y proba si soluciona sino tocaría ver el resto de archivos.
Saludos!

Hola Rock Lee.
Pues si lo a solucionado, e eliminado la linea 182 y perfecto.
Muchas gracias por la ayuda.

[pulgatomika]

Hola.
Sobre lo del menú de cambiar estilo, bueno el estilo mas que nada, quiero que el botón ocupe toda la barra, yo lo intento, pero no doy con ello para hacerlo, dejo el adjunto para que veáis a que me refiero.
Si es muy complicado, pues nada se deja al cual esta y se da como solucionado, por que por lo demás ya esta todo solucionado.
Saludos.

[Diego Andrés]

A qué te refieres específicamente?
Solamente el texto es un enlace?

[-Rock Lee-]

No me queda del todo claro tampoco aunque si ocupara toda la pantalla quedaría desproporcionada pero seria editar el css aunque espero expliques un poco mas mejor.


Saludos!

[pulgatomika]

Hola a los dos y gracias por responder.
Me refiero solo al botón en el menú, que ocupe ancho igual, pero que ocupe todo el espacio de el boton, como en el adjunto que os muestro, espero a verme explicado bien.
Saludos y gracias por la ayuda.

[-Rock Lee-]

Ahora si entiendo no lo pude probar mucho pero debería funcionar, en el index.css linea 688 aproximado tenes buscar .dropmenu>li, #top_info>li y en la linea donde dice "line-height:" cambiarlo a 3.9em que al menos parece funcionar (podes ir cambiando para dejarlo a tu gusto).


Saludos!

[pulgatomika]

Muchas gracias, Rock Lee.
En cuanto llegue a casa lo pruebo.
Saludos,

[pulgatomika]

Hola Rock Lee.
Lo e probado pero no funciona, bueno funciona pero por lo que veo tambien se edita el menú de arriba, asi que es igual, lo dejamos tal cual que tambien esta guapo.

Muchas gracias por la ayuda que me has dado en todo.
Saludos y damos el tema por solucionado.