How to implement a custom banner in SharePoint

Question

I'd like to start off by saying I'm not a programmer, so this task is proving difficult for me.

My client wants me to place a banner at the top of a Sharepoint 2013 site collection, which from my research means I need to modify the master page, like in this example.

These instructions are for 2010, I am trying to do this on 2013.

The image banner is currently 1307 x 400 pixels, but can be resized.

I've gathered that my current default style is using the seattle.master, and corev15.css is being used with this. An issue I am having is accessing corev15.css. In SharePoint Designer 2013,this document is nowhere to be found under the "All Files" section, but going to the web address others have linked does supply a download for the file. The only issue is that I can't put the css file back because I can't seem to access it's containing folder.

I feel the best solution is to use a secondary css file and have the master page utilize both.

Question: How exactly would I go about getting this to work? I want my banner image at the top, as in the example posted, and I need to be able to do it without modifying corev15.css. Everything I have tried so far has failed, though it's likely due to my inexperience with HTML.

Please let me know if further details are needed, I'm stumped on this.

Here is the syntax currently in use in my seattle.master:

<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server" />
<SharePoint:CssRegistration Name="sites/GND/SiteAssets/newcss.css" runat="server" />
</head>

I have a css file called newcss.css and a banner.jpg image. Here is the syntax for the newcss.css:

s4-title {
 background:white !important;
 background-image:url(sites/GND/SiteAssets/banner.jpg) !important;
 background-repeat:no-repeat!important;
 background-!important;
 min-height:100px !important;
}

When I save these two files I get the "Sorry, something went wrong" message. I know my syntax is likely wrong, could someone help me correct it?

Answer 1

My recommendation would be to:

1. Create a CSS file with the styles you need and upload to a Document Library (Site Assets, Style Library, etc.)
2. Edit the Master Page "seattle.master" with SharePoint Designer.
3. Reference the CSS file you created
4. Add the necessary markup to reference the banner image you need
5. Save the Master Page

From there on, if you neeed to tweak the styles you can do it in the new CSS file you uploaded, either with SharePoint Designer or by editing offline an re-uploading to the library.

Answer 2

You cannot edit master pages directly in SharePoint 2013 - you will need to edit the Seattle.html (which is a tokenized masterpage). This will allow you to add the appropriate css etc into the masterpage. However, I would suggest the following:

1. Copy the Seattle Master into a new Masterpage.
2. After you copy the Seattle Master to (MyCustomMaster.html), edit once with design manager
3. Check the newly created masterpage (html) out and edit...until you get what you need.
4. Check In and publish.

Answer 3

I suggest you create a mapped drive to the /_catalogs/masterpage directory (if possible).

1. Open the /_catalogs/masterpage directory (explorer preferred)
2. Copy the Seattle.html, so it will create new version and then rename it.
3. After renaming to mycustommaster.html you can now edit with SPD.

SPD = SharePoint Designer

Answer 4

Edit Seattle.html file in SPD or any other editor. Simply add a link to the css some thing like below: <link rel="stylesheet" type="text/css" href="newCSS.css"> Or you could also paste the your CSS in the style tag in the head of html page

<style>
s4-title {
 background:white !important;
 background-image:url(sites/GND/SiteAssets/banner.jpg) !important;
 background-repeat:no-repeat!important;
 background-!important;
 min-height:100px !important;
}
</style>

Once you will check-in the html, it will automatically impact your master page.