• Registered: 2009-04-05
  • Posts: 3

Topic: How to change the upload file input field + browse button?

Hello,
I'm trying to put the script into a new design however I'm having a little trouble with the input filed + the browse button. How am I able to customize it?

In the index page, to call the input + browse you put something along the lines of:

<input name="fileup" type="file" size="60" id="localUP" onclick="javascript:document.getElementById('remotaUP').value = '';"/>

Right? How do you change the browse button from being on the right hand side of the input field and how can I change the look of the browse button from being the standard.

Let me know if you need me to explain anything a little better and thanks in advance! Love this script.

Thumbs up

  • Rodolfo
  • The Chevereto Gurú
  • Offline
  • From: Santiago de Chile
  • Registered: 2008-10-08
  • Posts: 2,230
  • User Karma: 134

Re: How to change the upload file input field + browse button?

uploadho wrote:

Hello,
I'm trying to put the script into a new design however I'm having a little trouble with the input filed + the browse button. How am I able to customize it?

In the index page, to call the input + browse you put something along the lines of:

<input name="fileup" type="file" size="60" id="localUP" onclick="javascript:document.getElementById('remotaUP').value = '';"/>

Right? How do you change the browse button from being on the right hand side of the input field and how can I change the look of the browse button from being the standard.

Let me know if you need me to explain anything a little better and thanks in advance! Love this script.

Try to do it with css for the look. And the direction, you have to apply "directection" ltr o rtl.

Regards

rodolfoberrios.com | PLEASE use Tech Support forums to ask for support!

Rodolfo's Website

Thumbs up

  • Registered: 2009-04-05
  • Posts: 3

Re: How to change the upload file input field + browse button?

Thanks for your reply rodolfo much appreciated however there is only on ID in the input section however that input seems to be both for the field and browse button so how would I go about styling that with css if I want to have a border + background + size n width on the field and just a custom image on the browse button with no value text

As for the rtl and ltr you were talking about, where do I change that?

Thumbs up

  • Rodolfo
  • The Chevereto Gurú
  • Offline
  • From: Santiago de Chile
  • Registered: 2008-10-08
  • Posts: 2,230
  • User Karma: 134

Re: How to change the upload file input field + browse button?

Css my friend... You can edit all with that. Just go to estilo.css and perform a search for input and you will find thins like this:

div.ctninput input {
    width: 43em;
    font-size: .8em;
    padding: .2em;
    margin-top: .5em;
    background: #FBFBFB;
    border-top: 1px solid #9D9D9D;
    border-right: 1px solid #D2D2D2;
    border-bottom: 1px solid #E6E6E6;
    border-left: 1px solid #D2D2D2;
    color: #666;
}
 
/* inputs */
form input {
    background: #F9F9F9;
    border-top: 1px solid #7C7C7C;
    border-right: 1px solid #C3C3C3;
    border-bottom: 1px solid #DDD;
    border-left: 1px solid #C3C3C3;
    }
 
form input.url { /* Se usa en index y en ver.php */
    font-size: 1.1em;
    padding-left: 3px;
    }
 
form input#localUP {
    font-size: 0.85em;
    /*border: 0px; */ /* opera */
    border: 1px solid #DDD; /* Firefox */
    /* A safari le da lo mismo */
    /* IE lo quiere no seteado */
    }
 
form input#remotaUP {
    font-size: 1.1em;
    padding-left: 3px;
    }

About the direction, you want to change just the button to the left? not all the text directions?

rodolfoberrios.com | PLEASE use Tech Support forums to ask for support!

Rodolfo's Website

Thumbs up

  • Registered: 2009-04-05
  • Posts: 3

Re: How to change the upload file input field + browse button?

Hmm, basically, I'm trying to get http://uploadhole.com/ to look like http://www.ceneb.com/clients/previews/Upload%20Hole/

As you can see, the design has it so that the browse button is on the left side and the upload button is on the right. I can't seem to see any way to make the browse button on the left.

I guess I was thinking I would be able to edit some file to allow me to insert the css ID's I already have inplace. I still don't see how I'm able to style the input field and input button seperately when there's only one ID in the output if you get what I mean. form input {} would style both.

Thumbs up

  • Rodolfo
  • The Chevereto Gurú
  • Offline
  • From: Santiago de Chile
  • Registered: 2008-10-08
  • Posts: 2,230
  • User Karma: 134

Re: How to change the upload file input field + browse button?

it's a different input you see.. Chevereto has "input type file" wich comes with the browse button. The upload hole is different. Thats why. You have to do a similar workaround, try to copy the input and stuff then go to engine.php and change the input file handler.

rodolfoberrios.com | PLEASE use Tech Support forums to ask for support!

Rodolfo's Website

Thumbs up

  • Registered: 2009-06-11
  • Posts: 9

Re: How to change the upload file input field + browse button?

how to change gradient which is in the header

Thumbs up

  • From: France
  • Registered: 2009-05-22
  • Posts: 24

Re: How to change the upload file input field + browse button?

Change to

<input type="image" src="images/browse.png" ... />

Thumbs up

  • Registered: 2009-08-31
  • Posts: 35

Re: How to change the upload file input field + browse button?

Nice template however lack of link back to chevereto. smile

Thumbs up

  • Registered: 2010-08-06
  • Posts: 4

Re: How to change the upload file input field + browse button?

try to put the browse bar smaller

Thumbs up

  • From: America
  • Registered: 2010-08-25
  • Posts: 4

Re: How to change the upload file input field + browse button?

Thanks for starting this thread. I hope it will be helpful to many people that are searching for this topic. Keep posting guys and keep this forum a great place to learn things.

Thumbs up