3/21/2009

SharePoint: Site Title - Change the Font Size, Face or Hide It

 

Just some more little CSS and CEWP tricks…

 

Hiding the title

If you have replaced the site icon (Site Action, Site Settings, Title Description and Icon) with a large banner image you will probably want to get rid of site title.

You could just go into Site Settings and delete the title, but that cause problems down the road with search and site navigation (crumb trail, etc). Better, just make it disappear. Just use this fragment of CSS:

    <style type="text/css">
      .ms-sitetitle h1 
     {
        display:none
     }
    </style>

Note: the “h1" is needed so you also don’t hide the table cell containing the title.

You can either put this in your masterpage just below the SharePoint:CssLink and SharePoint:Theme tags and this will hide the title for all pages in the site (except for application pages which have their own masterpage).

Or… you can put the CSS in a Content Editor Web Part (CEWP). Add the CEWP, edit the properties and click the Source Editor button. Add your CSS and save. This would need to be repeated for each page in the site.

 

Changing the title size or font:

Big site icon and just a little site title? To fix just add this CSS:

    <style type="text/css">
      .ms-sitetitle a 
      {
        font-size:48pt;
        color:blue;
        font-family:"Comic Sans MS"
      }
    </style>

Note: the “a” is needed as the title is enclosed in an anchor “<A>” tag.

Again, you can put the CSS in either the masterpage or in a Content Editor Web Part.

 

Using a Content Editor Web Part

Note that using a CEWP will only update the page with the web part. To update the site title on all pages in your site you will need to add the CSS to the master page.

  • Add a Content Editor web part:

    • Edit Page (from ribbon, Site Actions, etc. depending on the versoin) 
    • Add a Content Editor web part (using the ribbon or web part zone buttons)
    • Click in the web part, click Edit, Modify Shared Web Part, and in the Appearance section change "Chrome" to "None".
  • Add the CSS:

    • Click the Source Editor button
    • Type or paste the CSS

    .

  • 24 comments:

    Anonymous said...

    Thank You! This is wonderful!

    Jim Parker said...

    Very cool indeed. All this time I've been going into SPD and just zapping it :) This is a much better solution. Thanks.

    Anonymous said...

    (except for application pages which have their own masterpage)....

    Two master pages .. probably the biggest flaw in sharepoint IMHO.

    Anthony said...

    This is frikin' awesome. I've been looking for a way to do this for a long long time. Finally got it to work with your method. no more Content Query Web Part BS. Just great. One note, don't use wordpad to edit the dwp. Use sharepoint designer. I luv you man!!!

    Robert K said...

    you have helped me eliminate an issue/pain in the butt, using your method. :-) Thanks!!!!

    Jannis said...

    it seems that I don't have SharePoint Designer installed. Is it still possible to edit master pages or add CSS?

    Mike Smith said...

    Jannis,

    > it seems that I don't have SharePoint Designer installed.

    If you want it, SPD is now a free download from Microsoft.

    > Is it still possible to edit master pages

    You can download the default.master file from Site Actions, Site Settings, Master page gallery, edit it (even in Notepad) and then reupload.

    > or add CSS?

    Yes, you can add a Content Editor Web Part, use it's Source Editor button and put the CSS there. You will need to add this web part to each page where you want to change the site title. That's why the master page is a better choice.

    I'll update the article with info on using the Content Editor Web Part.

    Mike

    Anonymous said...

    AWESOME!!! Thank YOU!!!!

    thomas said...

    Hi,
    I'm not able to get this working in SP2010. I've tried on "full" installation of SP Server and on a SP Foundation. The error is the same - "unknown error".

    It happens when I try to save the page which I have added the duplicate list view / webpart. While I am still in edit mode, I can se the webpart render nicely. I don't know where to start looking for errors :)

    t.

    Mike Smith said...

    Thomas,

    This article is for SP 2007. The design of the page title area has changed a lot for SP 2010.

    See this article for 2010: http://techtrainingnotes.blogspot.com/2011/01/sharepoint-2010-site-title-and-icon.html

    Mike

    Brandy said...

    I was able to use this to effectively hide the site title for the master page but have been unsuccessful in doing so on the page layouts, for example: document libraries, lists, view all site content, etc.

    Do you have any recommendations on which tag controls the site title for the layouts page or how to hide it?

    Thanks!

    Mike Smith said...

    Brandy,

    > but have been unsuccessful in doing so on the page layouts

    In SP 2007 the "_LAYOUTS" pages use their own master named application.master. This file is stored on the web servers at C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS. You cannot directly access this file using SharePoint Designer.

    Keep in mind that any edits to application master will impact EVERY site in every site collection hosted on that server. Otherwise, the same CSS edits will work with this master page.

    Mike

    Brandy said...

    So basically, there is no way of hiding the site title on page layouts without it having an effect on all other sites in the site collection?

    Is it possible to create a new page layout for my site which will hide the site title?

    Mike Smith said...

    The only option is to add some logic to the application.master page that checks for the URL of the page, and if it points to your site then make the changes.

    If your top level site is based on a Publishing template you can go to Site Actions, Site Settings, Master Page and link to a CSS file and see if that works.

    Brandy said...

    Mike,

    I was able to hide the site title on the layouts pages by adding display:none to the ms-sitetitle a in the core.css without touching the application.master


    Thanks for your help.

    Mike Smith said...

    Brandy,

    Just be aware that the next service pack, and the upgrade to 2010 may overwrite CORE.CSS.

    Mike

    Walter said...

    How would one replace the existing column heading with something else; i.e. "Size" with "File Size". I'm not wanting change the column name, just the column header.

    Mike Smith said...

    Walter,

    < How would one replace the existing column heading

    Check back over the next few days and I'll put together an example.

    Mike

    Cathy said...

    This script hid the site title but not the site graphic on a subordinate Report Page. What do I need to do to hide the graphic. Thank you.

    Cathy said...

    I forgot to say, the graphic is from a higher-level site

    Main Site
    ---> Subsite
    ----> SubPage - want to hide graphic here.

    Thank you.

    Mike Smith said...

    Cathy,

    To hide the image area you can try any of these:

    <style type="text/css">
    #GlobalTitleAreaImage
    {
    display:none;
    }
    </style>

    or

    <style type="text/css">
    .ms-titleimagearea
    {
    display:none;
    }
    </style>

    or

    <style type="text/css">
    #ctl00_onetidHeadbnnr0
    {
    display:none;
    }
    </style>

    The first two hide the table cell (<td>) that holds the image, the last one hides the image. The only problem with the last one it that the ID (ctl00_onetidHeadbnnr0) may vary from master page to master page.

    Mike

    Anonymous said...

    Hi Mike,

    I set up a page within a SP2010 site that houses an InfoPath form. I want to prevent any form submitters from being able to navigate to other areas of the site and would like to disable/hide the breadcrumbs, site name, etc. that all link back to the site home page.

    I work for a large company and although I use Designer I cannot use the Advanced Mode nor Slide Master.

    I used a content editor web part to hide the search box but any code I've tried to hide the name and breadcrumbs has not worked.

    Any help you can provide is much appreciated.

    Thank you

    Frank said...

    Dear Mike,
    thanks a lot for your post and from the comments I understand that they have been very helpful.
    I need to change the font size, color and type for the sharepoint title and have absolutely no clue on where to paste the CSS script.
    Can you guide me thru that?

    Mike Smith said...

    Frank,

    Which version of SharePoint (2007, 2010, 2013?) and where are you wanting to add the CSS/JS? (home page, other wiki style page, web part page?)

    The use of a Content Editor Web Part described in the article will work in all of those pages.

    For other ideas see:
    http://techtrainingnotes.blogspot.com/2012/05/adding-javascript-and-css-to-sharepoint.html

    Note to spammers!

    Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.