Modificar estilos CSS en Oscommerce
Aquí tenéis el tercer videotutorial de la segunda serie de videotutoriales en la que mostraremos cómo modificar el diseño de oscommerce.
En este tercer videotutorial explicaremos cómo modificar colores, poner imágenes de fondo y cómo distinguir los diferentes estilos que se usan en oscommerce. Pulsa sobre la imagen para ver el videotutorial de modificar hoja de estilos css en oscommerce.
Duración: 22 minutos.
Sos un capo Jose
muy buenos tus tutoriales
ojala puedas agregar mas de ellos
xq realmente estan muy bien explicados
GRACIASSS!! Saludos desde Argentina!!!
Me alegra que te gusten. Ultimamente ando mal de tiempo, pero no dudes que en cuanto tenga un hueco seguiré haciendo más videotutoriales.
Saludos.
Excelentes los videos !!!
Te felicta el equipo de http://www.newtek.com.uy
Saludos !
Un tutorial muy bueno. Eres la polla tio. Estare pendiente a tu log por si cuelgas alguno más. Anda que si no fuera por ti…………..todavia estoy dandole vueltas al diseño JE JE
Saludos.
Eternamente agradecido.
Hola Josevillano!!
Sólo quería felicitarte por tu blog, y especialmente darte las gracias por estos videoturtoriales para personalizar Oscommerce, porque me están sirviendo de gran ayuda. Cuando alguien anda un poco perdido, da gusto encontrar a gente que hace cosas de estas de manera desinteresada.
Un saludo, y nuevamente muchas gracias!!
Hola Kike y Javier. Gracias a ambos, me alegra que os gusten los tutoriales.
Saludos.
Muchas Gracias, Jose esta bien este tutorial, soy nuevo en esto me parece muy bueno.
Te lanzo una idea que me comentaron se podria realizar en un Oscommerce cotizacion en Linea como las paginas que tiene Appinformatica.com o pccomponentes.com (PC a medida)
Espero que me ayudes para poder implementar algo similar o darme una idea.
Hola tocayo.
Claro que se puede implementar un sistema así en oscommerce, sólo es cuestión de ponerse a ello.
Saludos.
Eres el mejor. Muchas gracias.
Muchas gracias a tod@s. me alegra que os gusten.
La verdad es que estoy tan agradecido por tus tutoriales, que creo que deberias poner un botoncito Paypal para “donate”.
Muchísimas gracias desde Barcelona
Hola Chesco.
Me alegra que te gusten. Si quieres puedes mandarme algo típico de tu tierra, unos buenos fuet que están de muertre :D
Saludos.
Que tal José,
Te envío felicitaciónes y saludos desde México.
Realmente eres el soporte que muchos hemos buscado por toda la red.
Que bién explicados y sencillos tus tutoriales, verdaderamente una herramienta de trabajo para algunos de nosotros.
Gracias de nuevo por tu desinteresada aportación.
Una pregunta: específicamente en este tutorial y la segunda parte del mismo, no me es posible visualizarlos. Este simplemente no descarga, y la segunda parte sólo unos 13 segundos.
Quisiera saber si existe algún problema con tu sistema, o soy yo el que no puedo visualizarlos.
Mil gracias de nuevo y Saludos!.
Zalo
Hola Zalo.
Acabo de probarlos y van perefctamente. Tal vez fuera tu conexión a internet o el servidor web que estuviese algo saturado.
Saludos.
37 grados a les 8 de la mañana, mecagumimantu!
Oye tio yes un grande muches gracies, valla como me ayuden los tus videos.
Buen día, excelentes tus tutoriales, estoy haciendo mi tienda en linea de una muchísimo mejor forma gracias a tus tutoriales, pues la que había empezado anteriormente estaba bastante malita y me estaba llevando bastante tiempo crearla, espero en unos días esté lista, gracias de nuevo y felicidades.
Gracias a ambos.
Así da gusto comenzar el día, leyendo felicitaciones ;)
gracias, gracias, gracias y mil gracias… estaba tratando de montar una tienda en osCommerce y desesperado, apunto de abandonar… tus tutoriales son sencillamente didácticos…, tengo algunas dudas de diseño que me gustaría comentarte, y no se si procede ya que eres un profesional y de alguna manera los “amateur”, unos intrusos. En cualquier caso, si lo crees oportuno, pues nada, mi correo está ahí. De nuevo muchas gracias.
Tio los tutoriales son lo maximo, me han servido un monton, te sobraste que bueno que hay gente como tu que colabora con la comunidad!!!!!!!!!! Te felicito.
Gracias.
Me alegro de que te sirvan.
Saludos.
Estoy aprendiendo con tus videotutoriales, y lo pongo en practica en mi tienda, saludos
Me alegro de que te sean útiles.
Saludos.
no esta funcionando bien el video , al inicio empieza bien pero luego se para y no avanza para nada. a ver si lo pudieras arreglar. gracias
Hola Liz.
El vídeo va perfectamente. Tal vez fuera tu conexión a internet o el servidor donde se aloja el blog. Prueba de nuevo cuando puedas.
Saludos.
Mis felicitaciones Jose, muchas gracias por tu tiempo dedicado a generar estos videos.
Me han ayudado mucho, sigue asi.
Saludos desde Santiago de Chile.
Gracias Deny.
Excelentes tutoriales.. necesitaba demasiado esto.
lo unico que lamento es que no esten disponibles para bajar… intente con swf catcher pero no me deja.
seria bueno q dejaras los links directos para bajar (como lo hiciste con el primer video)
saludos!
Hola Valder. Ya los recopilaré todos para descargar en un CD
Saludos.
Estimado Jose, lo que vosotros haceis y me refiero a gente como tú, o Jesus Conde, que dedicais vuestro precioso tiempo a nosotros, gente que empezamos con mas o menos vagaje, simplemente tiene un adjetivo:
“sois BUENA GENTE”, GRACIAS y GRACIAS, que es lo unico que podemos hacer, reconoceros y agradeceros vuestra dedicación. Saludos desde Valencia.
P.D. sería muy útil el poder descargar los tutoriales.
Hola Martin.
Me alegra que te sirvan. Pronto pondré links de descarga.
Saludos.
Hola Jose, te escribo desde Buenos Aires Argentina, sos un capo, muy bien todo el trabajo que haces, gracias a ti he podido llevar adelante mi primer tienda electrónica con mucho dinamismo , explicas todo muy claro.
Nuevamente gracias y desde ya puedes contar con migo si necesitas algo de estos lados.
Muchos saludos
Oscar
Gracias Oscar.
gracias por los tutoriales muy buenos, me gustaria saber o como ponerle una plantilla diferente sin perder la info
Hola eduardo.
Al instalar plantillas no se pierde la información, ya que ésta se guarda en la base de datos. Mientras no modifiques la base de datos la información no corre peligro.
Saludos.
muy buenos tus tutoriales, me guataria saber cambio una plantilla sin tener q modificar mi base de datos
Hola.
Normalmente las plantillas no modifican la base de datos, así que debería bastar con machacar los archivos de tu tienda con los de la plantilla. No olvides hacer antes un backup de todo por si acaso.
Saludos.
jose, gracias por darnos tanto sin pedir nada..
nos estas ayudano mucho
¡¡Me estas salvando la vida!! Que sepas que gracias a ti tendre una tienda virtual muy pronto. Muchas gracias por los videos.
Un saludo desde Málaga.
Hola Alex.
Me alegra que te sirva mi blog.
Saludos.
Hola Patricia.
Ya me enseñarás la tienda cuando esté terminada :)
Saludos.
amigo como pondria el box de idiomas y de buscado en la cabecera(header) estoy estudiando tus videos son muy buenos en verdad te agradesco de ante mano la respuesta
abrazos
Hola jorge.
Tendrás que crear una celda en el header y llamar desde allí al box de idiomas.
Saludos.
Gracias. No hace falta más. Desde Castellón.
¡Ah! si alguna vez necesitas partirle las piernas a alguién me lo dices.
Jaja, no soy violento pero bueno es saberlo ;)
Saludos.
Muy buenas, tengo una preguntilla, ante todo comentarte que son increibles tus videotutoriales, gracias a ellos estoy poniendo la tienda a punto.
Tengo una duda, si quiero poner una imagen de fondo, ¿como hago para que el fondo de los box sea transparente?..
Muchas gracias
Hola Jose.
Los box están formados por color de fondo e imagen lateral. Una forma sencilla de hacerlo es eliminar dicho color de fondo en la hoja de estilos y sustituir la imagen por otra transparente (gif o png).
Saludos.
@Jose Criado
muy buenas de nuevo, lo que me comentas es lo que intento, tengo de fondo una imagen (BODY), y quiero que los box sean transparentes para que la imagen del fondo se vea entera, pero en el fondo de los box, en el background inserto una imagen transparente, pero ya sea en gif o png cuando refresco el fondo de los box esta blanco, no consigo que sea transparente ..
Gracias por tu ayuda, un saludo
Eres un crack! de verdad, muchas gracias! :)
me has salvado la vida! jejeje
;)
Gracias Danaxi.
Hola Jose..deveras de agradecemos mucho estan cheveres tus videotutoriales..nos ayudas de forma que no te imaginas a quienes empezamos en este mundo..te queria pedir un favor….ojala puedas poner un link de descarga en cada video…muchos tenemos problemas con la conexion a internet…y nos favoreceria tener cada capitulo ya descargardo en nuestra maquina…
Hay gente como tu q nos ayuda de gran forma…pero me cuesta creer q no sea a cambio de nada…..que buscas ayudando a tanta gente…?
Me interesaria saber tu respuesta…y nuevamente mi admiracion hacia ti…
@Rodolfo: Los pondré hoy mismo, ya que son tantas las peticiones de descarga que al fin me he decidido.
Saludos.
que tal excelente pagina, buenos video tutoriales, saludos dese mexico.
@Victor: gracias, me alegro que te sirvan.
Saludos.
José sos un capo impresionante.
Una brazo desde Argentina
@hugo: gracias, un saludo desde Sevilla ;)
Hola Jose darte las gracias y pedirte por favor si podrias decirme como puedo cambiar el color del encabezamiento donde va colocado el logo, porque me cambia todo el color de la pagina excepto ese trozo que se queda en blanco,le dado mil vueltas y no doy con ello, y la verdad queda fatal asi.
Tambien te agradeceria si pudieras recomendarme algun manual de estilos.
Gracias por tu ayuda y espero que sigas ampliando los tutoriales.
Saludos (moron de la frontera)
@sol: en stylesheet.css está el color que buscas.
Saludos.
BODY {
background: #ffffff;
color: #000000;
margin: 0px;
background-image: url(tienda.jpeg);
}
jose estoi intentando poner una imagen de fondo en mi web estado bientdo tu video tutorial y la foto la tengo guardada en la carpeta images de oscommerce noce loque estoi aciendo mal este es el codigo que tengo puesto muchas gracias
Bueno la verdad tenes mal la url seria el caso
background-image: url(images/tienda.jpeg);
Don José Criado, gracias por solucionar mi quebradero de cabeza de tres días.
Me e vuelto loco intentando poner una imagen de fondo a mi tienda oScommerce y por fín e podido cambiarla gracias a ti. Eres un fiera. Sabía como cambiar el color de fondo pero no como hacer que se vea una imagen. Ya tengo casi toda la tienda modificada a mi gusto ahora solo me queda meter productos y más productos. Aún no la tengo puesta al público porque no está totalmente acabada. No veas la cantidad de horas que llevo ya con la dichosa tienda Ojú!! jejeje. Seguiré tus indicaciones. Gracias desde Alicante España.
@Carlos: me alegra mucho que por fin resolvieses tu problema :)
Saludos!!
puedes por favor darme el codigo de la imagen de fondo que no logro alcanzar verlo. te agradezco.. y todos tus videos estan demasido de buenos
amigo has ayudado mucho… me podrias decir como se instala el modulo para archivos descargables una vez ya cancelados o a la espera de confirmacion de pago para su descarga proxima…. otra cosa nos e ierde nada de info al mudar de plantill.. agradeceria me respondas porfa
@javier: en los tutoriales sale el código. Puedes parar el vídeo y copiarlo de ahí.
Saludos.
@javier: no hay que instalar nada para que oscommerce permita descargar archivos para tiendas que vendan productos virtuales. Se controla con los atributos, en uno de los vídeotutoriales lo explico. Al mudarte de plantilla podrías tener problemas si hay instaladas contribuciones incompatibles entre ellas.
Saludos.
Buenos dias Jose, te hago una consulta, queria ver si puedo poner las ofertas en el comienzo del sitio, osea en el cuadrado donde se muestran los ultimos productos quería mostrar las ofertas. Espero que puedas darme una mano con esto ya que con tus tutoriales eh solucionado todo, pero esto me queda pendiente.
Muchas gracias.
ADrian
@Adrian: no se si hay contribuciones para ello, pero es sencillo coger por ejemplo el módulo de nuevos productos, duplicarlo y modificarlo para que lo que muestre sea las ofertas.
Mira en oscommerce.com, pero no se si existe esa contribución.
saludos.
@Jose Criado
Muchas gracias Jose por tu ayuda voy a ver si puedo solucionarlo por que me muestra los ultimos productos y se me cae el proyecto si no veo como puedo poner las ofertas en la pagina principal. Si sabes alguna manera de hacerlo, te pido por favor que me guies.
Muchas gracias.
Adrian
amigo a mi no me da cambios de nada en la hoja de stylesheet porque? y si guardo cambios pero nada!
@javir: si lo haces bien tiene que cambiar. O no aplicas el estilo o no modificas la hoja de estilos.
Saludos.
Hola una pregunta que la verdad me trae de cabeza…
en background cambias todo el fondo incluido el centro de la web
me gustaria poder cambiar solo el fondo y que el centro de la web siga en blanco…
no consigo hacerlo
he visto que en tu tutorial tambien te pasa tanto al cambiar colo como al poner las imagenes…
espero tu respuesta y gracias de antemano….
@carlos Gros: un pequeño curso de css y html te dará la respuesta, siento no poder explicar más :(
Saludos.
No se le entiende, esa voz da sueño
@malonosoy: jajaja, nunca me habían dicho eso!! Siento que no se me entienda, tal vez mi acento andalúz pero intento que sean claros en lo posible :)
Saludos.
Hola,
Hace unos dias que miro esta web y por si sirve de algo creo que es cojonuda…hay que agradecer el trabajo de este hombre que a mi me esta sirviendo de gran ayuda.
Saludos,
Toni
@Toni: gracias, me alegro que te guste :)
Saludos.
¿Cómo puedo eliminar la palabra “Cheque” del método de pago para que quede sólo “Transferencia bancaria”. ¿Dónde está definida esa frase? Muy buenos tutoriales, útiles por sobre todo.
@Omar: includes/languages/idioma/modules/payment/moneyorder.php
Saludos.
Hola Jose! En primer lugar enhorabuena por tu trabajo. Es de agradecer lo que haces y además de forma desinteresada.
Tengo una consulta que no logro solucionar. Resulta que al cambiar algunos parametros de stylesheet.css y al actualizar la web no se ven reflejados esos cambios. Además dependiendo del navegador que utilice (IE o firefox) veo la página de con un color u otro.
De la única forma que consigo ver los cambios realizados en el estilo es si veo la página en el navegador del teléfono móvil. Por esto he deducido que debe ser un fallo de mis navegadores o de mi ordenador que no actualiza bien las webs, pero lo cierto es que es la primera vez que me ocurre.
Enhorabuena de nuevo y a ver si podeis ayudarme.
Salud!
@Fran Molina: a ver si estás usando estilos que no son aplicables a todos los navegadores. Aunque me da a mí que es problema de caché de tus navegadores.
Saludos.
Hola jose yo tengo un problema al modificar al encabezamiento es que no puedo entra por las carpetas de idima etc. etc sino que entro directamente a index php
gracias por adelantado
hola:
Fantastico tutorial, me encanto¡¡¡
pero me surgio una duda, yo no quiero de cambiar de color las esquinas de los infobox, sino quitarlas, de manera que solo quede el encabezamiento y ponerle alli una imagen de fondo.
Pero por mas vuelta que doy no encuentro el codigo donde estan, creo que era el camino largo que no cojistes, me puedes indicar donde esta?
un saludo y gracias de antemano
@miriam gomez: creo que la opción la tienes en el admin->configuration para quitarlas (hablo de memoria). Si no siempre puedes quitarlas directamente en includes/classes/boxes.php
Saludos.
voy pasito a paso con tus videos que has puesto lastima que en ocasiones vas un poco rapido para novatos como yo estoy con mi pagina web http://www.mitiendamovil.com y gracias al video 3 y 4 he podido cambiar algunas cosas del footer y el header , lo que me sigue dando problema es el tamaño de la columna del medio no hay forma de agrandarla aunque he quitado los artiiculos de column_right ,
Hola, hace tiempo que sigo tus tutoriales y notas.
Últimamente me he vuelto un obsesos con la velocidad de mi tienda de informatica , y desde que cerro comerciame no se de un forro donde me puedan ayudar con mis dudas e ideas al respecto.
¿Me podrías sugerir algún foro en español?
PD: mis 2 ideas para aumentar la velocidad de la web son: usar css sprites en las imagenes css, y sustituir lightbox , por otro JS, que no requiere JS adicionales ( encontré este http://www.plashenkov.com/2010/01/lightweight-image-viewer-for-your-site.html , pero mis esfuerzos por adaptarlo hasta ahora no han dado frutos )
@Marcelo: revisar la db a ver cómo está de índices, eliminar código sobrante, optimizar uso de caché y sesiones, imágenes con poco peso, thumbnails, etc, etc. Hay muchos factores para ganar velocidad. SI te lo puedes permitir un servidor dedicado te dará mucha (además de seguridad y comodidad).
Saludos.
Hola José
Quisiera alinear mas a la derecha la banderita de idioma español que esta ubicada en el header pero no encuentro en que archivo esta para editarlo. Si elimino el icono queda la palabra español y tampoco me sirve.
Gracias de antemano por tu ayuda.
Saludos
Gracias!! me sirve mucho tu ayuda, tengo un problema, no logro cambiar el color de las cajas de texto, desde .infoBoxNoticeContents ni de ningun otro estilo y solo me toma el cambio de color los links, que podrá ser? Espero tu ayuda gracias!!
Hola! me encantan tus tutoriales. Me han salvado la vida, y la VISA, jeje. Oye, una pregunta, si me permites: ¿existe la posibilidad de poner alguna caja (ej: el buscador) en el medio de las columnas?. Muchas gracias por tu trabajo!!!
@Candelaria: en la hoja de estilos y el color de las imágenes está la solución :)
Saludos.
@Fracisco Alonso: sí, copia el código del box de búsqueda y ponlo donde lo necesites.
Saludos.
Estos tutoriales son muy buenos, estos tutoriales son para osCommerce v2.2 o para v2.3.1?. Lo digo porque tengo un osCommerce v2.3.1 y algunas cosas no son como en el video. Jose te hago una pregunta, esta version “2.3.1″ manejan el sistema 960 grid? debido a que cuando quiero cambiar el ancho de del heder y footer no encuentro tables, encuentro algunos div.
Gracias.
JOSE VALLEJO.
@Jose: lo siento, no uso la versión 2.3.1 ya que no la veo apta para producción.
Saludos.
hey brother si te mandas con los tutoriales estan buenisimos
tenia unos problemas con el diseño graciasss saludos desde el salvador .
a si tienes un sitio donde pueda ver mas tutoriales puedes pasrmlos ok :-)
@alonzo: genial, me alegro mucho :)
Saludos.
@Jose Criado
me preguntaba si puedes o saves como programar en el sistema android que es para telefono moviles o si tienes alguna pagina donde pueda ver algunos videos tutoriales que puedas compartir ok te lo agradeseria si m puedesw brindar informacion
@alonzo: hacemos cositas, mi hermano tiene un blog http://www.androidinventor.es donde puedes consultar.
Saludos.
@Jose Criado
gracias por el aporte
necesito saver cuales son las librerias de voz y si se puede convertir la voz a texto si puedes explicarme el codigo gracias
@alonzo
hola brother esta bueno el blog pero no se si puedes ayudarme con lo del codigo o si puedes explicarmelo ok
@Jose Criado hola me gustaria saber como puedo cambiar el color en TD.infoBoxHeading porque le pongo valores pero no me hace nada!! no me cambiar de color las barritas azules de por defecto!! mi version es “osCommerce Online Merchant v2.3.1″
@alonzo: pregunta en el blog de mi hermano, pero para la conversión de texto a voz tienes mucha info en internet.
Saludos.
@alonzo: hay mucha información en internet sobre cómo pasar de texto a voz, en casi cualquier tecnología. No obstante pregunta en el blog de mi hermano.
Saludos.
@alejandro: usar firebug para ver qué estilo realmente es el que tienes que modificar.
Saludos.
ei uenas josee, mira que me he estado mirando tu tutorial y me encantaa, tengo una pregunta acerca de los estilos que le das a los box, estoy haciendo una pagina de subhastas y me interesaria saber como hacer para que el color de fondo de las imagenes que visualizas en los box queden con el mismo color de fondo que el box, el ejemplo dond he visto que te queda bien es cuando le canvias el color de fondo de los box a verde. te agradeceria una respuestaa! mil graciass!!
@farid: sólo tienes que crear el estilo correspondiente con background-image
Saludos.
Hola, realmente muy bueno. veo que es desde hace un par de años pero me sirve y mucho.
Gracias por tomarte el tiempo de poner un poco a tono a aquellos que ante la crisis y falta de trabajo tratamos de aprender para poder desarrollar algo más que nos pueda dar sustento.
Saludos desde Argentina.
@Fernando: muchas gracias.
Saludos.
Buenas jose, no se porque pero nome deja hacer los cambios en infobox,cambio el color en el documento de doy a refrescar y nada, soy muy novato que es lo que puede pasar?,gracias de antemadno
@tony: mira a ver si no usas la versión 2.2 de Oscommerce, que es la versión en la que se basan los tutoriales.
Saludos.