(solucionado) Texto boton seleccionar archivo: winetheme PrestaShop™ 1.5.4.1

xatanax · November 22, 2013

Buenas tardes,

necesito saber donde puedo modificar el texto que pone "no se ha seleccionado ningún archivo", he revisado las traducciones y no lo encuentro por ningún sitio, os dejo el link, gracias.

http://tedorado.com/index.php?controller=contact

Un saludo

Edited November 30, 2013 by xatanax (see edit history)

xatanax · November 24, 2013

Hola a todos,

me gustaria editar el texto que sale a la derecha del botón adjuntar archivo, donde dice: No se ha seleccionado ningún archivo.

Llevo varios dias buscando por la traducciones pero no veo nada:

http://tedorado.com/index.php?controller=contact

A ver si alguien sabe donde tengo que modificarlo.

Un saludo.

ventura · November 24, 2013

Ese texto lo pone por defecto el navegador.

Para editar el input que aparece por defecto puedes hacerlo metiendolo en un div asi:

http://codepen.io/frontenddevfr/pen/CpHFe

xatanax · November 24, 2013

Ese texto lo pone por defecto el navegador.

Para editar el input que aparece por defecto puedes hacerlo metiendolo en un div asi:

http://codepen.io/frontenddevfr/pen/CpHFe

El tema que quiero editar esa línea porque al ser muy larga no queda estetica dentro de ese cuadro, entonces meto este código en global.css?

div.upload {

width: 157px;

height: 57px;

background: url(https://lh6.googleusercontent.com/-dqTIJRTqEAQ/UJaofTQm3hI/AAAAAAAABHo/w7ruR1SOIsA/s157/upload.png);

overflow: hidden;

}

div.upload input {

display: block !important;

width: 157px !important;

height: 57px !important;

opacity: 0 !important;

overflow: hidden !important;

ventura · November 24, 2013

El tema que quiero editar esa línea porque al ser muy larga no queda estetica dentro de ese cuadro, entonces meto este código en global.css?

div.upload {

width: 157px;

height: 57px;

background: url(https://lh6.googleus...57/upload.png);

overflow: hidden;

}

div.upload input {

display: block !important;

width: 157px !important;

height: 57px !important;

opacity: 0 !important;

overflow: hidden !important;

En el global.css lo dejas asi:

#contact div.upload {
    width: 157px;
    height: 57px;
    background: url(https://lh6.googleusercontent.com/-dqTIJRTqEAQ/UJaofTQm3hI/AAAAAAAABHo/w7ruR1SOIsA/s157/upload.png);
    overflow: hidden;
}


#contact div.upload input {
    display: block !important;
    width: 157px !important;
    height: 57px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

Y en el contac-form.tpl del tema buscas:

<input type="file" name="fileUpload" id="fileUpload" />

y lo dejas asi:

<div class="upload"><input type="file" name="fileUpload" id="fileUpload" /> </div>

xatanax · November 24, 2013

En el global.css lo dejas asi:

#contact div.upload {
    width: 157px;
    height: 57px;
    background: url(https://lh6.googleusercontent.com/-dqTIJRTqEAQ/UJaofTQm3hI/AAAAAAAABHo/w7ruR1SOIsA/s157/upload.png);
    overflow: hidden;
}


#contact div.upload input {
    display: block !important;
    width: 157px !important;
    height: 57px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

Y en el contac-form.tpl del tema buscas:

<input type="file" name="fileUpload" id="fileUpload" />

y lo dejas asi:

<div class="upload"><input type="file" name="fileUpload" id="fileUpload" /> </div>

Ya he hecho las modificaciones, pero no se donde editar el texto, soy un newbie. Gracias.

PD: lo que quiero es modificar el texto donde pone "No se ha seleccionado ningún archivo" y acortarlo para que entre en la cajita que esta a la derecha del botón, por ejemplo ponerle : "no se ha seleccionado archivo"

Edited November 24, 2013 by xatanax (see edit history)

xatanax · November 29, 2013

Gracias Ventura ya me aparece el botón, lo unico que me aparece en inglés "Upload", existe la posibilidad de ponerlo en castellano, algo para tontos, como "añadir archivo", "adjuntar".... si se puede bien, si no lo dejamos así. Agradezco tu esfuerzo. Un saludo.

ventura · November 30, 2013

Es que el ejemplo que te puse era muy básico y el boton es una imagen, por eso no se puede traducir. Si quieres dejarlo bien haz esto:

busca el condicional de archivos adjuntos:

{if $fileupload == 1}

y antes del cierre del condicional:

{/if}

colocas esto:

<br/>
<label for="fileUpload">{l s='Attach File'}</label>
<br/>


<div id="yourBtn" onclick="getFile()">{l s='click to upload a file'}</div>


<div style='height: 0px; width: 0px;overflow:hidden;'><input type="file" name="fileUpload" id="fileUpload" onchange="sub(this)"/></div>

Luego al final del contact-form.tpl, coloca esto:

{literal}<script type="text/javascript">


 function getFile(){
   document.getElementById("fileUpload").click();
 }
 function sub(obj){
    var file = obj.value;
    var fileName = file.split("\\");
    document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
    document.myForm.submit();
    event.preventDefault();
  }
  
</script>{/literal}

Y en el css :

#yourBtn{
   
    background-color: #ffffff;
    border: 1px dashed #BBBBBB;
    cursor: pointer;
    font-family: calibri;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    text-align: center;
    top: 15px;
    width: 150px;
  }

De esta manera te quedará traducicle e indicará el nombre del archivo adjuntado

xatanax · November 30, 2013

Gracias por responderme Ventura, he buscado el condicional de archivos adjuntos en el global.css pero lo unico que encuentro es esto:

#contact_form {} p#desc_contact0, p#desc_contact1, p#desc_contact2 {height:15px;padding:11px 0 0 157px;} #contact_form p.file_input label {padding-top:3px;} #contact_form p.file_input input {height:21px;} #contact_form textarea#message {width:400px !important;height:200px !important;} /* contact-form */ #contact_form {padding:0px 0px 20px 0px;margin:20px 0 0 0;} #contact_form h3 {padding:0px 0 17px 0;border-bottom:1px solid #E5E5E5 ;} #desc_contact0, #desc_contact1, #desc_contact2 {height:15px;padding:11px 0 0 157px;} #desc_contact0 {display:none;} #contact_form p.file_input label {padding-top:4px !important;} #contact_form p.file_input input {height:21px;background:none;} #contact_form textarea#message {width:682px !important;height:200px !important;} #contact_form .select select { width: 300px; } #contact_form .text input, #contact_form .password input { height: 15px; width: 292px; } #contact-form .submit {padding-top:15px;} #contact_form input#fileUpload{ border:1px solid #E5E5E5; width:298px; height:22px; line-height:22px; } #contact_form label {display: block;float: none;margin-bottom: 7px;text-align: left;} /*

Es ahi donde tengo que realizar el cambio?, estoy un poco pez.

Un saludo.

PD: conservo las anteriores modificaciones que me dijiste, o las debo quitar y sustituir por estas nuevas?

Edited November 30, 2013 by xatanax (see edit history)

ventura · November 30, 2013

El condicional está en el contact-form.tpl de la plantilla, linea 120 aproximadamente, alli tendras que cambiar lo que tengas y cambiarlo por el codigo que te puse en primer lugar, este:

<br/>
<label for="fileUpload">{l s='Attach File'}</label>
<br/>


<div id="yourBtn" onclick="getFile()">{l s='click to upload a file'}</div>


<div style='height: 0px; width: 0px;overflow:hidden;'><input type="file" name="fileUpload" id="fileUpload" onchange="sub(this)"/></div>

Colocado aqui:

{if $fileupload == 1} <...codigo aqui...>{/if}

Luego , al final del archivo contact-form.tpl tambien, colocas esto:

{literal}<script type="text/javascript">


 function getFile(){
   document.getElementById("fileUpload").click();
 }
 function sub(obj){
    var file = obj.value;
    var fileName = file.split("\\");
    document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
    document.myForm.submit();
    event.preventDefault();
  }
  
</script>{/literal}

Y en el global css de la plantilla, esta parte:

#yourBtn{
   
    background-color: #ffffff;
    border: 1px dashed #BBBBBB;
    cursor: pointer;
    font-family: calibri;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    text-align: center;
    top: 15px;
    width: 150px;
  }

No conozco la plantilla que utilizas pero será algo asi mas o menos.

xatanax · November 30, 2013

Ahora me salen como 2 uno sin botón, que coje el nombre del fichero, otro con boton que no muestra si coje o no el fichero, adjunto imagen en el primer post, deduzco que debo eliminar las modificaciones que me dijistes en tu primer post. Gracias por ayudarme.

nadie · November 30, 2013

Ahora me salen como 2 uno sin botón, que coje el nombre del fichero, otro con boton que no muestra si coje o no el fichero, adjunto imagen en el primer post, deduzco que debo eliminar las modificaciones que me dijistes en tu primer post. Gracias por ayudarme.

Tienes dos veces la cosa repetida, deja solo lo ultima que has montado. (creo) (Deja solo lo ultimo que te dijo Ventura)

nadie · November 30, 2013

Por cierto, la caja que has puesto o como queramos llamarla ahora la tienes centrado en el medio, si la quieres dejar a la izquierda, en en tu fichero:

http://tedorado.com/themes/theme481/css/global.css

dentro del:

#yourBtn

tienes esto:

margin: 0 auto;

intenta por ejemplo dejarlo asi:

margin: 0px;

(Creo)

O al menos eso hace en la simulacion en el firebug xD

nadie · November 30, 2013

Por cierto, veo que acabas de cargarte el boton que era el que querias ahora ¿Por que?

xatanax · November 30, 2013

Yo solo quería un boton con texto en castellano, estoy intentando meterle uno que he generado.

Cambie el global.css y le meti el link del botón que quiero, pero no me lo carga:

#contact div.upload {
width: 157px;
height: 57px;
background: url(tedorado.com/themes/theme481/img/subir.png);
overflow: hidden;
}

#contact div.upload input {
display: block !important;
width: 157px !important;
height: 57px !important;
opacity: 0 !important;
overflow: hidden !important;
}

Pero no me sale el grafico

Edited November 30, 2013 by xatanax (see edit history)

xatanax · November 30, 2013

He eliminado lo del post 5 de Ventura, y he añadido lo del post 8 de Ventura, y me queda para añadir 2, así:

http://tedorado.com/index.php?controller=contact

PD: me gustaba como quedaba el botón del post 5 de Ventura, lo único que quería que en vez de UPLOAD pusiera Subir Archivo, porque los clientes muchos no saben que es upload

Edited November 30, 2013 by xatanax (see edit history)

Paula Martinez · November 30, 2013

Hola,

Me llamo Raul Martinez,

Fantastico !

Funciona !

He tenido que borrar el input file que tenia en el tpl, y agregar lo que comenta Ventura y me funciona perfectamente.

A mi esto: http://www.prestashop.com/forums/topic/290968-texto-boton-seleccionar-archivo-winetheme-prestashop™-1541/#entry1475966 que dice Ventura me funciona.

Edited November 30, 2013 by Raul Martinez (see edit history)

Paula Martinez · November 30, 2013

Hola,

Me llamo Raul Martinez,

Resumen:

Fichero:

contact-form.tpl

Cambia esto:

<p class="text">
			<label for="fileUpload">{l s='Attach File'}</label>
				<input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
				<input type="file" name="fileUpload" id="fileUpload" />
			</p>

por

<p class="text">

<label for="fileUpload">{l s='Attach File'}</label>
<br/>


<div id="yourBtn" onclick="getFile()">{l s='click to upload a file'}</div>


<div style='height: 0px; width: 0px;overflow:hidden;'><input type="file" name="fileUpload" id="fileUpload" onchange="sub(this)"/></div>
</p>

Al final del contact-form.tpl añado esto

{literal}<script type="text/javascript">


 function getFile(){
   document.getElementById("fileUpload").click();
 }
 function sub(obj){
    var file = obj.value;
    var fileName = file.split("\\");
    document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
    document.myForm.submit();
    event.preventDefault();
  }
  
</script>{/literal}

Despues en el fichero *.css añado esto:

#yourBtn {
   
    background-color: #ffffff;
    border: 1px dashed #BBBBBB;
    cursor: pointer;
    font-family: calibri;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    text-align: center;
    top: 15px;
    width: 150px;
  }

Edited November 30, 2013 by Raul Martinez (see edit history)

Paula Martinez · November 30, 2013

Hola,

Me llamo Raul Martinez,

(Es un resumen basado en el codigo proporcionado que nos comenta Ventura)

xatanax · November 30, 2013

He eliminado esto:

<p class="text upload-file"> <label for="fileUpload">{l s='Attach File'}</label> <input type="hidden" name="MAX_FILE_SIZE" value="2000000" /> <input type="file" name="fileUpload" id="fileUpload" /> </p>

Y ahora me sale el texto para adjuntar archivos, así está bien?, sin botón queda un poco feo, no?.

nadie · November 30, 2013

He eliminado esto:

<p class="text upload-file"> <label for="fileUpload">{l s='Attach File'}</label> <input type="hidden" name="MAX_FILE_SIZE" value="2000000" /> <input type="file" name="fileUpload" id="fileUpload" /> </p>

Y ahora me sale el texto para adjuntar archivos, así está bien?, sin botón queda un poco feo, no?.

Ahora solo te aparece uno.

Pero te falta agregar lo del css del:

#yourBtn {
   
    background-color: #ffffff;
    border: 1px dashed #BBBBBB;
    cursor: pointer;
    font-family: calibri;
    margin: 0px;
    padding: 10px;
    position: relative;
    text-align: center;
    top: 15px;
    width: 150px;
  }

que dice Ventura.

ventura · November 30, 2013

Es cuestión de gustos, puedes editar el css como quieras, color de fondo, bordes, etc

Si quieres poner el boton con la imagen que has hecho tienes que poner las comillas para que se vea

  background: url("tedorado.com/themes/theme481/img/subir.png");

xatanax · November 30, 2013

Nadie lo del css lo tengo agregado, y me sale así, fuerzo la compilación?.

Voy a probar con mi botón a ver si poniendo las comillas se ve.

nadie · November 30, 2013

Nadie lo del css lo tengo agregado, y me sale así, fuerzo la compilación?.

Voy a probar con mi botón a ver si poniendo las comillas se ve.

Yo ahora veo un boton con fondo gris ¿No ves tu eso?

xatanax · November 30, 2013

Yo veo un texto, que si lo pinchas funciona como un botón, jeje. pero no veo boton ninguno, supongo que será así.

xatanax · November 30, 2013

Puse la url de mi boton con comillas y sigue sin salir...

ventura · November 30, 2013

Yo veo un texto, que si lo pinchas funciona como un botón, jeje. pero no veo boton ninguno, supongo que será así.

Lo tienes sin css, pon esto por lo menos en el global.css, que al final lo vas a dejar bien guapo

#yourBtn {


    cursor: pointer;
    border: 1px dashed #BBBBBB;
    padding: 5px;
    width: 200px;
    text-align: center;
}

nadie · November 30, 2013

Puse la url de mi boton con comillas y sigue sin salir...

Has puesto la ruta mal.

jajaj menudo estas liando.

Tienes esto:

#contact div.upload {
    width: 157px;
    height: 57px;
    background: url("tedorado.com/themes/theme481/img/subir.png");
    overflow: hidden;
}

Y en todo caso es asi:

#contact div.upload {
width: 157px;
height: 57px;
background: url("../img/subir.png") no-repeat;
overflow: hidden;
}

nadie · November 30, 2013

Has puesto la ruta mal.

jajaj menudo estas liando.

Tienes esto:

#contact div.upload {
    width: 157px;
    height: 57px;
    background: url("tedorado.com/themes/theme481/img/subir.png");
    overflow: hidden;
}

Y en todo caso es asi:

#contact div.upload {
width: 157px;
height: 57px;
background: url("../img/subir.png") no-repeat;
overflow: hidden;
}

Lo has vuelto a poner mal.

Has puesto esto ahora:

#contact div.upload {
    width: 157px;
    height: 57px;
    background: url("../img/subir.png") no-repeat
    overflow: hidden;
}

cuando en todo caso es asi:

#contact div.upload {
    width: 157px;
    height: 57px;
    background: url("../img/subir.png") no-repeat;
    overflow: hidden;
}

(Te has comido un punto y coma (fijate bien) )

xatanax · November 30, 2013

He probado varias rutas, y no carga, jejeje. Porque no saldra?, Toda la tarde para un boton, ya me vale.

nadie · November 30, 2013

He probado varias rutas, y no carga, jejeje. Porque no saldra?, Toda la tarde para un boton, ya me vale.

Te lo he dicho ARRIBA.

Lo has puesto mal.

Tienes esto:

#contact div.upload {
    width: 157px;
    height: 57px;
    background: url("../img/subir.png") no-repeat
    overflow: hidden;
}

cuando en todo caso es asi:

#contact div.upload {
    width: 157px;
    height: 57px;
    background: url("../img/subir.png") no-repeat;
    overflow: hidden;
}

(Te has comido el punto y coma del penultimo elemento !!!!!!!!!!!!!! )

nadie · November 30, 2013

Ahora, si se te ve ya la imagen.

Adjunto Captura:

nadie · November 30, 2013

Claro que ahora que lo pienso, jajaja, si subes un fichero (pruebalo), no te aparece o se ve que has seleccionado el fichero. xDDDDDDDDD

xatanax · November 30, 2013

Si, ahora si se ve

Lo único que no se sabe si adjunta o no, porque se queda estatico, lo voy a dejar así que ya la he liado bien, jajaja. Muchas gracias chicos.

nadie · November 30, 2013

Si, ahora si se ve

Lo único que no se sabe si adjunta o no, porque se queda estatico, lo voy a dejar así que ya la he liado bien, jajaja. Muchas gracias chicos.

Si eso iba a decirte, (lo he dicho en mi mensaje anterior) que ahora no se ve si has adjuntado u no el fichero..

De todos modos, a mi la segunda forma que propone ventura, me gustaba mas.

(Ademas de que te la ha explicado Raul con una explicion excelente)

Hola,

Me llamo Raul Martinez,

Resumen:

Fichero:

contact-form.tpl

Cambia esto:

<p class="text">
<label for="fileUpload">{l s='Attach File'}</label>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
<input type="file" name="fileUpload" id="fileUpload" />
</p>

por

<p class="text">
 
<label for="fileUpload">{l s='Attach File'}</label>
<br/>
 
 
<div id="yourBtn" onclick="getFile()">{l s='click to upload a file'}</div>
 
 
<div style='height: 0px; width: 0px;overflow:hidden;'><input type="file" name="fileUpload" id="fileUpload" onchange="sub(this)"/></div>
</p>

Al final del contact-form.tpl añado esto

{literal}<script type="text/javascript">
 
 
 function getFile(){
   document.getElementById("fileUpload").click();
 }
 function sub(obj){
    var file = obj.value;
    var fileName = file.split("\\");
    document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
    document.myForm.submit();
    event.preventDefault();
  }
  
</script>{/literal}

Despues en el fichero *.css añado esto:

#yourBtn {
   
    background-color: #ffffff;
    border: 1px dashed #BBBBBB;
    cursor: pointer;
    font-family: calibri;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    text-align: center;
    top: 15px;
    width: 150px;
  }

y luego Ventura te ha dicho esto:

#yourBtn {
 
 
    cursor: pointer;
    border: 1px dashed #BBBBBB;
    padding: 5px;
    width: 200px;
    text-align: center;
}

ventura · November 30, 2013

Siempre sale en el tooltip al apuntar con el puntero, ha quedado chulo al final

nadie · November 30, 2013

¿Sigues ahí xatanax?

xatanax · November 30, 2013

Voy a hacer una cosa, voy a volver a probar el segundo metodo de Ventura, a ver si ahora se me ve bien.

xatanax · November 30, 2013

Vale ya lo he puesto del otro modo, ahora creo que se ve. Que tal lo veis?

nadie · November 30, 2013

Vale ya lo he puesto del otro modo, ahora creo que se ve. Que tal lo veis?

Se ve bien, (aunque bueno yo cambiaria el fondo rojizo ese que has puesto), pero vamos se ve bien.

xatanax · November 30, 2013

Me las he visto negras, porque el botón se me puso en el centro, y se me quedo en color morado, y no podía ver los cambios cuando tocaba la config, tube que borrar la cache del servidor. A mi personalmente me gusta mas el boton gráfico.

PD: adjunto captura por si a alguien le sirve de modelo.

Edited November 30, 2013 by xatanax (see edit history)

xatanax · November 30, 2013

Bueno os doy las gracias a todos, por brindarme vuestra ayuda. Doy el tema por resuelto..

nadie · November 30, 2013

Bueno os doy las gracias a todos, por brindarme vuestra ayuda. Doy el tema por resuelto..

Para la comunidad fue un honor y un placer el poder ayudarte !

Como veo que has añadido la palabra "Solucionado" en el titulo del tema, procedo a cerrar el tema.

Saludos,

(solucionado) Texto boton seleccionar archivo: winetheme PrestaShop™ 1.5.4.1

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment