Change top border color of a Button

[ValiantCuriosity]

OK, so,
I bought LC software in 2016. I've never used it. It was recommended to me and I spent more on it than I have ever spent on any software. I've tried to work a little with it, but the extensive documentation doesn't ever seem to cover what I'm looking for at the time. Even using the search, I can't find simple things.

I REALLY need to rewrite some software that I've produced in HTML5, CSS, and Javascript for the Apple App Store. My apps have become cumbersome to maintain and some bugs are showing up. I've looked at so many packages to use, but I am not a gifted programmer. I decided to revisit LC yesterday. I am using 9.0. This version looks very nice. Sadly, I'm already running into the same issues with finding information. There is a lot of information, just not AFAIKT specific and detailed to all the areas of LC.

I'm simply trying to build my software interface. I wanted to make the top border of a button border red. Simple. Right? Well... not so much. I can't find anything in the way of a 'how to' or anything on the forum.

I've tried using the Colors-->Border controls in LC. The button doesn't change at all when I add a red border to that section of LC. I've also tried doing this via code:
set the borderColor of "myButton" to red (maybe this incorrect code?)

Can someone point me in a good direction to get this small thing done? I've tried to find descriptions of the Colors area and can't.

TIA

[dunbarx]

Hi.

The borderColor property encompasses all four borders. In order to make only the top one red, you must overlay another gadget, perhaps a horizontal red line graphic.

This is not too onerous. The length of the graphic will be the width of the button, and the topLeft of the graphic will be the topLeft of the button. You can group those two controls, and they will always 'show" as you originally intended.

At least you got, mostly, to the correct property. It just takes a while to get the details correct. There are a lot of them, but they do their jobs well. It is like having a toolbox with 2000 tools. You have to rummage at the beginning, but after a while, your favorite tools always seem to be on top.

Write back with all new complaints.

Watch it, Bogs.

Craig Newman

[dunbarx]

You mentioned that changing the borderColor seemed to have no effect.

Remember all those tools? Know that the property "3D" will have a profound effect on the border of a control.

Make a button. Set its "borderColor" to "red". In the property inspector, check and uncheck the "3D" button. Play with the borderWidth as long as you are there.

See?

There are indeed a lot of things to know. That is what we are here for.

Craig

[bogs]

Watch it, Bogs.

Did someone call

The only thing I can really add to what Craig has already covered is that a little of this depends on which type of button you are playing with.

For instance, I dragged a 'standard button' to this card, and copied it 2 more times. The top button is how it would look if you change nothing, but you can't set one bevel of the border of it to red as you are asking.

Changing that button to the style 'rectangle' however *does* allow you to do just what you were thinking

Button button...

under the 'Colors' section of the property inspector

I got some style...

And of course, if you increase the amount of pixels for the border of a rectangle button, you will certainly see a more pronounced effect (bottom button / top picture)

No walls on this border...

Selection_003.png (7.63 KiB) Viewed 8299 times

[dunbarx]

Bogs.

How did you change the color of only one border? i don't follow your pictures.

Craig

[bogs]

Well, it is possible I misinterpreted the problem as stated by the OP, when I see "top border", I'm thinking the part of the button that is the left and top bevel (shown clearly in the 3rd button of picture). If that is the case, topColor is indeed what they are looking to change.

If he means the single line across the top, then I completely missed the mark

Assuming I did miss the mark, and you only want to color one side of a button, you might use graphicEffects to do it -

Spectacular!

[dunbarx]

Bogs.

Ah, now I see what you were talking about. I think, though, that it was the top border.

Your effects solution is cool, but would not work for, say, the right side, no? The kluge is at least adaptable to any one or more of the four borders.

Craig

[bogs]

Your effects solution is cool, but would not work for, say, the right side, no?

Oh, I don't know about that

180, 90, 45, 270...Whats your angle(number)?

Selection_003.png (3.76 KiB) Viewed 8198 times

Now, if you were trying to color each of the 4 borders 4 different colors well, that one I'm not so sure of

[jacque]

I use the various effects to do that sort of thing too. Sometimes dropshadow works as well.

The OP should note that Bogs is using a much older version of LC and the UI has changed since then. The property choices are still valid but the window appearance is now much different.

@ValiantCuriosity, if you haven't yet found the User Guide, it's in the Help menu. Reading through it should, make a lot of pieces fall into place. There's an initial learning curve like any language, but at some point you'll hit a "eureka" moment and suddenly it will all make sense. It takes a few weeks, and we'll help you get there. The dictionary is another resource you'll need no matter how long you've been using LiveCode. Entries usually give detailed information about the behavior of every keyword.

Finally there are the online lessons that address specific tasks. Go to http://lessons.livecode.com and search for a topic. For a basic beginner's overview of LC and how it works, you may also find this series useful: http://hyperactivesw.com/revscriptconf/ ... ences.html

[dunbarx]

Bogs.

Well, what do you know? I have never used an effect. Very cool.

Craig

[bogs]

The OP should note that Bogs is using a much older version of LC and the UI has changed since then. The property choices are still valid but the window appearance is now much different.

My bad, of the Lc versions I tend to lean towards 6.5 the most. Here is what it looks like in the "modern" version

'Mo modern!

I use the various effects to do that sort of thing too. Sometimes dropshadow works as well.

Yah, I was just thinking that if used in the right combinations, you just *might* be able to change all 4 borders, but that is beyond the scope of my level of alertness at the moment

@Craig - glad I could finally give you something in return for all the awesomeness you've sent my way

[ValiantCuriosity]

One of the things that I've been most impressed with when trying to get to know LC, is the support of this forum. It is the real reason that I'd like to learn the software. I have posted a few times over the years. Someone always responds to my questions. I've never felt put down or embarrassed. The same can't be said of places like stack overflow. I just want to thank everyone who responded to my question. I am anxious to try some of the approaches to see if I can get my UI to look like the UI that I use in my app.

I've been wrangling with several UI issues. I'll definitely post my questions here.

Thank you for your kind help. CSS seems so simple for things like this but, everything seems simple when you know it.

-Rachel

[bogs]

CSS seems so simple for things like this but, everything seems simple when you know it.

That is exactly right, the more you use something, the more you'll "know it", and eventually you'll revamp your flow. You can *almost* treat Lc like css/html, many of the terms are very close to each other and very very little of it is cryptic or hard to understand.

[jacque]

I've been wrangling with several UI issues. I'll definitely post my questions here.

Please do, we love new people. Besides, I'd like to see another woman here, there are so few of us. On the bright side, there's never a line at the ladies room.