The Primary Navigation Area
- Dynamic width by default. The height can be altered.
- Background can be flat colour or a graphic, but in the case of the latter, keep the dynamic width in mind. E.g. a repeated background graphic concept is shown here, which visually includes the lower drop shadow.
- A consistent button style is required for the standard (left) navigation items on this bar, while the ‘Site Actions’ button (right) can be styled entirely seperately.
- Nav button stylings can include text colour, size and font, a border line of variable colour & thickness as well as background colour & graphics. E.g. The rollover state on nav item ‘SPG’ is show here with a left portion, repeated central portion and right portion). Similarly button styles can include a top & bottom portions.
- Keep in mind the default visual state for a button as well as the rollover/hover state and the look of a drop down menu.
- Text colour, size & font can be altered.
- The ‘arrow icon’ next to Nav items with drop down options cannot be altered.
.
Basic Graphic Considerations
Part 1. The Global Breadcrumb Area
Part 2. The Global Title Area
Part 3. The Primary Navigation Area
Part 4. The Left Hand Navidation Area
Part 5. The Content Area
* I’ve labelled these graphic considerations ‘Basic’ as these are the simpler aspects for a Front End Dev / Presentation Layer Dev to customise (for the mythical quick, simple and cheap solutions). Personally using these basic graphic considerations in creating Theme visuals has allowed the css guys I work with to construct an implementable Theme package in just a few days (2-4 days on average). I’ll post on intermediate / advanced graphic considerations in time … and meanwhile, as ever, your feedback is very welcome!
.
Filed under: Article , Considerations, Handy Reference Link, Primary Navigation, Sharepoint
These posts give a nice idea about design considerations, but there is one thing that would make them even better:
Add information about which part of the Theme.css you have to adjust to change the nav button, or the nav bar or the site actions button. So not only describe what can be adjusted, but also where you do it.
I think that would make these posts pretty popular among “wannabe”sharepoint designers
Hi Marco. Thanks for your comments and encouragement, fella.
I’m purely a visual designer and one with scant knowledge of css. I am however trying to encourage the front-end developers at the company I work for to a) add some pertinent articles to this blog or b) set up or add to a more practical technical blog.
Have you seen whether Heather Solomon’s resource site has the details you need? Or else try http://www.sharepointdesigners.net (another resource which was just brought to my attention today thanks to Christian Stahl). It seems to have a more techical design focus.