How do I add images that link to facebook and twitter under my header?

  • Unknown's avatar
    hagbooth · Member ·

    I use the Panel theme and I’m trying to figure out how to add custom facebook and twitter links under the header image. I think it requires fiddling with the HTML but I think I’m not allowed to do that. If I can’t add custom image links to my front page then is there a theme that would be good for comics where I can do that? I need to be able to be a little more creative with how the site looks and link to social media.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    shawnajroberts · Member ·

    Hi there!

    Can you give me a link to the site you’re working on so I can take a look? We have several themes that include a social links menu that automatically generates social media icons for you.

    Create a Social Links Menu

    We also have a guide for creating your own links in a Text widget, which can be placed in any widget area:

    http://en.support.wordpress.com/add-social-media-buttons-to-your-sidebar-or-footer/

  • Unknown's avatar
    hagbooth · Member ·

    Part of the problem I’m having with Panel is the widget areas. There is one on the side and three on the bottom. The one on the side is below where the comics and the mandatory menu are. Readers have to scroll down a lot to see it at all. And on the individual comic pages it doesn’t appear at all.

    I have social media icons, that’s not a problem. What I’m hoping to get are images that I can draw where it links to my associated facebook and twitter pages, and maybe even my stumbleupon account.

    Here’s the site: http://random-encounterz.com/

  • Unknown's avatar
    alexjgustafson · Member ·

    Hi Bear. :)

    Normally to accomplish those we would use Menus, like the Social Links Menus that Shawna mentioned. In your case, Panel is still probably the best way to go because of that Comic custom post type being so prominent.

    There’s not a good way to add your custom-drawn images (with links) to an area between your header and the comic. And as you said, the widget areas are really great for this purpose either. But you could get them into your menu area above the header using some CSS:

    1. Go to your Custom Menu settings
    2. Insert Custom Links for your Facebook, Twitter, and Stumbleupon. I’d recommend just using the service name as the text for now. Once we get the image setup, we’ll add blank space into the text instead.
    3. Go to your Screen Options and check “CSS Classes” under Advanced Menu Properties
    4. Add css classes for each of your services
    5. Upload each of your icons in to your Media Library
    6. Open up your blog’s Customizer and edit CSS
    7. Using CSS, select each service using the CSS classes you made in the menu settings, and add a background with the URL of your icon
    8. In your Custom Menu, remove the text from your navigation labels, since all we want are the icon images.

    The CSS needed for step 7 may look something like this, but it depends on how you chose your selectors. Let me know if you need help editing it:

    .menu .twitter{
     background-image: url("https://example.files.wordpress.com/2015/02/twitter.png");
}

    A little time consuming, but if you want custom social media icons this is the best way I can see to do it in Panel.

  • Unknown's avatar
    hagbooth · Member ·

    Well, I sort of got it to work… sort of.

    I decided to use standard icons for facebook and twitter until I got the process right. I think I’ve got it figured out. There’s just one thing I’m missing. Every time I try to add blank space to the navigation label it either deletes the link from the menu entirely or gives a bare minimum of space and cuts off chunks of the image. Is there a trick to adding blank space to a menu? I’ve had to add dashes to trick it into using the whole image. Also, it’s pretty obvious that those dashes are there.

  • Unknown's avatar
    alexjgustafson · Member ·

    Hmm. Didn’t realize that — but looking back at my past menu experiments I guess I’ve always left something in the text. Let’s leave the dashes where they are to create the space for the menu’s function, and add this CSS to hide the dashes themselves:

    .menu-item-1319>a, .menu-item-1320>a{
	visibility:hidden;
}

    You can also adjust menu items’ margin if you need to separate them out more, or padding to increase their area.

  • Unknown's avatar
    hagbooth · Member ·

    Thank you! Now I just need to get the artist to draw custom images.

  • The topic ‘How do I add images that link to facebook and twitter under my header?’ is closed to new replies.