Question
Clocklike Minds
PL
Last activity: 22 Jun 2018 8:13 EDT
Tabs have hover style. Don't know why.
Hello Community,
I'm analyzing the application's style, specifically the tab layout. As a user, I see that the tabs have their style for the hover event , but I can not find where it is defined in the style rule. When I look there, I do not see any settings for this event, and what's more interesting, the preview on the right does not have such a style event as well (the color of the tab after hovering is the same as the active tab).
Is there any other place where the collision event can be handled for bookmarks?
My style rule doesn't inherit anything.
It's 7.2.2 version
Accepted Solution
Pegasystems Inc.
US
Hi,
To investigate I followed the below steps.
1) Go to the Application skin - tabs(Standard,Sub, etc..). Select a Format - eg: Standard.
2)Launch Developer tools in Chrome. Now, Inspect the tab(eg : Standard tab 2). (<a> tab ) - Screenshot -1
3)In Elements tab, there is a Styles tab where is ":hov" . Click on this. then click on hover checkbox.As soon as you click on his checkbox, you will find what is the CSS that is being applied on hover(refer screenshot -2 ).
4)Since I was able to see it is coming using "headerTabbed,headerTabsList,a#TABANCHOR:hover etc", I did a content search on the Search box(refer screenshot - 4.1,4.2) and tried to find the same in text files.
Am I clear now?
Learning
IN
Hello,
You can check it in browser debugger tools. Use DOM Inspector to find out the class that is appended in mouse over.
After inspecting the class, if you mouseout the class will be removed in menu item. Add it manually to the menuitem in HTML Source of DOM Inspector, Now you can see the css file where this class has been included.
Hope this helps
Thanks,
Hari
Pegasystems Inc.
US
Just to add, there are multiple CSS files(py-enduser71-workarea-overrides, workform_pzdesignerstudio, workform_enduser etc..) which have his hover defined. For the scenario I mentioned above it was coming from "workform_pzdesignerstudio" file. In case, you want to modify, you always have that option, because these are available rules.
Hope this answers your query. Kindly notify if it does.
Regards,
Rachit
Clocklike Minds
PL
Thank you for the answer Rachit, but still, I don't understand, how did you investigate that? Do you know the reason, why the hover event cannot be changed from skin tool in Designer Studio?
Accepted Solution
Pegasystems Inc.
US
Hi,
To investigate I followed the below steps.
1) Go to the Application skin - tabs(Standard,Sub, etc..). Select a Format - eg: Standard.
2)Launch Developer tools in Chrome. Now, Inspect the tab(eg : Standard tab 2). (<a> tab ) - Screenshot -1
3)In Elements tab, there is a Styles tab where is ":hov" . Click on this. then click on hover checkbox.As soon as you click on his checkbox, you will find what is the CSS that is being applied on hover(refer screenshot -2 ).
4)Since I was able to see it is coming using "headerTabbed,headerTabsList,a#TABANCHOR:hover etc", I did a content search on the Search box(refer screenshot - 4.1,4.2) and tried to find the same in text files.
Am I clear now?
Pegasystems Inc.
US
To answer your second question "why the hover event cannot be changed from skin tool in Designer Studio" - there are no options currently in application skin where we can set this hover event. Thus, we cannot change/apply this hover event from Application skin.