overriding core.css when using a master page

Question

Hi everyone,

I'm currently developing some websites as part of my internship for a multi-national company. This means portalsite and masterpage have already been created, and I cannot modify anything about them. I would like to have a little more control over the look & feel of the pages I create under this masterpage. I've looked around on the web for an answer to no avail, so I decided to try my luck here.

I'll try to sketch the situation as good as I can.
http://img195.imageshack.us/img195/8783/picnnb.jpg - here is what it looks like (I know it's very basic, I've never done this before). Basically I can edit the content in the quick links by creating sites and pages and editing those. These are always based on the master page they've created.

question:

Now, if for example, I wanted to edit the .ms-WPTItle property to make it look a little better, how would I do this ? I can't edit the core.css (nor do I want to). But would it be possible to create a custom .css file that overrides the core.css where needed ? Or am I forced to use in-line styles ?

Answer 1

Yes, you can create a custom CSS file. I don't know how much flexibility you are being given by you SP Admins though...

To override with a custom css file, you go:
Under look and feel in the site settings choose Master page, then at the bottom you can give an alternative css. Put the path to the file there then voila. That CSS will be applied and override core.css.

You may not have permission to do so...

Also, check out www.heathersolomon.com for lots of good tips on overriding styles and such.

Answer 2

You don't want to know how long I've looked for this.

Thanks a lot !

EDIT: I linked the CSS file, but the pages still look identical. I'm guessing I don't have enough rights ?

Answer 3

Hm, I'm not sure why that would be. Make sure the custom CSS file is published is the only thing that comes to mind right away.

Answer 4

If the core.css is still being referenced in your master page and the custom.css file you've attached doesn't override that style, you'll still see the pages rendering with the style defined in core.css. If your custom.css is going to define that style for the .ms-WPTItle style, I would make sure you are copying over the entire group of styles for the web part titles. There are several.

Heather Solomon's site does list them out, or you could open up the core.css, copy them over into your custom.css, change the styles w/o deleting any of them, i.e. don't copy over the styles and just simply remove the lines you don't want. If you want to remove the border or background, say border: 0px, don't just delete the border:... line completely, then it will read back to core.css and use that style for the border that IS defined. So, if you copy the styles into your CSS, modify them, and save, your page should render w/ the right styles you're trying to have for the Web Part titles or chrome area.

Hope that makes sense!

Answer 5

All default CSS comes from  core.css. So here you want to remove dependencies of core.css

SO what you can do is, open master page in Sharepoint Designer . And their you will find

<SharePoint:CssLink runat="server"/>  This statement includes core.css and other default css to master page. so you have to customize this tag.. 


 <Sharepoint:CssLink>
  <link rel="stylesheet" type="text/css" href="style path">
 </Sharepoint:CssLink> 

copy whole core.css into  your css. and give path in href.

So then you will customize as you want. because . master page is referecing new css, not core.css


Regards,
Milan

Answer 6

"This means portalsite and masterpage have already been created, and I cannot modify anything about them. I would like to have a little more control over the look & feel of the pages I create under this masterpage..."

If the master page cannot be opened, best case scenario is to make sure you custom.css file overrides what's being formatted in the core.css.

This solution won't work b/c according to lykmeraid the master page cannot be opened/modified.

I still think finding the original styles for WPTitle is your best bet in this scenario. Look at this chart to find all wp-related styles you'll need to include in order to override core.css:

http://www.heathersolomon.com/content/sp07cssreference.htm#WebParts

Answer 7

I wouldn't ever copy all of core.css; you'll never be able to manage your changes.  Read through my blog post here:
http://mdasblog.wordpress.com/2007/08/08/sharepoint-2007-moss-branding-css-tricks/
for some things that I've found to be "best practice", having done quite a lot of branding.

M.

---

Marc D Anderson - Sympraxis Consulting LLC - Marc D Anderson's Blog

Answer 8

you can also add your custom style sheet.

If you will change in core.css it willl reflect everywhere across sitecollection.  i give you one scenario if you using SPGridView in your custom webpart,

Then SPGridview inherits css from core.css, so in that aspect if you will change class in core.css, it will reflect in list and document library, because logical container you see in List and Document libarary or any other container uses SPGridview.

 So it depends you . about what you want to achieve. IF you using default class  from core.css , then i suggest you to create new style sheet and inherit that style sheet master page. and add custom class tag and call it where you want

Regards,

Milan.

Answer 9

Yes, I agree and was NOT recommending making any mods to the core.css, since the poster said they couldn't do that in the first place. In this case they CANNOT open the Master Page or the core.css. So, there can be no mods to the core.css, which means no worries for making changes to the entire site collection.

And definitely do NOT think you should copy ALL the core.css styles, obv that would be a little much! However, if what I'm reading from the original question is correct, they are looking to change, specifically, the wp-title styles, those are part of the web part styles. Copying and modifying those styles into the custom CSS should do the trick.

There is no risk in adding the applicable styles for the web parts themselves. The custom CSS file just needs to contain those WP styles in order to override what's coming from the core.css

It should do the trick.

Answer 10

This my current custom.css file. I copied most of it from Heather Solomon's blog. I added the green background as a test. When including this CSS in site settings -> master page I get no changes.


.body {
background:green;
}

.ms-WPHeader TD {
border-bottom:1px solid #4e7cb7;
border-collapse:collapse;
}

.ms-WPTitle {
font-weight:bold;
color:#4c4c4c;
padding-left:3px;
padding-right:7px;
padding-top:2px;
padding-bottom:2px;
font-size:10pt;
}

.ms-WPTitle A:link,.ms-WPTitle A:visited {
color:#4c4c4c;
text-decoration:none;
cursor:pointer;
}

.ms-WPTitle A:hover {
color:#000000;
text-decoration:underline;
cursor:pointer;
}
 
When I check out the source of the page:

<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D"/>
 <link rel="stylesheet" type="text/css" href="/mylocation/BE03/Custom%20style/custom.css"/>

So my custom.css is getting loaded after the core.css, yet I don't see any changes in the output.

EDIT: a few lines down, another css file is referenced, made by the company. So I'm overriding core.css, but not the company.css ... I'm guessing that's where my problem lies. I have no idea where this has been defined, however.

Thanks for all the helpful replies so far!

PS: I can open the master pages, see the code, but I can't alter anything in them.

Answer 11

I checked out the company.css file.

/* SHAREPOINT CSS OVERRIDES */
/* CORE.CSS OVERRIDES */
html, body { height: 100%; margin: 0; padding: 0; }
body { width: 1000px; background-color: #FFFFFF; }
.ms-siteaction { position: absolute; top: 0px; right: 0px; z-index: 1; width: 96px; height: 18px; }
.ms-pagebreadcrumb { display: none; }
.ms-PartSpacingVertical { font-size: 1pt; margin-top: 0px; }
.ms-WPBody { font-size: 8pt; font-family: verdana, arial, helvetica, sans-serif; }
.ms-WPBody A:link, .ms-WPBody A:visited { color: #003399; text-decoration: none; }
.ms-WPBody A:hover { color: #000000; text-decoration: underline; }

The rest of the code in it defines the layout of custom webparts and the likes, it shouldn't interfere with the changes I'm trying to make.
So i'm still puzzled why this isn't working.

Answer 12

Hi lykmeraid,

 

I assume you already know how to change the alternate CSS URL in Site Master Page Settings.

 

If the changes you made are not obvious, I suggest you making some obvious changes, like the code below.

 

.ms-WPTitle

{

font-weight:bold;

font-style:italic;

color:#4c4c4c;

padding-left:3px;

padding-right:7px;

padding-top:2px;

padding-bottom:2px;

font-size:10pt;

}

 

.ms-WPTitle A:hover

{

color:#000000;

text-decoration:underline;

cursor:pointer;

font-size:20pt;

}

 

body

{

background:green;

}

 

@import URL(“CSS_URL”)

 

Please not the highlighted part, the change I made in .ms-WPTitle makes the title italic and the change in .ms-WPTitle A:hover makes the title grow bigger when mouse hovering.

Please also notice that it’s “body”, not “.body”, that changes the background of the site.

You can also import your other CSS in import clause.

 

It works fine in my environment.

Please check the screenshot:

Answer 13

Is it possible for you to add your webpart styles to the bottom of the company.css file?? If you can, try that, save it, refresh and see if it fixes the issue.

Answer 14

Hi ,

I was facing the same issue , i want to override the core.css , the solution is very simple

<SharePoint:CssLink runat="server"  id="CssLink1"/>
        <link rel="stylesheet" type="text/css" href="/sites/Style%20Library/customcss.css"/>

so when your page render you will see

<link
 rel
="stylesheet" 
type
="text/css" 
href
="/_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D"
/

>

<link
 rel
="stylesheet" 
type
="text/css" 
href
="/sites/Style%20Library/customcss.css" 
/

so by doing so you will override core.css