Layout use case: changing default styles on a layout-based drop-down list

The Quick Order Item field on the Customer Portal Place Order page uses a layout-based drop-down list. By default, the list uses the color gray for items not in focus and darker gray with a blue border for an item in focus. In this example, we will change the list to use red, blue, and a thick white border.

Extra steps are provided at the beginning of the task, to help you find the layout for a portal component when you do not know the layout name.

Caution: 
Some portal layouts have multiple versions. Before modifying a layout, see About responsive UI layouts.
  1. Sign in to the Customer Portal and click the maintenance icon to enter developer mode. See Developer mode.
  2. Click the inspect icon to enter inspection mode. See Inspection mode.
  3. Move the mouse over the Item field until the PlaceOrderQuickDerItemDropdown700 FDF is highlighted.
  4. Click the pin icon in the cell header to lock the component.
  5. In the inspection ribbon at the top of the page, click the folder icon next to FDF. This opens PlaceOrderQuickDerItemDropdown700 in the FDF Editor.
  6. On the Main Attributes tab, you will see that this component uses the BasicItemInfo700 layout. Click the icon next to the layout name. This opens the layout in the Layout Editor.
  7. In the Layout Editor, click Edit. A copy of the layout is made for your originator.
  8. In the right pane, collapse the Collection section and expand the Regions section.
  9. With the Main region selected, specify new styles in the Styles field. For this example, enter these values:
    • ipf-backgroundcolor(#990000)
    • ipf-backgroundcolor:focus(#3366ff)
    • ipf-border:focus([3px,solid,#ffffff])
    Note: When you enter multiple style values in the Styles field, they must be separated by a space. For information about styles you can use, see Style availability summary.
  10. Click Save.
  11. To review the change, refresh the portal page.
    This table shows how the Item field looks before and after the style change. View this example online, or print in color.
    Default styles Custom styles
    layout_based_dd_before layout_based_dd_after
  12. Make this change for all versions of the layout, when applicable.