css and html editing in Upfront

Using Upfront based loosely around the Gillie theme.

I have another site running Scribe that has some nice social buttons coded in the footer.

It might seem like a daft question but I am a beginner so forgive me- I'm wondering could I paste this code into a code element positioned in the footer of serasongs and edit the urls?

I have tried to do this but it doesn't work.

My problem here is that, although I'm willing to learn by experimenting and reading around, progress is slow and most online resources are not targeted at people who know next to nothing about html. Thanks

  • Predrag Dubajic
    • Support

    Hey Paul,

    Hope you're doing well today :slight_smile:

    These icons are specific to Spirit theme as they use image that's included in the Spirit files.
    To make this work on other theme it would require bit more work, I will explain that in detail below but I would want to suggest simpler solution first.

    Simple solution:
    Download any icon images you want, use image element to add those images to your footer and link them to your social network profiles.

    More work solution:
    First thing you would need is to get same images Spirit uses, I have attached them below.

    Download both of them and upload them to your media.

    Now we need to create same HTML structure as in Spirit, you can do this by adding code element and click on "Write Custom Code".

    When editor opens add this HTML code in HTML Tab:

    <ul class=&quot;socials&quot;>
      <li><a class=&quot;social-icon youtube&quot; href=&quot;http://youtube.com&quot; target=&quot;_blank&quot;></a></li>
      <li><a class=&quot;social-icon facebook&quot; href=&quot;http://facebook.com&quot; target=&quot;_blank&quot;></a></li>
      <li><a class=&quot;social-icon twitter&quot; href=&quot;http://twitter.com&quot; target=&quot;_blank&quot;></a></li>
    </ul>

    Replace URL to your desired social networks.

    Now switch to CSS tab and add this code:

    /* Your styles here */
    .socials {
        height: 34px;
        list-style: none;
        padding: 0px;
        margin: 0;
        text-align: right;
    }
    .socials li {
        display: inline-block;
    }
    .socials li a {
        display: block;
        width: 35px;
        height: 34px;
        margin: 0 5px;
    }
    
    .social-icon:before {
        content: &quot;&quot;;
        background: url(&quot;URL_TO_sprite.png_IMAGE&quot;);
        background-image: url(&quot;URL_TO_sprite.svg_IMAGE&quot;), none;
        width: 35px;
        height: 35px;
        display: block;
    }
    
    .youtube:before {
     background-position: -63px -222px;
    }
     .youtube:hover:before,  .youtube.dark { background-position: -223px -222px;
    }
     .facebook:before {
     background-position: -63px -383px;
    }
     .facebook:hover:before,  .facebook.dark { background-position: -223px -383px;
    }
     .twitter:before {
     background-position: -63px -543px;
    }
     .twitter:hover:before,  .twitter.dark { background-position: -223px -543px;
    }

    Note that in above code there are URL_TO_sprite.png_IMAGE and URL_TO_sprite.svg_IMAGE placeholders which you need to replace with the URL of those two images uploaded to your media folder.

    After you have added correct image URL in both places save the changes and you should have Spirit icons.

    Let us know if you need some additional help with this :slight_smile:

    Best regards,
    Predrag

  • Paul
    • The Incredible Code Injector

    Very kind,

    Thanks Pedrag.

    Oddly, when I select the code element and paste the html into the html tab, it disappears when I save it. There is also a red warning triangle displayed in the top bar of the editor.

    The CSS on the other hand seems to be fine.

  • Adam Czajczyk
    • Support Gorilla

    Hello Paul!

    It seems like the HTML part of the code got messed up in Predrag's post. I'm sorry about that, it happens sometimes but fortunately very rarely.

    Try this HTML instead please:

    <ul class="socials">
      <li><a class="social-icon youtube" href="http://youtube.com" target="_blank"></a></li>
      <li><a class="social-icon facebook" href="http://facebook.com" target="_blank"></a></li>
      <li><a class="social-icon twitter" href="http://twitter.com" target="_blank"></a></li>
    </ul>

    Let me know if that helped please!

    Best regards,
    Adam

  • Paul
    • The Incredible Code Injector

    Thanks Adam

    The html has saved. Good.

    I just need to work out how to get the image URLs to work now.

    I'm a bit confused as there are numerous svg files in the folder.

    I've downloaded these and converted them to png and uploaded them.

    It looks like I have to link to the individual svg files as well as the pngs in the css tab. Is that right?

    All very basic stuff I'm afraid.

    Thanks for your help guys.

  • Predrag Dubajic
    • Support

    Hi Paul,

    If you download the image I uploaded in my first comment you can use those and there's no need to convert anything.

    When you have both of the images uploaded go to Media panel in your WP admin and click on the image to open more details, including URL which would look something like this:
    http://domain.com/wp-content/uploads/2016/10/sprite.png

    Paste that URL in your CSS code and that should be it.

    If you're having issues with this could you grant us support access to your site and we will check this for you :slight_smile:
    To enable support access you can follow this guide here:
    http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Best regards,
    Predrag

  • Paul
    • The Incredible Code Injector

    Hi Predrag
    I've had a look at this but my issue is there are too many unknowns for me to work out how to do it.

    I've set up the code element and copied the code in.

    I'm not sure I understand how to generate the URL for the images as they seem to be .svg and there are a number of them in the file.

    So, I can't get them to upload unless I convert them.

    I might just be being thick by the sound of it but I've been playing around for hours with this and I'm getting nowhere.

    Support access is on.

    Thanks

  • Dimitris
    • Support Star

    Hey there Paul,

    hope you're doing good and don't mind chiming in! :slight_smile:

    I just took the initiative and made this to work for you. Let me explain the steps that I've made:

    1. Installed Code Snippets plugin. I used this in order to create a custom filter that allow us to upload a .svg file in Media library. The code snippet can be found here /wp-admin/admin.php?page=edit-snippet&id=1

    2. Uploaded sprite.png and sprite.svg files via Media library /wp-admin/media-new.php

    3. Edited the following CSS part of code element in UF Editor

    background: url("/wp-content/uploads/2016/12/sprite.png");
    background-image: url("/wp-content/uploads/2016/12/sprite.svg"), none;

    Take care,
    Dimitris

  • Paul
    • The Incredible Code Injector

    Hi guys,

    Sorry, just trying to set the footer these appear in a global and the icons have now disappeared.

    Having a look at the coding to see if I can work out why but I'm a bit baffled.

    Thanks
    Paul

    PS: code seems to be fine and still shows the changes Dimitris just made (i.e. I don't think it's reverted to an earlier version)

  • Paul
    • The Incredible Code Injector

    Ok- actually, my mistake.

    There was another tab open and conflicting.

    Changes are still there and working.

    One last thing then: how to I get these icons to "share to" FB, Twitter etc. rather than simply open them?

    Thanks again.

  • Dimitris
    • Support Star

    Hey there Paul

    how to I get these icons to "share to" FB, Twitter etc. rather than simply open them?

    This may be a bit tricky to accomplish as you have to dynamically build the appropriate share buttons for each social network like Facebook and Twitter share buttons.

    A far more easy solution, would be to use a plugin for this. You can find a vast variety out there, here's a quick search in official repository.
    https://wordpress.org/plugins-wp/search/social+share+buttons/

    Take care,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.