Customizing the Panel collapsible Spry widget

Similar Questions

• Positioning of the Panel collapsible Spry

  How to position a Spry Collapsible Panel right of an editable?

  In the SpryCollapsiblePanel.css in rule SpryCollapsiblePanel, add float: right; and it will move to the right from there where you put it.

• Problem of Panel collapsible Spry in Safari

  When check out my site in Firefox, there is no problem, but when I open it in Safari, none of the CSS settings are applied to the collapsible Panel widget. Some settings that I make the widget 200 px of width and that it have a black background, but Safari does not display these. HERE IS THE CODE OF MY HOMEPAGE:
  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
  "< html xmlns =" http://www.w3.org/1999/xhtml "> "
  < head >
  
  < title > Untitled Document < /title >
  
  < meta http-equiv = "Content-Type" content = text/html"; Charset = UTF-8 "/ >"
  < style type = "text/css" >
  
  {body
  background: url(Victorias%20Secret%20models.jpg) fixed no repetition low center.
  }
  
  < / style >
  < script src = "SpryAssets/SpryCollapsiblePanel.js" type = "text/javascript" > < / script > "
  < link href = "SpryAssets/SpryCollapsiblePanel.css" rel = "stylesheet" type = "text/css" / > "
  < / head >
  < body >
  < div id = "CollapsiblePanel1" class = "CollapsiblePanel" >
  < div class = "CollapsiblePanelTab" tabindex = "0" > < / div >
  < div class = "CollapsiblePanelContent" >
  < /P > < p > BLOG
  LISTEN < p > < /p >
  WATCH < p > < /p >
  < p > ON < /p >
  < / div >
  < / div >
  < script type = "text/javascript" >
  
  var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel ("CollapsiblePanel1", {contentIsOpen:false});})
  
  < /script >
  < / body >
  < / html >
  
  
  AND HERE IS MY CSS CODE
  
  @charset "UTF-8";
  
  . CollapsiblePanel {}
  margin: 0px;
  padding: 0px;
  Width: 200px;
  color: #FFFFFF;
  background-color: #000000;
  }
  
  . {CollapsiblePanelTab}
  background-color: #000000;
  margin: 0px;
  padding: 0px;
  cursor: pointer;
  -moz-user-select: none;
  -khtml-user-select: none;
  do-family: without serif.
  font size: 0.7em;
  make-weight: bold;
  color: #FFFFFF;
  height: 40px;
  }
  
  . {CollapsiblePanelContent}
  margin: 0px;
  padding: 0px;
  background-color: #000;
  }
  
  . CollapsiblePanelTab a {}
  color: black;
  text-decoration: none;
  background-color: #000;
  height: 40px;
  }
  
  . CollapsiblePanelOpen. {CollapsiblePanelTab}
  background-color: #000;
  color: #FFFFFF;
  }
  
  . CollapsiblePanelTabHover. CollapsiblePanelOpen. {CollapsiblePanelTabHover}
  background-color: #000;
  }
  
  . CollapsiblePanelFocused. {CollapsiblePanelTab}
  background-color: #000;
  }
  
  
  THANKS FOR YOUR HELP

  I found the answer on my own! As soon as I appointed a Div ID, the applied CSS!

• Customizing the Panel of Lightroom?

  Hello

  I was wondering if there is a way to customize the Panel layout? for example, I want the histogram, Keywords, design tools, etc. on the left side of the screen?  If the panels can be disconnected? (I'm left handed and have to go through my image when I use the touch / options to develop my image or make adjustments to pen)

  I use Lightroom CC (2015) on a Surface 3 Pro 10 Windows.

  I appreciate your help

  See you soon,.

  Beak

  Hi Bill,

  From now the functionality you are looking for is not possible in Lightroom.

  You can still provide a feature request to: Photoshop community customer family

  Concerning

  Tanuj

• Highlights around the selected tab (spry widget) in chrome and safari

  I created by meni tabs in Dreamweaver CS5 using the spry Panel tabs widget. All good but when tab is selected in Chrome and Safari destructive of some highlights will appear as in sreenshot. Can I control who and how.

  

  If Gramps code does not try this code:

  a: focus {}

  border: 0;

  outline: 0;

  }

  Good luck.

• Spry Widget Collapsible Panel / accordion make arrows

  Using Spry widets, I've got a working Collapsible Panel that is doing very well. I would like to create an arrow down left a water main subject when the accordion / panel is open. I would like to have the arrow points to the right (not turned down) when the accordion / panel is closed. How do you do that? It is in the CSS? If so, create it as a background image? I can't understand how this is done. Video of the video workshop called using Spry Widgets shows thereby, but don't explain 'how'.
  
  BTW: I looked over the spry widgets videos in the video workshop and went on the sample of the project, but still do not see how they have implemented the arrow pointing downwards in the CSS. It diesn appear as an image file in the images folder and it does not appear in the styles that I see. Is this really the example project used in the video? Could someone check this out to see if it is really the right project used in the example file. I get an undefined when XML tring to view the example page 06_spyr_widgets.htm (the one used in the demo), when you try to view in a browser. Is there a required server configuration, that you need to set? Import the site went smooth, but viewing the page in a browser throws errors not defined using IE 7.
  
  Thank you!

  Nadia,

  Thanks for the example. I finally thought to it. I finally found the image in the tutorial too... it is not in the pictures folder... it is in a folder called 'i' (Yes, a letter). To the inside of this folder is a folder called "nav" and the image is there. There are two States for the arrow. Go to the file CSS Spry, I found two States for the arrow. The answer is that everything is done in CSS with a background image and swap the image in the background as I guessed. The main lines are:

  background-image: url(path/image.gif);
  background-repeat: no-repeat;
  background-position: left 50%;

  Thanks for your help.

• To access the Spry Widgets I just added with Adobe Widget Browser

  Just added a few new spry widgets to "My Widgets" in Adobe Widget Browser. All the instructions say I should be able to access these new widgets by: Insert > Widget >...   Problem is, there is no option 'widget' in my control panel "insert" CS4. Widgets only I have access are preloaded into the Insert toolbar.

  If they are in "my widgets" in the Widget browser, then they should also be loaded into my Dreamweaver CS4, right? Where are they?

  The button Widget is available at DWCS5.

  But you can add the code manually. After getting the widget that interested in your collection of my Widget, click to preview.  Now, click on the 'Save Widget Files' button (at the bottom of the view) to save the widget files to a folder on your site. One of the files that is stored in the file is a sample page that shows the widget working with the content of the sample. You can use this page as a starting point, or copy the code of the widget from this page into one of your existing pages.

• Remove the Focus in the Spry Widgets (I think)

  I'm new to Spry widgets and noting that he is a boring (in Safari) highlight of selections to the accordion and the tab panels. I watched this and apparently she called Focus and accessibility (I think)?... but it's just horrible-looking and boring to me.

  How can I remove this please?

  Also... I have trouble finding the CSS rule to change the color of the tab selected in the TabPanel. It seems I have only an exit status and a stationary State, but not a State selected as with the accordion.

  Thank you.

  See if this thread is useful:

  http://forums.Adobe.com/thread/468623

• During the installation of Flash Player, I get the prompt to close the customer control panel. What is and how it close?

  During the installation of Flash Player, I get the prompt to close the customer control panel. What is and how it close?

  This link to a thread on this forum about Adobe Flash Player explains how to kill (strong word) the customer dashboard:

  Client dashboard

  I assume you are using a Mac.

• How can I remove a custom preset in the Panel

  How can I remove an incorect preset in Premiere Elements?

  I want to delete the definition (which is incorrect) from the Panel effects, not of a clip.

  I found how to create one, but not how to remove.

  After further investigation, I discovered that for some unknown reason, my keyboard has benn custom. I restored the Adobe standard keyboard. Delete key now works correctly in the effect controls panel.

  Sorry for the inconvenience.

• Why does the drop with a Spry Widget 2.0 last two taps to turn on iPad?

  I have the 2.0 Menu pretty well composed Spry in the way I want it.  When the user clicks on the menu item from an iPad or iPhone also, however, press the drop-down menu twice to make it work.  All the menu items work very well on the first tap except those that have a menu drop-down.  Is there a way to get the drop of pop and work on the first valve of an iPad?  Here is the code of this aid.

  < ul id = "MenuBarUpgradeAugust2012" >

  < li > < a href = "default.html" > home < /a > < /li >

  < li > < a href = "apps4kids.html" > on < /a > < /li >

  < li > < a class = "MenuBarItemSubmenu" > our < /a > Apps

  < ul >

  < li > < a href = "Rhyme-N-SystemRoot\Cluster\Reports\Validation" > rhyme-N-time < /a > < /li >

  < li > < a href = "Free-The - Bee.html" > Free The Bee < /a > < /li >

  < li > < a href = "Trojan horse - Math.html" > Trojan Math < /a > < /li >

  < li > < a href = "Help - Santa.html" > Santa help < /a > < /li >

  < /ul >

  < /li >

  < li > < a href = "chip - apps.html" > Contact < /a > < /li >

  < /ul >

  Thank you

  Scott

  Well, I was able to find a work around for a post in the forum a similar problem.  Here's what they have posted and it worked for me.  I just hope this does not break anything else.

  Change the lines above the lines on the bottom.

  I was able to actually understand the other night.  I needed to change that:

  var MenuBar = new Spry.Widget.MenuBar2 ("#MenuBar", {}
  widgetID: "Menu bar",
  widgetClass: 'MenuBarRightShrink the menu bar. "
  insertMenuBarBreak: false,
  mainMenuShowDelay: 100,.
  mainMenuHideDelay: 200,.
  subMenuShowDelay: 100,.
  subMenuHideDelay: 200
  });

  TO:

  var MenuBar = new Spry.Widget.MenuBar2 ("#MenuBar", {}
  widgetClass: 'menu bar MenuBarRightShrink '.
  });

  I hope that doesn't ' t mess up anything else, but no problems so far.

• Panel tabs Spry - align tabbs to the right? is this possible?

  Hello

  I'm working on spry CS4 and implimented tabs Panel in my site, which is in Hebrew - from right to left. How can I change the panels instead of r-t-l and not as default tabs?

  Thank you

  ADI

  These old eyes begin to become useless, I'm starting to see things that do not exist. Do you mind telling me what you see here http://pleysier.com.au/iconofsin14/

  I didn't add the following in the head section of the document after using the original SpryTabbedPanels support files.

  . {TabbedPanelsTab}
  float: right;
  }

  GRAMPS

• Several panels reducible Spry with different default values for open - close

  Hello

  The site I'm trying have a page with (5) folding panels Spry. (4) are by default open, (1) is set by default closed.

  I'm trying to get (3) open and (2) closed. However, defining a second flaw of closed panels give a syntax error.

  Someone knows how to operate, if possible at all?

  

  Remove the parenthesis after "CollapsiblePanel5". It should be like this:

  var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel ("CollapsiblePanel5", {contentIsOpen: false});

• DW tutorial Question (accordion, Spry Widget) beginner... :-(

  Hi, I have just finished this tutorial (http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html), but have a problem with my Spry Accordion Widget, when I saw the my footer site moves when I select a different panels in the widget, I read back and checked code/css but I still can't extra outside (don't laugh if it's something obvious!) Please can someone help me? I copied the code/CSS below.

  THANK YOU IN ADVANCE!

  INDEX OF...

  < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""

  " < html xmlns =" http://www.w3.org/1999/xhtml ">

  < head >

  < meta http-equiv = "Content-Type" content = text/html"; Charset = UTF-8 "/ >"

  < title > The Yacht Club < /title >

  < link hand. CSS"rel ="stylesheet"type =" text/css"/ >

  <!-[if IE 5] >

  < style type = "text/css" >

  / * Place corrections for IE 5 css box model * in this conditional comment * /.

  #sidebar1 {width: 230px ;}}

  < / style >

  <! [endif]--> <!-[if IE] >

  < style type = "text/css" >

  / * place patches css for all versions of Internet Explorer in this conditional comment * /.

  #sidebar1 {padding-top: 30px ;}}

  #mainContent {zoom: 1 ;}}

  / * the owner above zoom gives IE the hasLayout property, avoid several bugs * /.

  < / style >

  <! [endif]-->

  < script src = "SpryAssets/SpryAccordion.js" type = "text/javascript" > < / script > "

  < link href = "SpryAssets/SpryAccordion.css" rel = "stylesheet" type = "text/css" / > "

  < / head >

  < body >

  < div id = "container" >

  < div id = "header" > < img src = "images/thanks" width = "290" height = "144" / > "

  <!-end #header->

  < / div >

  < div id = "sidebar1″" >

  Welcome < h3 > < / h3 >

  < ul id = "nav" > < li > < a href = "" javascript:; "> home < /a > < /li > < li > < a href =" "javascript:;" > about us < /a > < /li > < li > < a href = "" javascript:; "> membership < /a > < /li > < li > < a href =" "javascript:;" > our boats < /a > < /li > < li > < a href = "javascript" "" " : ; "> course races < /a > < /li > < li > < a href =" "javascript:;" > contact us < /a > < /li > "

  < /ul >

  < div id = "Accordion1" class = "Accordion" tabindex = "0" >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > Atlantic ocean < / div >

  < div class = "AccordionPanelContent" > Donec EU mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus and fermentum ut, sapien. Surpassing metus mi, eleifend sollicitudin molestie id, varius, and nibh. Donec nec libero. < / div >

  < / div >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > Pacific ocean < / div >

  < div class = "AccordionPanelContent" > Donec EU mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus and fermentum ut, sapien. Surpassing metus mi, eleifend sollicitudin molestie id, varius, and nibh. Donec nec libero. < / div >

  < / div >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > Indian ocean < / div >

  < div class = "AccordionPanelContent" > Donec EU mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus and fermentum ut, sapien. Surpassing metus mi, eleifend sollicitudin molestie id, varius, and nibh. Donec nec libero. < / div >

  < / div >

  < / div >

  < p > < / p >

  <!-end # sidebar1″--> < / div >

  < div id = "mainContent" >

  Luxury yachts < h1 > < / h1 >

  < p > < img src = "images/sailboat.jpg" alt = "Sailboat" width = "136" height "310" = class = "fltrt" / > Lorem ipsum dolor sit amet, adipiscing elit our. " Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Amongst ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean restore. Etiam leo queer, venenatis lectus tristique in, fitness at, odio. Donec and ipsum and vehicula nonummy sapien. Suspendisse potentialit. Surpassing varius urna id quam. SED neque mi, varius eget, tincidunt nec, so id, libero. In eget purus. Vestibule ut nisl. Donec EU mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus and fermentum ut, sapien. Surpassing metus mi, eleifend sollicitudin molestie id, varius, and nibh.  Donec nec libero. < /p >

  < h2 > sailing to the Bahamas < / h2 >

  < p > Lorem ipsum dolor sit amet, adipiscing elit our. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Amongst ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean restore. Etiam leo queer, venenatis lectus tristique in, fitness at, odio. < /p >

  <!-end #mainContent--> < / div >

  <!-this element of compensation should immediately follow the #mainContent div in order to force the #container div to contain all the child floats--> < br class = 'clearfloat' / >

  < div id = "footer" >

  < p > & copy; Luxury yachts 2009 - bring a cup for the rescue plan < /p >

  <!-end #footer--> < / div >

  <!-end #container--> < / div >

  < script type = "text/javascript" >

  <!--

  var Accordion1 = new Spry.Widget.Accordion ("Accordion1");

  ->

  < /script >

  < / body >

  < / html >

  CSS HAND...
  @charset "UTF-8";

  {body

  margin: 0; / * It is advisable to zero, the margin and the filling of the body to hold element has a different default browser * /.

  padding: 0;

  text-align: center; / * This centers the container in IE 5 * browsers. The text is then set left aligned by default in the #container selector * /.

  color: #000000;

  are-family: Verdana, Arial, Helvetica, without serif.

  are-size: 100%;

  background-color: #FDFDFD;

  background-image: url(images/body_BG.jpg);

  background-repeat: repeat-x;

  }

  H1, h2, h3 {}

  make-weight: normal;

  color: #00583F;

  }

  H1 {}

  -font size: 140%;

  }

  H2 {}

  are-size: 130%;

  }

  H3 {}

  are-size: 120%;

  }

  #container {}

  width: 780px;

  margin: 0 auto;

  text-align: left;

  border-top-width: 0px;

  border-right-width: 0px;

  border-bottom-width: 0px;

  border-left-width: 0px;

  border-top-style: none;

  border-right-style: none;

  border-bottom-style: none;

  border-left-style: none;

  background-image: url(images/container_bg.gif);

  background-repeat: repeat-y;

  }

  #header {}

  background-color: #DDDDDD;

  background-image: url(images/headerBG.jpg);

  background-repeat: no-repeat;

  padding-top: 0;

  padding-right: 10px;

  padding-bottom: 0;

  padding-left: 0px;

  }

  {#sidebar1}

  float: left; / * because this element is floating, it takes a width * /.

  width: 200px; / * the background color will be displayed for the length of the content of the column, but no further * /.

  padding: 15px 15px 20px 10px;

  }

  ul #nav {}

  background-image: url(images/buoy.jpg);

  background-repeat: no-repeat;

  background-position: left down.

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 20px;

  margin-left: 0px;

  padding-top: 0px;

  padding-right: 0px;

  padding-bottom: 153px;

  padding-left: 0px;

  list-style-type: none;

  }

  #nav li a {}

  are-size: 90%;

  color: #FFF;

  text-decoration: none;

  background-color: #09553F;

  display: block;

  padding: 4px;

  border-bottom-width: 1px;

  border-bottom-style: solid;

  border-bottom-color: #3574A 7;

  }

  #nav li a: hover, #nav li a: active, #nav li a: {emphasis

  color: #123464;

  background-color: #B7DAD8;

  }

  #mainContent {}

  margin: 0 0 0 250px; / on this div element left margin creates the column on the left side of the page - no matter how content div the sidebar1″ contains, the space of the columns will remain. You can remove this line if you want the #mainContent div text to fill the space of #sidebar1 when the #sidebar1 content ends
  . */
  padding: 20px 0; / * Remember that the fill is space inside the box of div and margin is the space outside the div box * /.
  }
  #mainContent p, #sidebar1 p, #footer p {}
  are-size: 85%;
  line-height: 1.4;
  }
  #footer {}
  background-color: #00593D;
  padding-top: 10px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-left: 270px;
  }
  #footer p {}
  margin: 0; / * zero setting the margins of the first element in the footer will avoid the possibility of the collapse of the margin - a space between the div tags * /.
  padding: 10px 0; / * padding on that element will create space, just as it would the margin, free margin collapse question * /.
  color: #FFF;
  }
  .fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */
  float: right;
  margin left: 8px;
  }
  .fltlft {/ * this class can be used to float an element on your page to the left * /}
  float: left;
  right margin: 8px;
  }
  .clearfloat {/ * this class must be placed on an element div or break and should be the last item before closing a container should completely contain a float * /}
  clear: both;
  height: 0;
  font size: 1px;
  line-height: 0px;
  }
  SPRY CSS...
  @charset "UTF-8";

  / * SpryAccordion.css - version 0.4 - Pre - Release Spry 1.6.1 * /.

  / * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

  / * This is the selector for the main container of the accordion. For our style by default.

  * draw us left, right and bottom borders. The upper edge of the accordion

  * is made by the first AccordionPanelTab which never moves.

  *

  * If you want to limit the width of the Accordion widget, set a width

  * the accordion container. By default, our accordion expands horizontally to fill

  * a space available.

  *

  * The name of the class ("accordion") used in this switch is not necessary

  * make the widget function. You can use any class name you want to style the

  * Accordion container.

  */

  . Accordion {}

  overflow: hidden;

  border-right-width: 1px;

  border-bottom-width: 1px;

  border-left-width: 1px;

  border-right-style: solid;

  border-bottom-style: solid;

  border-left-style: solid;

  border-right-color: # 7-9297;

  border-bottom-color: # 7-9297;

  border-left-color: # 7-9297;

  }

  / * This is the selector for the AccordionPanel container which houses the

  * tab panel and panel content area. It is not make it visually, but we

  * ensure that it has zero margin and padding.

  *

  * The name of the class ("AccordionPanel") used in this switch is not necessary

  * make the widget function. You can use any class name you want to style a

  the container of accordion panel.

  */

  . {AccordionPanel}

  margin: 0px;

  padding: 0px;

  }

  / * This is the selector for the AccordionPanelTab. This container houses

  the Panel personnel. It is also the container where the user clicks

  * to open a specific panel.

  *

  * The name of the class ("AccordionPanelTab") used in this switch is not necessary

  * do the function widget
  . You can use any class name you want to style a
  the container of Accordion Panel tab.
  *
  * NOTE:
  * This rule uses the - moz-user-select and - khtml-user-select properties to prevent the
  * the user to select the text in the AccordionPanelTab. Here is the browser owner
  properties that only work in Mozilla browsers (such as FireFox) and KHTML
  * browsers (such as Safari), so they will not pass the W3C validation
  . If you want your documents to
  * validate and don't care if the user can select text in an AccordionPanelTab.
  * You can remove these properties without affecting the functionality of the widget.
  */
  . {AccordionPanelTab}
  background-color: #00583F;
  margin: 0px;
  padding: 2px;
  cursor: point;
  -moz-user-select: none;
  -khtml-user-select: none;
  color: #FFF;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-bottom-color: # 7-9297;
  border-bottom-color: # 7-9297;
  }
  / * This is the selector for the content area of a Panel. It is important to note that
  * You should never put any padding on the content area of the group if you plan to
  * use the animations of accordion panel. Place padding non-zero on the content
  * area can cause accordion suddenly increase in height, while signs alive.
  *
  * Anyone who styles an accordion * MUST * specify a height on the Accordion Panel
  * Content container.
  *
  * The name of the class ("AccordionPanelContent") used in this switch is not necessary
  * make the widget function. You can use any class name you want to style a
  the container of the accordion panel content.
  */
  . {AccordionPanelContent}
  overflow: auto;
  margin: 0px;
  height: 200px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  }
  / * This is an example of how to change the appearance of the tab of the Panel which is
  * currently open. The "AccordionPanelOpen" class is added and removed programmatically
  * to panels as long as the user clicks on the tabs in the accordion.
  */
  . AccordionPanelOpen. {AccordionPanelTab}
  background-color: #FFF;
  color: #005b3E;
  }
  / * This is an example of how to change the appearance of the tab of the Panel as the
  * mouse passes over it. The "AccordionPanelTabHover" class is added programmatically
  * and removed containers tab panel as the mouse enters and leaves the tab container.
  */
  . {AccordionPanelTabHover}
  color: #AAC7CE;
  }
  . AccordionPanelOpen. {AccordionPanelTabHover}
  color: #555555;
  }
  / * This is an example of how to change the appearance of all the Panel tabs when the
  * Accordion has focus. The class "AccordionFocused" is programmatically added and removed
  * whenever the accordion wins or loses the keyboard focus.
  */
  . AccordionFocused. {AccordionPanelTab}
  background-color: #00583F;
  color: #FFF;
  }
  / * This is an example of how to change the appearance of the tab of the Panel which is
  * currently open when the accordion is in focus.
  */
  . AccordionFocused. AccordionPanelOpen. {AccordionPanelTab}
  background-color: #FFF;
  color: #00583F;
  }
  My apologies in advance if I ask a stupid question!
  !
  

  Your footer is designed to move down account for the extra space created when you activate the menu accordion naviation. The turtorial example shows not happening? I can't find a link for the complete example on the page you mentioned to the check.

• Why do I get a message "You missed A Print" with the Universal Crossword Print Widget?

  The Universal Crossword Print Widget has been interrupted, and there will be no new content. However, you can still receive the crossword: Universal print by registering on the front of your web compatible HP printer, or by visiting HPConnected.com (in the United States) or ePrintCenter.com (elsewhere). Note: You will need a web printer of HP to subscribe.

  Here's how to uninstall the Widget of printing:

  1. Click the Windows Start button.
  2. Click on Control Panel.
  3. Click on uninstall a product.
  4. Select Universal Crossword Print Widget, then click on uninstall.

  Crossword Universal Widget printing (c) 2011 Universal Uclick. All rights reserved.

  I work on behalf of HP.

  Sorry, I didn't explain very well. Try this:

  1. Go to http://www.uclick.com/client/trn/fcx/
  2. Crossword Daily Universal page (Flash required). Look at the value of "today", displayed at the top of the page, then click the "Back Date" link to the bottom of the page until the date displayed is the one you want. See the illustration below
  3. 
  4. When you have the desired date, you can click on Options, then on print Puzzle, to print the crossword.