Can't get a border around a button

[MichaelBluejay]

I drag a popup button out of the toolbox, name it "test", and in the message box I type:

set the borderColor of button "test" to red

But no border appears. I know that the showBorder property has to be true, but the default is already true. (I checked.) I know the menumode also has to be set to "popup menu", but again, that's already the default. (I checked.)

How do I get the border to appear?

[bn]

Michael,
I don't get this to work either. But if you want to have a border, a workaround would be to set the graphic effects of the pop-up button to:
Outerglow
opacity 255
box3pass
spread 0
size 1 or 2
you can choose the color by clicking in the color box.

Maybe someone knows how to do this "natively"
regards
Bernd

[Klaus]

This has been bothering and puzzling me too over the last ten years!
But obviously popup menu buttons are not supposed to have a "regular" border, so a workaround is necessary.

Don't shoot the messenger, thanks!

[MichaelBluejay]

Thanks for the replies. So it can't be done with code? I want to do it with code, because I need to hilite the button in certain circumstances. I guess my workaround will be to show and hide a graphic overlaid on the button, so that it *looks* like the button has a border. In the meantime, I'll make a bug report.

[bn]

Michael,
you can script the outerglow.
Suppose you have a popUpMenu button named "pum". Make a checkbox button and set its script to

Code: Select all

on mouseUp
   if the hilite of me then
      put "0,0,0" into tArray["color"]
      put "normal" into tArray["blendMode"]
      put "255" into tArray["opacity"]
      put "box1pass" into tArray["filter"]
      put "2" into tArray["size"]
      put "0" into tArray["spread"]
      set the outerglow of btn "pum" to tArray
   else
      set the outerglow of btn "pum" to empty
   end if
end mouseUp

this will toggle the outerglow of your popUpMenu button

regards
Bernd

[MichaelBluejay]

Thanks for the code, works like a charm!

Would still be nice if the "borderColor" property actually worked, like the Dictionary says it should. But in the meantime, at least I have a good workaround.

[WaltBrown]

Thanks for this, it bugs me too. The Properties seem to arbitrarily apply to either the original pop up button or the popped up menu.

textColor, fillColor, and font selections work for both the pop up button and the popped up menu.
HilitedText, Top 3D Bevel, and Bottom 3D Bevel only works for the popped up menu.
DropShadow only works for the button, not the menu.

What's interesting is that most seem to work better for the other menuModes, although I didn't test exhaustively.
I'll repost this in Feature Requests.

Walt

[MichaelBluejay]

Nine years later, I'm still having a hard time coloring buttons.

I dragged a standard button out of the tool well, then set its backgroundcolor to honeydew. That killed the rounded borders.

So I set the style of the button to roundrect. Rounded corners are back, but the border is a jarring black.

So I set the bordercolor of btn "complex" to gray. No effect. Turn off 3D. No effect. Make sure the showBorder property is true. It is.

What gives?

[Klaus]

This is obviously a known problem, but looks like the scotsmen have other priorities.
https://quality.livecode.com/show_bug.cgi?id=11902
I just added a comment, feel free to also add one.

[richmond62]

Nine years later, I'm still having a hard time coloring buttons.

I gave up rather more than 9 years ago.

What I do do is this:

I setup a button with its name in the font I want.

I then do an "import snapshot" of the button so I end with an image of the button.

With the resultant image one can do EVERYTHING one wants.
-

[MichaelBluejay]

klaus, thank you, I submitted a comment. If they're not going to fix it then they at least need to document that it doesn't actually work, so developers don't waste lots of time trying to get it to work.

richmond82, that's a good idea, but it comes with lots of problems: The rounded corner on the import in harsh and jarring, not like the smooth one on the actual button. Then when I tried to set the borderColor on the image, it didn't show (even with threeD set to false). Even if it did show, I'd expect it to show as a rectangle, rather than following the outline of the rounded button I imported. So I'm afraid there's no way this would work for me.

And just to document how painful it is to try to put a transparent graphic with a colored border on top of the button that refuses to be colored:

(1) Drag a rounded rectangle out of the tool well >> Fill color is gray

(2) Try to change the gray fill: "set the backgroundColor of graphic myGraphic to transparent" >> Fill color is now BLACK, for some reason.

(3) Try to change the fill again: "set the opaque of graphic myGraphic to true" >> No change.

(4) Try to change the fill again: "set the blendLevel of graphic myGraphic to 100" >> Entire graphic disappears, including the border.

(5) Try to resurrect the border: "set the foregroundColor of graphic myGraphic to gray" >> Border still invisible.

(6) Try to resurrect the border again: "set the outerglow["color"] of graphic myGraphic to silver" >> Error: "Can't set object property."

Give up.

Seems like the only solution is to create two buttons in graphics software (one for normal state, one for pushed state) and paste them into LiveCode.

LC is a really weird mixture of super easy and ridiculously difficult.

[Klaus]

Then when I tried to set the borderColor on the image, it didn't show (even with threeD set to false).

Please don't shoot the messenger, but to set/change the bordercolor of an image,
you need to set the bordercolor of the CARD the image is on.

[FourthWorld]

A funky-but-doable workaround may be to use the outerGlow effect as a border. It looks like you were headed that way, but ran into a snag attempting "color" for "effectColor".

Here's what I used in experimenting with this a moment ago:

1. Set the borderWidth to 0
2. Mazimize the outerGlow's effectSpread (I think 255 is max)
3. Set the outerGlow's effectSize to the desired "border" width.
4. Set the outGlow's effectColor to the desired color.

As I wrote in my comment for the bug report, I'd much rather see the roundRect button made consistent with rectangle buttons with regard to borderColor. But perhaps this workaround will get you going on this sooner rather than later, without the additional work required for hand-crafting fixed-size button images.

[bogs]

Anything in either of these two stacks (old experiments) help you along the way?

customButton1.livecode.zip

Grahpic buttons 1

(982 Bytes) Downloaded 289 times

Re-uploaded stack:

CustomButtons2.livecode.zip

Go ahead, push my buttons!

(3.71 KiB) Downloaded 318 times

These are very simple, and a few weren't finished, so I really doubt this will do much to help you.

[MichaelBluejay]

klaus, I got the image border to show by setting the showBorder to true. I do see that its color is inherited from the card, but the image's borderColor can also be set directly.

Richard, thank you, that solves the problem! For anyone looking how to set this, it's in the Effects pane of the Property Inspector.

bogs, those were interesting ideas in your first stack. They're hard to play around with, because after using the Property Inspector once or twice, the dialog box on the Effects gets scrambled and I have to quit the IDE. The second stack doesn't open.