How can I add the line under the title so my custom panel looks like the other panels?
Add the following style code to the custom template to display the title underline.
<style>
.oracle-cx-fragmentsUI-cx-fragment-container .oj-sp-foldout-panel-title-underline { background-color: var(--cx-pillar-color) !important; }
</style>
Here's an example of the style code inserted in the panel template code:
<template id="opportunitiesPanelTemplate2">
<div class="oj-flex">
<style>
.oracle-cx-fragmentsUI-cx-fragment-container .oj-sp-foldout-panel-title-underline { background-color: var(--cx-pillar-color) !important; }
</style>
<oj-vb-fragment name="oracle_cx_fragmentsUI:cx-panel" class="oj-sp-foldout-layout-panel" bridge="[[ vbBridge ]]">
<oj-vb-fragment-param name="resource"
value='[[ {"name": "opportunities", "primaryKey": "OptyId", "puid": "OptyNumber" } ]]'></oj-vb-fragment-param>
<oj-vb-fragment-param name="sortCriteria" value='[[ [{"attribute": "EffectiveDate","direction": "descending" }] ]]'></oj-vb-fragment-param>
<oj-vb-fragment-param name="query"
value='[[ [{"type": "qbe", "provider": "adfRest", "params": [{"key": "TargetPartyId", "value": $base.page.variables.id }]}] ]]'></oj-vb-fragment-param>
<oj-vb-fragment-param name="rollupLayoutId" value="[[ 'OpportunityLayout' ]]"></oj-vb-fragment-param>
<oj-vb-fragment-param name="title" value="[[$page.translations.partiesResourceBundle['Header.Opportunities']]]"></oj-vb-fragment-param>
<oj-vb-fragment-param name="dynamicLayoutContext" value="{{ $dynamicLayoutContext }}"></oj-vb-fragment-param>
</oj-vb-fragment>
</template>