In WSS, there is no default header or whatsoever, it only has “Top Menu Bar” with those main navigations like “Settings”, “Document Libraries”, etc.
My understanding of the “Header” is the image that go on top of the “Top Menu Bar” which span through out the site.

Header image is the first thing you set to customise your WSS sites. There are numbers of CSS files for you to play with for the look and feel of the whole site.

For this header part can be manipulated from OWS.css file, which sits at
c:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\STYLES

Place your header image here: c:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\IMAGES

For WSS adding the header image tips, you must read this first two articles. #1 A Quick Way to Add/Change the SharePoint Header Area Graphic and #2 Adventures in CSS: Putting a banner image above the menubar in WSS

My version include abit of adjustment from the second article. The main difference between #2 and mine is that, #2 made use of second table’s CSS ie. .ms-bannerframe to apply the header image whereas in mine, I’ve use the first table’s CSS – .ms-main as you seen in the following code.

The image is added in .ms-main as followed. Once you add the image, the top menu bar still sit on top. To move the top bar down, you have to add margin-top space to .ms-bannerframe.

.ms-main{
background-image: url(“/_layouts/images/ats_intranet_header.jpg”);
height: 170px;
background-repeat: no-repeat;
}

.ms-bannerframe, .ms-GRHeaderBackground, .ms-storMeFree {
margin-top: 170px;
background-image: url(“/_layouts/images/topgrad.gif”);
background-color: #002d96;
background-repeat: repeat-x;
}

The method in #2 is mainly for default theme sites but once you apply it with different themes, the top-menu bar appear out of control. It is due to the image height set in .ms-bannerframe which is applied to second table and it acts as a background image for top-menu bar as well.

margin-top: 170px; this leave the space for the header image. The height of your header image should go there, ie. the one you use in .ms-main class. In my case it’s 170px.

.ms-bannerframe, .ms-grheaderbackground, .ms-stormefree {
background-image: url(sitelogo.jpg);
background-repeat: no-repeat;
border-bottom: 0px solid;
height: 72px;
}

Article 2 style effect: Theme1, Theme2, Default Theme

My Style effect: Theme1, Theme2, Default Theme

The disadvantage of my method is that, you need a fix image width. You cannot apply background color to it cos’ it will cover the whole page background as well. Also it doesnt work for individual webpart pages ie. a separate webpart .aspx pages that you created in document library. I’m yet to figure that out.
What is the advantage? hehe well it serves my purpose cos’ none of #1 and #2 work with my requirement.

This is just an extra note added to the first two articles, so that whoever with similar to my case can make use of it.

Thanks Ian for the articles.
Links: A Quick Way to Add/Change the SharePoint Header Area Graphic
Adventures in CSS: Putting a banner image above the menubar in WSS

Technorati Tags: WSS, Windows Sharepoint Services, Banner, Header, Menubar, OWS.css

So am I imagining or lately people tend to get hungry alot? I’m seeing two new cool sites and they both using food stuff in their logo.

Check these out:
# Think Vitamin – Orange,

Vitamin is a brand new online magazine dedicated to that new web industry.

Vitamin will inspire you, teach you, advise you and sometimes test you with its in-depth features, audio interviews, training sessions and reviews.

It’s updated every week, and it’s free!

# Bite Size Standards – Cookie!

Bite Size Standards aims to offer concise web development tutorials, tips and tricks. Written by designers and developers who are passionate about web standards.

P.S: Thx Jason for link.

Better grab their feeds.
Oh by the way, what’s those letters in bite size standards logo? I can read the big “B” and “S” but what’s that down below? “I-T-E”, “I-S-E”?? What’s that mean?

Like I mentioned on my other day’s post, mayvelous feel like stripping and joined the club of strippers.
Feel so gooood!!
Mayvelous’ll be back to her usual self tomorrow.

Updated

OH GOSH!!
I have no idea it’s so hard to get naked.
I thought I’ll just comment out a few style links and done with it but nooo…
It has to go grab a style from default theme and I tried to rename the files n folder names as well but still mayvelous won’t go naked. LOL

I guess nothing seem that easy untill and unless you’ve tried it. What an experience it is. I’ve discover something today about wp themes especially the squible theme.
Worth stripping.

I was just thinking about April Fool idea and this is way more interesting.
Think about it, browsing the web and every single sites will be stripped off the cover.
Fully raw content…I like that!

First Annual Naked Day April 5th will be a day of nakedness for all webmasters to remove their style sheets from their website for one day.

The fact of the matter is, if you’re writing good solid markup to begin with, it shouldn’t be all that bad anyway. It will be a test case to see how usable your website is to others without a design. So in the meantime, don’t hesitate to prepare your site for the big day.

What the hell, I’m IN!, strip it off.
Mine is not really my design but who cares, good to practice for future naked days for my own design.

So on 5th April, you’ll see Mayvelous naked.

Link: First Annual Naked Day

Just now Jason notified me about Lightbox JS upgrade.
Serious shits going on there.

What’s New in Version 2.0

• Image Sets: group related images and navigate through them with ease
• Visual Effects: fancy pants transitions
• Backwards Compatibility: yes!

Very light, fast and way better than flash image effect(don’t start Min Thu).
I mean I prefer this over flash gallery effects.

Check out the “Image Set”, click one image and hover over it to browse forward or backward.
Very cool isn’t it?

So better get one copy and test it yourself. I got to too, I’m abit behind with it.
Download Link Here: Lightbox JS V2.

Technorati Tags: JS, LightBox V2, Image Effect, Scripts

This is a great resource, definitely should check out.

a set of 40 layouts that have been tested successfully on Internet Explorer/win 5.0, 5.5, 6 and beta 2 preview of version 7; Opera 8.5, Firefox 1.5 and Safari 2.

Download the entire collection, 40 HTML pages in a single zip file.

Link: Layout Gala
Via: Web Graphics

Technorati Tags: Layouts, Resources, Reference, Webdesign, CSS

Have you guys heard of this “Lightbox JS” yet? It’s pretty cool way of displaying images.
It’s really neat and compatible across all modern browsers.

Lightbox JS is a simple piece of JavaScript that allows you to place images above the page rather than within. A thumbnail image can be clicked on to show the full size image ontop of the page which remains darkened in the background. Closing the overlayed image brings the webpage back to normal, the user never leaves the current page.

I got an idea to use this lightbox in a new section that I’m planning to add here. At the moment I’m a bit lazy to test it yet but one of our very own developer has already used that in the new revamp of FijiTimes site and it’s working like a charm. You can have a look at in the story section. Click on the story image to enlarge and see how it go. Cool huh!

Benefits
Places images above your current page, not within. This frees you from the constraints of the layout, particularly column widths.

Keeps users on the same page. Clicking to view an image and then having to click the back button to return to your site is bad for continuity (and no fun!).

More info on what/how to use LightBox JS can be find as follows:
# Lightbox JS by Lokesh Dhakar
# LightBox Gone Wild at particletree
# Working Samples at FijiTimes.com

Technorati Tags: LightBox JS, Development, Scripts