Need help? Check out our Support site, then


Addding instagram to the top of page

  1. Hi guys

    Is there a way to add instagram next to the social icons that appear on the top of the site (i.e. currently i have youtube, fb, twitter and linkedin) but I dont have the option to add an instagram account

    thanks

    The blog I need help with is cfatutor.me.

  2. This thread will be moved to the CSS Forum for you. Do not create a duplicate thread.

  3. Uppppppp

  4. @omaradnan2, you have a few options.

    Facebook, Flickr, Twitter, LinkedIn and YouTube are currently the only social profiles that are included with the theme. If your icon was the same size as the existing, a single linked icon image could be put into a text widget and moved up beside the existing icons.

    You could also create your own social icons linked to your profiles in a text widget and then we could help move that text widget up into that location using CSS to replace the existing built-in social profile feature and style things accordingly.

    Text Widget
    Text Widget Links
    Image Widget

    WordPress.com also has an Instagram Widget you can put into your sidebar that will show your latest Instagram photos.

  5. Thanks

    Assuming that I have image of same size and the link to my instagram profile, how can I add it to the top icons? I don't know how to do that part...

    Omar

  6. On the text widget, do not put a title on it, and you can place it in either sidebar. Once placed, visit your site and view the source code, or use the web developer tool in your browser and determine the text widget ID, which will be something like text-5 and replace text-5 with that widget ID. You will likely have to make some adjustments to the top, right, height and width values. The existing icons are 20px square. If you have any problems, please let us know and we can help you out with those.

    #wrap {
        position: relative;
    }
    #text-5 {
        position: absolute;
        top: 85px;
        right: 126px;
        height: 20px;
        width: 20px;
    }
  7. the first method worked - thanks

  8. You are welcome.

  9. There are two problems with the method I have used previously here:

    1) I have recently added horizontal line to show between my widgets and it got added below the instagram icon - it is inconsistent wit the other social icons and quite weird to be honest (take a look at the upper icons on the right corner on http://www.cfatutor.me)

    2) When I open the website from the mobile (mobile browser), the only icon that shows randomly in the page is the instagram icon - is there anyway to solve this?

    Omar

  10. up

  11. Hey @omaradnan2, give this a try:

    1) Add border-bottom:0; to #text-5 so your code looks like this:

    #text-5 {
        position: absolute;
        top: 85px;
        right: 126px;
        height: 20px;
        width: 20px;
        border-bottom:0;
    }

    2)

    .mobile-theme #image-6 {
        display:none;
    }

    Hope that helps :)

  12. Also, please don't bump your threads. When people have an answer for you, they respond, as you have seen. Competent volunteers know how to find unresolved threads.

Topic Closed

This topic has been closed to new replies.

About this Topic