SharePoint 2010 – publishing site Homepage(default.aspx)

layoutmastersharepoint-2010

Hello all and thanks for reading,

I have to make publishing site: homepage has the same elements as other pages BUT there are not the same width.
Imagine header,footer,left side menu and content.
Now what is the same:header and footer.
Left side: on home page it's wider than on other pages.
content part has jquery gallery that has different images for different pages.

Have to mention, this is for learning purposes only, it's like an test so when I learn to solve things like this I can start working.

Was thinking about other masterpage, but I found out that publishing site there can't be more than one default/custom masterpage.
Then Page Layouts: was thinking about this too but who would accept to manually input all links when ever new page is made?

For width, if it was php I would make if home page add body id="something" – can this be done with asp?

Now while I am writing, I just can't imagine how to make if part for gallery images too?

I am designer, know php, but don't know asp net.

Thank you, Suzy.

P.S- image: http://img151.imageshack.us/img151/8181/issueq.jpg

P.P.S. index/homepage left menu width 300px, on other pages width 200px

Best Answer

I recommend using SharePoint Designer to create a new Page Layout. You can use this Page Layout (named something like "HomePage.aspx"). You can copy the code from one of the existing page layouts that you want to use. Then add in the changes that you want. The CSS from Rich will get you started for some simple CSS changes to the menu width, but you may need more depending on the scope of your changes.

Then you just have to use the Page -> Page Layout option when in edit mode for the home page to set it to this new page layout. If needed, you may need to edit the allowed page layouts in Site Settings -> "Page Layouts and Site Template Settings" (/_Layouts/AreaTemplateSettings.aspx).

The advantage of this over using a Content Editor Webpart is that it is more robust. You don't need to worry about a contributor deleting your webpart accidentaly. You also get versioning with the _masterpages library (by default) allowing you to make changes and revert back if necessary. I've also found that SharePoint can re-write HTML that you add to content editor webparts which makes it harder to use them for HTML/CSS/JavaScript than it was in 2007.

Related Solutions

Sharepoint 2010 publishing site custom page layout webpart zone

You could also deploy your page layouts as an individual feature rather than creating a whole site definition. That way you could deploy your page layouts to any SharePoint publishing site. If you are using VS 2010, start with a SharePoint Module project. Add your layout aspx file to the project. Modify the elements.xml file to resemble this:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="Page Layouts" Url="_catalogs/masterpage" RootWebOnly="True">
    <File Path="Page Layouts\Layout1.aspx" Url="Layout1.aspx" Type="GhostableInLibrary" IgnoreIfAlreadyExists="True">
      <Property Name="Title" Value="My Layout 1" />
      <Property Name="ContentType" Value="$Resources:cmscore,contenttype_pagelayout_name;" />
    </File>
   </Module>
</Elements>

This deploys your layout and makes it available as for new publishing pages. Now, to get a webpart to be instantiated in new pages, you modify the <File> element with the webpart definition. For example, I could define a content editor webpart to be created on new pages in Zone1 like this:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="Page Layouts" Url="_catalogs/masterpage" RootWebOnly="True">
    <File Path="Page Layouts\Layout1.aspx" Url="Layout1.aspx" Type="GhostableInLibrary" IgnoreIfAlreadyExists="True">
      <Property Name="Title" Value="My Layout 1" />
      <Property Name="ContentType" Value="$Resources:cmscore,contenttype_pagelayout_name;" />
      <AllUsersWebPart WebPartZoneID="Zone1" WebPartOrder="1">
        <![CDATA[ 
               <WebPart xmlns="http://schemas.microsoft.com/WebPart/v2">
                <Assembly>Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c</Assembly>
                <TypeName>Microsoft.SharePoint.WebPartPages.ContentEditorWebPart</TypeName>
                <Title>Content Editor</Title>
                <FrameType>Default</FrameType>
                <FrameState>Normal</FrameState>
                <Description></Description>
                <Height />
                <Width />
                <AllowRemove>true</AllowRemove>
                <AllowZoneChange>true</AllowZoneChange>
                <AllowMinimize>true</AllowMinimize>
                <AllowConnect>true</AllowConnect>
                <AllowEdit>true</AllowEdit>
                <AllowHide>true</AllowHide>
                <IsVisible>true</IsVisible>
                <DetailLink />
                <HelpLink />
                <HelpMode>Modeless</HelpMode>
                <Dir>Default</Dir>
                <PartImageSmall />
                <MissingAssembly>Cannot import this Web Part.</MissingAssembly>
                <PartImageLarge>/_layouts/images/homepage.gif</PartImageLarge>
                <IsIncludedFilter />
                <ExportControlledProperties>true</ExportControlledProperties>
                <ContentLink xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" />
                <Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor">
                </Content>
                <PartStorage xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" />
                </WebPart>        
        ]]>
      </AllUsersWebPart>
    </File>
  </Module>
</Elements>

This should be more practical than creating a whole new site definition. Hope this helps.

HTML/CSS: Nav bars on the left side of page

Create sidebar:

<!-- html -->
<nav role="main">
  <a href="link.com">link</a>
</nav>

//css
nav{    
  width: 150px;
  float: left;
  display: inline;
  margin: 0;
  padding: 0;
  margin-right: 10px;
}

Then create a container for your main content

<!-- html -->
<section id="main">
  main content in here
</section>

//css
section#main{
  width: 500;
  float: left;
  margin: 0;
  padding: 0;
  display: inline;     
}

As long as you place nav before section in your source code, anything that is in the section will stay away from the left hand column and will not wrap under it.

Just need to make sure you reset all your css, especially paddings, margins and borders unless you know what you're doing

good luck

Best Answer

Related Solutions

Sharepoint 2010 publishing site custom page layout webpart zone

HTML/CSS: Nav bars on the left side of page

Related Topic