Okay
  Public Ticket #3442851
Team member feature
Closed

Comments

  •  3
    Paulo natal started the conversation
    August 23, 2023 at 2:45pm

    Hi,

    Just wondering if on the "Team Member" feature is possible to to have a popup closing button(X) on the top right corner instead of the mouse cursor. Please see the screenshot attached for clarification on what's intended. 

    Thank you!

    Paulo Natal

    Attached files:  iScreen Shoter - 20230823154456607.jpg

  •  3,001
    Andrew replied
    August 23, 2023 at 3:39pm

    Hey Paulo,

    Thank you for reaching out to us.

    Currently, our theme does not come with this feature out of the box. I have noted to add this to the wishlist for future updates.

    We appreciate your understanding.

    Best regards,

  •  3
    Paulo natal replied
    August 24, 2023 at 8:01am

    Hi,

    Could you please help me implement this? The client really wants it and it would look bad on me to say it isn't possible. I can easily place an X on the top right corner of the modal but I'm not sure how to make it functional. 

    Could you please provide the Javascript code I can associate with the button click so the modal closes on click of the X? And regarding the cursor effect and appearance? Could I easily remove it? 

    Thanks a lot!

    Paulo

  •  8,939
    Tahir replied
    August 24, 2023 at 10:32am

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .nectar_team_member_overlay .team_member_details .bio-inner .mobile-close {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    display: block;
    height: 32px;
    width: 32px;
    border-radius: 50px;
    transform-origin: center;
    margin-bottom: 10px;
    cursor: pointer;
    border: 2px solid;
    border-color: #63718c;
}
.nectar_team_member_overlay .team_member_details .bio-inner .mobile-close:before {
    position: absolute;
    display: block;
    height: 2px;
    width: 16px;
    left: 6px;
    top: 13px;
    content: ' ';
    background-color: #63718c!important;
}
.nectar_team_member_overlay .team_member_details .bio-inner .mobile-close:after {
    position: absolute;
    display: block;
    height: 16px;
    width: 2px;
    left: 13px;
    top: 6px;
    content: ' ';
    background-color: #63718c!important;
}
.nectar-close-indicator .inner.visible, .nectar-close-indicator.visible {
    display: none !important;
}
.nectar_team_member_overlay .team_member_details .bio-inner .mobile-close {
    position: relative;
    right: 0px;
}
.nectar_team_member_overlay .team_member_details .bio-inner{
    display: flex;
    flex-direction: column;
}
.nectar_team_member_overlay .team_member_details .bio-inner .mobile-close {
    align-self: flex-end;
}

    Thanks

    ThemeNectar Support Team 

  •  8,939
    Tahir replied
    August 24, 2023 at 10:32am

    Also if it doesn't work let us know the live page URL which has the Team Member on it. 

    Thanks 

    ThemeNectar Support Team 

  •  3
    Paulo natal replied
    August 24, 2023 at 4:32pm

    That is great, thank you very much! There is one issue though. If I try to select some text or click anywhere inside the popup the popup closes(slides right out of view). How could I prevent this and have the closing functionality only on the X button on the top right corner? 

    This is the page where it has been implemented: 

    https://wordpress-441454-2566233.cloudwaysapps.com/the-ministry-2/

    Pass: MNR2022!

    Thank you very much!

    Best, 

    Paulo 

  •  8,939
    Tahir replied
    August 24, 2023 at 5:01pm

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .nectar_team_member_overlay.open {
    pointer-events: none !important;
}
.nectar_team_member_overlay .team_member_details .bio-inner .mobile-close {
    pointer-events: all !important;
}

    Thanks

    ThemeNectar Support Team 

  •  3
    Paulo natal replied
    August 28, 2023 at 10:26am

    This is great. Thanks a lot for your help!