The Quick & Skinny on MOSS Skinning

A few weeks ago I was given a task to skin SharePoint 2007 to look similar to the current design a client already had. It was good that the design part was done so I didnt have to worry with that. So.. on to Sharepoint.

I had started playing around with master pages by taking an existing one and moving elements around in it and changing out images. That was a going starting point but for this project, I decided to start with a clean slate. I started with the minimal master page and built it up from there. It was much more fun to do it this way and I learned a lot! So, what did I learn? Well, here's what I learned and what worked for me.
1. Start with a minimal base master page.

2. Create a custom .css file so you can override the core.css styles. SP will look at your custom .css before the core.css. I opened the core.css and found the element, then copied and pasted it into my custom .css file. I had to make sure my master page referenced it so I added this line to the header code:
" runat="server"/> NOTE: You can also add a style section in the header of your master page and pull any modified core.css styles in there. That way they will override the core.css defaults.

3. Build out a table and move the elements from the base master page to their appropriate locations. Note, there is a bottom section that is not visible. You should be pulling these elements from there. Do not delete any of them because SP needs all of them. Just pull up these "place holders" and put them in the right spot. (High maintenance I know! haha)

4. Add in your images.

5. Apply styles to the elements.

6. As you build the page, be sure to check it in the browser often! I created a test site on our demo internet site so I could leave the test master page on it. Then when I made changes to the CSS or the Master Page, I could easily flip (ALT+Tab) over to the browser and refresh (F5) to see that my page could still be rendered. That way I would know immediately if something broke it.

7. Use elements from existing Master pages and copy them over to your new Master page. This was a big time saver. The mockup I was trying to replicate had a nav bar similar to the BlueGlassBand master. I copied that component and styles over to the new Master and changed out my graphics. Viola!
See the BlueGlassBand example:

Click to activate Object - Flash Workaround

The tutorial can be found here:

http://tips.learnwebdevelopment.com/flashtips/IEFix.html

Basically you use javascript to eliminate the annoying "Click to activate object" message you get when you have an embedded SWF file in your HTML page. http://blog.deconcept.com/swfobject This is the site referenced in the video and contains all the code you need. If you don't want to watch the 13 minute video, you can go here directly.

Need a laugh?

Talk about some amazing flash animation...

Click here: Animator vs. Animation by *alanbecker on deviantART

http://www.deviantart.com/deviation/50891749/

BlueBand Search Button

Not sure if you ever noticed but if you use the BlueBand master page and then hover over the search button, you'll notice something rather unpleasant. The nice fat arrow button changes to the magnifying glass button which isnt even the same shape. MS Bug? Maybe.
Well, to solve that issue, I created a nice fat grey arrow button replace that mag button but the only caveat is that you have to put it in the root folder (_layouts/images) and it will need to replace the other image. The image name is gosearch.gif.

SnagIt & PPT

Did you know if you have SnagIt installed, there is an easy way to make PowerPoint interactive with hotspots?

Here's a tutorial...
http://www.screencast.com/users/Training/collections/SnagIt+Training/media/a38f70c6-2be6-4816-be66-0cf2a479ac74

remember... this is a SnagIT tutorial to be used with PowerPoint. :)

Master page: Swapping client image in header

Replaced <td width="50%"> <img alt="Pfizer"
src="client_logo.jpg" style="float: right"
hspace="20" vspace="5"></td> With <td
align = “right”
width="50%"> <SharePoint:SiteLogoImage id="onetidHeadbnnr0" LogoImageUrl="/_layouts/images/titlegraphic.gif"
runat="server"/> </td> That code
points to the
little people characters.
It is in
default.master. Then we
can over ride
it at the
site level to
insert the client
logo. Seems to
be working nicely.

Master: Fixing width and changing bg color in 5 simple steps! (BlueBand)

In order to change the current Matria master, you will only need to modify one file:

1. Check out and edit the XXXBand.css file (might be located in the Style Library/ XSL Style Sheets)

2. Change the .master class width (line 15) to 990px. It should look like this:

.master
{
width: 990px;
margin-left: auto;
margin-right: auto;
height: 100%;
background-color: #FFFFFF;

}

3. Change the .body class background color (line 9) to whatever hex you prefer

.body
{
background-color: #bcd2fe;
height: 100%;
margin: 0px;
}

4. Save the file and preview your page in a browser to make sure it’s what you like

5. Close, check-in and Publish this file

Table Gradient using HTML

(I havent gotten this to work..)

To use the gradient effect as your web page background, use the following

BODY tag:

To use the gradient effect within your HTML tables, place the following code within your table tag:

style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');"

Although you can edit the gradient colors indicated in red, keep in mind, in order for the gradient effect to display properly, you must select one light color and another color that is several shades lighter.

BG Images on Tables

or another method:
BODY{background-color: white;background-image:url('images/background2.jpg');background-repeat: no-repeat;background-position: top center;}

MOSS in a day

NOTE: This information was posted from a blog. I assume no responsibility or ownership of it.

Nothing is more effective in a "pitch" (aka demo) than showing organizations you can rebrand their website in your software (hopefully MOSS 2007) in < 1 day.

I've completely rebranded MOSS several times using a Minimal Master Page and borrowing CSS files and images from customer's external website or their corporate intranet.

To rebuild an intranet/internet site for a demo/proof of concept these are the steps I go through:

1. Analyze the existing website.
   Is there a consistent look and feel for this? i.e. Navigation up to; nav on left; content in middle?
   Global
   -How does the primary navigation work?
   -How does the secondary navigation work?
   -Is there a bread crumb
   -What is the footer?
   Home Page
   -Are there content roll ups?
   -Is there content aggregation from external sites?
   Detail page
   -What does the page structure look like?
   -Is there a common structure for this?
   -Are these basic pages or complex pages (i.e. are there applications being embedded etc.)
   Grab a dump of their existing site
   -Browse to the site and do a SAFE AS from Internet Explorer
   --This will give you the CSS, the HTML and the graphics.
2. Create the artifacts
   -Create a master page (you may require 2 master pages (1 for Home Page and 1 for other pages which includes a left nav)
   -Copy the navigation controls from the default.master or the other master pages.
   -Create a custom CSS file
   -Get the navigation styling right.
   -Get the overall font-family and font-size right – this will make a huge difference.
   -Include the Custom CSS on the master page(s).
   -Look and feel pictures - Upload the images for structure into the /Images/ library
   -Create a page layout for the home page (if none of the OOB ones are suitable)
   -Create a page layout for the detail pages (if none of the OOB ones are suitable).
   -Configure the left navigation for the site.
3. Create the Content – this is the key thing! You want the customer to identify with the site.
   -Upload "content images" into the Site Collection Images library.
   -Create the home page
   --Populate the home page
   -Configure the roll ups from other parts of the site.
   -Create the detail pages
   -Create a sub site
   -Create the pages and populate them with content from the customer's site
   -If you don't want to do this manually you could look at www.metalogix.net – I'll be posting a link to a demo live meeting shortly.
4. Additional things which are awesome
   -Content Query Web Part
   -Show rolling content up from other areas of the site based on some meta data.
   -Search
   -WCM and Search go hand in hand. If you can show easily searching the content from the site this will be an advantage.
   -Standard WCM Features – sometimes as MOSS professionals we forget about the basics.
   -Versioning
   -Workflow
   -Auditing
   -Scheduling

Blocking sites by modifying the host file

If you're running Windows XP and logged in as a privileged user then open a DOS command window, type:notepad C:\WINDOWS\system32\drivers\etc\hostsPut the following line in hosts:127.0.0.1 www.google.comFile > Save.Now try to open http://www.google.com with any web browser on the PC.Remove the line you added from hosts to restore access to the Google web site

Misbehaving Master Pages

Q: When logged in as the Administrator everything looks great but when I log in as someone else, it appears that there are images missing. What can be wrong?

A: It is likely related to the storage location for the images, SharePoint permissions, and/or their draft, published, or approved status. Here are a couple things to check when troubleshooting:
· What happens if you try to navigate to one of those image files directly while logged in as the non-administrator user – do you get a security prompt or a 404?
· Can you verify that everything is published and approved and not stuck in draft mode?
· Are the libraries and file system where everything is located permissioned so everyone has access to those locations?

Text Dropshadow using CSS

MOSS Search Label

To add or remove the search label on the searchbox, remove or add this section:
TextBeforeDropDown="<%$Resources:cms,masterpages_searchbox_label%> "

Poor Usability is like a leaky pipe!