Is it possible to chance the size of the 'UPLOAD' button? its a bit big

[trucks79]

hi i just wanted to see if it was possible to make the ‘upload’ button a little smaller and also maybe add it to the same line as the ‘browse button’

• This topic was modified 5 years, 2 months ago by Michael Gilkes. Reason: moved the thread to the appropriate forum

[Michael Gilkes]

@truck79. Thanks for posting. You can definitely change the size of the upload button with a little bit of CSS. However, you have to keep in mind that this is often already managed by your template’s CSS styles. So, it would be best to first figure out what your template’s CSS file is doing.

The upload button is an “input” tag of “submit” type and class “btn”. So, if you want to change it’s size, you have to place a style block like the following:

CSS

input[type="submit].btn { display: inline-block; padding: 4px 12px; /* set your padding */ margin: 0 0; /* set your margins */ font-size: 13px; /* set your font size */ line-height: 18px; /* set your line height */ text-align: center; vertical-align: middle; }

1 2 3 4 5 6 7 8 9

input[type="submit].btn {   display: inline-block;   padding: 4px 12px; /* set your padding */   margin: 0 0; /* set your margins */   font-size: 13px;  /* set your font size */   line-height: 18px;  /* set your line height */   text-align: center;   vertical-align: middle; }

the key is to adjust your padding, margin, font size and line height to get the size of button your want. and note that this has to come after your template styles so that it overrides them.

[Michael Gilkes]

@truck79. As for placing the upload button on the same level as the browse button, that too is possible. however, that is more involved, and would require you to make a template override for the module, and move around some code.

[trucks79]

thanks for the reply,
i have played around but cant do that so think i will have to leave it as it is 🙂

[Author]

Posts