in

SharePoint Blogs

The Best Place for SharePoint-related Blogs

Heather Solomon's Mirrored Blog

July 2008 - Posts

  • SharePoint 2007 Design Tip: Changing the Flyout Menu Arrow Hover Color

    This is small, but gets me all of the time.   When you are working with the Global Navigation (a.k.a. Top Nav Bar) in SharePoint and you are using 2 levels of flyout menus, the arrow that appears for the second level of items may show the wrong background color when you hover over the item or arrow.

    As you start to alter the various colors and styles in the menu code, the background color behind the arrow does not reflect your changes or seem to pick up any styles from parent elements. Here is an example of this happening.

    By default, the SharePoint menu code in the master page manually specifies a color for this hover effect:

    <SharePoint:AspMenu ..... lots of properties....   DynamicHoverStyle-BackColor="#CBE3F0"  >

    You don't have to replace the color or specify a style, just delete the property and your colors will shine through.

    <SharePoint:AspMenu ..... lots of properties.....  >

    This does require edits to the master page, there is no CSS class specified, so you can't change this with CSS only.

     

  • Master Page Error from Exporting file from SharePoint Designer

    If you are using SharePoint Designer (SPD) to create a master page file that will then be placed on the web server for use, such as with a custom site definition or custom Feature, you may run into the following error when viewing or creating a new site:

    Cannot convert type 'Microsoft.SharePoint.WebControls.ScriptLink' to 'System.Web.UI.IAttributeAccessor' 

    This may be caused by the method you used to get your custom master page file out of the content database. If you used the Export feature in SPD (File --> Export --> File), SPD will add in a bunch of code that only SPD knows how to properly read and process.

    For example, if you look at the HEAD area of your master page file in SPD, you will probably see something like:

    <SharePoint:ScriptLink language="javascript" name="core.js" Defer="true" runat="server"/>
     <SharePoint:CustomJSUrl runat="server"/>
     <SharePoint:SoapDiscoveryLink runat="server"/>
     <SharePoint:CssLink runat="server"/>
     <SharePoint:Theme runat="server"/>

    After you export the file, if you look at the code in Notepad, now the code looks like this:

    <SharePoint:ScriptLink language="javascript" name="core.js" Defer="true" runat="server" __designer:Preview="&lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot; src=&quot;/_layouts/1033/init.js?rev=ck%2BHdHQ8ABQHif7kr%2Bj7iQ%3D%3D&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot; src=&quot;/_layouts/1033/core.js?rev=S5dt4K8TJGVTYU9HrW6enw%3D%3D&quot; defer&gt;&lt;/script&gt;
    " __designer:Values="&lt;P N='Language' T='javascript' /&gt;&lt;P N='Name' T='core.js' /&gt;&lt;P N='Defer' T='True' /&gt;&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl01' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/>
     <SharePoint:CustomJSUrl runat="server" __designer:Preview="" __designer:Values="&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl02' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/>
     <SharePoint:SoapDiscoveryLink runat="server" __designer:Preview="&lt;link type=&quot;text/xml&quot; rel=&quot;alternate&quot; href=&quot;/_vti_bin/spsdisco.aspx&quot; /&gt;" __designer:Values="&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl03' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/>
     <SharePoint:CssLink runat="server" __designer:Preview="&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/_layouts/1033/styles/core.css&quot;/&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/_layouts/1033/styles/mystyles.css&quot;/&gt;
    " __designer:Values="&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl04' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/>
     <SharePoint:Theme runat="server" __designer:Preview="" __designer:Values="&lt;P N='Name' R='-1' /&gt;&lt;P N='InDesign' T='False' /&gt;&lt;P N='ID' T='ctl05' /&gt;&lt;P N='Page' ID='1' /&gt;&lt;P N='TemplateControl' ID='2' /&gt;&lt;P N='AppRelativeTemplateSourceDirectory' R='-1' /&gt;"/>
     

    When the master page file is placed on the web server and used, it will generate the error listed above.  To fix this issue, don't export out the file from SPD.  Instead just copy the code from SPD to an empty text file outside of SPD and then name it appropriately (mysite.master).

    In some cases, when you do a manual code copy like this, control template paths are altered and that will need to be fixed prior to using the file.  It is always a good practice to double check this when you take your code out of SPD.  Look at the page directives in the top of the file, and ensure that a tilde and forward slash are present in the path(s):

    <%@ Register TagPrefix="wssuc" TagName="Welcome" src="~/_controltemplates/Welcome.ascx" %>

  • How to Create Rounded Corners for Web Part Title Bars

    Per some feedback, I added instructions to my latest branding article on how to create rounded corners for a web part title bar.  

    » Part 3: Changing the look and feel of SharePoint components - Intro and Web Parts

  • Branding SharePoint - Part 3: Changing the look and feel of SharePoint components - Intro and Web Parts

    I have posted the next article in my branding series, which is a follow up to Part 1: Designing your SharePoint site, and Part 2: Creating the Design in SharePoint.

    » Part 3: Changing the look and feel of SharePoint components - Intro and Web Parts

    The next installment (coming very soon) will cover changing navigation systems in SharePoint.

  • Big Update to CSS Reference Chart

    I have posted a large update to my SharePoint 2007 CSS reference chart.  In addition to adding some new styles and tips, I have added "Copy to Clipboard" functionality that will copy the CSS source code for the given style to your clipboard, so you don't have to chase down styles by looking up line numbers.  Instead you can just do a copy, paste into your CSS file, and make modifications from there.

    The only section I did not do this for was the calendar, because I have previously posted all the calendar styles in a clean, condensed CSS file for your use.

    Enjoy!  As with anything, there may be a mistake or two.  If you do a copy and it is not the correct style, please let me know.

    » CSS Reference Chart for SharePoint 2007


Need SharePoint Training? Attend a SharePoint Bootcamp!

Posts (c) their respective authors. Everything else (c) 2007 SharePoint Experts