none
How to add css to Sharepoint List RRS feed

  • Question

  • Hi

    I would like to add some css to one Sharepoint List. I would like every other row to be light grey in background.

    I know the css but how would be the best way (or any way) to add css to a Sharepoint List. My list is not in wiki page, it's the original list view.

    Thursday, December 29, 2016 10:11 AM

Answers

  • Hi,

    As the Huzefa's reply, I suggest you save your CSS style in to a CSS file, then upload this file to Site Assets of that site/sub-site to where I need modifications and then reference that CSS file using Content Editor Web Part or Script Editor Web Part in your list view page.

    <link href="/SiteName/SiteAssets /CustomStyle.css" rel="Stylesheet" type="text/css" />

    It will better to manage your CSS style, if you want to modify the CSS style, we just modify the file, don't need edit your list view page.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marked as answer by IKFI Friday, December 30, 2016 11:58 AM
    Friday, December 30, 2016 2:02 AM
    Moderator
  • Keeping your custom files (whether CSS or JS or HTML) in properly designated folders at a specific location will help you better manage your customization.

    You can even keep this files in a document or picture library and reference them from there. There is nothing wrong with that, but as a SharePoint Developer/Designer you would use these specific libraries such as Style Library or Site Assets because they are defined for that purpose.

    You have multiple options for referencing them on the page -

    1. If you would like to use your CSS and JS files across your site, you would ideally create a new master page and give reference to your custom files in the <head> block.
    2. If you are trying to perform customization on a specific page, then creating a new master page would be too much of an overhead, therefore, you can simply add a Content Editor or Script Editor Web part to your page and reference your files there.

    Regards, Huzefa Mala, MCPD, MCT Please mark the post that answered your question as the answer, and mark other helpful posts as helpful, so they will appear differently to other users who are visiting your thread for the same problem.

    • Marked as answer by IKFI Friday, December 30, 2016 11:58 AM
    Friday, December 30, 2016 3:58 AM

All replies

  • Out of the box you can go to the settings of your list view and in the Style section you can apply the "Shaded" style to your view.

    This will give a background color to every alternate row of your view.

    If you want customization then there are two options:

    1. Override the OOB styles by implementing the new styles in an HTML page and applying the HTML page on your web part page using Content Editor Web Part
    2. Create your custom styles and upload the file either in the Style Library or Site Assets library. Create an HTML file to give reference to your css file and use jQuery to apply alternating styles to each row of the list view. As above, you need to use Content Editor Web Part to apply your HTML file to the page with the list view.

    Ideally, any custom style or scripts should be added to the Style Library of your site collection. However, if you are working on a sub-site and would not want to alter the root site of your site collection then you can upload your custom files in the Site Assets library of your sub-site.


    Regards, Huzefa Mala, MCPD, MCT Please mark the post that answered your question as the answer, and mark other helpful posts as helpful, so they will appear differently to other users who are visiting your thread for the same problem.

    Thursday, December 29, 2016 10:28 AM
  • Thanks for rapid answer!

    I got the css applied using Script Editor Web Part that I added to the List View page.

    In that web part I added following code and got that way what I wanted.

    <style>.ms-listviewtable tr:nth-child(odd) {background-color: #e8e8e8;}</style>

    Just for the future needs, do you mean that I would need to create style.css file with the css I need, upload this to Site Assets of that site/sub-site to where I need modifications and then I just reference that css file using Content Editor Web Part? I dont quite get the HTML reference..??

    Thursday, December 29, 2016 11:01 AM
  • You could use Designer - > StyleBlock as well for achieving  this.

    <SharePoint:StyleBlock runat="server">
    
    <script type="text/css">
    
    /* CSS here */
    
        </script>
    </SharePoint:StyleBlock>
    

    Thursday, December 29, 2016 1:24 PM
  • Thanks for the tip! I will check that out.
    Thursday, December 29, 2016 3:00 PM
  • Hi,

    As the Huzefa's reply, I suggest you save your CSS style in to a CSS file, then upload this file to Site Assets of that site/sub-site to where I need modifications and then reference that CSS file using Content Editor Web Part or Script Editor Web Part in your list view page.

    <link href="/SiteName/SiteAssets /CustomStyle.css" rel="Stylesheet" type="text/css" />

    It will better to manage your CSS style, if you want to modify the CSS style, we just modify the file, don't need edit your list view page.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marked as answer by IKFI Friday, December 30, 2016 11:58 AM
    Friday, December 30, 2016 2:02 AM
    Moderator
  • Keeping your custom files (whether CSS or JS or HTML) in properly designated folders at a specific location will help you better manage your customization.

    You can even keep this files in a document or picture library and reference them from there. There is nothing wrong with that, but as a SharePoint Developer/Designer you would use these specific libraries such as Style Library or Site Assets because they are defined for that purpose.

    You have multiple options for referencing them on the page -

    1. If you would like to use your CSS and JS files across your site, you would ideally create a new master page and give reference to your custom files in the <head> block.
    2. If you are trying to perform customization on a specific page, then creating a new master page would be too much of an overhead, therefore, you can simply add a Content Editor or Script Editor Web part to your page and reference your files there.

    Regards, Huzefa Mala, MCPD, MCT Please mark the post that answered your question as the answer, and mark other helpful posts as helpful, so they will appear differently to other users who are visiting your thread for the same problem.

    • Marked as answer by IKFI Friday, December 30, 2016 11:58 AM
    Friday, December 30, 2016 3:58 AM
  • Thanks for tips, Dennis and Huzefa!

    Actually that CSS folder and reference seems very good idea! I can then use the same css to several lists and if needed, I need to modify just one file. Many times the styling is the same..

    Great!

    Friday, December 30, 2016 11:10 AM
  • Good to hear!

    Request you to please mark the posts that helped you as answer.


    Regards, Huzefa Mala, MCPD, MCT Please mark the post that answered your question as the answer, and mark other helpful posts as helpful, so they will appear differently to other users who are visiting your thread for the same problem.

    Friday, December 30, 2016 11:35 AM