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;
} 

16
  • I can't replicate column headers with those icons...is there custom code in your site? Mar 6, 2017 at 10:14
  • Thanks Danny, I have added a screenshot if you are able to help? Mar 8, 2017 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) Mar 8, 2017 at 9:55
  • Thanks, I've added another screenshot which is hopefully what you need Mar 9, 2017 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 Mar 9, 2017 at 12:56

1 Answer 1

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

1
  • forgot to thank you for the heading code, it worked perfectly Mar 10, 2017 at 17:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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