Adding Sharing Icons to Upfront

Hi. Love Upfront.

I am trying to add sharing icons to Upfront (scribe). I've tried doing this by adding a code draggable element, and adding my own code. The code was not saved, so now I don't know what to do.

Thanks for any help.

  • Nastia

    Hello John

    Hope you are doing well today! I :heart: Upfront too!

    Would you please share the code that you are trying to save here with us?

    Just want to clarify, do you wish to add social icons like Facebook, Twitter etc, or sharing buttons to share your content?

    Can you save other changes with Upfront, or it's just the code element is not saving?

    Would you please grant access to your site from WPMU DEV > Suppoert so I can have a closer look?

    Please advise,

    Cheers,
    Nastia

  • John

    Hi Nastia
    Thanks for your reply.

    I am not having problems saving anything else.

    I am trying to add this:

    <ul>
    <li class="share-item item-twitter">
    
    <a target="_blank" href="http://twitter.com">
    
    <svg class="icon icon-static icon-twitter-stroke" viewBox="-223 1635 35 35" height="30" width="30" xmlns="http://www.w3.org/2000/svg">
    <use xlink:href="http://32a.36d.myftpupload.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-twitter-stroke" xmlns:xlink="http://www.w3.org/1999/xlink">
    </svg>
    
    <svg class="icon icon-hover icon-twitter-color" viewBox="-223 1475 35 35" height="30" width="30" xmlns="http://www.w3.org/2000/svg">
    <use xlink:href="http://32a.36d.myftpupload.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-twitter-color" xmlns:xlink="http://www.w3.org/1999/xlink">
    </svg>
    </a>
    </li>
    
    <li class="share-item item-facebook">
    
    <a target="_blank" href="http://facebook.com">
    
    <svg class="icon icon-static icon-facebook-stroke" viewBox="-63 995 35 35" height="30" width="30" xmlns="http://www.w3.org/2000/svg">
    <use xlink:href="http://32a.36d.myftpupload.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-facebook-stroke" xmlns:xlink="http://www.w3.org/1999/xlink">
    </svg>
    
    <svg class="icon icon-hover icon-facebook-color" viewBox="-63 835 35 35" height="30" width="30" xmlns="http://www.w3.org/2000/svg">
    <use xlink:href="http://32a.36d.myftpupload.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-facebook-color" xmlns:xlink="http://www.w3.org/1999/xlink">
    </svg>
    </a>
    </li>
    </ul>

    I seem to get an error (red triangle) but I am not sure what the error is. It seems that I can really only add basic code in the draggable code box.

    I believe I have granted you access to all things.

    Once again, you are all so great.

  • Nastia

    Hello John

    I tried your code on my site and it's not working too. It's not working on a simple html page as well.

    I have made some changes, and inserted the following code in the HTML tab:

    <ul class=&quot;share-wrapper&quot;>
        <li class=&quot;share-item item-twitter&quot;>
            <a href=&quot;http://twitter.com&quot; target=&quot;_blank&quot;>
                <svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;30&quot; height=&quot;30&quot; viewBox=&quot;-223 1635 35 35&quot; class=&quot;icon icon-static icon-twitter-stroke&quot;>
                    <use xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xlink:href=&quot;http://dad.b01.myftpupload.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-twitter-stroke&quot;></use>
                </svg>
                <svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;30&quot; height=&quot;30&quot; viewBox=&quot;-223 1475 35 35&quot; class=&quot;icon icon-hover icon-twitter-color&quot;>
                    <use xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xlink:href=&quot;http://dad.b01.myftpupload.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-twitter-color&quot;></use>
                </svg>
            </a>
        </li>
        <li class=&quot;share-item item-facebook&quot;>
            <a href=&quot;http://facebook.com&quot; target=&quot;_blank&quot;>
                <svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;30&quot; height=&quot;30&quot; viewBox=&quot;-63 995 35 35&quot; class=&quot;icon icon-static icon-facebook-stroke&quot;>
                    <use xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xlink:href=&quot;http://dad.b01.myftpupload.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-facebook-stroke&quot;></use>
                </svg>
                <svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;30&quot; height=&quot;30&quot; viewBox=&quot;-63 835 35 35&quot; class=&quot;icon icon-hover icon-facebook-color&quot;>
                    <use xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xlink:href=&quot;http://dad.b01.myftpupload.com/wp-content/themes/uf-scribe/ui/sprites.svg#icon-facebook-color&quot;></use>
                </svg>
            </a>
        </li>
    </ul>

    You may replace the Facebook and the Twitter link in the code above.

    And this, I put into a CSS tab:

    ul.share-wrapper {
        list-style-type: none;
        height: 15px;
        padding: 0px;
        margin: 0px -5px 0px 0px;
        text-align: right;
    }
    
    li.share-item {
        display: inline-block;
        margin: 0 5px;
        height: 30px;
    }
    
    li.share-item .icon-hover {
        display: none;
    }
    
    li.share-item:hover .icon-static {
        display: none;
    }
    
    li.share-item:hover .icon-hover {
        display: block;
    }
    
    li.share-item a {
        display: block;
        width: 100%;
        height: 100%;
    }

    Please see the screenshot bellow:

    Let us know if you require any further assistance!

    Cheers,
    Nastia

  • Nastia

    Hello John

    It seems your html is not much different than mine was.

    The differences are that there is added a CSS class to the<ul> element and I've changed the URL of the image.

    How can I force the height of an object to a particular size? Like a text box, or a widget?

    You can start by adjusting the element's top and bottom padding. Click on a Padding Element, like it's shown in the attached screenshot bellow:

    You can select an Advanced Padding button to customize left and right padding as well.

    Another way is to adjust manually the element size. You can drag the element's bar from all sides to any direction. In case when the element is not getting any smaller, it means that it reached it's size limit.

    And of course, you can add CSS code to each element where you can set a width and height. Click on element's settings > go to Appearance > create a new Preset for your element > click on Edit Preset CSS > Add the CSS code to the CSS editor.

    Please see the attached screenshot:

    I hope this helps!

    Cheers,
    Nastia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.