Tell me more ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.
up vote 0 down vote favorite

I have a Sharepoint site that is using a custom CSS file (say, custom.css) and applied it to the site's Master Page. I'm trying to modify the "Heading 1" style in the RTE to remove the bold and created a custom definition for the class .ms-rteElement-H1. This works across the site, except for on Web Part pages.

I can't understand why my custom definition is being overridden by one from the "Theme" stylesheet.

In the <head>:

<link rel="stylesheet" type="text/css" href="/company/accesstesting/_catalogs/theme/Themed/9262B884/search-7E1AFF02.css?ctag=0"/>
<link rel="stylesheet" type="text/css" href="/company/accesstesting/_catalogs/theme/Themed/9262B884/corev4-8A0ABD2F.css?ctag=0"/>
<link rel="stylesheet" type="text/css" href="/company/accesstesting/Style%20Library/Access%20Testing%20Custom%20Stylesheets/custom.css"/>

In the <body>:

<div style="" allowdelete="false" class="ms-WPBody" width="100%" id="WebPartWPQ3" haspers="false" webpartid="xxxx">
    <h1 class="ms-rteElement-H1">My Heading</h1>
    etc.
</div>

Result: Firebug inspector is saying that it is taking font-weight:bold from .ms-WPBody h1 definition in corev4-8A0ABD2F.css

Maybe my understanding of CSS inheritance is wrong, but I can't think why that would take precedence over the inline class?

share|improve this question
OK, I found the reason for the problem - CSS specificity: coding.smashingmagazine.com/2007/07/27/… Now I just need to figure out how to get around it... – Caesar Wong Aug 24 '12 at 2:26

1 Answer

up vote 0 down vote

In your "custom.css" create this entry .ms-rteElement-H1 h1 { //your stuff for your custom h1... } Notice the h1 after your ms-rteElement-H1 class name. This CSS selector will now have a higher specificity than the default one, .ms-WPBody h1 { // ms default... } As it refers to the h1 elements under the .ms-rteElement-H1 class.

Hope this helps.

Edit: Sorry should have checked what you did. the selector .ms-rteElement-H1 h1 will not apply to your h1 element. This selector specifies that the CSS will apply to all h1 descendants of the element that has the .ms-rteElement-H1 class. Modified example below would work. Given that you have a .ms-rteElement-H1 h1 { // your properties... } class defined.

    <div style="" allowdelete="false" class="ms-WPBody" width="100%" id="WebPartWPQ3" haspers="false" webpartid="xxxx">
    <div class="ms-rteElement-H1">
      <h1>My Heading</h1>
    </div>
    etc.
</div>

of course you can make it much cleaner and nicer, this is just an example of how you can solve it.

share|improve this answer
Thanks, but the heading style is provided by the Master Page and I don't want to muck around with it. I did noticed thought, that in the Sharepoint default htmleditorstyles.css it defines H1.ms-rteElement-H1 as well as just .ms-rteElement-H1. Putting my custom styles into the former works for sure, because it increases the specificity, but I don't know why that element is broken down that way and hope it doesn't result in any bugs... (can't imagine it would though, since there shouldn't be any other h1??) – Caesar Wong Aug 24 '12 at 3:09
You could also overwrite .ms-WPBody h1 {} in your custom.css file. Then it would only affect pages where you include your custom CSS. No functionality should be affected by you updating text style from bold to non bold. – Robban1980 Aug 24 '12 at 3:35

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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