A simple way to customize buttons?

Just started using Construct 2? Post your questions here

Post » Mon Jul 20, 2015 10:26 pm

(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
B
3
Posts: 7
Reputation: 189

Post » Tue Jul 21, 2015 6:33 pm

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
August 2015 - I misplaced a lot of links - I will try to find backups and repost. If You find a post that interests please reply to post with @rampackwobble and I will get a nudge!

If you find my posts useful please consider donating something to a local charity or to the http://www.mndassociation.org/
B
64
S
33
G
47
Posts: 1,194
Reputation: 30,812

Post » Tue Jul 21, 2015 9:39 pm

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?
Last edited by old novice on Tue Jul 21, 2015 10:53 pm, edited 2 times in total.
B
3
Posts: 7
Reputation: 189

Post » Tue Jul 21, 2015 9:44 pm

I advise you to take a look at this tutorial https://www.scirra.com/tutorials/1283/css-your-buttons-and-textboxes written by @Colludium
Image Image
B
22
S
13
G
130
Posts: 869
Reputation: 67,816

Post » Tue Jul 21, 2015 9:55 pm

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.
B
3
Posts: 7
Reputation: 189

Post » Tue Jul 21, 2015 10:06 pm

Have you read AND download the capx example?
Image Image
B
22
S
13
G
130
Posts: 869
Reputation: 67,816

Post » Tue Jul 21, 2015 10:46 pm

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.
B
3
Posts: 7
Reputation: 189

Post » Tue Jul 21, 2015 11:02 pm

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. :)
I only occasionally visit - I'm learning C# for Unity, but c2 is still a respectable game engine imo....
B
73
S
19
G
66
Posts: 2,198
Reputation: 42,193

Post » Wed Jul 22, 2015 12:48 pm

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.
B
3
Posts: 7
Reputation: 189

Post » Wed Jul 22, 2015 1:47 pm

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.
I only occasionally visit - I'm learning C# for Unity, but c2 is still a respectable game engine imo....
B
73
S
19
G
66
Posts: 2,198
Reputation: 42,193

Next

Return to Beginner's Questions

Who is online

Users browsing this forum: No registered users and 0 guests