How to edit page layout in sharepoint designer 2010

Question

Hi guys,

Im sure that what iam trying to accomplish in here is very simple but im a VERY beginner in HTML and web development,

so here's the deal:

i have a site collection that is using V4.Master , what i need is to edit the home page layout, actually one certain thing what i want to edit, its the !!PLACE HOLDERS!!

i want to collapse the Top_Left a little like 30% and expand the Top_Right , now i know i have to do this in CODE and im not a total dumb im HTML, i have a minor knowledge in HTML but surely dont know how to accomplish that! ill need to tweak those place holders a lot later on many pages so ANY HELP PLEASEEE.

Thank you in advance guys.

---

Aabed Yassine. Systems Engineer.

Answer 1

You shoould edit the master page and not the page layout.

Regards

Answer 2

Hi,

Those are Webpart zones in SharePoint.

If you open the page, you can see that zones are placed in <td>.

To make changes to these zones, select the zone and go to code as shown below

<td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%"> 

You can easily make changes to HTML, CSS.

Use CSS tags like height and width to maximize or minimize the zones.

Hope this helps.

 

---

Please "Mark As Answer" if my post solves your problem or "Vote As Helpful" if a post has been helpful for you.

Answer 3

Hi Ramez,

how come!! i mean what if i wanted to have different layout for different pages! i dont think its a "master page" edit, because logically: the whole web application is using the same master page, yet it can have different page layouts e.g. 'Document Center' template has different layout than 'Team Site' so it must be the site home page it self. am i right??

Thanks

---

Aabed Yassine. Systems Engineer.

Answer 4

HI Yassine ,

You said you want to edit the place holders width those place holder can be edited in maste pages so let say

you have a master page with only one place holder then you can create a table in this place holder and web part zones to it the way you want

so you can have diiferent layouts for different page layouts

Answer 5

Hi Ramez,

im just confused now!!! when im in a Site, i edit the site in SharePoint Designer, and under customization i can "Edit site home page"

i go here and edit the home page without touching the Master Page, just like you see in the above image, and it affects the home page directly as it should. im really confused now! what should i edit?! home page or master page. what i want is to edit these place holders or WEBPARTS zones in some pages differently, i believe if i did this in master pages it'll affect all sites that uses it which i dont want to do! am i right??

---

Aabed Yassine. Systems Engineer.

Answer 6

my freind when you click this button

an pop appear and give you choice wheather to edit page layout or edit page in browser

you are choosing edit page layout what you are really doing is editing the page layout therefore all pages with this page layout will be affected

Anyway just tell me what is you master page and what is the page layout and what do u want to edit and I will give you detailed steps

Answer 7

thank you Ramez, your help and time is highly appreciated,

one thing i need to know just to clear things out, when im editing the page layout then im editing it withing the master page??

for now im using V4.Master the page layout is a document center layout, and i want to edit the WEBPART zones apparently!

Best regards

---

Aabed Yassine. Systems Engineer.

Answer 8

when you are editing page layout master page wont be affected

all what you have to do is to edit page layout in advanced mode you will find it in the ribbon

and you can resize the web part zone.

Give me the name of the page when you edit home page like below please

Answer 9

Yes but whats the tags i have to modify in able to resize the webpart zones?!

and i did modify it by "Edit in advanced mode", i know how to do this but what i dont know is what code do i have to edit, does the name really matter? its Default.aspx

Thank you

---

Aabed Yassine. Systems Engineer.

Answer 10

Hi,

Those are Webpart zones in SharePoint.

If you open the page, you can see that zones are placed in <td>.

To make changes to these zones, select the zone and go to code as shown below

<td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%"> 

You can easily make changes to HTML, CSS.

Use CSS tags like height and width to maximize or minimize the zones.

Hope this helps.

 

---

Please "Mark As Answer" if my post solves your problem or "Vote As Helpful" if a post has been helpful for you.

Thank you for your reply, i've checked your instructions, i just wish if you could only give more details in this. im not really that Dev GURU :s if you could give an example of what tags should i use in CSS and where to place the CSS tags within the HTML.

Thank you

---

Aabed Yassine. Systems Engineer.

Answer 11

search for the td tag where the webpart zone exist and do as below

<td style="width=45px;">some html</td>

---

Ramez Al kara Software Consultant MCITP SHAREPOINT

Answer 12

Hi Ramez,

in SPD when i select the webpart in "Design tab" and go to the code tab i find the following highlighted

____________________________________________________________________________________________

<div><span>

    <WebPartPages:ContentEditorWebPart webpart="true" runat="server" __webpartid="{73149D65-FC3E-452C-B90D-B062B4349192}">
<WebPart xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://schemas.microsoft.com/WebPart/v2">
  <Title>World Time &amp; Weather</Title>
  <FrameType>Default</FrameType>
  <Description>Allows authors to enter rich text content.</Description>
  <IsIncluded>true</IsIncluded>
  <PartOrder>1</PartOrder>
  <FrameState>Minimized</FrameState>
  <Height />
  <Width />
  <AllowRemove>false</AllowRemove>
  <AllowZoneChange>true</AllowZoneChange>
  <AllowMinimize>true</AllowMinimize>
  <AllowConnect>true</AllowConnect>
  <AllowEdit>true</AllowEdit>
  <AllowHide>false</AllowHide>
  <IsVisible>true</IsVisible>
  <DetailLink />
  <HelpLink />
  <HelpMode>Modeless</HelpMode>
  <Dir>Default</Dir>
  <PartImageSmall />
  <MissingAssembly>Cannot import this Web Part.</MissingAssembly>
  <PartImageLarge>/_layouts/images/mscontl.gif</PartImageLarge>
  <IsIncludedFilter />
  <ExportControlledProperties>true</ExportControlledProperties>
  <ConnectionID>00000000-0000-0000-0000-000000000000</ConnectionID>
  <ID>g_b2984782_5c71_4ddc_855c_77bd1fe69da1</ID>
  <ContentLink xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor">/Assets/WeatherFC.txt</ContentLink>
  <Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" />
  <PartStorage xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" />
    </WebPart></WebPartPages:ContentEditorWebPart>


<div style="text-align:left"> </div>
<div><strong></strong> </div>
<p> </p></span></div>

__________________________________________________________________________________________

now i know when you select anything in the design tab, you're supposed to see its related code highlighted but this one doesn't seem to have <td

though a few lines down theres a <td> code but i dont beleive its related to that specific webpart since its not highlighted when i select it, am i right here??

Many thanks for your time man

---

Aabed Yassine. Systems Engineer.

Answer 13

In this case div is the container so I woulld suggest to do the below

<div style="width=45px;"><span>

---

Ramez Al kara Software Consultant MCITP SHAREPOINT

Answer 14

In this case div is the container so I woulld suggest to do the below

<div style="width=45px;"><span>

---

Ramez Al kara Software Consultant MCITP SHAREPOINT

The style within div doesn't exist by default, so i have to create it myself right?? and someone told me once that its better to edit width and height by percentage % instead of pixels px so i don't get bad page view on computers that have different resolution, what do you think of that?

Thank you

---

Aabed Yassine. Systems Engineer.

Answer 15

yes its better to do it by percentage and yes you should create it your self

---

Ramez Al kara Software Consultant MCITP SHAREPOINT

Answer 16

http://www.w3schools.com/tags/tag_div.asp

chek this link for more info about styling a div

you can also add a class for this div and manage it from css

---

Ramez Al kara Software Consultant MCITP SHAREPOINT

Answer 17

pleaseif you got your answer mark it as answered

---

Ramez Al kara Software Consultant MCITP SHAREPOINT

Answer 18

pleaseif you got your answer mark it as answered

---

Ramez Al kara Software Consultant MCITP SHAREPOINT

Actually you and Suraj provided the right instructions but not the full solutions, you pointed me the right direction but heres what im through now:

The site has a Records Center template which is pretty much the same as the Document Center which uses V4.Master as master page,

the webparts are placed in table <Table> as table cells <td> as you see in the image below

so as you see its a table, but the issue here is that when i modify the <table with="100%" to anything below 80% it dosent seem to minimize at all!
changing between 80% and 99& minimizes it perfectly, but from 1% to 79% wont make it get smaller than 80%!!! whats that!! also if i modified the width in the cell <td> wont do anything also!!
ps: i tried to remove the style padding in the table

but still cant get the table and cells percentage to work right!!!

whats the problem!!?

---

Aabed Yassine. Systems Engineer.

Answer 19

ok you have to make sure if anything is overriding your style
Do you know how to use developer tool ?
You just have to open the page in internet explorer and then press f12 and it will appear
but The problem here I think is that the table is placed in another container and that container have a fixed field if you can send me the full html to
[e-mail] or just add me so that I can help you more

I will sure walk you through that

---

Ramez Al kara Software Consultant MCITP SHAREPOINT

Answer 20

Plenty thanks, i really appreciate this, ive added you on [e-mail]

---

Aabed Yassine. Systems Engineer.