Sometimes Microsoft’s CSS still gets in the way of your own code, either not allowing you to make some changes to colours, or ignoring your colour settings completely. Well, I have yet to fix it for the colouring problem. However, I was facing a similar situation where my links were being displayed too way apart (like a good 14 pixels in between them) when I had set it up to have only like 4 pixels in between each (padding-bottom: 4px). So when trying to find out where the code was coming from, I discovered that Microsoft was using not just the corev4.css but also a few other CSS files. One of these files, the one that was overriding my CSS settings was called ‘controls.css.’ (Note: SharePoint uses even other ones other than control.css; that was the one that was messing up my one site; your case could be different.)
I remembered that in MOSS 2007 we had more than one external CSS files being referenced by the selected master page for the site. In that version of SharePoint, depending on which master page we would select, the number of external CSS files would vary. If you have already been modifying any master page in SharePoint 2010, you already know that it does not come with any external CSS registration inside the <head> tag of the master page. You have to manually insert it. I’m talking about the following line of code for a v4.master page in this case:
<SharePoint:CssRegistration Name="<% $SPUrl:~sitecollection/Style Library/YourCoreFileNameHere.css %>" After="corev4.css" runat="server"/>
That way, you can tell the system to first pull the corev4.css and then yours. But still, Microsoft and SharePoint have a mind of their own and sometimes yet another CSS code or file overrides yours. So I wondered if we could declare more than one external CSS files like we used to do in MOSS 2007 so as to override any other ones that could be overriding ours. And after trial and error, I can say that the answer is yes.
But there is a trick to it: You have to follow a specific order. In MOSS 2007 that order was alphabetical. In SharePoint 2010 is ‘linear.’ (I don’t know which other way to call it.) While working on one of my company's portals I discovered that in that particular case it was not only using the Corev4.css, but I also discovered that under certain circumstances, it was pulling the control.css file. So I had to declared my external CSS files in the order of priority, with the most important one being declared at the top and the least important one at the bottom. For that particular project, I only had two files. And this is how I declared them:
<SharePoint:CssRegistration Name="<% $SPUrl:~sitecollection/Style Library/en-us/Themable/Core Styles/PROJACRONYMcontrols.css %>" After="PROJACRONYMCore.css" runat="server"/>
<SharePoint:CssRegistration Name="<% $SPUrl:~sitecollection/Style Library/PROJACRONYMCore.css %>" After="corev4.css" runat="server"/>
By declaring them in this order, I’m telling SharePoint that I first want it to run its own corev4.css, followed, by PROJACRONYMCore.css, which is followed by PROJACRONYMcontrols.css. This way, I have guarantee that my CSS files are going to pull in the priority I want them to and not the way SharePoint feels like it. It is very important that you pay attention to the order; otherwise, it will not work.
Oh, one more thing. If you have no idea which CSS file Microsoft SharePoint could be using and referencing, use any developer's tools you may have access to. If you are using Microsoft's Internet Explorer, press <F12> on your keyboard. This will open the Developer Tools window. Point to the location on the page where the code is not doing what you want it to do and you will see a blue rectangle appearing on the screen (if you are using IE). Then click and you will see a list of CSS files (in the right frame of the Developer Tools window). The one at the bottom is the one that is overriding yours. Click the link (its name) and it will display the code and you will also know the exact location for the file. Then go to SharePoint Designer, make a copy of that CSS file, (never work on the original files, please), rename it, and then modify the setting that is not doing what you want it to do. Check it in and publish it. Finally, go back to your master page and register the new file along with your other ones and in the order I shared above. Publish your master page and verify in the browser if it’s now displaying things the way you want it to.
I remembered that in MOSS 2007 we had more than one external CSS files being referenced by the selected master page for the site. In that version of SharePoint, depending on which master page we would select, the number of external CSS files would vary. If you have already been modifying any master page in SharePoint 2010, you already know that it does not come with any external CSS registration inside the <head> tag of the master page. You have to manually insert it. I’m talking about the following line of code for a v4.master page in this case:
<SharePoint:CssRegistration Name="<% $SPUrl:~sitecollection/Style Library/YourCoreFileNameHere.css %>" After="corev4.css" runat="server"/>
That way, you can tell the system to first pull the corev4.css and then yours. But still, Microsoft and SharePoint have a mind of their own and sometimes yet another CSS code or file overrides yours. So I wondered if we could declare more than one external CSS files like we used to do in MOSS 2007 so as to override any other ones that could be overriding ours. And after trial and error, I can say that the answer is yes.
But there is a trick to it: You have to follow a specific order. In MOSS 2007 that order was alphabetical. In SharePoint 2010 is ‘linear.’ (I don’t know which other way to call it.) While working on one of my company's portals I discovered that in that particular case it was not only using the Corev4.css, but I also discovered that under certain circumstances, it was pulling the control.css file. So I had to declared my external CSS files in the order of priority, with the most important one being declared at the top and the least important one at the bottom. For that particular project, I only had two files. And this is how I declared them:
<SharePoint:CssRegistration Name="<% $SPUrl:~sitecollection/Style Library/en-us/Themable/Core Styles/PROJACRONYMcontrols.css %>" After="PROJACRONYMCore.css" runat="server"/>
<SharePoint:CssRegistration Name="<% $SPUrl:~sitecollection/Style Library/PROJACRONYMCore.css %>" After="corev4.css" runat="server"/>
By declaring them in this order, I’m telling SharePoint that I first want it to run its own corev4.css, followed, by PROJACRONYMCore.css, which is followed by PROJACRONYMcontrols.css. This way, I have guarantee that my CSS files are going to pull in the priority I want them to and not the way SharePoint feels like it. It is very important that you pay attention to the order; otherwise, it will not work.
Oh, one more thing. If you have no idea which CSS file Microsoft SharePoint could be using and referencing, use any developer's tools you may have access to. If you are using Microsoft's Internet Explorer, press <F12> on your keyboard. This will open the Developer Tools window. Point to the location on the page where the code is not doing what you want it to do and you will see a blue rectangle appearing on the screen (if you are using IE). Then click and you will see a list of CSS files (in the right frame of the Developer Tools window). The one at the bottom is the one that is overriding yours. Click the link (its name) and it will display the code and you will also know the exact location for the file. Then go to SharePoint Designer, make a copy of that CSS file, (never work on the original files, please), rename it, and then modify the setting that is not doing what you want it to do. Check it in and publish it. Finally, go back to your master page and register the new file along with your other ones and in the order I shared above. Publish your master page and verify in the browser if it’s now displaying things the way you want it to.
RSS Feed