How to edit CSS of SharePoint 2013 List?

Dear EE experts,

We would like to ask for tech support on how to edit css of SharePoint 2013 lists, we have several lists (custom list) and we would like to edit its CSS file.

So that we could insert the script that we would like to have...

Thank you and hope to hear soon...
Stiebel EltronAsked:
Who is Participating?
 
Keyboard CowboyConnect With a Mentor Commented:
DO NOT MODIFY core.css - you can copy and paste from in your custom CSS.  core.css can be overwriten during updates or worse you could foul it up and can't recover easily,  You can add comments to your style sheet using /* and */ which I recommend!
1
 
Julian HansenCommented:
I don't have any SharePoint experience but the result of a SharePoint query is to generate an HTML file. SharePoint makes provision for custom stylesheets. determine what styles you need to override. Place them in a custom style sheet and instruct SharePoint to load this stylesheet in accordance with your requirements.

These articles might help in this regard
https://docs.microsoft.com/en-us/sharepoint/dev/solution-guidance/use-css-to-brand-pages
https://support.office.com/en-us/article/Apply-a-custom-style-sheet-to-a-SharePoint-site-97fe83a2-b435-4f27-8747-db041d4c2d8e
0
 
Keyboard CowboyConnect With a Mentor Commented:
USe Firefox - bring up the list view you want to edit - right click and choose "inspect Element"  - the you may able to see the CSS which is controlling whatever you want to modify.    (click "element" in the upper right hand corner and you can override the page/site CSS.  Then collect all those of changes (one at a time) into a new CSS file using Notepad.  Be sure to add <style> at the top and </style> at the bottom.  Use either a period in front of whatever styles you'r changing - or use #<div or element name> the a { to modify the styles - be sure to add "}" at the end of the style setting.  Then upload to site assets (perhaps in a new CSS folder).  
Then bring the view into Edit -  add a content edit webpart.  edit the web part settings,  paste in the link to the CSS file you loaded to siteassets.  
Click 'layout' and the click 'hidden' on the web part (retitle the web part to something like "styles"... save and your done.  refresh - you can then edit the site assets CSS file and see any changes immediately.  ON Inspect element, click 'Style editor" on the top nav bar and you can turn off and on style sheets as you wish to see the effect. Let me know if not clear - takes a lot of steps but easy if you get the hang of it.  I can include screen shots on whatever you can't sort out.  Cheers
1
 
Stiebel EltronAuthor Commented:
Great! Thank you!
0
 
Keyboard CowboyCommented:
You're very welcome - good questions!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.