Okay
  Public Ticket #3075812
User Account Button
Closed

Comments

  •  2
    Adam started the conversation
    June 30, 2022 at 7:57pm

    I have enabled the User Account Button which adds the icon to the main menu.  I am wondering if there is some CSS or a way to open that link in a new tab.

    I have that setup to send them to a customer portal and I'd rather it not open in the same window so they can get back to the site.

  •  1,877
    Judith replied
    June 30, 2022 at 8:17pm

    Hello Adam,

    Thanks for keeping in touch.

    Please refer to this documentation on how you can add an external link to open the user account on a new window:https://www.wpbeginner.com/plugins/how-to-open-external-links-in-a-new-window-in-wordpress/.

    Thanks.

  •  2
    Adam replied
    July 5, 2022 at 2:07pm

    Thank you for the reply, but this doesn't really help me because the User Account Button is not listed in the menu.  Do you have I'm sure this could be accomplished with some CSS.

  •  8,839
    Tahir replied
    July 5, 2022 at 2:19pm

    Hey Again,

    You will need a small snippet of JavaScript to handle it. You can copy and paste this entire snippet into the "Custom JS Code" in the Salient options panel > general settings > css/script related tab:

    <script>
jQuery(document).ready(function($){
    jQuery('#top nav ul #nectar-user-account a').attr('target','_blank');
     jQuery('#header-outer #top .mobile-user-account').attr('target','_blank');
});
</script>

    Thanks


    ThemeNectar Support Team 

  •  2
    Adam replied
    July 5, 2022 at 2:30pm

    Perfect!  Thank you!

  •  6
    Ali replied
    July 6, 2022 at 12:47pm

    Hi, following on from this, is there a way to change the icon? so instead of icon-salient-m-user it is an upload icon? (Where can we find the list of available icons used in the theme?)

  •  1,877
    Judith replied
    July 6, 2022 at 2:41pm

    Hello Ali,

    Please try this css:

    .icon-salient-m-user:before {
    content: '';
    background: url(https://sitelink.com/ACCOUNT.png) no-repeat 0px 0px;
    width: 35px;
    height: 35px;
    display: block;
    position: relative;
    background-size: 35px;
    top: 2px;
}

    Thanks.