I have four columns:

  1. FirstName
  2. LastName
  3. Date
  4. Birthday

I want to apply color and font for the FirstName column data only, how can this be done?


In SharePoint 2013, You can try Client Side Rendering. You just need to override the display template of FirstName. For example,

Templates: {
    Fields: {
        "FirstName": {
            View: function(ctx) {
                var FirstName = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
                return "<span style='color :#f00'>" + FirstName + "</span>";;


  • Where we need to put the code – ranjith Jan 21 '16 at 12:21
  • Use Cisar.... It will add the code to your desired view – Atish Dipongkor - MVP Jan 21 '16 at 12:30
  • See this post for using Cisar sharepoint.stackexchange.com/a/162286/21421 – Atish Dipongkor - MVP Jan 21 '16 at 12:33
  • Cisar means , please give me exactly where we need to change – ranjith Jan 21 '16 at 12:34
  • 1
    Cisar is chrome extension This extension is for SharePoint Developers. It makes process of creating SharePoint Client Side Rendering customizations many times faster. The customizations will be applied as-you-type to the underlying SharePoint page. Cisar provides CSR-tailored intellisense and tight integration with the underlying page – Atish Dipongkor - MVP Jan 21 '16 at 12:36

You can use Sharepoint Designer for this.

SharePoind Designer > Site and Libraries > Right click the View > Edit File in Advanced Mode

Conditional Formatting in Ribbon

There you find your settings.

For example:

  • 1
    Note that this will not work for SP2013. – wheeler Jan 21 '16 at 12:28

One way to approach this is with CSR (see Atish Dipongkor's answer). Another way would be overwriting the CSS with a content editor. See the answer/comments of this question.


While creating a list column, you can give the below formula to change the list html property.

="<DIV style='color:yellow'></DIV>"

The above code will change your column background color as yellow.

Like this you can alter the column html properties.

Hope it resolves your problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.