0

I have the below code which modifies the look of my table and it works very well however the columns which are custom made person/group fields are not showing the same font colour as the rest of the columns (black). I believe this might be because of the icon that appears before the name but the 'Modified by' column is fine.

Also does anyone know how to specify a border around the heading row?

enter image description here

Many Thanks

/* ---------- Table Rows ----------*/
/* Set background for every row */
.ms-listviewtable > tbody > tr {
    background: white;
}

/* Set border for every row */
.ms-listviewtable > tbody > tr td{
    border-top: 2px solid Black !important; /* !important needed over override         SharePoint inline style */        
    border-left: 1px solid lightblue!important;
    border-right: 1px solid lightblue!important;
}

/* Set background for every alternating row */
.ms-listviewtable > tbody > tr.ms-alternating {
    background: #F0F8FF;
}

/* ---------- Table Header Row ----------*/
/* Remove background set in SharePoint's general data table style */
.ms-listviewtable tr.ms-viewheadertr {        
   background: transparent;
}

/* Modify background color */
tr.ms-viewheadertr > th.ms-vh-icon, /* Input box and attachment icon */
tr.ms-viewheadertr > th.ms-vh, /* Text */
tr.ms-viewheadertr > th.ms-vh2,
tr.ms-viewheadertr > th.ms-vh2-nofilter,
tr.ms-viewheadertr > th.ms-vh2-div,
tr.ms-viewheadertr > th /* Text */ {
    background: #A9A9A9;
    text-align: center;
}

/* Modify background color on hover */
tr.ms-viewheadertr > th.ms-vh:hover,
tr.ms-viewheadertr > th.ms-vh2:hover,
tr.ms-viewheadertr > th  {
    background-color: #778899;
    border-color: #273C51;
}

/* Modify font color */
.ms-viewheadertr a,
.ms-viewheadertr div {
    color: Black;
}


/* Modify font color on hover */
.ms-viewheadertr a:hover,
.ms-viewheadertr div:hover {
    color: white;
}
tr.ms-viewheadertr > th.ms-vh-icon:last-child {
    display:none;
} 

  • I can't replicate column headers with those icons...is there custom code in your site? – Danny '365CSI' Engelman Mar 6 '17 at 10:14
  • Thanks Danny, I have added a screenshot if you are able to help? – Tom Sanderson Mar 8 '17 at 8:45
  • No, still not enough, select the THEAD in F12 and show in a screenshot what HTML and CSS classes are used (since I can't replicate your screenshot) – Danny '365CSI' Engelman Mar 8 '17 at 9:55
  • Thanks, I've added another screenshot which is hopefully what you need – Tom Sanderson Mar 9 '17 at 9:02
  • That is the documents HEAD, not the THEAD of the Table you are trying to change with CSS.. right click the column you want to change and do inspect-element – Danny '365CSI' Engelman Mar 9 '17 at 12:56
0

Your color question

I have to see a screenshot

I see you use !important , that means you are missing some more important CSS knowledge about CSS Specificity (around for over a decade):

https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Your color black is not applied because the ms-vh classname on the element itself overrules is.

Learn CSS Specificity: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Border around the header

since thead or tr can't have a border, you have to set all TH elements

.ms-listviewtable thead th{
    border-top:1px solid green;
    border-bottom:1px solid green;
}
.ms-listviewtable thead th:first-of-type{
    border-left:1px solid green;
}
.ms-listviewtable thead th:last-of-type{
    border-right:1px solid green;
}

More reading: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

  • forgot to thank you for the heading code, it worked perfectly – Tom Sanderson Mar 10 '17 at 17:27

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.