2

I'm struggling to avoid that sharepoint overrides my bootstrap classes, but unfortunally without succes, I've tryied many solutions found on the web and also in Sharepoint StackExchange, but no good.

My goal is to add a custom navbar made with bootstrap in the master page. My masterpage is just basically a copy of the Oslo masterpage, I try to attach here some of the code of the page:

   <head runat="server">
        <link href="" rel="stylesheet">
        <meta name="GENERATOR" content="Microsoft SharePoint" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=10" />
        <meta http-equiv="Expires" content="0" />

        <SharePoint:SPPinnedSiteTile runat="server" TileUrl="/_layouts/15/images/SharePointMetroAppTile.png" TileColor="#0072C6" />
        <SharePoint:RobotsMetaTag runat="server" />
        <SharePoint:PageTitle runat="server">
        <asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">
            <SharePoint:ProjectProperty Property="Title" runat="server" />
        </asp:ContentPlaceHolder>
        </SharePoint:PageTitle>
        <SharePoint:SPShortcutIcon runat="server" IconUrl="/_layouts/15/images/favicon.ico?rev=23" />
        <SharePoint:StartScript runat="server" />
        <SharePoint:CssLink runat="server" Version="15" />
        <SharePoint:CacheManifestLink runat="server" />
        <SharePoint:ScriptLink Language="javascript" Name="core.js" OnDemand="true" runat="server" Localizable="false" />
        <SharePoint:ScriptLink Language="javascript" Name="menu.js" OnDemand="true" runat="server" Localizable="false" />
        <SharePoint:ScriptLink Language="javascript" Name="callout.js" OnDemand="true" runat="server" Localizable="false" />
        <SharePoint:ScriptLink Language="javascript" Name="sharing.js" OnDemand="true" runat="server" Localizable="false" />
        <SharePoint:ScriptLink Language="javascript" Name="suitelinks.js" OnDemand="true" runat="server" Localizable="false" />

        <SharePoint:CustomJSUrl runat="server" />
        <SharePoint:SoapDiscoveryLink runat="server" />
        <SharePoint:AjaxDelta ID="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">
            <!-- jQuery -->
            <SharePoint:ScriptLink ID="ScriptLink1" Name="~sitecollection/Style Library/jQuery/jquery.js" runat="server" />
            <!-- jQuery FINE -->
            <!-- Custom JS References -->
            <SharePoint:ScriptLink ID="ScriptLink3" Name="~sitecollection/Style Library/customJs/masterReorderer.js" runat="server" />
            <!-- Custom JS References -->
            <!-- CSS & jQuery BOOTSTRAP -->
            <SharePoint:CssRegistration Name="<% $SPUrl:~SiteCollection/Style Library/bootstrap/bootstrap.css%>" After="oslo.css" runat="server" />
            <SharePoint:CssRegistration Name="<% $SPUrl:~SiteCollection/Style Library/bootstrap/bootstrap-theme.css%>" After="oslo.css" runat="server" />
            <SharePoint:ScriptLink ID="ScriptLink2" Name="~sitecollection/Style Library/bootstrap/bootstrap.js" runat="server" />
            <!-- CSS BOOTSTRAP & jQuery FINE -->
            <asp:ContentPlaceHolder ID="PlaceHolderAdditionalPageHead" runat="server" />
            <SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true" />
            <asp:ContentPlaceHolder ID="PlaceHolderBodyAreaClass" Visible="true" runat="server" />
        </SharePoint:AjaxDelta>
        <SharePoint:CssRegistration Name="Themable/oslo.css" runat="server" EnableCssTheming="true" />
</head>

Where I'm getting wrong?

  • Can you refer bootstrap css after the oslo.css? – Atish Dipongkor - MVP Oct 30 '15 at 11:34
  • @AtishDipongkor I'll try straight avay. – FabioEnne Oct 30 '15 at 11:35
  • @AtishDipongkor No good..all my css are inside the StyleLibrary at Site collection level. – FabioEnne Oct 30 '15 at 11:42
  • How did you try? update your code in question – Atish Dipongkor - MVP Oct 30 '15 at 11:45
  • @AtishDipongkor I just moved the references right after oslo.css – FabioEnne Oct 30 '15 at 12:40
1

use in your custom css !important it's overrides others codes

like:

.ms-cui-ribbon { 
    font-size: 12px !important
}

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.