Questions? Call Us 800.260.9357
Home
Our Work
Services
Small Business Intranet
Samples
Training
SharePoint
  

dbWeb > Blogs > Jon Anglin

Create Floating Web Part Zones or Tables

This was an idea I stumbled upon while developing in SharePoint, tables work well in SharePoint but you can't always place web part zones in tables exactly where you want them to be. That's why I started using <div> tags with the position:relative; attribute.

Here is an example:

The first step to take is to place a web part zone in the page.

        <WebPartPages:WebPartZone id="Your id will be different" runat="server" title="Name your zone">

        </WebPartPages:WebPartZone>

Now let's add a div tag to this w/ a style and position set to relative.

<div style="position:relative;">

<WebPartPages:WebPartZone id="Your id will be different" runat="server" title="Name your zone">

        </WebPartPages:WebPartZone>

</div>

Ok, now that we've done that, you can now position the web part zone anywhere you want it t be on the page with these attributes added left:0px; right:0px; top:0px; bottom:0px;

Here is the code I've created for the example above.

<div style="position:relative; left:5px; top:-320px; width:200px;">

<WebPartPages:WebPartZone id="Your id will be different" runat="server" title="Name your zone">

(I added a links list web part here)

        </WebPartPages:WebPartZone>

</div>

Here is another example:

<div style="position:relative; top:-143px; height: 139px; >

<WebPartPages:WebPartZone id="Your id will be different" runat="server" title="Name your zone">

(I added a table here)

        </WebPartPages:WebPartZone>

</div>

Adding Directions/Maps to a Sharepoint Website

This a quick tutorial on how to add google maps to a sharepoint website. This is extremely beneficial for a contacts/directions page.

Step .1

Go to http://maps.google.com/ and type in the name of the business.

Step. 2

On the top right of the map click the link button, then copy the embed code.

Step. 3

Now add a Content Editor Web Part to the page you would like the map to be on.

Step. 4

Click the Source Editor and past the embed code.

Step. 5

Click save and you are done.

 

Creating Icons in Photoshop

I'm new to developing in Sharepoint, but not designing, so I thought I would throw a Photoshop tutorial out there for everyone. So let me take you through a few steps on creating a fresh icon for your Sarepoint site.

This is the icon we will be creating.

 

Step one create a new 250x250 canvas.

Then go to the Shape tool and select the Ellipse Tool. The color doesn't matter

 

Now add the shape to the canvas, after that is done double click the new shape layer and click the drop shadow option and set the distance to 0.

Now we are going to create a metallic feel to this shape so check the Gradient Option.

Right Click on Shape 1 and select Duplicate Layer.

Now double click the Shape 1 Copy to go to the blending options:

Uncheck the Gradient Option.

Check Color Overlay double click the Color Picker you can select a green or use this # 00ff0c

Check the Bevel and Emboss change size setting to 226, then click Ok.

Now it time to resize the shape so go to the Rectangular Marquee Tool highlight the Canvas right click and select Transform Selection. Adjust accordingly

 

Lets add a sharp refection to the top, the easiest way to do this is duplicate the last layer you edited and remove all but the color Blending Options, then change the color option to white. Click Ok

Right click Shape Layer copy 2 and Rasterize Layer.

Back on the tool bar click the Magic Wand Tool click in the center of the Shape now select the Marquee Tool and move the highlighted area to the lower right corner finally hit Delete. It should look like this.

On the Layer Options change the Opacity to 25%.

It is time to create a shape in the icon. Go to the Shape Tool, then select your Custom shape I went with the check shape. Also you can add a drop shadow like I did, or leave as it is.

And we are done! Now you can save and add it your Sharepoint intranet.

New Sharepoint Application for the iPhone

I was searching the apple store for some cool new apps for my new iPhone and stumbled upon this new application, it seems that apple developers are starting to see the real potential of having your iPhone work with Sharepoint. Its called iShare it allows employees to browse, search, and view all their company documents straight from their iPhone. For the link click here

 

 

How to create a custom group w/ custom permissions

Being fairly new to SharePoint I don't think I will be bringing anything new to the table...at least for now, but I do have to say the hardest thing for me was creating custom group permissions. So I thought to myself that would be perfect for my first blog post. So here it is: "I'm a visual learner so I included tons of screen shots"

1) From the quicknav menu click on the people and groups button.

2) Now click on the Site Permissions button.

 

3) Now go to the settings dropdown and select Permission Levels.

4) From here you can create your own custom permission.

Now that's complete lets add a New Group with that custom permission level. Ok now back to the Permissions page and Click the New dropdown and select New group.

Now you will see the new permission you created simply name your new group, select your group settings, and click the group permissions checkbox hit create and you are done.

 

 

 ‭(Hidden)‬ Admin Links