Center Text Caption Under Sidebar Image Widget

  • Resolved toupstrey

    (@toupstrey)


    9 years, 5 months ago

    Hello everyone,

    I’m trying to center the email address under the email icon on the right sidebar of this page: https://redstickfrench.com/wp/contact-us/

    I added the image to the sidebar using Jetpack’s image widget. Ideally, I’d like to turn the image into a mailto clickable link, but I’ve looked around and can’t quite figure out how to do that, or if it’s even possible.

    As a second-best option, I added the email address in plain text as the “caption” for this image widget. For some reason, it won’t center it under the image. I’ve tried inspecting the CSS using Safari’s developer option, but I can’t quite figure out the right class/code to get the text to align center.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hello!

    For centering your email under the envelope icon, try this:

    .wp-caption.aligncenter {
    width: 150px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    }

    To make just that link go directly to email it would format like this:

    <a href="mailto:[email protected]">[email protected]</a>

    If you can figure out where to make that image link, that format would be like this…tho maybe the theme doesnt make that possible to do!

    <a href="mailto:[email protected]"><img src="https://redstickfrench.com/wp/wp-content/uploads/2015/06/emailicon.png" width="85" height="85"></a>

    Hope this helps!

    Thread Starter toupstrey

    (@toupstrey)

    Thanks, BjScott!

    I tried adding the CSS you included to center the email address under the Mail icon, but it didn’t change the formatting. I had tried something similar to that as well with only the text addressing the center alignment. I put it into my custom CSS module and made sure it saved, too. I’m not sure why it didn’t affect the alignment of the caption.

    The code for inserting a mailto link would only work if I pasted it into the paragraph in the Page itself. Unfortunately, the “caption” here is part of the Jetpack image plugin in the sidebar, so it doesn’t allow for HTML code.

    Any other ideas about how to get that caption to align-center? I tried using Illustrator to add the email as part of the Mail icon itself, but it didn’t look very good and the size was too small.

    Thank you for your help!

    Thread Starter toupstrey

    (@toupstrey)

    I’ve also noticed that adding a caption to the image widget, like I did with my email address, causes it to have too much padding between the Widget Title and the Widget image. If you compare the padding on the one for the Mail icon to the others without captions, you’ll notice that there is a huge amount of padding between “— Connect —” and the Mail icon compared to the spacing between the other Image Titles and their respective icons. This padding is removed when I remove the caption. Not sure why this is happening.

    Thread Starter toupstrey

    (@toupstrey)

    I added the HTML text you gave above to insert the image itself as a clickable mailto into a “text” widget on the sidebar. This works perfectly as I want it to, but I cannot get the image itself, which is currently titled “Connect2” to differentiate it, to align center with the Title.

    Edit: I was able to resolve this issue by adding

    #text-2 {
	text-align: center;
}

    Oh it looks great!!! And the mail icon works too!

    Congrats!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Center Text Caption Under Sidebar Image Widget’ is closed to new replies.