Apply custom css to Sharepoint 2013 masterpage

Question

My Question is how to apply custom css to sharepont 2013 masterpage properly. I want to customize global navigation which is working when i doing like this way: Site settings -> Under Look and Feel Master Page -> Alternate CSS URL -> "Specify a CSS file to be used by this site and all sites that inherit from."

Result:

But my goal would be to create my own masterpage(copy of seattle.master) which contains my custom Css file via Sharepoint CssRegistration. If i do this the corev15.css going to overwrite my file and the navigation bar will fall apart.

I've tried this:

 <SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/Style Library/Custom/Blue.css %&gt;" runat="server" after="SharepointCssFile" />

or:

 <SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/Style Library/Custom/Blue.css %&gt;" runat="server" after="corev15.css" />

For Sure the Cssregistration is working but the corev15.css overwrites everything. Any ideas how could i bypass corev15.css?

Thanks in advance, bfrenky01

Answer 1

Although your desired approach isn't recommended (it would be better to override the corev style sheet) you could use Sharepoint designer, copy the corev (so you can roll back if needed) and simply edit the original.

I would recommend also you visit Heather Solomons website, as it is a great resource for all things Sharepoint branding. Heather Solomons website

Answer 2

I would suggest to overwrite inside your blue.css, every sharepoint class that you are not satisfied with.

In term of design, some main component of sharepoint must remain in your file design, at least for the people that will edit the pages, such as ribbon CSS etc.