A simple way to customize buttons?

(Edited twice) When I try to change the font size for buttons in the "set css values" dialog on the Events sheet, nothing happens. I changed the automatic font size in the properties to "no". (That's the only thing that has an effect - it makes the font smaller!) What kind of event must I insert before the action "set css value"? I wish the manual would be a little more helpful, it only says "the Button object exposes a Set CSS style action".

The "game" I'm building is actually a fun quiz using children's drawings which I animated. It's for learners of English as a second language, as a new user I'm not allowed to post the url of the test version. The button functionality is important because on a duplicated page, the text of the buttons (the quiz questions) can be changed as well as the order they are in, still the right animations are triggered. But on a cell/mobile phone, the button font is too small even for adults to read.

There must be an easy solution, help would be appreciated.

• Steve

here is a quick test that appears to work using

set CSS style "font-size" to "40px"

https://www.dropbox.com/s/awk5ql5xrzi5b ... .capx?dl=0

Thank you, RamPack, I could download the file but couldn't open it with the free version of Construct 2 - it told me I was running 2.06 and needed 2.10. (After looking a while I saw this is a beta version). Would it be possible for you to save it in the regular version? If not, I guess I can temporarily install beta. (PS. Did so, and see the preceding action is setting the system to a time value - how low can you set the time without running into problems? The bit of delay before the font reaches full size isn't an issue for me. Also, I only need one constant size, but your changing sizes were interesting).

I have an idea for a workaround (make blank buttons and put the questions as text over them), but of course would love to see the solution you came up with. I can find the "set CSS style" item under actions on the style sheet, but normally there has to be an event placed before the action - which one? Which steps do you follow to make the button look the way you want?

I advise you to take a look at this tutorial https://www.scirra.com/tutorials/1283/css-your-buttons-and-textboxes written by Colludium

Thanks, MadSpy, I've read that tutorial and tried to follow it. I still haven't found how to access the dialogue box shown on Page 3 of the tutorial. I cross-checked the manual and other tutorials, but still couldn't find out how to get there.

The string editing after putting in the code didn't look easy, but I haven't had the opportunity to fail at that yet.

There was another tutorial which said to copy and paste css code into the index.html file of a finished project before <\style> in the head. I did that, saved the html file from the text editor. Nothing happened.

Have you read AND download the capx example?

Uh ... no, you caught me on that one, missed the file. Thanks for the tip, I opened it - quite a bit more involved than Ram's solution, but then it takes care of a whole class of objects. Might be an option at a future time. I greatly appreciate your help.

You can just copy/paste the events into your project, as long as you create variables and arrays etc with the same names as the example. Then you can tweak as you see fit - saves you the trouble of recreating it yourself.

Thanks, Colludium. With your capx loaded and the tutorial open, I couldn't get past the first line in the Events Sheet - System/On Start of Layout/Function/Call "load css data" ("button" "normal"). That much is done, but I can't figure out the next step. The set variable dialogue tells me I have to have a variable to choose from - it's a bit confusing or I'm too stupid for this. I still haven't been able to reach the dialogue on page 3 of your tutorial.

The simpler approach that RamPackWobble showed me was a big help, but I haven't figured out to input hover properties that way - if the button color is changed, there is no longer any change when the mouse hovers over the button. I guess I could live with that, but it would be nice for the player to see changes.

Copying events between projects can be frustrating. You have to first create the variables in the new project, with exactly the same names, then paste in the events you wish to copy.

It's frustrating beyond belief! Made some progress, was able to insert variables by right-clicking on the events sheet - only global variables but they became "local" when pulled lower into the order of events. Then I can't access them anymore in the System/set value dialogue, so I put them back to the top as "global" until putting in the code for text and buttons. Now they're down at the same place you have them and I hope they'll work. Using the Events Tab or right-clicking, I can't directly create a local variable.

local variables are only available in groups or nested under other events.

(see https://www.scirra.com/manual/83/variables )

Thanks, RamPack. The only way I found of creating local variables was dragging global ones down under another event - the program then changed them to local variables. Whether they would be functional, I don't know, the tutorial mentioned in this thread was my Waterloo. Using your simpler method to change css values was effective.

Edit: The project is nearing completion. Sorry I'm not allowed to post URLs yet, test address is singadream.com/constructexport2/index.html which can be copied into your browser. The project can't be accessed from the main website which is dedicated to my music.

I decided to simplify the matter by putting the quiz answers in as text with a blank button or checkbox next to each one.

To sum up, I'm impressed with the ability of the program to import animations I made in Anime Studio (exported as png files) and turn them into sprite sheets that work. The group cropping function is great. The background can thus be exported as a single frame sprite, the moving animation character in the same format with no background - the crop function for the animated object works even if the animation frames are of unequal size (for example, if some frames include text or a foreground object).

Getting the buttons to trigger different animations on the same background is a bit of work, but it can be done even by a neophyte like me. I hope at some point in the development of Construct 2 changing the appearance of buttons will be as easy as formatting text in the properties window. At the moment I'm (mis)using the program as an improved presentation software which can export html 5. By the way, the suggestion to try it came from the Anime Studio "Lost Marble" forum.