Tema Palene: ajustes en logo  

Página 1 / 2
 
Alízaro
 Alízaro
Estimable Member

Hola:
Quiero dejar un logo que ocupe todo el ancho de la página en el tema Palene. He ido probando en el diseño hasta el ancho necesario; pero cuando lo aplico no sale centrado, lo coloque como lo coloque en cuanto a alineación.
He probado desde los 1024 hasta los 1200 px de ancho que tiene en la actualidad. El de 1024 se queda corto y los siguientes se desajustan hacia la derecha.
¿Cómo puedo solucionarlo?
Gracias y saludos.

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 31/05/2016 4:06 pm
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

La forma en la que estás cargando actualmente el logo no te servirá, ya que no se adaptará bien a todos los anchos, debido a que el logo realmente se cargará como imagen de fondo, y no como una imagen propiamente dicha.

Lo que podrías probar es colocar la imagen de forma directa. Para ello vete a Apariencia->Widgets y desplegar la posición header. Aquí deberías eliminar el widget Gantry Logo que tienes actualmente.

A continuación, en esa misma posición añade un widget de tipo texto con el siguiente código:

Una vez que lo tengas así, avísanos para que revisemos el resultado y ver si son necesarios otros retoques en los estilos CSS.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 31/05/2016 4:46 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Alízaro
 Alízaro
Estimable Member

Hola:
Ya lo inserté. No cubre todo el ancho. Además, queda mucho espacio en vertical.
El asunto es que quiero que hayan dos logos, uno para pantalla escritorio y otro para móviles.

¿Me serviría lo que indica aquí?
https://www.webempresa.com/foro/35-Packs-Webempresa-WordPress/147326-A%C3%B1adir-logo-m%C3%B3vil-responsive-Tema-Palene.html

Donde agrega el código, al realizar una actualización del tema, ¿se perdería?

ResponderCitar
Respondido : 01/06/2016 10:58 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola.
¿Me serviría lo que indica aquí?

Si con el código que te indica lo que hace es que cargue la imagen para móviles cuando la resolución sea inferior a 767px

@media only screen and (max-width: 767px) {
	#rt-logo {
    background: rgba(0, 0, 0, 0) url("/wp-content/uploads/mobile-logo.png") no-repeat scroll left center!important;
		width:auto!important;
		height:500px!important;
	}
}

al realizar una actualización del tema, ¿se perdería?

Tienes que crear un archivo custom para que no se pierdan las modificaciones que realices:
Agregar archivo CSS personalizado para plantillas Gantry

Un saludo

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 01/06/2016 11:34 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Alízaro
 Alízaro
Estimable Member

Hola:
No me lo toma.
¿Puede ser porque he cambiado el widget logo gantry por el texto que me indica Pablo?

Tengo varios css añadidos

Un saludo.

ResponderCitar
Respondido : 01/06/2016 12:42 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola.
Prueba en la linea

 background: rgba(0, 0, 0, 0) url("/wp-content/uploads/mobile-logo.png")

añadirle toda la ruta completa '

 background:  url("http://telofacilito.es/lacalle/wp-content/uploads/mobile-logo.png")

Elimina ' rgba(0, 0, 0, 0) ' y añade toda la URL.
Un saludo

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 01/06/2016 1:58 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Alízaro
 Alízaro
Estimable Member

Hola:
He hecho el cambio de código; pero para que surta efecto he de volver a colocar el widget "Gantri Logo" y quitar el texto que pasó Pablo, con lo que vuelvo a tener el problema del logo por defecto:

Además, el logo para tamaño móvil se queda con muchos márgenes verticales, además de no adaptarse a tamaños intermedios:

Saludos.

ResponderCitar
Respondido : 01/06/2016 6:26 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

En el código que envías en tu captura de pantalla veo que has puesto :

height: 500px !important;

Esto es lo que te esta causando los márgenes, sería mejor una altura menor, usa por ejemplo :

height: 200px ;

Ya no sería necesario el !important

Cambiando esto te quitará lso margenes, ten en cuetna que si tu logo es demasiado ancho en la versión móbil no se verá correctamente, es por eso que mejor te sugiero dejar la versión más reducidad del logo, tal como aparece actualmente me parecer correcto.

Si aún tienes problemas detalla un poco más tu consulta.

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 01/06/2016 8:06 pm

Cursos Gratuitos WordPress

Alízaro
 Alízaro
Estimable Member

Hola:
Con ese cambio, el logo de móvil, perfecto.
Ahora me queda el logo principal por arreglar

Como veis está desviado hacia la derecha. Necesito que quede a todo el ancho y centrado.

ResponderCitar
Respondido : 06/06/2016 10:31 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Alízaro.
Antes que nada tienes que crear un archivo custom para las modificaciones y no perderlas al actualizar la plantilla, plugin's o WorPress
Agregar archivo CSS personalizado para plantillas Gantry

Una vez creado el archivo añade lo siguiente:

#rt-header #rt-logo {
margin-left: -15px;
}

Un saludo

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 06/06/2016 10:59 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Alízaro
 Alízaro
Estimable Member

Hola:
Así ha quedado perfecto; pero quería preguntarte, al fin y al cabo, un archivo css personalizado, al final es una especie de "parche". Creo que el logotipo debería salir centrado ya con la plantilla. ¿no lo ves así?
Saludos.

ResponderCitar
Respondido : 06/06/2016 1:53 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Alízaro.
un archivo css personalizado, al final es una especie de "parche"
No, es un archivo para añadir las modificaciones que quieras en la plantilla y que no se pierdan al actualizar, esto sirve tanto para cambiar colores, tipos de letra, modificaciones de un apartado en concreto.

Creo que el logotipo debería salir centrado ya con la plantilla

En la demo que teneos veras que el logo esta en el centro por lo que esta diseñado para ese propósito que quede centrado, al modificarlo y ponerlo mas grande hay que ajustarlo.

Un saludo

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 06/06/2016 2:14 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Alízaro
 Alízaro
Estimable Member

Hola:
Añadí el css como me indicó Pepe:

Hola.
¿Me serviría lo que indica aquí?

Si con el código que te indica lo que hace es que cargue la imagen para móviles cuando la resolución sea inferior a 767px

@media only screen and (max-width: 767px) {
	#rt-logo {
    background: rgba(0, 0, 0, 0) url("/wp-content/uploads/mobile-logo.png") no-repeat scroll left center!important;
		width:auto!important;
		height:500px!important;
	}
}

al realizar una actualización del tema, ¿se perdería?

Tienes que crear un archivo custom para que no se pierdan las modificaciones que realices:
Agregar archivo CSS personalizado para plantillas Gantry

Un saludo

Salía descentrado

En el código quité la palabra "left" y sale algo más centrado; pero no completamente:

No sé si tendrá que ver el código que agregué para que el logo principal salga bien centrado, en el que se le dice que lo mueva -15px en horizontal.

ResponderCitar
Respondido : 15/06/2016 6:17 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Si, veo que el -15px te esta afectando en movil, puedes corregirlo , dejando el còdigo de la siguiente forma :

@media only screen and (max-width: 767px) {
	#rt-logo {
		background: rgba(0, 0, 0, 0) url("/wp-content/uploads/mobile-logo.png") no-repeat scroll center!important;
		width:auto!important;
		height:500px!important;
	}

	#rt-header #rt-logo{
		margin-left:0;
	}
}

Es decri se agregò la ultima parte de margin-left

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 15/06/2016 8:45 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Alízaro
 Alízaro
Estimable Member

Hola, John:
Si paso margin-left a 0, el logo de movil se centra; pero el logo principal se me desplaza a la derecha, teniendo el mismo problema que al principio de este hilo.

ResponderCitar
Respondido : 15/06/2016 9:51 pm
Página 1 / 2

Por favor Iniciar Sesión o Registro