Styling of file upload button

User 53435 Photo


Registered User
79 posts

I added a file upload button to a form (Content->File element) however there does not seem to be a way to style the button or change the text it contains (currently says 'Choose File').
Is there any way in site designer to modify the file upload style or will I have to do this manually later?

- Geoff
User 2699991 Photo


Registered User
4,836 posts

What sort of styling do you require (on export it says "Browse)
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
User 53435 Photo


Registered User
79 posts

I'd like to set the text (which says "Choose file" on the form) to something else, hitting ctrl-t to edit the text does nothing.
I'd like to edit the size of the button however, unlike other buttons, changing size and padding does not have any effect on the button in the site designer interface.
Previously, in html/css editing by hand I have modified these things. Just can't find a way to do it in the SD interface like other elements.
User 2699991 Photo


Registered User
4,836 posts

Geoff Swan wrote:
I'd like to set the text (which says "Choose file" on the form) to something else, hitting ctrl-t to edit the text does nothing.
I'd like to edit the size of the button however, unlike other buttons, changing size and padding does not have any effect on the button in the site designer interface.
Previously, in html/css editing by hand I have modified these things. Just can't find a way to do it in the SD interface like other elements.

You can change the text style / colour/ line-height (which makes it look like padding) etc in the typography section

the width can be changed if the file is nested in a container which you then set the width to that in the normal way

can't help with changing text to whatever it is you want, but then I have always been ok with "Browse"
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
User 379556 Photo


Registered User
1,536 posts

Attached is a simple example for changing the styling and text however one wishes.

Frank
Attachments:
User 122279 Photo


Senior Advisor
14,465 posts
Online Now

Clever!! :D
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
4,836 posts

Here Is a short silent movie example of a file upload form I use with styling just using the available style formats (font type - size, padding colours etc) all within Site Designer (foundation framework) can be viewed "preview" and "device view" as well as local browsers (preview on)

The "Browse" text doesn't change it's the default words) but Frank's method could perhaps be adapted

https://youtu.be/xR-dnhkEoGA
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.