Style a button

[Sey_T_]

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.

[Chris_P_Intel]

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. 

[Sey_T_]

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

[Sey_T_]

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

[Ndifor__Awemu]

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