Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • June 9, 2017 at 10:15 pm #806231
    clairemartindigital

    Hello guys,

    Could you tell me how I can add the word ‘Share’ to the left of the share buttons on the single product pages?

    The desired outcome is to have the word share in the same line as the social share buttons – just like the below:

    Share __________________ (facebook-icon without border) (twitter-icon without border)

    Many Thanks!

    June 12, 2017 at 6:48 am #806729
    Nikko

    Hey clairemartindigital,

    Try editing this file wp-content/themes/enfold/includes/helper-social-media.php and find this line of code (line 217):

    $this->html .= "<div class='av-share-box'>";

    replace it with:

    $this->html .= "<div class='av-share-box'><span class="share-label">Share</span>";

    Then add this css code in Quick CSS (located in Enfold > General Styling):

    #top .av-share-box ul {
    display: inline-block;
    text-align: left;
    border: 0;
    width: auto;
}

.av-share-box .av-share-box-list {
    display: inline-block;
    margin-left: 10px;
}

.av-share-box .av-share-box-list .av-share-link {
    display: inline-block;
    border: 0;
    margin: 0 5px;
}

.av-share-box .av-share-box-list .av-share-link a {
    padding: 0;
}

span.share-label {
    position: relative;
    top: -8px;
    font-weight: bold;
}

    Hope this helps :)

    Best regards,
    Nikko

    June 12, 2017 at 8:20 am #806771
    clairemartindigital

    Hi Nikko,

    thanks for getting back. I updated

    $this->html .= “<div class=’av-share-box’>”;

    with:

    $this->html .= “<div class=’av-share-box’><span class=”share-label”>Share</span>”;

    which broke the site. Can you double check if this is actually working for you? Have I made a mistake?

    Thanks

    June 12, 2017 at 12:48 pm #806854
    Rikard

    Hi,

    Please try this instead to see if you have any luck with it:

    $this->html .= '<div class="av-share-box"><span class="share-label">Share</span>';

    Best regards,
    Rikard

    June 13, 2017 at 10:10 am #807314
    clairemartindigital

    Hi Rikard,
    thanks, that worked very well. Please see screenshot below. How can I add in the horizontal bar as per my original message?

    View post on imgur.com

    Many Thanks!

    June 14, 2017 at 4:33 pm #808078
    Victoria

    Hi clairemartindigital,

    This code adds more space, makes icons clickable area a bit bigger, I would not add that line, it does not make sense and there is no easy way to do it.

    
.av-share-box .av-share-box-list .av-share-link {
    margin: 0px;
    width: 26px;
    text-align: center;
}
#top .av-share-box ul {
   margin-left: 20px;
}

    Let me know what you think.
    Best regards,
    Victoria

    July 11, 2017 at 8:13 am #819139
    clairemartindigital

    Hi Victoria,

    ok i think you are right regarding the line. But how can i increase the size of the icons and the word ‘share’ as well as change the mouse over effect to not have the background color but instead just change the icon to a black on hover?

    July 12, 2017 at 8:42 am #819867
    Victoria

    Hi clairemartindigital,

    The icon is back right now, so on hover it does not need to change. If you remove the background color on hover, there will be no hover effect. Is this what you need?
    Here is the code for the making things bigger:

    
 .av-share-box ul li a {
        font-size: 25px;
 }
 span.share-label {
     font-size: 23px; 
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    July 12, 2017 at 11:06 am #819924
    clairemartindigital

    Hi Victoria,

    thanks for this.

    Re the colour of the icons and background. It would be great to have the same behavious as the icons in the footer. In detail, it would be great to have the icons grey, and on hover change to black (without any coloured background). Does that make sense?

    P

    July 12, 2017 at 12:25 pm #819957
    Sarah

    Hi!

    Please replace this part of Victoria’s code:

    .av-share-box .av-share-box-list .av-share-link {
    margin: 0px;
    width: 26px;
    text-align: center;
}

    With this instead:

    .av-share-box .av-share-box-list .av-share-link {
    margin: 0px;
    width: 26px;
    text-align: center;
    color: #b2b2b2;
}
.av-share-box .av-share-box-list .av-share-link:hover a {
    color: #000000 !important;
    background: none !important;
}

    Let us know if you need further help!
    Best regards,
    Sarah

    July 12, 2017 at 1:02 pm #819975
    clairemartindigital

    Hi Sarah,

    thanks, great, that is much better. A couple of things:

    1. there seems to be some sore of border between the 2 icons. see website.
    2. can we increase the spacing between the 2 icons
    3. how can we vertically center the share icons between the element above and below

    Thanks Sarah

    July 15, 2017 at 4:24 am #821529
    Ismael

    Hi,

    1.) Remove the border with the following css code.

    .av-share-box ul li {
    border: 0;
}

    2.) Use this one to increase the space between the icons.

    .av-share-box .av-share-box-list .av-share-link a {
    padding: 0 10px;
}

    3.) And the following css code to adjust the vertical alignment of the social icon container.

    #top .av-share-box ul {
    margin-left: 0;
}

    Best regards,
    Ismael

    July 15, 2017 at 5:22 am #821545
    clairemartindigital

    Hi Ismael,

    thanks again for your awesome work.

    A couple of things:

    a) i lost the word share (see Rikards message from June 12, 2017 at 12:48 pm) after the last theme update (have reinstated this already) due to me not copying the edited file to the child theme. could you just confirm the process i need to take ie do i need to recreate all the folders in the child theme?

    b) see my mockup posted on June 13, 2017 at 10:10 am. i was hoping to have that line between the word and the icons. viktoria stated it would be difficult to implement this. is that actually true? couldnt this be done with css?

    thanks Ismael

    July 17, 2017 at 4:33 am #822282
    Ismael

    Hi,

    1.) I’m sorry but the helper-social-media.php file can’t be overridden in the child theme. Please add the following script in the functions.php file instead.

    // add share title
function ava_custom_script_mod(){
?>
<script>
(function($){
		$('.av-share-box').prepend('<span class="share-label">Share</span>');     
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod');

    2.) Please add the following css code.

    .share-label:after {
    content: '-------';
    margin: 0 5px;
}

    Best regards,
    Ismael

    July 17, 2017 at 4:42 am #822287
    clairemartindigital

    Thanks Ismael,

    great work!

    thanks, you can close this

    July 17, 2017 at 9:40 am #822424
    John Torvik

    Hi,

    We`re glad that your problem was solved!

    Best regards,
    John Torvik

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.