Cambios en template J51 Oxygen  

 
Ernesto
 Ernesto
Usuario eminente

Hola a todos,

necesito hacer unos cambios en el template J51 Oxygen, pero estuve revisando el archivo template.css y no le encontré la vuelta al asunto.
Sí pude hacer los cambios básicos que vienen en el gestor de plantillas, pero hay opciones que no aparecen en ese gestor.

Les pido que me guíen para poder hacer los siguientes cambios:

1 - la plantilla trae 3 estilos predefinidos para elegir, pero yo quiero que el template tenga otra combinación de colores, como puedo hacer esto? en que parte del archivo css puedo introducir los colores en hexadecimal que yo quiero? Principalmente quiero cambiar el gris de fondo y el recuadro violeta que rodea al modulo del banner principal (estos colores pertenecen al "Style1 - Blue").

2 - en el background de la plantilla aparecen unos circulos concéntricos que me gustaría quitar y no encuentro la manera de hacerlo. Quisiera que me indiquen como quitarlos.

3 - al hacer click en cualquiera de los sub items del dropdown menú, se le pone un recuadro celeste al item que seleccionamos. Me gustaría que ese rectangulo celeste no aparezca al hacer clic sobre los sub items del menú. Cómo puedo quitarlos?

4 - me gustaría cambiar el color hover tanto de los items del menú principal, como de los links en general, pero no he encontrado la forma de cambiar los hover colors del sitio.

5 - es posible quitar el link del footer que lleva al sitio de los creadores de la plantilla?

En fin, espero que puedan ayudarme con estas cuestiones y les agradezco desde ya su atención.

Ernesto.

URL del sitio: http://www.losamosdelswing.com

Citar
Respondido : 11/06/2012 10:21 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

HOla Carlos

Te sugiero avanzar poco a poco con los cambios, y realizar tus consultas de acuerdo a tu avance.

Un post con muchos puntos y que implica cambios en la plantilla podría alargarse y complicarte tanto a tí como a quienes atendemos y también a los seguidores de este foro.

Por ejemplo, con respecto al primero punto, la manera más sencilla es basarte en un estilo similar al estilo final que quieres tener, por lo que este estilo será sobreescrito con todas las modificaciones que iras haciendo. En tus siguientes hilos de discusión pregunta por ejemplo como cambiar el fondo de la plantilla.

Saludos.

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

ResponderCitar
Respondido : 12/06/2012 12:45 am

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

Ernesto
 Ernesto
Usuario eminente

Ok Jhon,

entonces empiezo por el primer punto.

Cómo puedo hacer para cambiar el color violeta del rectángulo que rodea el slideshow o banner principal y el color gris del background? este template trae 3 estilos para elegir, pero ninguna de las tres combinaciones de colores se ajusta a lo que yo quiero. Más allá de los colores y estos detalles que te comento, la estructura general del template me parece que está bastante bien para lo que necesito.

Gracias por tu respuesta.

ResponderCitar
Respondido : 12/06/2012 4:09 am
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola Nesto,

Con respecto a este punto tenemos la siguiente leyenda en la introducción del foro:

No ofrecemos soporte a webs alojadas en localhost ni soporte css o programación.

En todo caso te recomiendo el siguiente video tutorial para llegar al objetivo:

Usando Firebug para modificar la apariencia de una plantilla Joomla
https://www.webempresa.com/blog/usando-firebug-para-modificar-la-apariencia-de-una-plantilla-joomla.html

Saludos.

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

ResponderCitar
Respondido : 12/06/2012 4:21 am

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

Ernesto
 Ernesto
Usuario eminente

Ok, no había leído esa parte.

Cuando contraté el servicio le pregunté varias veces a quien me atendió si podían ayudarme a hacer algunos cambios, en caso de necesitarlos, en el css del template o de algún módulo, y me dijo que sí, si contrataba el servicio de 1g o más.

Pero bueno, no importa.

Yo uso Safari y tengo el "inspector web" que es más o menos lo mismo.

El tema es que esta plantilla no me permite seleccionar las partes específicas que quiero como hago con otros templates, sino que selecciona bloques grandes y no consigo dar con la parte en que está lo que quiero cambiar.

En fin, voy a seguir intentando a ver como puedo solucionarlo.

Gracias de todos modos.

Ernesto.

ResponderCitar
Respondido : 12/06/2012 4:22 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

HOla Nesto

Te recomiendo el firebug del navegador firefox que tiene más funcionalidad que el inspector de safari.

La imagen en mención es parte del fondo de la plantilla, la puedes ver en :

Es decir tienes que reemplazar en esta ruta por una nueva imagen de fondo:
templates/j51_oxygen/images/style1/header.jpg

Saludos.

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

ResponderCitar
Respondido : 12/06/2012 5:15 pm

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

Ernesto
 Ernesto
Usuario eminente

Hola Jhon,

descragué el firebug lite para safari pero no supe como hacerlo funcionar.
Puse el botón en la brarra de navegación, pero cuando lo presiono no pasa nada.

Igual me manejo bastante bien con el inspector web de safari, al menos por ahora 😉

Justo estaba viendo eso, estoy modificando la imagen en photoshop para dejarla como quiero y subirla con el mismo nombre y tamaño.

El background entero es también una imagen, asi que voy a poner en el css directamente el color en hexadecimal, en vez de llamar la imagen.

- - -

En otro orden de cosas, instalé el modulo ARI Image Slider y no me aparece la parte para modificar los parámetros en el gestor de módulos.
Sabés porqué puede pasar esto?

Quizás tenga que abrir otro hilo para solucionar este problema.

Pido disculpas en ese caso, es que soy nuevo en esto y no conozco los protocolos.

Saludos y gracias nuevamente por tu respuesta.

ResponderCitar
Respondido : 12/06/2012 9:33 pm
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola Nesto,

El Firebug esta potenciado para Firefox por lo cual te recomiendo utilizar la herramienta en dicho navegador. Sobre el tema ARI Image Slider es preferible que abras otro tema para no engordar mas los temas aninados.

Estamos para ayudarte 🙂

Saludos.

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

ResponderCitar
Respondido : 12/06/2012 11:53 pm

Cursos Gratuitos WordPress

Ernesto
 Ernesto
Usuario eminente

Hola Johnny,

Ya instalé otro módulo en vez del Ari Image Slider, así que voy a seguir con el tema en el que estaba para no complicar las cosas 😉

Ya pude hacer todos los cambios que quería, excepto el tema de los recuadros celestes y te pido una ayuda para quitarlos.

Estos recuadros celestes aparecen cuando clickeo en cualquiera de los sub items del drop down menú y me gustaría quitarlos porque se ven bastante mal.

Son los mismos recuadros que aparecen en los campos de formulario (incuso ahora están marcados mientras escribo 😉 ) pero no se porqué aparecen en el menú, y además aparecen cortados.

Busqué en "#subMenusContainer a" en el archivo "nexus.css" pero no encuentro la forma de quitarlos.
Espero que me puedan ayudar con esto o al menos darme alguna pista al respecto.

Bueno, saludos Jhonny y gracias por tu respuesta como siempre.

ResponderCitar
Respondido : 13/06/2012 2:23 am
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola Nesto,

Estoy buscando por la web y los submenús pero no localizo nada que sea de color celeste. Si no puedes ayudar con una ilustración para poder revisar lo que comentas.

Para realizar una captura de pantalla puedes emplear las siguientes opciones en función del sistema operativo que utilices:

Windows: - La forma más rápida es pulsado la tecla "Impr-Pant" (habitualmente en la parte superior derecha del teclado) o en ordenadores portátiles "fn"+"impr-pant" lo que genera una captura de la pantalla actual en la memoria de su PC. Posteriormente debe abrir un programa de gestión de imágenes, Paint, Photoshop, etc., crear un documento "Nuevo" y pegar la captura desde el menú "Edición" -> "Pegar" o utilizando la combinación de teclas: "Control"+"V". Posteriormente guardar la captura preferiblemente en formato ".jpg".

En la medida de lo posible trata de evitar incrustar capturas en documentos de Word ya que la perdida de resolución es grande y dificulta la correcta visualización de la imagen.

Mac: - Pulsar la combinación de teclas "cmd"+"Shift"+"3 para capturas de pantalla completa o "cmd"+"Shift"+"4" para seleccionar una zona a capturar.

Linux: - Pulsar la tecla "Impr-Pant" (habitualmente en la parte superior derecha del teclado). Eso abrirá una ventana con la imagen capturada con las opciones de "Copiar al portapapeles" o "Guardar" como archivo .png (por defecto).

También puedes utilizar algunas de estas extensiones para Firefox y Chrome que te permiten realizar capturas de "área visible", "página completa" o "área seleccionada" y guardar las capturas directamente en formato .jpg o .png:

- ScreenGrab Firefox: https://addons.mozilla.org/es-ES/firefox/addon/1146/
- ScreenGrab Chrome: https://chrome.google.com/extensions/detail/mdddabjhelpilpnpgondfmehhcplpiin?hl=es-ES
- Awesome Screenshot - Capture and Annotate - Firefox: https://addons.mozilla.org/es-ES/firefox/addon/awesome-screenshot-capture-/

Saludos.

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

ResponderCitar
Respondido : 13/06/2012 3:27 am

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

Ernesto
 Ernesto
Usuario eminente

Hola Johnny,

acá te mando la captura con una gran flecha roja jeje ( creo que se me fué un poco la mano con la flecha 😉 ) señalando el famoso recuadro celeste que te comento.

Quizás esto se vea solamente en Safari, porque me fijé en varias demos del template que hay online, y en todas me aparece el mismo recuadro celeste que aparece en mi sitio.

> http://demo.joomla51.com/0072/

> http://videosayuda.webempresa.eu/demoplantillas/oxygen/

Como siempre,
gracias por tu respuesta Johnny.

ResponderCitar
Respondido : 13/06/2012 11:34 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Carlos,

No se si será un efecto provocado por tu navegador pero en Firefox, Chrome y Safari lo veo correctamente.

Prueba a limpiar la caché del navegador.

Saludos

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

ResponderCitar
Respondido : 13/06/2012 11:44 pm

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

Ernesto
 Ernesto
Usuario eminente

Hola Luis,

Limpio la Caché, pero sigue apareciendo ese recuadro...
aparece al hacer click sobre el enlace, no al pasar el cursos por encima.

Gracias y realmente no sé como solucionarlo.
Tendría que buscar en algun archivo css?

Cualquier pista se agradece jeje...

ResponderCitar
Respondido : 14/06/2012 12:13 am
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola Nesto,

Tampoco visualizo dicha línea celeste, te adjunto una captura en Internet Explorer 9. Realiza las pruebas en otros computadores y navegadores ya que puede ser algún problema de cache simplemente:

Saludos.

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

ResponderCitar
Respondido : 14/06/2012 12:21 am

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

Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Carlos,

Dinos la versión "exacta" del navegador desde el que estás visualizando la página y ves estos problemas de bordes azules.

Saludos

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

ResponderCitar
Respondido : 14/06/2012 12:30 am

Por favor Iniciar Sesión o Registro