CSS doesn't change button appearance?

Russell Selkirk

unread,

Feb 26, 2019, 5:55:28 PM2/26/19

to WebIOPi

Hi All,

Are some of the buttons hard-coded? I have been able to change just about everything EXCEPT the background color! No matter what color I put, no matter what format, the background is always medium grey. And once clicked, it always has a blue border on focus...

button {

margin: 5px;

background-color: #87CEFA;

color: black;

border-radius: 5px;

text-align: center;

width: 75px;

height: 40px;

font-size: 10pt;

}

</style>

And these style tags must be at the bottom of the page, they do NOT work with the rest of my style coding above the <body> tag.

Russ

Russell Selkirk

unread,

Mar 5, 2019, 9:13:53 PM3/5/19

to WebIOPi

OK, this is muey frustrating. I cannot seem to get CSS working with a WebioPI button. I need a pointer on how this is done. I have since split my page into separate html, css, and js files. It all works as expected except for any CSS code that applies to a WebioPI created object.

     button {
        margin: 5px;
        background-color: #87CEFA;
        color: black;
        border-radius: 5px;
        text-align: center;
        width: 75px;
        height: 40px;
        font-size: 10pt;
      }

Before click:

After Click:

This "style" is being defined somewhere, just not in my CSS. Bavkground should be "light sky blue", no idea where that border is coming from. The text color, size, width, height can all be changed. NOT the background color!

Is this just me? Am I asking too much?

Russ

Jan Eyking

unread,

Dec 18, 2019, 2:20:41 AM12/18/19

to WebIOPi

In webiopi.js you need to comment out these lines:

var style = document.createElement('link');

style.rel = "stylesheet";

style.type = 'text/css';

style.href = '/webiopi.css';

head.appendChild(style);

if (isMobile()) {

var style = document.createElement('link');

style.rel = "stylesheet";

style.type = 'text/css';

style.href = '/jquery-mobile.css';

head.appendChild(style);

Reply all

Reply to author

Forward