Sidebar Custom Social Icons Position

  • Resolved spruc3w00d

    (@spruc3w00d)


    4 years, 11 months ago

    Hello.

    I have created a sidebar text widget to display custom Social Media icons using html code, and the layout of the icons is incorrect. I want the icons to display horizontally and not vertically.

    The problem is, even though the icons are only 35px(w) x 35px(h) in size, the entire row within the sidebar text widget acts as a hyperlink. If you place your mouse pointer over the Twitter or Parler icons and move it horizontally to the right, you’ll understand what I mean.

    Here is the code I am using for the widget. Is something missing? What am I doing wrong?

    <div>
    <div style=”float: left;”></div>
    Twitter
    <div style=”float: left;”></div>
    Parler
    </div>

    Thank you for your help. I look forward to your response.

    Cheers @spruc3w00d

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter spruc3w00d

    (@spruc3w00d)

    Whoops. Sorry about that. How do I display the html code without it executing?

    Thread Starter spruc3w00d

    (@spruc3w00d)

    <textarea>
    <div>
    <div style=”float: left;”></div>
    Twitter
    <div style=”float: left;”></div>
    Parler
    </div>
    </textarea>

    Thread Starter spruc3w00d

    (@spruc3w00d)

    Shoot. That didn’t work either. Aaarrrgh.

    Thread Starter spruc3w00d

    (@spruc3w00d)

    Okay, one more time. Fingers crossed.

    <xmp>
    <div>
    <div style=”float: left;”></div>
    Twitter
    <div style=”float: left;”></div>
    Parler
    </div>
    </xmp>

    Thread Starter spruc3w00d

    (@spruc3w00d)

    Help. I give up.

    there is a CODE button in the top line of this little editor window here.

    either click this CODE button once, then paste your code, then click the CODE button again;

    or mark your pasted code and then click the CODE button.

    try something like this:

    <div style="float: left;">
<a href="https://twitter.com/BigArmPatriots" target="_blank" rel="noopener noreferrer"><img style="margin: 5px;" src="https://i0.wp.com/www.bigarmconservatives.org/wp-content/uploads/2020/04/Twitter_Icon.jpeg?resize=35%2C35" alt="Twitter" height="35" width="35"></a>
</div>
<div style="float: left;">
<a href="https://parler.com/profile/BigArmPatriots/posts" target="_blank" rel="noopener noreferrer"><img style="margin: 5px;" src="https://i0.wp.com/www.bigarmconservatives.org/wp-content/uploads/2020/03/parler_icon.png?resize=35%2C35" alt="Parler" height="35" width="35"></a>
</div>

    and make sure that the ‘automatically add paragraph tags’ is unticked (if applicable)

    Thread Starter spruc3w00d

    (@spruc3w00d)

    Brilliant! Thank you, Michael! @alchymyth

    I see now where I made my mistakes.

    Question: What does this piece of code do? [resize=35%2C35]

    Thread Starter spruc3w00d

    (@spruc3w00d)

    Hello @alchymyth

    I have one other question. What is this text you added to the front of my image URLs? [https://i0.wp.com/]

    Thanks, @spruc3w00d

    What is this text you added to the front of my image URLs? [https://i0.wp.com/]

    I didn’t add anything – this is the code I copied from your site, from the code output from the textwidget…

    it could be that you are using the Jetpack plugin with some image optimisation settings which prompts WordPress to host your images on their server….

    Thread Starter spruc3w00d

    (@spruc3w00d)

    @alchymyth

    Interesting.

    My apologies, thanks for letting me know.

    Cheers @spruc3w00d

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Sidebar Custom Social Icons Position’ is closed to new replies.