topic Hi Chris, in Software Archive

Style a button

Sey_T_ — Wed, 28 Oct 2015 09:36:28 GMT

I am not sure if i should continue with Intel XDK. I seems to have many bugs. I know I am new but I can't even do simple things like changing colors. Can someone explain me how to change color, font, background color of a GO button? I know there are many ways. First, i used Design Editor: I chose the button and created a custom style since none of the predefined options offer background color change of a button. so i added this custom style:

.color {
color: red;
background-color:green;
}

nothing changed.

Then, I opened index.html file and added this to button: style="background-color:red"

nothing changed. I tried to add CSS files. nothing changed. I also relaized that CSS files' location is different than in index.html .<link rel="stylesheet" href="css/app.css"> but mu app.css is css/index/app.css by defualt.

Also, lets say one of these of options let me changed the background color of a button, then which one overpowers the other. What if I changed the background color both is app.css, index.html and by creating a custom style in Design Editor, then which one would show?

Thanks. I hope someone will help me.

Which UI Framework are you

Chris_P_Intel — Wed, 28 Oct 2015 16:46:33 GMT

Which UI Framework are you using? The UI Frameworks provide the base CSS for anything like a button and the inheritance rules you'll have to negotiate are determined by them. This isn't a bug in the XDK, it is simply the perils of working with a code base with which you may not be fully familiar.

Some of the frameworks (like jQueryMobile ) don't even use the DOM nodes that are in the HTML - they use JavaScript to create entirely new nodes. In the case of JQM, if you want to style things like buttons, you need to use a theme roller and then leverage that theme.

As a test, I made two different .html files in my project, one using Twitter Bootstrap and one using jQueryMobile. With Bootstrap I had no problem changing the background color as you first described: I made a new custom style, put background-color:green; in it and saved it. Button turned green immediately. But in a second file I tried jQueryMobile and there the style was not taken. For JQM try https://themeroller.jquerymobile.com/

For the other frameworks, consult the docs for the framework.

Hi Chris,

Sey_T_ — Wed, 28 Oct 2015 19:08:29 GMT

Hi Chris,

Thanks for the reply. I am using App Framework and I will test other frameworks soon. Can you please check the attached image and tell me what I am doing wrong? As you can see on the right, I created a custom style to change the background color of the button, but it does not work. On the left, I created Themes folder under projects folder and then created simplex.css file under it. But it does not come up inside Themes drop-down menu in Design Editor.

Thanks for your help and time.

Sey

btw, I tried to change

Sey_T_ — Thu, 29 Oct 2015 01:25:18 GMT

btw, I tried to change background color of button in Bootstrap, it works!!

For two days now I have not

Ndifor__Awemu — Fri, 17 Nov 2017 21:39:56 GMT

For two days now I have not been able to use the hover pseudo on css. what am I doing wrong. AM using Intel XDK. Thanks