Curious what you can do with an ID on the body element? You could change the layout depending on what site or subsite you are. I also used it to change some styling only when in edit mode. A very powerfull trick. Waldek Mastykarz wrote a nice article about it here.
February 2nd, 2010
Video’s of the SharePoint Connections 2010 available at http://channel9.msdn.com
Some examples of interesting video’s:
- SharePoint 2010 UI Customization by Marianne van Wanrooi
- Silverlight and SharePoint 2010: Better together by Jan Tielens
- Web Content Management in SharePoint 2010 by Donald Hessing
- Introduction to SharePoint Designer 2010: Top 5 great Things to Know by Asif Rehmani
- Building Better User Interfaces by Jason Beres (DevDays 2009)
- Whats new in Silverlight 3 part 2 by Mike Taulty (Devays 2009)
Or read more about:
April 21st, 2008
Once there was a customer who wanted to place any image on top of the content, underneath the header. But only on the homepage. And the breadcrumb must be visible underneath the image. And if there wasn’t any image defined, a default image should be showed.
So, what I needed was a webpartzone inside the masterpage, so that there could be
a image webpart above the breadcrumb. To do this, you mast place a contentplaceholder
inside the masterpage. In the pagelayout then, you can define that inside that contentplaceholder
must come a webpartzone. Like this:
masterpage:
<asp:ContentPlaceHolder ID=”leftBottomMenuPlaceHolder” runat=”server”>
</asp:ContentPlaceHolder>
pagelayout:
<asp:Content runat=”server” ContentPlaceHolderID=”leftBottomMenuPlaceHolder”>
<WebPartPages:WebPartZone
runat=”server”
AllowPersonalization=”false”
Width=”100%”
FrameType=”TitleBarOnly”
title=”leftBottomMenuPlaceHolder”
id=”leftBottomMenuPlaceHolder”
orientation=”Vertical”
QuickAdd-GroupNames=”Search”
QuickAdd-ShowListsAndLibraries=”false”>
<ZoneTemplate>
</ZoneTemplate>
</WebPartPages:WebPartZone>
</asp:Content>
I also placed a div around the contentplaceholder inside the masterpage, so that I
could say by css:
Set the background-image and make the height 20px, the height of the default image.
If the image added by the customer has a bigger height, it will scale and the default
background-image won’t be visible.
Customer happy, I happy.
April 18th, 2008
Some time ago I did a post
about using background-images in your site design. I advised to add an extra div,
which started after the body tag and before the aspnetform, and would end after the
closing tag of the aspnetform.
This, however will cause another issue, that is small
frames in the edit mode. I did a post on that one to.
So to come back on how to go, and what’s the best approach, I’d say it’s better to
just add an id-name to the body tag. This way, any RTF-editor will render any styling
attached to the body tag, but it won’t render any properties of the body tag with
that particular id-name.
Tadaa!
Thx Kwok!
April 10th, 2008
Here are som interesting url’s about the masterpage and pagelayouts.
Url about how to customize masterpages in windows sharepoints services:
http://msdn2.microsoft.com/en-us/library/ms476046.aspx
Url about how to modify the default.master:
http://office.microsoft.com/en-us/sharepointdesigner/HA101009061033.aspx
Url about how to change the current master page:
http://office.microsoft.com/en-us/sharepointdesigner/HA101671651033.aspx
Url about how to modify the default SharePoint content placeholders:
http://office.microsoft.com/en-us/sharepointdesigner/HA101651201033.aspx
March 4th, 2008
Some time ago I supported a fronteer. He was new to SharePoint and I explained him how to set up a masterpage from a default masterpage and how to make a pagelayout out of you HTML markup. I realized that I explained the way I should do it. But what is the best practice here? How do other SharePoint fronteers do this? What works, what doesn’t? I’m really curious for your respond! So please do!
1. –From
graphical design to HTML—
2. –Start implementing the masterpage–
4. –Implement a pagelayout–
5. –Fixing the style issues–
6. –Considering multiple approaches, what works, what doesn’t?
This blogpost is all about the implementation of the html into the masterpage (and
pagelayouts).
‘Master pages provide the look and feel and standard behavior for all of the pages
in your site. Together with content pages, they produce output that combines the layout
of the master page with content from the content page. You can create individual content
pages that contain the content you want to display. When users request the content
pages, they merge with the master page to produce output that combines the layout
of the master page with the content from the content page. So the a master page includes
one or more controls, which define regions where replaceable content can appear. In
turn, the replaceable content is defined in content pages, which are based on page
layouts.’
It’s time now to actually open the default.master in SharePoint Designer and take
a look at the code. You can find the default.master in the masterpage folder, which
is located in the _catalogs folder. Before you start working in the default.master,
make a copy for your safety. Also find the location for your css-file, which is on
your local machine: c:\Program Files\Common
Files\Microsoft Shared\web server extensions\12\template\layouts\1033\styles. Copy
your css-file here.
First you need to tell the masterpage where your css-file is. There are two way you
can do this.
1. add the following code in the masterpage just
above the head closing tag:
<link href=”/_layouts/1033/styles/YOURCSS.css” type=”text/css”
rel=”stylesheet”/>
2. So go to the portal, click site actions, site
testings, modify all site settings and click masterpage in the look and feel section.
Scroll down to the Alternate CSS URL and make sure the third radio button is on (Specify
a css file to be used by this publishing site and all sites that inherit from it).
Fill in the next url: /_layouts/1033/styles/YOURCSS.css. make
sure the checkbox to reset all subsites to inherit this alternate css url is on. Click
ok.
Check out and open the default.master in SharePoint Designer and be shocked by all
the tables you see in there. If you think you can handle it, take a look in your browser
to see what SharePoint finally renders! A whole bunch of dirty unnecessary nested
tables there! But there’s something you can do! In the masterpage, find where the
most outer table-tag opens. Add your HTML just above this table. You might want to
add some white lines on top and on the bottom.
Next step is to identify the placeholders and content. Leave them the way they are,
and cut paste them to the right location in your added html. Save the masterpage and
reload the homepage of the portal in your browser(s). Edit your css.file so the control/content
you’ve just dragged is rendered ok. You properly want to add some css also, for example
to not display any background images, or to use an other font-family instead.
Do this for every content or placeholder, one by one. Find it hard to determine the
content? Here’s a useful page about placeholders in the masterpage and there description: http://msdn2.microsoft.com/en-us/library/ms467402.aspx.
finetune the masterpage and css until you are satisfied with the result.
What to do about those extra stuff the graphical designer draw, but isn’t in the masterpage?
Find out what you need for that. Is it a webpartzone, or a control? Is it a SharePoint
default or a custom made? Then find a developer who can build the stuff for you.
Isn’t life easy sometimes? Or try to find some info on the internet, if you don’t
know the ins and outs. Here’s a start: http://office.microsoft.com/en-us/sharepointdesigner/HA101009061033.aspx#5 and http://msdn2.microsoft.com/en-us/library/ms476046.aspx.
So what’s left? Your html with some placeholders and so, and underneath it some empty
nested tables. Now comes the nice part. Loose the goose!! Or.. just delete the table..
doesn’t that feel great?
So when your masterpage is set, and no errors occur in your browser when viewing
it, check it in. (I always make an extra copy to my local machine, just in case
my VPC crashes.
Next step is the implementation of the pagelayouts. Read all about it next time!