CSS file issues

1

Hi there! I was trying to play around with adding some custom CSS and ran into an issue. Specifically, I wanted to add some icons to our SiteServices app (example below) to improve the UX since there are a lot of fields in this app.

I tried adding the .css file (script below) directly to my app to accomplish this, but the style changes are not rendering into the page. I tested the changes in Chrome dev tools, and I’m familiar enough to know that it should work, unless I’m missing something. Do you happen to know if only certain CSS selectors are supported and if the ::before pseudo element specifically is supported in kintone?

Furthermore, if you have kintone specific CSS documentation, that will also help a lot. Thanks!

Icon Example: 

Script:

.control-gaia.control-group-field-gaia.field-5324360::before {
content: url(http://www.mywebsitexyz.com/wp-                 content/uploads/2017/04/003-cloud-computing.png);
position: relative;
top: 11px;
}

.control-gaia.control-group-field-gaia.field-5324486::before {
content: url(http://www.mywebsitexyz.com/wp-content/uploads/2017/04/wifi.png);
position: relative;
top: 10px;
}

.control-gaia.control-group-field-gaia.field-5324748::before {
content: url(http://www.mywebsitexyz.com/wp-content/uploads/2017/04/002-television.png);
position: relative;
top: 9px;
}

.control-gaia.control-group-field-gaia.field-5324361::before {
content: url(http://www.mywebsitexyz.com/wp-content/uploads/2017/04/001-diploma.png);
position: relative;
top: 10px;
}

2

Hi Natalie              

In kintone, it seems that the pseudo element “before” or “after” is allowed to use.

Although I read all of your information, for the time being,
I couldn’t answer your question correctly.
It’s a responsibility on my part.

I’ve found a sample usage page for CSS customizing,
where the pseudo element “before” appears.
It’s a page of Japanese.
Would it be helpful for you?

http://qiita.com/rex0220/items/74d7b125be6b9c8a10af

3

Hi Natalie

I had a check through on the css script and it seemed to work fine on my end.
I needed to change around the numbers listed in the class name (like 5324360) to match the class name of my own fields. These seem to be unique ids given to each field you have.

So to answer your questions:

>Do you happen to know if only certain CSS selectors are supported
I personally haven’t found any selecters yet that are not supported

>and if the ::before pseudo element specifically is supported in kintone?
Your script is working, so it should be supported.

BTW, is your image loading up? If not, could you check the console of your dev tools to see if there are any errors cropping up.
If your image IS loading, could you tell us where it should be showing up, and where it’s actually showing up (I’m not sure if the picture you posted was an image that you wanted to achieve, or an image that’s not showing the result you want)