Change the Flyout Menu Arrow Hover Color in SharePoint

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:



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



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

Comments

Post a Comment

Popular posts from this blog

Adding Contact Selector Control to InfoPath form

The Contact Selector control is an ActiveX control but it is a special cased control, in that it can also be used in InfoPath browser forms. To use this control there are specific steps that need to be taken – let’s take a look at those now. Step 1 : Steps to add Contact Selector control to your Controls Task Pane 1) From the Controls Task Pane click "Add or Remove Custom Controls" link 2) Click the Add button 3) Add Custom Control Wizard select "ActiveX control" and click Next 4) This will display a list of controls , select "Contact Selector" ,click Next 5) Select “Don’t include a .cab file” and click Next 6) For Binding Property select Value and click Next 7) From the Field or group type box choose Field or group (any data type) and click Finish 8) Click Close and then click OK Step 2: Create the data structure for the Contact Selector Control The Contact Selector control needs to have a specific data structure to work properly – this is documented on
Read more

Adding Validation to a Custom NewForm.aspx in SharePoint & Redirect

SharePoint has a built in function called "PreSaveAction" that can be invoked to process anything before the form should submit. So now we will create a submit button which calls “PresaveActon” function. Once users Submits the form, PreSaveAction is executed. If PreSaveAction is returns true it will commit and redirect. If the PreSaveAction returns false, then the commit will not happen nor the redirect. Input Button Code: Replace this code <SharePoint:SaveButton runat="server" ControlMode="New" id="savebutton1"/> with <input type="button" value="Submit" name="btnSave" onclick="javascript: if(PreSaveAction()) {ddwrt:GenFireServerEvent('__commit;__redirect={http://<Site>/ SitePages/ThankYou.aspx}')}" /> Add Script in NewCustom Form. Now edit New custom newform.aspx and add content editor webpart and with below script <script type="text/javascript
Read more

How to add to Sub-Sub Menu in SharePoint

Image
MOSS 2007 sites can display drop down menus in the tabbed navigation across the top. Unfortunately there is not an easy check box to act ivate this functionality; instead things just have to be set up the right way. If you want your MOSS site to show drop down menus, make sure the following is true or walk through the following steps: 1. From the root of the parent site (Home) choose to create a new site (Site 1). Once that site is created, you will be in that new site. From here choose to create a new page. 2. Once that is created,choose to create another new site (SubSite 1). Then create a new page in SubSite1 3. Your site structure should resemble like this (Pic Shown below) 4. For each site in the Navigation settings, both Show Subsites and Show Pages should be checked. a. Select Site Actions - Site Settings - Modify Navigation. b. Check Show subsites and Show pages in the first row. 5. The end resul
Read more