[SOLVED] Change font size at 'browse' for attachment button ?

akm · 03-23-2012 03:35 AM

Tried all kinds of things, mostly around template: post_attachments_new.

Adding 'font size=' (may not have used correct code, but tried most that know) etc.

Assume if change font size will make button height greater ?

Where to look ?

post_attachments_new...

Code:

<tr>
<td class="trow1" width="1">
<img src="{$theme['imgdir']}/paperclip.gif" alt="" />
</td>

<td class="trow1" style="white-space: nowrap">
<strong>{$lang->new_attachment}</strong> 

<!-- browse input field, size=# of characters, not height -->

<input type="file" name="attachment" size="40" class="fileupload" />
</td>

<td class="trow1" align="center">
{$attach_update_options} 
<input type="submit" class="button" name="newattachment" value="{$lang->add_attachment}"  tabindex="13" />
</td>
</tr>

Please excuse the 'comments' to myself.

***ZiNgA BuRgA*** · 03-23-2012 10:32 AM

Please check a HTML/CSS reference for the correct code, especially what the 'size' property actually does.

akm · 03-23-2012 10:47 AM

(03-23-2012 10:32 AM)ZiNgA BuRgA Wrote: Please check a HTML/CSS reference for the correct code, especially what the 'size' property actually does.

Thank you for the followup.

Seems like the closest info have gotten so far is at... http://www.tagindex.net/html/form/input_file.html
... where the example is the attachment 'browse' button, and it looks like its pretty limited in what can do with the <input> code (ie size is described as number of characters only) ?

Guess thats whats got me stumped (afraid, more often than not), just not sure where to turn on this one.
Oops

But, will also take another closer look at the link.

leefish · 03-23-2012 11:55 AM

You may well be able to adjust the button css so that it looks bigger and with a bigger font.

Code:

input[type="submit"], input.button {
background:#f7f7f7;padding:2px;border:1px solid #4f688f;border-radius:3px;font-size:20px;
}

***ZiNgA BuRgA*** · 03-23-2012 12:01 PM

From your link:

Quote:the input field width

In other words, 'size' has nothing to do with font size - it affects the width.
Like with everything else, you should be using CSS to control font-sizes.

akm · 03-23-2012 02:51 PM

(03-23-2012 11:55 AM)leefish Wrote: You may well be able to adjust the button css so that it looks bigger and with a bigger font.
Code:
input[type="submit"], input.button {
background:#f7f7f7;padding:2px;border:1px solid #4f688f;border-radius:3px;font-size:20px;
}

(03-23-2012 12:01 PM)ZiNgA BuRgA Wrote: From your link:
Quote:the input field width
In other words, 'size' has nothing to do with font size - it affects the width.
Like with everything else, you should be using CSS to control font-sizes.

Thank you for the input (npi).
Am not sure how the type="button" works with type="file".

Am assuming the controlling template code for the browse click (per the previously attached scrnshot) is...

Quote:<input type="file" name="attachment" size="40" class="fileupload" />
</td>

...and the css class 'style' is "fileupload" ?

Have tried to find such a class in *.css files, but with no luck.
So, assume need to use an 'in-line' style along with the template html quoted above ?

Will ramp up the learning curve in that direction... make sense ?
Am grasping (at straws) in right direction, or am totally off course ?

Ps:
Btw, from an intuitive standpoint, its interesting how the browse textbox, looks/acts like a textbox with the cursor, but it is not possible to enter text into it. Guess its just a mybb thing, to be able to see what you 'select' ?

Plus, the input got from Firebug is...

Code:

input[type="file"] {
    -moz-appearance: none;
    -moz-binding: none;
    border-style: none !important;
    cursor: default;
    padding: 0 !important;
    white-space: nowrap;
}
forms.css (line 426)
<System>
input {
    -moz-appearance: textfield;
    -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
    -moz-user-select: text;
    background-color: -moz-field;
    border: 2px inset threedface;
    color: -moz-fieldtext;
    cursor: text;
    font: -moz-field;
    letter-spacing: normal;
    line-height: normal !important;
    padding: 1px 0;
    text-align: start;
    text-indent: 0;
    text-rendering: optimizelegibility;
    text-shadow: none;
    text-transform: none;
    word-spacing: normal;
}
forms.css (line 82)
<System>
Inherited fromtd.trow1
element.style {
    white-space: nowrap;
}
.trow1 {
    color: #000000;
    font-size: 25px;
    text-align: center;
}
global.css (line 138)
td {
    text-align: inherit;
}
html.css (line 478)
<System>
Inherited fromtable.tborder
table {
    color: #000000;
    font-family: Verdana,Arial,Sans-Serif;
    font-size: 13px;
}
global.css (line 86)
table {
    border-collapse: separate;
    border-spacing: 2px;
    text-indent: 0;
}
html.css (line 273)
<System>
Inherited frombody
body {
    color: #000000;
    font-family: Verdana,Arial,Sans-Serif;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}

...and assume need to add that (with forms.css some sort of online source of info) to the learning curve as well ?

***ZiNgA BuRgA*** · 03-23-2012 03:58 PM

(03-23-2012 02:51 PM)akm Wrote: Have tried to find such a class in *.css files, but with no luck.

Then add it in.
Recommend putting stuff in general.css as the other ones aren't often used.

akm · 03-24-2012 05:53 AM

Ok, this did it...

Code:

<input type="file" name="attachment" size="40" class="fileupload" style="font-size: 25px" />

...so far !
Why does it always seem so simple, after its solved ? Smile

Threaded Mode \| Linear Mode Standard Tools
Forum Jump: View a Printable Version Send this Thread to a Friend Subscribe to this thread