When you would like to customize the menu in ADF you have to use css.
To do this you need to understand that a tab consist of three parts
- start(left side of the tab)
- content(middle of the tab)
- end(right side of the tab)
in the application we have two states of the tab, not selected and selected.
Example
Not selected Tab
(left side of the tab, not selected)
af|navigationPane-tabs::tab-start{
background-image: url("../img/tab_left.png") !important;
}
(middle of the tab, not selected)
af|navigationPane-tabs::tab-content{
background-image: url("../img/tab_content.png") !important;
}
(right side of the tab, not selected)
af|navigationPane-tabs::tab-end{
background-image: url("../img/tab_right.png") !important;
}
Selected Tab
(left side of the tab, selected)
af|navigationPane-tabs::tab:selected af|navigationPane-tabs::tab-start{
background-image: url("../img/tab_left_selected.png") !important;
}
(middle of the tab, selected)
af|navigationPane-tabs::tab:selected af|navigationPane-tabs::tab-content{
background-image: url("../img/tab_content_selected.png") !important;
}
(right side of the tab, selected)
af|navigationPane-tabs::tab:selected af|navigationPane-tabs::tab-end{
background-image: url("../img/tab_right_selected.png") !important;
}
We use !important to make sure that a property is always applied.