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:
Thank You! This is wonderful!
Very cool indeed. All this time I've been going into SPD and just zapping it :) This is a much better solution. Thanks.
(except for application pages which have their own masterpage)....
Two master pages .. probably the biggest flaw in sharepoint IMHO.
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!!!
you have helped me eliminate an issue/pain in the butt, using your method. :-) Thanks!!!!
it seems that I don't have SharePoint Designer installed. Is it still possible to edit master pages or add CSS?
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
AWESOME!!! Thank YOU!!!!
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.
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
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!
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
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?
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.
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.
Brandy,
Just be aware that the next service pack, and the upgrade to 2010 may overwrite CORE.CSS.
Mike
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.
Walter,
< How would one replace the existing column heading
Check back over the next few days and I'll put together an example.
Mike
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.
I forgot to say, the graphic is from a higher-level site
Main Site
---> Subsite
----> SubPage - want to hide graphic here.
Thank you.
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
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
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?
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
Post a Comment
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.