none
Linking Custom CSS in sharepoint list forms RRS feed

  • Question

  • Hi All,

    i am trying to apply custom css to my Sharepoint list form, but with link tag its not working,

    is there any other way to apply css to the list forms,

    am using <link rel="stylesheet" type="text/css" href=".../.../.../listA/request.aspx"/>

    but as soon i put this in an content editor or script editor to check, the page goes on toss, 

    please let me know how to refer custom css in siteAssets

    thanks in advance

    Friday, February 17, 2017 10:53 AM

All replies

  • Hi,

    Apply the custom CSS file to List Form ,you could do as follows.
    1. Upload the CSS File.
     
    2. Go to your list form and edit page.
     
    3. Click “Add a Web Part” and select Content Editor.
     
    4. Focus the web part. At the top navigation bar click  “Edit Source” button to open the HTML Source Editor.
     
    5. Link custom CSS file for your List Form.

    <style type="text/css" media="screen, projection">
      @import url("/SiteAssets/myStyle.css");
    </style>

    6. Save your change.

    Best regards,
    Patrick


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


    Monday, February 20, 2017 9:54 AM
    Moderator
  • Hi Patrick, thanks for the reply,

    but can you please let me know why was the Link tag taken out ?

    Tuesday, February 21, 2017 12:32 PM
  • is using .aspx instead of .css intentional? Do you want to generate css on the fly or something like that? If yes, did you try to open this request.aspx in own browser tab? Will it work there?

    And another question: when you added this link to content editor, did you switch to html source view (from the ribbon choose Html button) or added it in editor mode?


    Blog - http://sadomovalex.blogspot.com
    Dynamic CAML queries via C# - http://camlex.codeplex.com

    Tuesday, February 21, 2017 12:47 PM
  • Hi Sadomovalex,

    am trying to refer Css file in my SiteAssets in my Request.aspx page by adding CEWP, but its not working,the same code and the approach worked in Sharepoint 2010 

    Tuesday, February 21, 2017 12:55 PM
  • Hi Patrick, even this steps dint work, as soon as the CSS gets liked , form layout which consists of all the column gets disappeared.

    Tuesday, February 21, 2017 12:57 PM
  • Hi Patrick , i tried this , when checked in Developer tools , the CSS is loaded, but as soon as the css loads, the layout which contains the columns in the list form disappears , can u plz tel y is this happening ???

    Wednesday, February 22, 2017 7:15 AM
  • Hi,

    Will your custom CSS hide the fields if you insert it into this page directly?

    Please start with a simple demo like this, it will only change the background color of the whole page to yellow. Once it works without any exception in your page, then add your other CSS code into that CSS file, save the change, verify it in different browsers. This can help to find out the root cause of this issue in an easier way.

    body {
    
        background-color: yellow;
    
    }
    

    Please let me know once there is any progress.

    Best regards,

    Patrick


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

    Thursday, February 23, 2017 2:24 AM
    Moderator
  • Hi v k b,

    Any progress?

    Best regards,

    Patrick


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

    Friday, February 24, 2017 9:41 AM
    Moderator
  • change the extension to css 

    <link rel="stylesheet" type="text/css" href=".../.../.../listA/request.css"/>
    use !important in your custom css like this: 

    className
    
    {
    
    color:white!important;
    
    }


    make sure that there is no conflict

    Tuesday, February 28, 2017 4:04 PM