I am creating horizontal menus for a web part to give more interactive navigation options to a corporate SharePoint site that has headers/Branding etc. locked down.
I notice that intended colors and formatting are overridden by master CSS formatting. In particular when I come in the next day. The cache gets cleaned and I end up with something completely different.
Is there a way to prevent any inheritance of any master page formatting?
How are you registering your own CSS Reference? I bet you are using a normal
<link href="/style.css" type="text/css" />
Am I right? If so, that is completely the wrong way in the SharePoint world.
The following line will solve your problem:
<SharePoint:CssRegistration ID="MyCustomCSS" name="/_layouts/SomePath/MasterStyles.css" After="corev4.css" runat="server"/>
Specifically, the After="corev4.css" part states that your stylesheet should be listed AFTER the core stylesheet.
Once that is in place, the "CASCADING" part of Cascading Style Sheets takes over. If you're still having issues, remember to add !important to override core styles.
You cant specifically prevent inheritance of mastpage css, to understand you correct you have corev4 or corev5 that runs its css and then you have the masterpage css that runs after. In your case you have also a webpart that has styles that you want to be specific?
If its a custom webpart why not add the css file to the project and add this code to the main .cs:
protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
try
{
writer.Write(BindStyle("/_layouts/webpartname/css/Styles.css", true));
}
catch (Exception a)
{
}
base.Render(writer);
}
private string BindStyle(string StyleUrl, bool PickFromSiteCollection)
{
try
{
if (PickFromSiteCollection)
StyleUrl = Microsoft.SharePoint.Utilities.SPUrlUtility.CombineUrl(SPContext.Current.Site.RootWeb.Url, StyleUrl);
else
StyleUrl = Microsoft.SharePoint.Utilities.SPUrlUtility.CombineUrl(SPContext.Current.Web.Url, StyleUrl);
return string.Format(@"<link rel=""stylesheet"" href=""{0}"" type=""text/css"" />", StyleUrl);
}
catch (Exception a)
{
}
return string.Empty;
}
the only part you need changing is:
"/_layouts/webpartname/css/Styles.css"
within your project you need to link to the layouts folder and within that folder create a new folder. You can call it what you want, for me i would call it the webpart name... then the css folder and finally add your css file. change the above according to how you added in the folders!
that code will add the css file for you, another method would be (within overriden createchildcontrols or pageload event):
Microsoft.SharePoint.WebControls.CssRegistration.Register("/_layouts/webpartname/css/Styles.css");
now when you create any object give them some custom css class and add it to the css file.
now what if you have a default sharepoint table that you want to style that is styled by corev4.css or any other default sharepoint css? well you would use f12 developer tools and inspect the element within the browser to get the controls css class, you can then add the css class to your custom css file and do what you want. It will overwrite leaving you with your custom styles intact only for that page where your webpart is stored!
