2

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?

1
  • Try changing CssRegistration for link tag with the absolute URL and see what happens:link rel="stylesheet" type="text/css" href="yourcss.css" Feb 4, 2015 at 15:47

4 Answers 4

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.

1
  • I've added details on my syntax in the question, likely there is something not correct because I get "Sorry, something went wrong" and I am forced to reload the default template to get ito work again in Designer.
    – Matt
    Feb 4, 2015 at 15:09
1

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.
2
  • how do you access the Seattle.html? I created a file called mycustommaster.html and copy/pasted the exact same code from seattle.master to it, just to see if it would work. But after uploading this file to SharePoint and trying to implement it, I get a bunch of errors.
    – Matt
    Feb 4, 2015 at 18:28
  • It cannot be a edit paste...this will not work; and you cannot use the seattle.master as it is and not going to work if you copy paste. As all masters in SharePoint 2013 are now rendered by html markup. So, you will need to open the directory they exists on and copy the seattle.html (template) and rename. By doing this when you use this new copied seattle.html you will get a {mycustommaster}.html and {mycustommaster}.master Apr 1, 2015 at 21:43
1

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

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.