2

I have been using an outside CSS file to change the look of our SharePoint sites. Where I have run into an issue is changing the title font.

/*=============
  Title Changes
  =============*/

.ms-core-pageTitle {  
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
text-align: center;
color: #ffffff !important;
background-color: #7E3B20;
}

Everything seems to work on all pages attached to the site, except the font settings. It goes back to default as soon as you navigate to another page. I think I may be missing which class I should be editing. Does the title bar have a selector instead?

Thanks, -Robin

New Code After Answer

/*=============
  Title Changes
  =============*/

.ms-core-pageTitle {  
text-align: center;
background-color: #7E3B20;
}

.ms-core-pageTitle, .ms-core-pageTitle a{
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
color: #ffffff;
}
  • Which class do you see applied when you inspect the page with the developer tools? – teylyn May 17 '16 at 3:54
  • Thank you Teylyn. I just started using dev tools and did not know just how informative it was. Between looking there and Danny's tutorial, I was able to rewrite my code to work and without the "!important" arguments. Last time I did webpages CSS was a new thing, so dev tools on the browser is both amazing and wonderful now that I am supporting a SharePoint site. – Robin Huighe May 17 '16 at 16:21
3

Note: right-click the element in the browser and select 'inspect element' to inspect the CSS in the F12 Developer console


CSS has Specificity, which is a weird word for a simple concept:

More Specified CSS rules determine which selector is applied

So

The account with firstname Robin

is a selector,

and

The account with firstname Robin and lastname Huighe

is more specific, and in CSS terms: has a higher Specificity value

In the Core SharePoint CSS the title is selected with:

.ms-core-pageTitle a {  
  font-family: "Segoe UI Light" ....
}

The a tag inside a class .ms-core-pageTitle

Has a higher Specificity than your

.ms-core-pageTitle {  
  font-family: Calibri ....
}

The class .ms-core-pageTitle

!important

You can break the Specificity by adding !important after EVERY CSS attribute like you have done for the color:

.ms-core-pageTitle {  
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
  text-align: center;
  color: #ffffff !important;
  background-color: #7E3B20;
}

BUT Not only are you making your CSS more complex, you are also breaking any other CSS rules that might be applied later.

If Web-Designers see !important used,
it is a tell tale sign the "Developer" does not understand CSS Specificity

increase CSS Specificity for ms-core-page-Title

Your CSS pageTitle declaration can be made more specific (and thus overrule the CSS that SharePoint Core defined) with:

The a tag, inside a span, inside the class .ms-core-pageTitle

.ms-core-pageTitle span a {  
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
  text-align: center;
  color: #ffffff;
  background-color: #7E3B20;
}

This does not require !important ductaping

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

IDs have higher CSS Specificity

As you see in the screenshot above, there is another way to style the title.

Because the a tag inherits CSS from its parent(s) and IDs count for higher Specificity you can use:

#DeltaPlaceHolderPageTitleInTitleArea {
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
  text-align: center;
  color: #ffffff;
  background-color: #7E3B20;
}

Challenge

What color is applied?

#pageTitle a {
   color:green;
}
#DeltaPlaceHolderPageTitleInTitleArea {
   color:blue;
}

Answer: (mouseover)

The #id reference give the two CSS rules the same Specificity, the last color (blue) would have been applied. But the a tag selector gives the first rule more Specificity, so the color green is applied

iCSS

  • That is awesome. Thanks Danny. After this new knowledge I have gone through most of my CSS and cleaned out the "!important"s. – Robin Huighe May 17 '16 at 16:13
  • You master more now than 90% of people who "know" CSS :-) – Danny '365CSI' Engelman May 17 '16 at 16:18

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.