Cambiar tamaño título en Touchfolio Theme

Resuelto Nuriaruiz
(@nuriaruiz)

hace 9 años, 2 meses

Hola,
No puedo cambiar el título de mi página de wordpress en css. Lo he intentado en las hojas de estilo, en todos los php, pero no consigo modificar el título concretamente. Estoy trabajando con Touchfolio en local. Alguien puede ayudarme?!
Gracias
Nuria

Viendo 15 respuestas - de la 1 a la 15 (de un total de 20)

1 2 →

Peter Olle
(@peterolle)

hace 9 años, 2 meses

¿URL de la web?

Saludos.

Justotofu
(@justotofu)

hace 9 años, 2 meses

Buenos días,
Prueba cambiando el valor de font-size en el selector .logo en el css de touchfolio. Peter, esta trabajando en local.
Espero que te sirva.
Saludos,
Justo.

Peter Olle
(@peterolle)

hace 9 años, 2 meses

Buen punto, no lei «en local». Quería la URL para darte el CSS, pero si es en local, tendrás que buscar tu el selector, que al parecer es el que te da Justotofu.

Saludos.

Iniciador del debate Nuriaruiz
(@nuriaruiz)

hace 9 años, 2 meses

Hola,

gracias por vuestros comentarios. El problema es que no encuentro este selector. No se dónde puedo encontrarlo. Mis conocimientos de css no soy muy amplios, pero todo lo que he podido modificar ha sido aquí (os paso la hoja de estilos original). He modificado varios tamaños de alguna tipografia, pero mayoritariamente, esta todo tal cual en mi plantilla.

https://github.com/dimsemenov/Touchfolio/blob/master/style-touchfolio-default.less

No se si ayudo mucho con esta información.

Gracias de nuevo.
Núria

Iniciador del debate Nuriaruiz
(@nuriaruiz)

hace 9 años, 2 meses

Cuando inspecciono el elemento, me aparece esto:

element.style {
}
localhost/media=»screen, projection»
.collapsed-layout .logo a {
font-size: 19px;
padding: 20px 16px 20px 16px;
}
localhost/media=»screen, projection»
.logo a {
color: #333333;
border: 0;
background: none;
display: block;
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}

Pero no se donde encontrar lo que os marco en negrita.

A ver si así os puedo ayudar a que me ayudeis 😉

Núria

Justotofu
(@justotofu)

hace 9 años, 2 meses

Buenos días,
El selector no esta en el css de la raiz del tema. Esta en el css general de la carpeta css-less.
La ruta sería, \carpeta_del_tema_touchfolio\css-less\general.less
De la linea 239 hasta la 260.
Espero que sea de ayuda,
un saludo,
Justo.

Peter Olle
(@peterolle)

hace 9 años, 2 meses

No se si ese tema lea como archivo final el archivo less, supongo que no y necesitas general el CSS para que todo funcione.

Saludos.

Iniciador del debate Nuriaruiz
(@nuriaruiz)

hace 9 años, 2 meses

Hola! Muchas gracias! 🙂 Lo he conseguido cambiar! Pero solo una vez, he probado a poner diferentes tamaños, y solo me ha funcionado la primera vez. Cada vez que lo he modificado, he guardado el documento, pero aún así no consigo actualizarlo. Que estoy haciendo mal?

Un saludo,
Núria

Peter Olle
(@peterolle)

hace 9 años, 2 meses

Sin saber como lo haces, ver lo que haces y entender lo que haces, es imposible saber que haces mal. Sin duda lo que tienes que cambiar es el CSS, pero sin poder ver la web, ni nada, imposible decirte algo más.

Saludos.

Justotofu
(@justotofu)

hace 9 años, 2 meses

Buenas tardes Nuria,
como bien comenta Peter es muy dificil orientarte sin poder echar un ojo a la pagina y sin saber como trabajas.
Se me ocurren dos cosas que pueden pasar.
La primera es que el valor que le estes dando sea demasiado grande o pequeño o este mal escrito. Prueba primero a cambiarlo con la herramientas de desarroyador de tu navegador, cuando lo tengas, copia y pega la linea.
Otra puede ser que al recargar la pagina te muestre el cache. Para esto prueba a actualizar sin que lea la cache en Mozilla / Firefox / Safari / Chrome presiona Ctrl-Shift-R o pulsa Shift mientras hace clic en Recargar (Cmd-Shift-R en Apple Mac)
Espero que te sirva,
Un saludo,
Justo.

Iniciador del debate Nuriaruiz
(@nuriaruiz)

hace 9 años, 2 meses

Hola de nuevo,

gracias por vuestras aportaciones. Se que es dificil de trabajar así y poder ayudar sin muchos datos y sin poder ver qué hago. Enviaría unas capturas pero veo que no hay ninguna opción para enviar imagenes, así que tendré que explicar mejor que es lo que hago, pues la primera interesada en la ayuda soy yo.

He probado ctrl/shift + R, y no se soluciona.
Quizás, y digo quizás porque no controlo el CSS, es que la unidad de medida que me aparece en la hoja es em (y por lo que entiendo, no es una unidad de medida como px, si no una unidad relativa sobre un elemento).

.logo {
margin: @default-logo-margin;
width: @default-logo-width;
letter-spacing: 0;
font-size: 1em;
a {
color: @selected-menu-item-color;
border: 0;
background: none;
display: block;
.transition(opacity, .3s);
}
a:hover {
opacity: 0.6;
background: none;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}

Esto aparece en mi hoja.
Entiendo pues que 1em es una relación de anchura del tamaño de la fuente del documento, y por lo tanto debería haber un apartado que me dijera qué tamaño tiene la fuente. ¿Estoy en lo cierto?

La otra cosa que me aconsejas Justo, es inspeccionar el elemento y cambiar aquí el tamaño y luego copiar la linea. AL inspeccionar, me aparece esto:

element.style {
}
localhost/media=»screen, projection»
.collapsed-layout .logo a {
font-size: 19px;
padding: 20px 16px 20px 16px;
}
localhost/media=»screen, projection»
.logo a {
color: #333333;
border: 0;
background: none;
display: block;
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;

Esto significa que la fuente esta a 19px? Lo deduzco pues cuando lo modifico en la zona de inspeccionar el elemento (desarrolador creo que lo llamais) me cambia la fuente sin problema!!! Intento buscar este dato en las hojas css y no lo encuentro para modificarlo!!!

Espero poder ayudar un poco más, si puedo hacer algo más, porfavor, decirmelo (y perdonar un poco mi ignorancia en el campo, si supiera hacerlo, no tendria que preguntarlo).

Gracias de nuevo!!

Núria

Iniciador del debate Nuriaruiz
(@nuriaruiz)

hace 9 años, 2 meses

Respecto al como trabajo, no se si os sirve de mucha ayuda pero: uso xampp, trabajo en local y las hojas css las modifico en Notepad++. Guardo las hojas y las modificaciones y se me actualizan en wordpress!!!

Tengo un plugin que se llama FONT UPLOADER, para poder poner la fuente que quiero, y estoy usando BEBASNEUE webfont (las cargo directamente desde el plugin). ¿Podría ser esto el problema?
No se si sirve de mucho lo que os digo, quizá es demasiado evidente, pero mi conocimiento sobre css no llega mucho más allá! :S

gracias!

Justotofu
(@justotofu)

hace 9 años, 2 meses

Rebuenas tardes,
Efectivamente, «em» es una medida relativa respecto a la anchura de la letra M mayúscula. Y «px» también se considera relativa pero respecto a la resolución de la pantalla del dispositivo. En este caso, 1em serian 19px, por lo cual 2em serian 38px, 3em serian 57px, y así sucesivamente. Y como bien has dicho, los «px» estarán descritos antes.

Como en este caso se trata de la cabecera, puedes probar a poner las unidades en «px» copiando la linea del inspector de las herramientas de desarroyo, o directamente sobre el código.

Sobre el plugin no lo he probado, pero si funciona como creo, no debería dar problemas. La forma de probar que se me ocurre es desactivándolo y activandolo, despues de cada cambio en el css y mirando lo que devuelve el inspector.

Yo tampoco soy un erudito, a si que espero estar dando buenos consejos y no liarte mas.

Un saludo!!

Iniciador del debate Nuriaruiz
(@nuriaruiz)

hace 9 años, 2 meses

Hola Justofu,

muchas gracias por tu paciencia. Intenté cambiar las unidades, copiar la línea, y no hay resultado. No entiendo porque me dejo modificarlo y ahora los cambios no se hacen efectivos. 🙁

Justotofu
(@justotofu)

hace 9 años, 2 meses

Buenas tardes de sábado.

Bueno pues entonces, podemos probar con un plugin para editar css. Yo uso Simple custom CSS, lo he probado con Touchfolio y funciona a la perfección. Puedes poner algo como esto:

.logo {
font-size: 40px;
}

Y además tiene la ventaja de que cuando actualices el tema, no te cargas todo lo que habías cambiado. Aunque si trabajas con un tema hijo, esto da igual.

Un saludo.