SharePoint Designer 2007 – Hidden Gems

styles1.jpgOne of the great things about SharePoint Designer 2007 is the much improved CSS support. When customizing SharePoint sites, there is now a much cleaner interfacce for dealing with multiple stylesheets.One common scenario might be that you want to customize a variations based WCM (publishing) site. Below lists a couple of quick steps to get you started as well as a couple of visuals for reference.

1) Open your Internet Presense, or Publishing Site if using variations using File, Open Site in SharePoint Designer 2007

2) From the left menu locate and open the _catalogs directory, inside you will find the master pages library where the files you want to edit are stored.

3) Open the TopNavFlyouts.master (I’m as confused as anyone on the name so don’t ask)

4) With the TopNavFlyouts.master open, you should notice a new set of menu’s in the right toolbar – towards the bottom you will see the “manage styles” area. This area is of particular interest as it lists all the style-sheets applied to a particular page and to the best of my knowledge in the order they are referenced which means each layer “down” can over-ride the previous. Double clicking any of these style-sheets will open it for editing at which time you will notice a second level of items in the manage styles menu (the classes). Double clicking any of these bring you directly to the code for editing.

One great tip: While on your TopNavFlyouts.master page select the options drop down in your manage styles pane – there is an option that lets you show ONLY styles which are applicable to the page you are editing. (screenshot below).

You can use the visuals below as a reference:
styles3.jpg styles2.jpg

styles.jpg

This entry was posted in SharePoint, SharePoint 2007. Bookmark the permalink.

4 Responses to SharePoint Designer 2007 – Hidden Gems

  1. Marcel Jeanneau says:

    Dude I’m ok with what you explain here and it all works fine but let me share eith you guys my own experience: I “open site” default.master (since I like this “layout” so I’m going to make a custom masterpage from this one) and make a copy of it, then I name the copy let’s say custom.master ok? Alrite now it theorically uses the same stylesheets as default.master and the real reason I’m tweaking a clone of default.master and not itself it’s because we should never tweak system files right? (updates and things like that might just clean out all our customizations!). Well I start working visually with styles, actually modifying CORE.CSS (supposed to be located at /_layouts/styles/core.css) but when I save the changes on this CORE.CSS that I’m tweaking in Designer man these changes I’ve done never appear in the actual file! I even see the last modification date and it’s the same as before! And I look for any other CORE.CSS file over the hole filesystem and don’t get anything! My brain tells me that the actual changes I saved are stored on database and not on the core.css file, so it takes the “real” core.css and overrides it with the file that has the changes I’ve done which is saved on database. It all makes sense to me since Site Definitions work same way (actual aspx pages are rendered by XSLT from XML files such as ONET.XML and so on, and only changes we make “unghost” the page and are saved on database). Do you guys think I’m right with this? Because my real problem is that I’m working with a portal customization that I must migrate to a Premium Customer’s server farm…. Shane dude I’d be SO glad if you hit me back, take care guys!

  2. shane says:

    Marcel,

    I am not 100% following you but …

    A couple of quick things though:

    1) You mention not wanting to edit default files on the file-system but you also say you are tweaking CORE.CSS. To the best of my knowledge this file is much the same as OWS.CSS was in SPS2003/WSSv2 (ie) – the “default” style sheet for all new sites so you may want to stay away from that one. I personally lean toward applying a theme and then customizing that – it simply works better (IMHO).

    2) If you are editing “Default” files an IISreset may be required to see changed. Even then you may have to clear your browser cache.

    Lastly – I have had reports from some of our designers that they are customizing themes and the changes are seemingly lost randomly and at no set time interval. I have sent them some possible test scenarios w/ IISreset potentially causing an undesired flush but have yet to hear back.

    I will report any findings of mine (and anyone elses that prove to be bugs) to Microsoft via the appropriate “user-experience program and bug-reporting” channels.

    It is possible there are bugs – don’t forget you are using beta software. The technical refresh is due out in a couple of months – that will hopefully polish some of this.

    Hang in there :)

  3. Shweta says:

    Hey are you able to make changes in core.css and get it reflected?
    i m trying the same but the changes are not getting reflected, got IIS reset, deleted cookies too…
    Any thoughts on this wud be a gr8 help
    Regards
    Shweta

  4. CyberSpider says:

    Marcel;

    I hope this helps.

    By default, the styles for all SharePoint sites in a single site collection are defined in a single style sheet that resides on the server. In Windows SharePoint Services 3.0, the name of this file is Core.css. In Office SharePoint Server 2007, this file may have any of several names. For example, the styles for the custom master page named BlackBand.master are defined in a style sheet named Band.css.

    The first time that you modify any style on a page in any site, Office SharePoint Designer 2007 automatically opens a new local copy of the default style sheet and updates it with your changes. When you save or close the page or the copy of the default style sheet, you are prompted to confirm your customizations.

    The confirmed customizations are reflected in the new local version of the style sheet, which is stored in a new folder named _styles that is created automatically in the Folder List of your site. Any subsequent changes made to styles in the same site will be reflected in this local version of the style sheet, which can also be edited directly.