Debe ser de perogrullo...

[jcpoley]

Buena a todos,
Me estoy metiendo en esto del wordpress y trastear con html y css y tengo una duda que seguro es muy sencilla. Estoy modificando el logo de mi web y ccon firebug tengo loccalizado el logo en un <a href> y su propiedad heiigth ya que por configuración de wp no me sale, me lo deja muy pequeño. ¿Ese archivo que contiene <href> y que estoy viendo por el firebug en html, es el header:php pero traducido a html al presentarse en web, ya que php es lenguaje de servidor? Si es así, ¿como modifico el heigth dentro de ese php? Ahí ya me pierdo y no quiero meter la pata.
Gracias!!

[JustinKO]

Sí, el logo lo normal es que esté en el archivo header.php. Las medidas es muy probable que estén metidas por PHP o simplemente que por css se le ajuste el ancho al contenedor que lo lleve y el alto automático.
¿tienes localizada la línea de código PHP donde está el logo en el header.php? Pega el código y lo vemos.
¿NO tienes un link de esa plantilla que se puede ver aunque sea inspecionando elemento?
Das pocos datos para poder ayudarte
De todos modos, lo más probable es que se pueda modificar por CSS.
SAludos

[jcpoley]

Buenas,
Gracias por tu ayuda, porque estoy tela de agotado con este tema. No consigo poner el logo donde quiero. En css no vienen medidas, o al menos yo no las veo, si viene en el html que veo con firebug, que supongo es php traducido en servidor. El tema es que en firebug consigo ponerlo donde quiero, aunque al hacer roll se me mueve y decolora, tocando el height de un <href> pero no veo eso en el header.php...claro que el php no lo domino nada ;(
Te pego php con logo, y el link de la web para que le eches un vistazo. Confírmame que esa parte de html que veo con firebug es el heder.php en html xfa!!

<div class="header_inner clearfix">
<div class="logo" style="height:<?php echo $line_height?>px;"><a href="<?php echo home_url(); ?>/"><img src="<?php echo $qode_options_infographer['logo_image']; ?>" alt="Logo"/></a></div>

link. www.bananabamarketing.com

GRACIAS!!

[JustinKO]

Es más simple de lo que parece.

Si te fijas, al div contenedor le da el estilo inline (style) la variable siguiente:

Código PHP:

<?php echo $line_height?>px;
 

Esto reproduce el código html siguiente:

Código PHP:

<div style="height: 80px; top: 40px; padding: 0px;" class="logo">
<a href="http://www.bananabamarketing.com/" style="height: 75px; visibility: visible;">
<img alt="Logo" src="http://www.bananabamarketing.com/wp-content/uploads/2015/03/logorpueba1.png" style="height: 100%;">
</a>
 

Lo que significa que la variable le está aplicando el style:

height: 80px; top: 40px; padding: 0px;

Si te fijas en el html que te genera, a la imagen se le está aplicando un style de "height: 100%" (esto se lo debe de generar por javascript porque no aparece nada en el código php) lo que significa que si el alto del contenedor tiene 80px, la imagen tendrá un 100% de 80px, total: 80 px.
Por otro lado, el css tiene un width: auto.

Si quieres arreglarlo sin cambiar el código php, fuerza el CSS como te muestro abajo

Código CSS:

.logo img {
    display: block;
    height: auto !important;
    position: relative;
    top: -80px !important;
    width: 100% !important;
}
 

Básicamente, lo que he hecho es cambiar el width por 100% y que sea el height automático respecto al ancho de la imagen. Puedes cambiar el ancho a tu gusto.

(por otro lado está el tema del posicionamiento (top) que es un poco raro ese -40px, pero bueno lo he forzado con el -80px, que si fuera mía la página le buscaría el porqué para dejar el top de una manera natural)

De todos modos, si te da igual perder alguna funcionalidad de la plantilla puesto que eres tú el que lo controla, es tan simple como borrar esas variables y meterlas tú a mano en html, y crear tu propio código html a tu gusto.

Te recomiiendo que te crees un tema child de la plantilla y hagas los cambios ahí.

Un saludo y espero haber podido ayudarte.

[jcpoley]

Gracias!!! Impresionante tu ayuda. Me pondré a ver que me sale. Ya estoy haciéndolo en un child theme...supongo que siempre podré volver al original y crear uno child nuevo si todo esto se desmadra, no? Otra pregunta que me tiene algo mosca, ¿porque el style.css, en este caso es stylesheet.css? ¿es igual al style de toda la vida? Gracias de verdad, y ya te digo como me va esto...;)

[JustinKO]

No sé a qué te refieres con el stylessheet.css.

En wordpress el style.css es donde defines la plantilla, sin este archivo bien configurado no debería de reconocértela.
No puedo ver lo que me dices porque tienes la web "under construction" pero supongo que importará esa plantilla en el style.css. No lo sé.


otra cosa, vi que con el código que te envié fallaba alguna cosilla al hacer scroll, pero nada que no puedas solucionar con algún padding y algún otro ajuste CSS.

Un saludo

EL tema del child, son más las ventajas que te da. Hay mucha documentación en internet sobre ello.

[jcpoley]

Una preguntita que me surge ¿Podría meter el código html -el que veo por firebug y que te pongo abajo- directamente en el header.php? Me dices esto:"De todos modos, si te da igual perder alguna funcionalidad de la plantilla puesto que eres tú el que lo controla, es tan simple como borrar esas variables y meterlas tú a mano en html, y crear tu propio código html a tu gusto.". Te refieres borrar el php que afecta a logo, y meter el html? Porque si quisiera por ejemplo modificar sólo el height, ¿como hacerlo cuando en el pho no veo nada de ese código?...no se si me entiendes.

<div style="height: 80px; top: 40px; padding: 0px;" class="logo">
<a href="http://www.bananabamarketing.com/" style="height: 75px; visibility: visible;">
<img alt="Logo" src="http://www.bananabamarketing.com/wp-content/uploads/2015/03/logorpueba1.png" style="height: 100%;">
</a>

Otra cosita, y perdona por abusar e verdad...apuro me da ;( Me dices tb: "Básicamente, lo que he hecho es cambiar el width por 100% y que sea el height automático respecto al ancho de la imagen. Puedes cambiar el ancho a tu gusto." No se que a que te refieres con height auto respecto al ancho...¿como puede un alto ser algo respecto de un ancho? Y lo último, cuando dices que puedo cambiar el ancho a mi gusto..¿donde, cuando el html no lo veo es un php ininteligible, sin una variable width que tocar? Si puedo meter el html entero, cambia la cosa...
Graciasss!!!!!!

Con lo de stylesheet.css me refiero que en el folder css del tema no viene un archivo style.css con todo el código css, sino uno que se llama stylesheet.css...y me resultó extraño no ver el habitual style.css. He modificado todo en el stylesheet, por lo que doy por echo que en este tema es este el archivo con toda la información css.
Gracias.

He vuelto a poner la web abierta. Gracias.

Correcto, mi hoja de estilo es un !important continuo...;) Sigo machacando esto. Gracias!!

LO que faltaba....ahora tengo un problemón espectacular....en cada navegador sale el logo en un sitio ;(

[JustinKO]

Sí, puedes borrar la variable PHP y meter los valores directamente. El inconveniente es que si tu plantilla tiene algún seting de configuración no te lo cambiará cuando lo configures. Pero si eres tú el que controla la web y esa funcionalidad no va a usarse, ignórala y mete tu los valores.
Eso sí, te recomiendo que ya que lo vas a cambiar, hazlo en la hoja de estilo nueva que te crees en tu them child y así no metes estilos inline.

Respecto al height y width (tienes documentación mogollón en internet para entenderlo):

El "auto" tanto en ancho como alto lo que hace es conservarte las proporciones del formato (forma) original de la imagen.
Lo que haces es reducir o ampliar la imagen proporcionalmente (sin distorsionarla) usando los valores del ancho.

Trastea un poco en un documento vacío html y lo comprenderás.

No puedo mirar la web ahora. Pero date cuenta que adema´s del style.css, cada pluging tiene sus hojas de estilo, la plantilla puede usar ottras, etc. ¿De todos modos qué mas te da eso ahora?
En tu hoja de stylo modifica lo que quieras. Da igual en qué hoja de estilo esté lo que quieras modificar

[jcpoley]

Nooooo el archivo donde viene el css es muy raro y se llama stylesheet.min.css!! Por eso no me cuadraba porque cambiaba el stylesheet.css pero esta todo el css en una sola linea en ese archivo...Nunca lo había visto, pero ya lo conseguí!! Gracias!! Si puedes contestarme a lo de antes muy agradecido!!

[JustinKO]

Habría que estudiar esa plantilla concretamente. Pero tú no tienes que modificar ese archivo, debnes de meter los estilos css que modifiquen lo de esa hoja en tu propio style.css de tu child hijo- Es la manera correcta de hacerlo.
Lo del .min.css es algo muy habitual y es para reducir el tamaño del archivo, de raro no tiene nada. Ya lo verás más a menudo.

Si puedes contestarme a lo de antes muy agradecido!!

Creo que te he respondido a todo. ¿a qué te refieres?

Saludos

[jcpoley]

Un par de cositas últimas.
1.- ¿Cuando dices que cree mi propio style.css, te refieres a crear uno con las variables que quiera modificar y llamarlo desde el tema child, ósea, incluirlo en la carpeta root del child theme?
2.- Sigo con una duda. Yo ya incluí el html que ví en firebug en el header.php pero como si nada. ¿A eso te refieres cuando me dices que mi tema igual no me lo reconoce?
Con lo anterior, cuando te decía que contestaras a lo que te pedía, era a las preguntas anteriores que ya has contestado...muchas gracias por todo. Con gente así da gusto solicitar algo de ayuda. Abrz!!

[JustinKO]

Cuando te creas un theme child, en esa carpeta lo único imprescindible que necesita es el style.css, y éste lo único que necesita son los comentarios del encabezado.
Incluye en esa hoja tus estilos personales.

Como te decía en un post anterior, existe documentación de sobra sobre esto.
Se te puede ayudar a cosas concretas o darte guías para que por tu cuenta lo aprendas. Léete bien la documentación sobre este tema y sabrás a qué me refería. NO se te puede explicar el funcionamiento de todo en un post de blog.

Respecto a tu segunda pregunta: duplica el header.php que tienes en el template "padre" y lo guardas en la carpeta de tu them hijo, y ahí haz los cambios. Wordpress ignorará el header original y usará el tuyo.
Yo que tú, borraría todo esto:
style="height:<?php echo $line_height?>px;"
de la línea de código que mostraste, y pegaría el CSS que te he enviado en tu style.css y a partir da ahí modifica hasta que des con lo que necesitas.

Un saludo.

[jcpoley]

Gracias mil y disculpa si he querido saber demasiado por esta vía, es lógico que no se puede tratar todo en este tipo de formato. Me pongo a trastear. Lo dicho, te debo una muy gorda. Yo se de marketing, de fútbol, de cocina...si quieres preguntar algo, aquí me tienes..;) Abrz!!

[JustinKO]

2.- Sigo con una duda. Yo ya incluí el html que ví en firebug en el header.php pero como si nada. ¿A eso te refieres cuando me dices que mi tema igual no me lo reconoce?

No tienes que incluir el html que viste en el firebug. Creo que estás un poco despistado con el tema. Si aplicas el html que te genera el php, al final el resultado será el mismo.
Creo que mejor no toques ese archivo si no controlas mucho del tema o simplemente haz lo que te he dicho en el post anterior y limítate a tocar los CSS si de eso controlas más.

Un saludo y gracias a ti

Y si tienes dudas prrgunta, pero lo que te digo es que primero te lo curres, te documentes y si ves que no hay manera, vuelves a preguntar. Además es la mejor manera de aprender.

Saludos de nuevo.

[jcpoley]

Ya pero te decía lo de meter el html porque el html si incluye un height, un width, etc...que ya se que es mejor ponerlo en el css y borrar ese estilo inline en el php...pero tenía esa duda. Ya resuelta. Mejor tocar el style.css del child theme. Genial!! Gracias tío!

[JustinKO]

Claro, porque la variable esa que te decía que quitaras (style="height:<?php echo $line_height?>px;") es la que te genera esos estilos inline que a su vez serán generados por algún setting de la plantilla.
A eso me refería con lo de que ibas a perder esa funcionalidad de la plantilla. Funcionalidad que te da igual, puesto que estás poniendo el logo a mano tú solo.
No sé si me explico.

De todos modos, estoy pensando que también te debe estar metiendo estilos en ese "style" por javaScript (ese "px" detrás me lo hace pensar). Por lo que al final vas a tener que tirar de CSS y meter !important detrás de algun estilo para que "pueda" con el del style inline.


¿cómo?

[jcpoley]

jajaj...que lo que he configurado en firefox -ubicación de logo y demás-, en safari y en chrome se ven con tamaño distinto, y en una ubicación distinta. Dime que es fácil de solucionar..xfa!! ;)

Ya se ha resuelto eso...lo tenía todo metido en el css del child theme y ahora lo veo y todo bien. No se que hice ayer para que no saliera bien ;)
Una cosa que no entiendo..bueno una cosa, como si fuera sólo una..¿Como puedo acceder a una foto que aparece en la pagina de portada justo debajo de la cabecera dentro de una div class llamada content? Accedo al header y footer por su archivo php, pero esa parte de content, que no encuentro en ninguna página...
Gracias.

[JustinKO]

Te digo lo de el primer post, das muy pocas pistas.

De todos modos, si es lo que creo que dices, el content es lo que carga wordpress que introduces en el campo de texto propio de página o entrada. Deberías de poder acceder a ello desde el administrador de wordpress, seguramente desde la página donde se genera lo que estés viendo.


Otra cosa, si has cogido una plantilla, muchas muchas cosas las podrás hacer desde el administrador de wordpress sin tener que meterte en plantillas más si no controlas mucho el tema.

Saludos y suerte

[jcpoley]

Perdona de verdad con la vara que estoy dando, juro es lo último. A lo que me refiero es a una foto que aparece justo encima del contenido editable por wordpress, de hecho si le meto en el caja de texto de la página el <img src> de la foto que quiero, me la pone debajo ya está. Por eso pienso que no se accede por wordress. Esta como en una parte de header pero en el html que veo en firebug viene justo cuando termina header (</header>) y justo encima de footer (<footer>). Doy por hecho que estaría en el content, de hecho se engloba en <class="content">. Al ser además un elemento propio de esa página, entiendo que no puede estar en header, pero no lo encuentro. En el firebug la he sustituido para ver como queda y bien, pero no encuentro esa parte de código, o donde esté. Si aún te quedan fuerzas, te dejo la url a la web, es en la portada, y la he dejado abierta.
GRACIAS.

Buenas,
Se que estas candado de mi pero estoy a la desesperada y casi volviéndome loco. Me dijisteis más arriba que preguntara una vez habiéndolo intentado mucho...estoy en ese momento, no se que hacer ya. El tema es el siguiente -te lo explico y después decides si me ayudas o no, te entiendo en todo caso-:
Va de lo mismo de la consulta justo encima de esta. Tengo una página con una foto superior y un menu, estoy en la home. El menu si parte de header, pero la foto no, solo sale en esta página. ¿Quiero modificarla incluyendo un texto, pero no se donde está esa foto. En header NO, en la parte editable de la página de wordpress NO. De hecho he intentado meter esa imagen de texto con panel de wordpress y subirla con css pero se esconde detrás de header porque entiendo que esta en la div content, y no se ve. En fin muy ralllao. No consigo acceder a esa parte superior de la pagina.
Gracias mil por todo...;(

[JustinKO]

Hola,

Como te comentaba en un post superior, lo normal es que ese tipo de elementos los puedas modificar desde el administrador de wordpress. Busca en los ajustes del template, en apariencia, no lo sé. Habría que verlo por dentro.
Lo que veo es que es un div con un backgroung-image con esa imagen. Ésta es la línea de código html:

Código HTML:

<div style="background-image: url(&quot;http://demo.qodeinteractive.com/infographer/wp-content/uploads/2013/06/header9.jpg&quot;);" class="title has_background">
</div>
 

Esa imagen de fondo se debe de tener que configurar desde el administrador, busca bien.

De todos modos, en último recurso, para salir del paso hasta que un día, cuando no estés "rallado" con el tema descubras la opción para cambiarlo, puedes probar, o bien ocultarlo con esta línea en tu css:

Código CSS:

.title.has_background {
    display: none;
}
 

O busca ese div en el template php y la comentas o borras, e incluyes un nuevo div con lo que tú quieras incluir.

Pero como te digo, en algún lugar tendrás la opción de cambiarla, esto es un apaño para salir del paso.

Pruébalo lo que te digoy ánimo que al final siempre se soluciona todo.

Un saludo.

(por cierto, ese template ¿no tiene documentación? ahí debe de venir o algún tipo de soporte o algo?)

[jcpoley]

Gracias 1000!! Seguiré indagando...;)

[jcpoley]

Estaba en la parte editable de Wordpress...increible. Había pasado por esa parte 100000000 veces y hoy voy y veo title image...;( Gracias por todo, me has enseñado mucho.