Modification of the Spry Accordion CSS rule

Similar Questions

• Help put links on the spry accordion graphics

  I have a sidebar with a spry accordion. Each content area has a picture inside. I want users to be able to click on the image (after the accordion is opened to her) and a link to another page. But I can't find anyway to attach a link to the image inside the accordion. Help, please!

  Thank you.

  But I can't find anyway to attach a link to the image inside the accordion. Help, please!

  Click on in the tag in Code view, and add the link using the property inspector.

• The list of CSS rules that disappears (Mac)

  I do not know where is the appropriate place to report a bug:

  Sometimes a double click on a name for the style in the CSS Palette of Styles will be the list of style rules to disappear (instead of open the CSS rule Definition dialog box).

  If you are experiencing the problem:

  1. don't panic.

  2 double-click New exactly in the same place

  I do not know where is the appropriate place to report a bug:

  A bug report filing manager ensures that Adobe will read it

  https://www.Adobe.com/cfusion/mmForm/index.cfm?name=wishform

  Using CS5?

• How to combine the Spry Accordion with link pseudo classes?

  Hello

  I tried to get the text of the link I've included in the tabs Panel accordion to behave according to the behaviour of the accordion (in particular the hover state) but so far struggled to do. I hope I explained that well - does anyone know if it's possible to do? I can provide the code later if necessary.

  Essentially, when you hover over the text of the link it works as expected, but as soon as you place the cursor on it - while still having your mouse over the tab-text changes color (which is okay) but because you're still hovering above the current tab, only the background color is clashing with the color of the text. If you mouse then on the tab itself the background color changes and everything seems normal again. I am looking for a way to combine the features of both, namely to have the sequence of the text, but with the right css applied so that it looks correctly part of the accordion behavior.

  Help would be very appreciated.

  See you soon.

  If you change

  onclick = "MM_goToURL ('parent', ' audio / index.ht ml');" return document. MM_returnValue'> Audio

  TO

  Audio

  It works the way you want.

  Also have a look here http://backyardfurniture.com.au on the Help menu of the Accordion Panel.

  GRAMPS

• How to change the font in the definition of CSS rules?

  Hi, as you can see in this picture, the font is unreadable. Where can I change this?

  Thanks for help.

  

  There is no place to change this setting.  DW only uses system fonts.  What this means, is that you have a corrupted on your system.  You can try to take a better screenshot and a heads up that the police ( http://new.myfonts.com/WhatTheFont/ ) to try to identify him.  You have installed all new policies recently?  If so start to remove them.

• Dreamweaver will not insert a Spry Accordion with css

  I'm working on an accordion Spry in Dreamweaver and get into trouble, so I have deleted all its css in the css Panel.  Now, when I say Insert > Spry Accordion, it is not all css.

  Uh-oh, I did?

  Make a new page.  Insert the Spry Accordion and save the page folder in the root of your site.

  DW should save active Spry to your folder of active Spry.  If not, see below for the default CSS file.

  @charset "UTF-8";

  / * SpryAccordion.css - version 0.5 - 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 {}

  border-left: 1px solid gray;

  border-right: 1px solid black;

  border-bottom: 1px solid gray;

  overflow: hidden;

  }

  / * 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

  * make the widget function. 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: #CCCCCC;

  border-top: 1px solid black;

  border-bottom: 1px solid gray;

  margin: 0px;

  padding: 2px;

  cursor: pointer;

  -moz-user-select: none;

  -khtml-user-select: none;

  }

  / * 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;

  padding: 0px;

  height: 200px;

  }

  / * 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: #EEEEEE;

  }

  / * 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: #555555;

  }

  . 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: #3399FF;

  }

  / * 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: #33CCFF;

  }

  / * Printing rules * /.

  @media print {}

  . Accordion {}

  overflow: visible! important;

  }

  . {AccordionPanelContent}

  display: block! important;

  overflow: visible! important;

  height: auto! important;

  }

  }

  Copy & paste into a new CSS file empty.  Save in the Spry Assets like SpryAccordion.css file

  Nancy O.

• Default Spry Accordion Panel

  CONTEXT: I inserted a Spry Accordion with six different panels. Each Panel has its own set of links. Each link corresponds to a page in a long series of linked pages which together form a single document. Each panel of links represents a contiguous set of linked pages and a section of the document. In addition, I created a model for the entire document which includes the Spry Accordion just described.
  
  GOAL: create an editable region in the template that will allow me to control the default Panel for each page of the document.
  
  FAILURE of ATTEMPT: documentation Adobe to set the default for the Spry Accordion Panel suggests the following JavaScpript:
  
  < script type = "text/javascript" >
  var acc8 = new Spry.Widget.Accordion ("Accordion8", {defaultPanel: [someNumber]});
  < /script >
  
  where someNumber is an integer that is greater or equal to zero. When this code is entered into the model error.
  
  DISCUSSION: continued research in the JavaScript file that controls the accordion, I was able to find the function that controls the default Panel. It appears like this:
  
  Spry.Widget.Accordion = function (element, opts)
  {
  This.Element = this.getElement (element);
  this.defaultPanel = 0;
  this.hoverClass = "AccordionPanelTabHover";
  this.openClass = "AccordionPanelOpen";
  this.closedClass = "AccordionPanelClosed";
  this.focusedClass = "AccordionFocused;
  this.enableAnimation = true;
  this.enableKeyboardNavigation = true;
  this.currentPanel = null;
  This.Animator = null;
  this.hasFocus = null;
  This.Duration = 500;
  
  this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
  this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
  
  this.useFixedPanelHeights = true;
  this.fixedPanelHeight = 0;
  
  Spry.Widget.Accordion.setOptions (, opts, true);
  
  Unfortunately, some browsers like Safari, style sheets in our
  page depends may not have been loaded at the time, we are called.
  This means that we must postpone attaching our behavior until after the
  OnLoad event is triggered, because some of our behaviors are based on dimensions
  specified in the CSS.
  
  If (Spry.Widget.Accordion.onloadDidFire)
  this.attachBehaviors ();
  on the other
  Spry.Widget.Accordion.loadQueue.push (this);
  };
  
  QUESTION: How can I access this feature of in my template to change the setting for this.defaultPanel?

  Quote:
  The main JavaScript file for the accordion can be controlled by a
  model, since he lives in a separate .js file.

  I do not use templates myself, but it looks like the correct way to approach
  the problem is the one used on your 'ATTEMPT failed. You can try it
  again and report message the exact error you get and at what stage. Maybe
  you get help on that.

  EXPRESSION OF GRATITUDE
  Thank you for your encouragement. Indeed, part of the solution to my problem was discovered through a reconsideration of my attempt failed. The other part came from the information provided me while helping another person with a related, but different problem. It turns out that the line of code in my failed ATTEMPT is automatically placed in the model when the SPRY accordion is inserted. Unaware of his presence and the right place I am he entered by mistake a second time. This triggers not only an error message, but it renders unusable, various other parts of my document.

  THE SOLUTION
  First step: find the line of code that is similar to that given by the following text:
  
  In my model, this code was found at the bottom of the HTML body tag.

  Second step: understand that the name of the variable 'acc8' and the name of the "Accordion8" parameter provided in the sample code above are arbitrary, and that the two are automatically defined when then a SPRY accordion is inserted. Important is that these names are likely to be different from what you see in the sample code above, and that you need and probably should not edit them in your document.

  Step 3: change the number in the name pair: value indicated as defaultPanel:2 to a number between 0 and one less than the number of panels that you create in your accordion. It is this number that allows you to determine the Panel that appears when the document is opened.

  Step four: Save and test in your favorite browser. Enjoy!

  CAUTION:
  This experience taught me a crucial lesson on the use of Dreamweaver. Dreamweaver has a mind of its own and can easily ruin you in seeking to correct your own mistakes for you. The solution is to save your document with a second copy before attempting any innovation that is not already integrated in the Dreamweaver program.

  FURTHER EXAMINATION:
  As I created a template to use with other documents, I will now try to make this area of my template editable, so that I can change the default setting of every other page that I create from my template. As I still do this, understand that the steps above, even if it is valid for a document template, may or may not be valid for pages created from the template. I hope they are and it will keep experimenting.

• Focus, browsers &amp; amp; Spry Accordion

  I use the Spry Accordion (and love), but I saw a minor adverse effect:
  In some browsers (Chrome and FF), there is a frame appearing around the widget when it is focused.
  In Chrome, it's a sort of rectangle gold and is actually pretty enough in the context of the page.
  but Firefox uses a dotted rectangle that gets cut on one edge by the nesting of objects and seems sloppy and unattractive.
  Does anyone know how I could affect this feature of development?
  I changed as many CSS features as I could relate to make the accordion to blend in the text, but none of them seems to have an impact on this indicator of focus.
  
  ThxEnAvance,
  F/C

  CORDFrank wrote:
  > Oh browsers...
  > This property removes the frame in Chrome, but does not change the effect in Firefox.
  > Any MozzaGurus out there?

  Add to the. Accordion class:
  outline: none;

  For me, this solves the problem in both Firefox 3 and chrome, without the need to change the attribute border on the AccordionFocused class.

  --
  Danilo Micen
  | http://blog.Extensioneering.com/
  | Extensioneer WebAssist
  | Adobe Community Expert

• How to remove a tab in the menu accordion?

  I have a page that I created for my Web site, which offers a menu accordion on that.  Initially, I created the menu in Dreamweaver CS4 using the Spry Accordion Widget, then transferred this code to the page of the site.  The words in the menu, I use images for each dropdown tab menu.  I'm trying to remove the last tab in the menu, but every time I do my entire menu no longer functions and the tabs, when you click on it, is no longer fall down.

  http://www.tocico.org/?page=2015_workshop_test

  Above is the link to the page I'm working on.  The last tab of the menu called OCD (over the button register now) thought processes.  All I want to do is remove this tab, but when I do, everything on the menu no longer works.

  Please let me know if you need anything else from me.

  Nevermind, I was able to understand.  After that I had deleted lines 631-644 the code had changed for some reason any.

  CHANGED TO THIS:

  
  

  TO DO THIS:

  //

  []] >
  
  

  It turns out that I was just missing the code at the end.  Thanks for your help!

• Using Spry Accordion menu problem

  I use the Spry Accordion widget as a menu/table of contents in a Web site and have encountered a problem that requires customization that I can't find anywhere.

  Here is the link: http://2ndlookgraphics.com/slProfile/index.html

  I placed the menu links pointing to 'parent', which seems to be working in an iframe.

  My problem is that whenever you click on a link in any other first round table, the menu returns to the opening position with you first Panel opened.

  I would like if possible to have the Panel which is being accessed to stay open until another tab is open.

  If this is not possible, it would be best if the first Panel was closed initially and the accordion effect to learn hovering rather that click.

  I use a 'fluid' responsive checkered but who does not seem to have an impact on this issue.

  I would like some advice on this please.

  All the panels closed-

  More details here:

  http://Adobe.github.IO/Spry/articles/data_api/APIs/accordion.html

• On Dreamweaver CC how to css rule definition box?

  On the other Dreamweavers when I wanted to change a css, I selected the css and clicking on the pencil icon to open the css rule definition box.

  The only way I have found to get access to the box on the new CC css rule definition is when I create a new div and then there is an option for a new style and he opens the box.

  My question is how do the box once the rule is created? the pencil icon is gone.

  Break not good workflow Adobe, some people have a work in progress...

  Please help, thanks.

  

  The new designer of CSS in CC has many more features and has a different interface than previous versions of DW.

  To change the styles for a chosen selector, you must firstly, highlight the selector in the Panel "selectors". In your case, first select "#wrapper" from the Panel of selectors. Then the "Properties" Panel below displays all the available customizations you can do with this selector.

• How to change the Spry CSS tab

  I like to use these old screens provided with the former DW Spry tab.  I just looked in DW CC and it looks like they aren't there and more.  But anyway, I made one for my client.  Now, they want to get one of the tabs on the far right of the margin.  See the image below:

  

  I don't know yet if it's possible to do and if someone has done this before, can you tell me what code I need to change in the CSS?  I would have joined the CSS file, but it seems that you cannot attach files in this forum, so I've copied below.

  Please offer any means to change the color of the tabs, etc. - I just need to know how - or at all - this tab can be moved to the right.

  Thanks, Guy deaf

  PS I'm sorry that the CSS code does not correctly appear in this forum.  When I type this message, looks like it will display line-by-line, but it's not.  I'm sorry.

  ---------------------------------------------

  @charset "UTF-8";
  
  
  /* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
  
  
  /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
  
  
  /* Horizontal Tabbed Panels
   *
   * The default style for a TabbedPanels widget places all tab buttons
   * (left aligned) above the content panel.
   */
  
  
  /* This is the selector for the main TabbedPanels container. For our
   * default style, this container does not contribute anything visually,
   * but it is floated left to make sure that any floating or clearing done
   * with any of its child elements are contained completely within the
   * TabbedPanels container, to minimize any impact or undesireable
   * interaction with other floated elements on the page that may be used
   * for layout.
   *
   * If you want to constrain the width of the TabbedPanels widget, set a
   * width on the TabbedPanels container. By default, the TabbedPanels widget
   * expands horizontally to fill up available space.
   *
   * The name of the class ("TabbedPanels") used in this selector is not
   * necessary to make the widget function. You can use any class name you
   * want to style the TabbedPanels container.
   */
  .TabbedPanels {
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    clear: none;
    width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
  }
  
  
  /* This is the selector for the TabGroup. The TabGroup container houses
   * all of the tab buttons for each tabbed panel in the widget. This container
   * does not contribute anything visually to the look of the widget for our
   * default style.
   *
   * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
   * necessary to make the widget function. You can use any class name you
   * want to style the TabGroup container.
   */
  .TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
  }
  
  
  /* This is the selector for the TabbedPanelsTab. This container houses
   * the title for the panel. This is also the tab "button" that the user clicks
   * on to activate the corresponding content panel so that it appears on top
   * of the other tabbed panels contained in the widget.
   *
   * For our default style, each tab is positioned relatively 1 pixel down from
   * where it wold normally render. This allows each tab to overlap the content
   * panel that renders below it. Each tab is rendered with a 1 pixel bottom
   * border that has a color that matches the top border of the current content
   * panel. This gives the appearance that the tab is being drawn behind the
   * content panel.
   *
   * The name of the class ("TabbedPanelsTab") used in this selector is not
   * necessary to make the widget function. You can use any class name you want
   * to style this tab container.
   */
  .TabbedPanelsTab {
    position: relative;
    top: 1px;
    float: left;
    padding: 5px 20px;
    margin: 0px 1px 0px 0px;
    font: bold 12px sans-serif;
    background-color: #f1c185;
    list-style: none;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    border-radius: 5px 5px 0px 0px;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
  }
  
  
  /* This selector is an example of how to change the appearnce of a tab button
   * container as the mouse enters it. The class "TabbedPanelsTabHover" is
   * programatically added and removed from the tab element as the mouse enters
   * and exits the container.
   */
  .TabbedPanelsTabHover {
    background-color: #ffd197;
  }
  
  
  /* This selector is an example of how to change the appearance of a tab button
   * container after the user has clicked on it to activate a content panel.
   * The class "TabbedPanelsTabSelected" is programatically added and removed
   * from the tab element as the user clicks on the tab button containers in
   * the widget.
   *
   * As mentioned above, for our default style, tab buttons are positioned
   * 1 pixel down from where it would normally render. When the tab button is
   * selected, we change its bottom border to match the background color of the
   * content panel so that it looks like the tab is part of the content panel.
   */
  .TabbedPanelsTabSelected {
    background-color: #ffe9cd;
    border-bottom: 1px solid #EEE;
  }
  
  
  /* This selector is an example of how to make a link inside of a tab button
   * look like normal text. Users may want to use links inside of a tab button
   * so that when it gets focus, the text *inside* the tab button gets a focus
   * ring around it, instead of the focus ring around the entire tab.
   */
  .TabbedPanelsTab a {
    color: black;
    text-decoration: none;
  }
  
  
  /* This is the selector for the ContentGroup. The ContentGroup container houses
   * all of the content panels for each tabbed panel in the widget. For our
   * default style, this container provides the background color and borders that
   * surround the content.
   *
   * The name of the class ("TabbedPanelsContentGroup") used in this selector is
   * not necessary to make the widget function. You can use any class name you
   * want to style the ContentGroup container.
   */
  .TabbedPanelsContentGroup {
    clear: both;
    border-top: solid 1px #999;
    background-color: #FFF;
  }
  
  
  /* This is the selector for the Content panel. The Content panel holds the
   * content for a single tabbed panel. For our default style, this container
   * provides some padding, so that the content is not pushed up against the
   * widget borders.
   *
   * The name of the class ("TabbedPanelsContent") used in this selector is
   * not necessary to make the widget function. You can use any class name you
   * want to style the Content container.
   */
  .TabbedPanelsContent {
    overflow: hidden;
    padding: 4px;
  }
  
  
  /* This selector is an example of how to change the appearnce of the currently
   * active container panel. The class "TabbedPanelsContentVisible" is
   * programatically added and removed from the content element as the panel
   * is activated/deactivated.
   */
  .TabbedPanelsContentVisible {
  }
  
  
  /* Vertical Tabbed Panels
   *
   * The following rules override some of the default rules above so that the
   * TabbedPanels widget renders with its tab buttons along the left side of
   * the currently active content panel.
   *
   * With the rules defined below, the only change that will have to be made
   * to switch a horizontal tabbed panels widget to a vertical tabbed panels
   * widget, is to use the "VTabbedPanels" class on the top-level widget
   * container element, instead of "TabbedPanels".
   */
  
  
  .VTabbedPanels {
    overflow: hidden;
    zoom: 1;
  }
  
  
  /* This selector floats the TabGroup so that the tab buttons it contains
   * render to the left of the active content panel. A border is drawn around
   * the group container to make it look like a list container.
   */
  .VTabbedPanels .TabbedPanelsTabGroup {
    float: left;
    width: 10em;
    height: 20em;
    background-color: #EEE;
    position: relative;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
  }
  
  
  /* This selector disables the float property that is placed on each tab button
   * by the default TabbedPanelsTab selector rule above. It also draws a bottom
   * border for the tab. The tab button will get its left and right border from
   * the TabGroup, and its top border from the TabGroup or tab button above it.
   */
  .VTabbedPanels .TabbedPanelsTab {
    float: none;
    margin: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
  }
  
  
  /* This selector disables the float property that is placed on each tab button
   * by the default TabbedPanelsTab selector rule above. It also draws a bottom
   * border for the tab. The tab button will get its left and right border from
   * the TabGroup, and its top border from the TabGroup or tab button above it.
   */
  .VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: solid 1px #999;
  }
  
  
  /* This selector floats the content panels for the widget so that they
   * render to the right of the tabbed buttons.
   */
  .VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    padding: 0px;
    width: 30em;
    height: 20em;
  }
  
  
  /* Styles for Printing */
  @media print {
  .TabbedPanels {
    overflow: visible !important;
  }
  .TabbedPanelsContentGroup {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
  }
  .TabbedPanelsContent {
    overflow: visible !important;
    display: block !important;
    clear:both !important;
  }
  .TabbedPanelsTab {
    overflow: visible !important;
    display: block !important;
    clear:both !important;
  }
  }
  

  !-[CodeBlockStart:dffe5525-a787-4a98-a87f-f24554b12141]-->@charset 'UTF-8'; / * SpryTabbedPanels.css - 0.6 - pre-release Spry 1.6.1 version * / / * Copyright (c) 2006] Adobe Systems Incorporated. All rights reserved. * / / * Horizontal tabbed panels * the default style for a TabbedPanels widget puts all the tab buttons * (stalled left) above the content panel. * / / * This is the selector for the main container of TabbedPanels. For our * style by default, this container does not contribute anything visually, * but it is floated to the left to ensure that all floating or compensation done * with any which of her children the elements lie entirely within the limits the * TabbedPanels container, in order to minimize any impact or unwanted * interaction with other floating elements on the page which may be used * for page layout. * If you want to limit the width of the widget TabbedPanels, define a * width of the container TabbedPanels. By default, the widget TabbedPanels * extends horizontally to fill the available space. * The name of the class ("TabbedPanels") used in this selector is not * necessary to make the widget service. You can use a class name, you * want to style the TabbedPanels container. */ . TabbedPanels {overflow: hidden;}   margin: 0px;   padding: 0px;   Clear: none;   Width: 100%; / * Hack IE to force the layout correct when preceded by a paragraph. (hasLayout bug) * /} / * this is the selector for the TabGroup. The container of TabGroup houses * all buttons on the tab for each tabs in the widget panel. This container * does not contribute to what both visually in the appearance of the widget for our * default style. * The name of the class ("TabbedPanelsTabGroup") used in this selector is not * necessary to make the widget service. You can use a class name, you * want to style the TabGroup container. */ . TabbedPanelsTabGroup {margin: 0px;}   padding: 0px; } / * This is the selector for the TabbedPanelsTab. This container houses * the title of the Panel. It is also tab 'button' that the user clicks on * to activate the corresponding content panel so that it appears on top * of the other tabs in the widget panels. * For our style by default, each tab is positioned relatively 1 pixel down from * where it would normally. This allows each tab overlap content * panel that renders underneath. Each tab is rendered with a background of 1 pixel * border which has a color that corresponds to the upper edge of the current content * panel. This gives the appearance that the tab is drawn behind the * content panel. * The name of the class ("TabbedPanelsTab") used in this selector is not * necessary to make the widget service. You can use any class name you want * to style the tab container. */ . TabbedPanelsTab {position: relative;}   Top: 1px;   float: left;   padding: 5px 20px;   margin: 0px 1px 0px 0px;   Police: bold 12px without serif.   background-color: #f1c185;   list-style: none;   border-left: 1px solid #CCC;   border-bottom: 1px solid #999;   border-top: 1px solid #999;   border-right: 1px solid #999;   border-radius: 5px 0px 5px 0px;   -moz-user-select: none;   -khtml-user-select: none;   cursor: pointer; } / * This selector is an example how to change the appearance of a button in the tab * container as the mouse enters in the it. The class is "TabbedPanelsTabHover" * programatically add and remove the element tab as the mouse between in * in and out of the container. */ . TabbedPanelsTabHover {background-color: #ffd197 ;} / * this selector is an example how to do to change the appearance of a button in the tab * container after the user has clicked on it to activate a content panel.} * The 'TabbedPanelsTabSelected' class is programmatically added and removed * the tab element as long as the user clicks button tab containers in * the widget. * As mentioned above, for our style by default, the tab buttons are positioned * 1 pixel down where he would normally. What is the tab key * selected, we change its bottom border to match the background color of the * content panel so that it looks like the tab is the content panel. */ . TabbedPanelsTabSelected {background-color: #ffe9cd;}   border-bottom: 1px solid #EEE; } / * This selector is an example of how to make a link inside a tab button * look like normal text. Users may want to use the links within a tab button * so that when it gets the focus, the text * inside * the tab button gets a focus * ring around it, instead of the ring around the whole tab. * /. TabbedPanelsTab a {color: black;}   text-decoration: none; } / * This is the selector for the ContentGroup. The ContentGroup container houses * all panels of content for each tabs in the widget panel. For our * style by default, this container provides the background color and borders that * surround content. * The name of the class ("TabbedPanelsContentGroup") used in this selector is * not necessary to make the widget function. You can use a class name, you * want to style the ContentGroup container. */ . TabbedPanelsContentGroup {clear: both;}   border-top: 1px solid #999;   background-color: #FFF; } / * This is the selector for the content panel. The content panel contains the * content for a single panel tabs. For our default style, this container * provides some padding, so that content is not pushed upward against the * widget borders. * The name of the class ("TabbedPanelsContent") used in this selector is * not necessary to make the widget function. You can use a class name, you * want to style the content container. */ . TabbedPanelsContent {overflow: hidden;}   padding: 4px; } / * This selector is an example of how to change the appearance of the currently * active panel container. The class is "TabbedPanelsContentVisible" * programatically added and removed from the content as the Panel item * is enabled/disabled. */ . TabbedPanelsContentVisible {} / * vertical tabbed panels * following rules override some of the default rules above so that the * TabbedPanels widget is rendered with its buttons on the tab on the left of * the active content panel. * With the rules defined below, the only change that will be made * to move a widget panels to horizontal tabs to vertical tabbed panels * widget, is to use the 'VTabbedPanels' class on the top-level widget * element container, instead of "TabbedPanels. */ . VTabbedPanels {overflow: hidden;}   Zoom: 1; } / * This selector floats the TabGroup so that the tab buttons it contains * make left of active content panel. A border is drawn around * the group container to make it look like a container from the list. */ . VTabbedPanels. TabbedPanelsTabGroup {float: left;}   Width: 10em;   height: 20em;   background-color: #EEE;   position: relative;   border-top: 1px solid #999;   border-right: 1px solid #999;   border-left: 1px solid #CCC;   border-bottom: 1px solid #CCC; } / * This selector disables the float property that is placed on each button of the tab * by the rule above TabbedPanelsTab default selector. He also draws a background * border for the tab. The tab button will get his left and right border of * the TabGroup and its superior border of the tab above it or button TabGroup. */ . VTabbedPanels. TabbedPanelsTab {float: none;}   margin: 0px;   border-top: none;   border-left: none;   border-right: none; } / * This selector disables the float property that is placed on each button of the tab * by the rule above TabbedPanelsTab default selector. He also draws a background * border for the tab. The tab button will get his left and right border of * the TabGroup and its superior border of the tab above it or button TabGroup. */ . VTabbedPanels. TabbedPanelsTabSelected {background-color: #EEE;}   border-bottom: 1px solid #999; } / * This selector fleet contained signs of the widget while they * make it to the right of the tabs buttons. */ . VTabbedPanels. TabbedPanelsContentGroup {clear: none;}   float: left;   padding: 0px;   Width: 30em;   height: 20em; } / * Printing styles * / @media print {.} TabbedPanels {overflow: visible! important;}. TabbedPanelsContentGroup {display: block! important;}   overflow: visible! important;   height: auto! important; } . TabbedPanelsContent {overflow: visible! important;}   display: block! important;   clear: both! important; } . TabbedPanelsTab {overflow: visible! important;}   display: block! important;   clear: both! important; } }

  Add the class like below:

• Open Ocean

Delete the following in your css spry as file its in the ' query print media "and has no effect on the screen - have added you it to the wrong place."

{.alignRight}

position: relative;

Top: 1px;

float: right! important;

padding: 5px 20px;

margin: 0px 1px 0px 0px;

Police: bold 12px without serif.

background-color: #f1c185;

list-style: none;

border-left: 1px solid #CCC;

border-bottom: 1px solid #999;

border-top: 1px solid #999;

border-right: 1px solid #999;

border-radius: 5px 0px 5px 0px;

-moz-user-select: none;

-khtml-user-select: none;

cursor: pointer;

}

Add the below css just above the press query written:

{.alignRight}

float: right! important;

}

/ * Print styles * /.

@media print {}

• string ' / viewController-context-root "automatically get added in the CSS rule

  My version of jDeveloper is 12.2.1.0.0

  
  

  I expanded the alta-v1 skin and put a CSS rule in there that would apply to a background image of an element. The CSS rule is as follows:

  .notification.bell{
      background-image:url("/images/bell.png");
      background-repeat:no-repeat;
      background-position:center center;
      background-size:70% 70%;
  }
  

  When I run the page and display the CSS rule in Firebug, this is what happens in:

  .notification.bell {
    background-image: url("/ViewController-context-root/images/bell.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 70% 70%;
  }
  

  I made sure that I am editing the CSS file by changing the name of the file from bell.png to bell2.png and it was reflected in Firebug. What I can't understand, is why is the extra string added to the URL and hence.

  PS: I also noticed a strange thing at the moment. The URL in the address bar appears as

  http://127.0.0.1:7101/ViewController/faces/home.jspx

  Should also contain the name of the project? Something like this:

  http://127.0.0.1:7101/myProjectName/ViewController/faces/home.jspx

  A I spoil with a frame inside jDeveloper?

  User, I need to check the css thing. I have never seen it myself, but never looked especially for her.

  The second part of the question is easy to answer: the string you see is defined in the viewcontroller project root context parameter. Set this parameter to something that you like and start the application again. You should see the new value of the parameter.

  Timo

• Failed to set the new CSS rule for the background image

  Hello

  Maybe I've finally lost my mind... I myself find it impossible to add a background image to the header of my project portion.  I select the "header" in the property Panel section, click on "add a new CSS rule.  Curiously, DW does not in the name of the selector for me, which is probably an indication that something is wrong, but I don't know what.  I went through the steps of filling in the name of the switch by hand, choose the .jpg file and setting is like a background image, but he never takes.

  There has got to be something simple that experienced users of DW can explain.  Go ahead, experts, you out there?

  Thank you...

  When things go south, it is almost always caused by a mistake of small coding somewhere.

  Unbalanced tags are the usual suspects.

  Run validation and fix the errors reported.

  Nancy O.

• Dreamweaver CC: Layouts start CSS &amp; missing of the Spry menu bar

  • I preset web training and our client updated for Dreamweaver CS4 Dreamweaver CC 2015. That are the CSS Starter layouts in Dreamweaver, for example the column 2 fixed, header and footer layout? I don't find it in Dreamweaver CC 2015. It was a good starting point to teach students to create a web page using one of these start CSS page layouts and then customize.
  • I also can't find the Spry menu bar to create a menu (up to three levels) bar.
  • What is the best options for me to use instead the CSS starter layouts & the Spry menu bar? Students know nothing about web design when they start with the course.

  It is more a spry menu bar, which was crap anyway. You can learn how to make a simple CSS - only menu or a menu jQuery.

  The new version of DW includes a starter starter site, which is how many sites asre built these days. Bootstrap also contains a navigation pane.