How to add CSS to custom list in Sharepoint 2013

Question

I have a list where the users can add new items. I modified the input display in InfoPath 2010 and now it have white background and a white frame around it. I couldn't find a way to change the background to transparent and I couldn't even interract with the frame's color. I guess I should add a CSS to make it transparent, but I couldn't find the way how to do it.

I have almost zero experience with CSS and Sharepoint 2013 so pls explain:

1. What should I write in the CSS file?

2. Is that okey if I create it in the "Site assets" folder?

3. How can I link it to the input display of the list to change both the background and the frame's color to transparent? (I have Sharepoint designer 2013)

Any other solution with the same result is good for me.

Thank you very much for your explanation!

Answer 1

If you are modifying the InfoPath form, you will need to do the styling for the form in InfoPath Designer. You should be able to just use the interface to make your basic changes to the form, and not have to worry about CSS.

Answer 2

I needed CSS because I had to change settings what I couldn't modify in the designer (column width, background of table's frame, transparent color, etc). In the end I did this and worked:

1. Edit Page => Add Script Editor

2. Press F12 to open the script of the page. By using "select element" button and clicking on the web element I could find the adress of the element. (Sometimes hunting down the exact right adress was not trivial)

3. Use the adress and add CSS code between style tags to the Script Editor. Every modification required new tags for diferent elements.