skinning of af|panelTabbed in Oracle ADF
With chain of article of ADF skinning i.e. skinning of af:panelBox in Oracle ADF and !important CSS Declarations: How and when to use in ADF Skin. Today i will talk about skinning of panelTabbed
Requirement – To do skinning of panelTabbed in ADF.
Solution- For this, you have to understand this component .Header section contains three part
-> tab-start
-> tab-content
-> tab-end
try below code in your skin file and you can skin your panelTabbed . I am pasting below code for your skin file and explain what all this code is doing
-> tab-start
-> tab-content
-> tab-end
try below code in your skin file and you can skin your panelTabbed . I am pasting below code for your skin file and explain what all this code is doing
/*it will be applied on header of tab*/af|panelTabbed::header{ background-color: transparent; border: none; }/*it will be applied on selected header of tab*/af|panelTabbed::header:selected{ background-color:#233977 ; color: White; border: none ; border-color:transparent ; }af|panelTabbed::tab-start, af|panelTabbed::tab-end, af|panelTabbed::tab:hover af|panelTabbed::tab-start, af|panelTabbed::tab:hover af|panelTabbed::tab-end { background-image:none !important; background-color:#233977 !important; color:#233977 !important; border: none ; border-color:transparent; }af|panelTabbed::tab:selected af|panelTabbed::tab-content, af|panelTabbed::tab:selected:hover af|panelTabbed::tab-content { background-color:#233977 ; color:White; background: none; border: none ; border-color:transparent; }af|panelTabbed::tab:hover af|panelTabbed::tab-content { background-color: #C3E0F2; ; background: none ;}/*it will be applied on text in tab of panelTabbed */af|panelTabbed::tab af|panelTabbed::tab-text-link { font-size:14px; font-weight:bold; color:#233977 ; line-height:16px;} /*it will be applied on text in selected tab of panelTabbed */af|panelTabbed::tab:selected af|panelTabbed::tab-text-link { color:White; border: none; font-size:14px; font-weight:bold; line-height:16px;}af|panelTabbed::tab.p_AFSelected af|panelTabbed::tab-content, af|panelTabbed::tab.p_AFSelected:hover af|panelTabbed::tab-content{background-color: #233977 ; background-image:none;color: White;border: none;}af|panelTabbed::tab.p_AFSelected af|panelTabbed::tab-end, af|panelTabbed::tab.p_AFSelected:hover af|panelTabbed::tab-end{background-color: transparent; background-image:none;}af|panelTabbed::tab:selected af|panelTabbed::tab-content{ border: none;}af|panelTabbed::body { background-color: #233977 ; color: White; border: thick ;} |
Final output is like below picture
ليست هناك تعليقات:
إرسال تعليق