SPB usage guide – 2 Configuration and Modification

Branding, SharePoint 4 Minutes

SPB usage guide – 2 Configuration and Modification

This is the guide on how to install and use the SharePoint Branding Project.
Download: Visual Studio gallery

The guide is devided into three parts:

1 Download and Installation

2 Configuration and Modification

3 Deployment and verification (soon to be released)

In part 1 of this guide, we left off at the new project dialog:

In the categories, select C#, SharePoint, 2010 and SharePoint 2010 Branding Project.
Name the project(This name will also be the name of the SharePoint Feature), select its file location and Click OK.

Clicking on OK will create a new project for you in Visual Studio, the project will be a complete branding solution ready to deploy or package and install to a SharePoint 2010 farm or even an Office 365/SharePoint online tenant.

The first thing that you will see is the SharePointBrandingProject in the solution explorer:

The solution will by default have a number of components and functionalities.

Custom SPB Masterpages for:
Team sites MyBranding.master, equivalent to the general V4.master.
Meeting Workspaces MyBrandingMWS.master, equivalent to the general MWSDefaultV4.master.
Team sites MyBrandingMinimal.master, equivalent to the minimal.master.

Custom SPB StyleSheets:
MyStyles.css, Contains styles for basic look and feel for most sites and is used in all masterpages.
MyStylesMinimal.css, This is an additional stylesheet loaded and used when the MyBrandingMinimal.master is loaded.

Custom logo:
logo.png
Custom Favicon:
favicon.ico

Custom Eventreciever:
ChildSiteInit, This handles the web provisioned event to apply branding on new subsites.

Custom Feature:
Main, This feature applies the branding to the rootsite and all subsites.

In order to deploy this solution directly from Visual Studio to your test site, enter the url of you site collection in the project properties:

Now you are ready to deploy the solution to SharePoint with the default branding. The default branding is good looking and all that, but perhaps you want to make a few changes first? I would however recommend that you try the deployment so that you can verify that everything really works and that you have the permissions needed and so on. After successful trial deploy and complete awe for the good looking SHarePoint you made for yourself, it is time to start changing the branding.

First thing you will want to do, is replace the logo and favicon(if you did not know this, the favicon is the small tiny image that is located to very left in the address field in your Internet Explorer browser(I guess FF and others too). The favicon is loacated in Solution Explorer in the Images folder under the Style Library/My Branding/Images/
You can replace this file with a new favicon using the same name, but it must have the same properties: 32×32, a 24bit bmp .ico file. There are applications that are made just for the purpose of creating icons available. Or there is a plugin to PhotoShop available if you have access to PhotoShop (ICO (Windows icon) plugin). You can also edit the icon right here in Visual Studio but that is probably not for the thorrow artists…

Same story with the logo, it does not have the same rigorous restrictions on the size and type, but it should be close to what is the default size, use a too big or small image and you will have to make adjustments to the master/Stylesheets to compensate.
The logo can be edited in Visual Studio but that is not something that you do, use a proper image editing application, or simply adjust you current company/Organization/Customer logo to fit. I will now show you how you replace the default logo file with your own custom logo:

The current logo, logo.png – 120×120.
Delete the default logo by right clicking on the imagefile in the solution explorer and Click Delete:

Click OK in the confirmation dialog:

Now the logo file is deleted and we have to replace it with our new custom logo file. For simplicity, use a PNG file if you have one (if you don’t, use another file but then you will HAVE to edit the feature that adds the logo to the site).
To add the image, Right Click on the Images flder in solution explorer, then select Existing Item and Add:

Browse to your logo file in the explorer window, it can be located locally, or on a fileshare somewhere. Select the file and Click Add:

Now the imagefile is added, in my case I have found a wonderful logo from back in the days, when SharePoint 2001 was the talk of the town. SharePoint Portal Server 2001 had a pretty mean logo, this is what I’ll be using in my demo. See this guide part 3 for a presentation of that logo in action.

For the branding project to recognize the image as the logo, it will have to be renamed to logo.png (unless you used another fileformat or if you want to edit the feature to fit anyway).
Right Click on the Image in the Solution explorer window and select Rename.

Beautiful! The solution is again ready to be deployed:

Before we deploy the solution, I want to just quickly show you the basics of how you edit the real source of the branding solution, the master pages and the stylesheets. What you do is that you in Solution explorer, Double Click on the master or stylesheet you want to edit or look at. Try that and you will see something like this for the master:

And this if you Double Click on a StyleSheet(css)…
Did you know that CSS actually stands for Cascading Style Sheets, Cascading comes from the order in which they are applied, the classes in the last css to be applied overruns the previous even if they contain the same classes.

Now we are ready to deploy. So, how do we do that? From Visual Studio, you simply do it in a few Clicks, or really, its just two Clicks away.
Right Click on the Project in Solution explorer, Click Deploy.

Verify that the deployment went ok:

In my case, it did! Happy happy! Over to the browser and verify the new look and feel, go to the site, if allready there, refresh the page.

This is what my site looks like with that beautiful replaced retro logo, don’t you just love it?

In the next section of this guide, I will show you what the branding does and what you will see in the browser ‘onsite’.
The next part is called:

3 Configuration and Modification (soon to be released)

See also the previous part:

1 Download and Installation

Stay tuned!

Enjoy!

Regards

Twitter | Technet Profile | LinkedIn

 

Published by Thomas Balkeståhl

Yup, this is me!

Published

44 thoughts on “SPB usage guide – 2 Configuration and Modification”

  1. Pingback: SPB usage guide – 1 Download and Installation « blksthl

    1. Hi.
      You would have to be a site collection administrator in order to deploy the solution to a site collection. You can add a user to that group either by adding the user as the primary or secondary site collection administrators in Central administreation, or by adding a user to site collection administrators from the site settings in the site collection root.
      Regards
      // Thomas

      Reply

    1. Hi Ole.
      No, it will not right out of the box. But, if you modify it a bit..
      Create a copy of the mysite.master that is available in SharePoint 2010 (using SPD?) then add it to this solution under the MasterPageGallery ‘folder’.
      Next, add an ‘if section’ to the main.eventreciever.cs and the childsite init that sets the mysite.master as master for sites created on the SPSPERS sitetemplate (Mysites).
      Use these for reference:
      Changing the Master Page on SharePoint 2010 My Sites
      http://blogs.technet.com/b/speschka/archive/2010/07/02/changing-the-master-page-on-sharepoint-2010-my-sites.aspx
      Customize your My Site master page
      http://office.microsoft.com/en-us/sharepoint-designer-help/customize-your-my-site-master-page-HA102752026.aspx

      Good luck.
      Regards // Thomas

      Reply

  4. I can see the difference now. The first case is when new Sites is being provisioned, the second case is turning on/off the custom masterpages when activating/deactivating the feature.

    Reply

    1. Hi Kjaps. You got it, one is for feature activation, one is for site creation.
      If I did not have both, new subsites would not get the master and such applied.’
      Regards // Thomas

      Reply

    1. Hi.
      The solution is not a perfected appliance, it will have to be modified by every user so that it fits their needs.
      I chose to disregard the if check on deactivation since I could live with it, for others, deactivation usually is followed by a new activation setting the masters back to the correct one.
      Thanks for all your feedback.
      Regards

      Reply

  6. hi can you please help mine doesnt work.it shows this error The expression prefix ‘SPUrl’ was not recognized. Please correct the prefix or register the prefix in the section of configuration.im running on sharepoint foundation 2010

    Reply

    1. Hi Drix.
      No problem, the reason you get that problem is because Foundation does not have the publishing features, and SPUrl is a publishing feature.
      I have added code in the readme.txt to circumvent this, the places with SPUrl has to be replaced with workaround code.
      A lot of time went into doing that…so please pay me back by submitting a rating at the gallery site.
      Regards // Thomas Balkeståhl

      Reply

      1. Thankyou very much.another question though.how do you activate drop down menu in foundation?is it possible or it only works on server??

  7. Hi,

    I want to try this to our sharepoint 2010 Online site but I got this error when trying to deploy.

    “The type or namespace name “Sharepoint does not exist in the namespace Microsoft (are you missing an assemble reference?” – “File – ChildSiteInits.cs”

    I’m new with Sharepoint 2010 Online / 365 and VS2010 development I wonder if you could give me a hand to this..

    Your help is very much appreciated!

    Ad

    Reply

    1. Hi Ad.
      I have to check, I have used this solution myself in SharePoint online without any major issues. Perhaps there could be something with the latest update…?
      I’ll et back to you on this.
      Regards // Thomas

      Reply

    2. Hi Ad.
      I think I got this one now…you said you tried to deploy…you have to package it as a wsp, upload it to the solution gallery and then activate it. You can’t remote deploy yet to anything (thats solved in the coming Visual Studio 2012).
      Instead of deploy, select package, then you will fins the wsp in the projects folder, projectname, bin, debug, projectname.wsp.
      I hope this helps?
      Regards // Thomas

      Reply

  8. hi thomas thankyou i got it to work.
    another question though how can i put drop down menus?i cant seem to make it work on my sharepoint foundation.from what ive read on other forums drop downs can only work on servers not the foundation is that true or is there a way to make it work??

    Reply

  9. Thankyou very much.another question though.how do you activate drop down menu in sharepoint foundation?is it possible or it only works on server??

    Reply

    2. Hi Drix.
      Have spent some time on looking into this, I alsways forget the differences in Foundation, basically because I spend to little time in Foundation.
      You are correct, the simple answer would be that No, SPF does not have dropdowns or dynamic navigation. It has the toplinks setting which is very rough and static.
      The more complex answer, is that oob in foundation there is no way to have dropdowns or to configure the global/top navigation in more levels than one but using code there is. I will not give you a complete answer, I have none to give, but, this thread on Tehcnet gives you a lot.
      http://social.msdn.microsoft.com/Forums/lv/sharepoint2010general/thread/99adf6d5-0c06-48f1-8c81-f44623494597
      Look at Becky’s answer and if you follow the first link, you will find a list of how to’s and walkthrough’s on the ASP.net sitemap provider that is what yoy would need to customize. It is doable, but takes a bit of dev skill and time.
      Hope that helps?
      Regards // Thomas

      Reply

  11. Works great now Thomas!

    Thanks alot for your time and for sharing this!

    You are the MAN!

    I’m looking forward for the Configuration and Modification!

    Ad

    Reply

  12. Hi,

    If I login with another user, there will be an error like this “http:404, file not found”. How can I resolve this?

    Reply

    1. Hi Zhaoshuo.
      I’m guessing here, but it could be that you rsource files, master and images, have entered a checked out/unpublished state. CHech those in the style library and publish them all. It could also be due to a misspelled filename or path.

      Reply

  13. Thomas

    I seem to be having untold difficulties simply deploying the base solution after downloading it thereafter I will be applying my changes.

    1) I ran vs2010 as admin then just build, package, deploy. I get Error “1 Error occurred in deployment step ‘Add Solution’: Sandboxed code execution request failed.
    0 0 SharePoint2010Branding ”
    Take a peek at the ULSLogs and I get the really helpful(!)
    – – Sandboxed code execution request failed. – Inner Exception: System.InvalidOperationException Server stack trace:
    at Microsoft.SharePoint.Utilities.Verify.DoFailTag(UInt32 tag, ULSCat category, Type type, String format, Object[] args)
    at Microsoft.SharePoint.Utilities.Verify.IsTrueTag(UInt32 tag, ULSCat category, Boolean expression, Type type, String format, Object[] args)

    hmmmm Oh well as this is a new dev VM I have been given I thought maybe there is an issue with it. I am site collection admin and Farm Admin,

    Ok, ime for plan B. Open sp2010 admin shell ( as administrator)

    PS C:\Users\Daniel> Add-SPSolution -LiteralPath ‘C:\mypath\SharePointBrandingTemplateProject.wsp

    Name SolutionId Deployed
    —- ———- ——–
    sharepointbrandingtemplatep… 09baf3d7-d43b-4605-8474-d818137b7751 False

    Hmmm well if it is not deployed on the farm I won’t be able to install it at the webApp level.

    Any ideas please?

    Reply

    1. Hi.
      I can think of two things…
      First, make sure that you have the ‘Microsoft SharePoint Foundation Sandboxed Code Service’ Service running in the farm. Since the Project by default is set to run as a Sandboxed solution(req for online etc.), this has to be started first.
      Second, perhaps one edition to the master did something that is not allowed in sandboxed code? Like any direct reference to files on the filesystem…

      Try that and see where you end up?

      Reply

      1. Thomas

        1)Early on yesterday I realised the Sandbox code service was not running so I this was started before I have seeing this issue. Last night I also tried the downloaded project on my personal sp2010 Ent farm and saw the same issue. In this case the service was already started

        2) Just get the SBP working I am not using my custom stuff just your newly downloaded vanilla project.

        To get my demo working I have just doing my prototyping in SPD but I will need to show that my masterpage can be deployed via a feature.

      2. Hi.
        I’m sad to see that you are having difficulties, I have not seen these issues Before and have not Heard them from anyone else. In a Vanilla 2010 farm, it will deploy…
        Could it be that you have 2010 Foundation?
        Or that you are running on Windows 7?
        Sorry but I don’t have any better advice to give…
        Regards

  14. Thomas, Yep it is strange. I am using sp2010 Ent of win2008R2 in all cases and no changes to your code other than host url. I will try today to go back and check that admin permissions that were previously set up and also try another sandboxed feature. I never had this much with a farm scoped solution lol!

    Reply

    1. Ok Daniel.
      Moving forward…:-)
      Try again if you have the possibility, create a fresh site Collection and use a Team Site(STS#0) as the site template. Then, try again the vanilla SPB and deploy.
      Step 2(if needed) Try and activate the Publishing feature on the site Collection level, then deploy again.

      Thats what I can think of…no wait. Check your URL. if the AAM’s and bindings are screwed up, it will fail as well.
      Regards
      // Thomas

      Reply

      1. Thomas,

        I had to revisit this for another project and can report that it does deploy in a new sc with publishing infrastructure feature enabled. MyBranding.Master when set as the default master works fine.

        Now I want to apply my custom styles to the MyBrandingMinimal.master. like minimal master this gives a few missing Placeholders errors, viewed in ULSViewer, when set as the default master. I have been busy adding PlaceHolders: PlaceHolderMiniConsole, PlaceHolderTitleRightMargin, and PlaceHolderBodyRightMargin.

        The one that seems the most problematic is PlaceHolderDescription because if don;t place it anywhere I get an error and if I do I get System.ArgumentNullException: Value cannot be null. Parameter name: ribbon
        at Microsoft.SharePoint.WebControls.RibbonTrimmer..ctor(SPRibbon ribbon)

        Did you have any issues with MyBrandingMinimal.master.

      2. Hi.
        Actually, no. But remember, the minimal master is only intended to be used with the sitetypes that normally have the minimal master. Like search center and some other. I added for fun a minimal navigation to it because the search center don’t have one by default.
        If you have configured it for a ‘normal’ site like a team site, then it will cause errors.
        The regular master is for regular sites and the minimal is for minimal sites. There is no mixing between them.

        Does that answer your question?
        Best regards
        // Thomas

    1. Hi.
      It is good…:-)
      Currently, I have not converted it to VS2012 but it is on my todo list. WIll let you know once it has been done and a new version is published. Ok?
      Regards // Thomas

      Reply

  16. Thomas, Yes it does ( doh!). I wanted to a fairly blank canvass but thin case I carry on customising mybranding.master and hide the bits the client does not want visible. Thanks.

    Reply

  17. You are Da Man, Thanks for such a wonderful article and step by step detailed info. It’s great help for people with admin back ground to step in to development world.
    I will look for more articles like this. Once again thanks …

    Reply

Leave a reply to Drix Cancel reply