[1.3.b70] Change style of form buttons

Post by **aliasmask** » Fri Sep 10, 2010 7:55 pm

Specifically, the padded area around the content. There is about a 2px border and then there is about an 10px pad to the left and right of content. Can we get rid of the padded area and if someone wants to put that extra space in there, they can do it with html in the value.

Ideally, I would like to be able to style the whole button, but the above would suffice. I want to make small submit buttons (more reliable than links when clicked) for very tiny image icons, but with all that padding, it's not very tiny.

Below I have an example of a small image blown up x4.

The top button is the normal button with an image that is 8x6.
The second image shows the button after being selected. Inside the dots is where the content exists. The yellow highlighted area is the padding I wish wasn't there.
The bottom image is an example of the button without the extra padding and also shows the actual size of the large and smaller button.

Azhrei · Post by **Azhrei** » Fri Sep 10, 2010 10:26 pm

That can't be changed with CSS in your HTML form? That's what CSS is for...

Post by **aliasmask** » Fri Sep 10, 2010 10:48 pm

Azhrei wrote:That can't be changed with CSS in your HTML form? That's what CSS is for...

Nope. Float doesn't work, negative margins... stuff like that. Unless I'm doing something wrong. As far as I know, NO CSS works as a part of the input tag. The only changes I can do are in the value of the tag and that doesn't effect the padding.

edit:

Code: Select all

<!-- Does not work -->
<input type="submit" style="font-weight:700" value="X">
<span style="font-weight:700"><input type="submit" value="X"></span>
<!-- Does work -->
<input type="submit" value="<html><span style='font-weight:700'>X</span></html>">

biodude · Post by **biodude** » Sat Sep 11, 2010 9:29 pm

Have you tried changing padding or margins in the html in the input contents directly?

Code: Select all

<input type="submit" value="<html><span style='padding: 0 ; margin: 0 ;'>X</span></html>">
<input type="submit" value="<html><head><style><!-- html { margin: 0 ; padding: 0 ; } --></style></head><body>X</body></html>">

That last one may not play nice with macro code (due to the curly braces), but I'm just thinking out loud.
As far as I can recall, the CSS in MapTool is not applied to input tags (classes), and the trick of nesting html inside the value attribute might create a whole new html context, so any external stylesheet is also not applied from the main form. What if...

Code: Select all

<input type="submit" value="<html><head><link rel='stylesheet' href='[R: macroLinkText(...)]'></head><body>X</body></html>">

and the link tag href pointed to a stylesheet with margin & padding specified?

Sorry, I don't have time to test all this now, but thought these ideas might be helpful. Good luck.

CoveredInFish · Post by **CoveredInFish** » Mon Sep 13, 2010 5:42 am

All of those are displayed the same (AKA no effect).

Post by **aliasmask** » Sat Sep 25, 2010 4:40 am

Here's an example of various browsers displaying the following code:

Code: Select all

<input  type="submit" value="x">

It would be nice if it could be formated like google chrome or internet explorer. The Firefox is a little big for my tastes. I imagine there is some button CSS somewhere in the maptool code where this can be changed. No CSS put in a macro will effect submit buttons because the maptool code forces the format.

RPTools.net

[1.3.b70] Change style of form buttons

[1.3.b70] Change style of form buttons

Re: [1.3.b70] Change style of form buttons

Re: [1.3.b70] Change style of form buttons

Re: [1.3.b70] Change style of form buttons

Re: [1.3.b70] Change style of form buttons

Re: [1.3.b70] Change style of form buttons