Addding instagram to the top of page

omaradnan2 · Member · Aug 26, 2013 at 7:30 pm
Copy link

Add topic to favorites
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: (visible only to logged in users)
timethief · Member · Aug 26, 2013 at 7:37 pm
Copy link
This thread will be moved to the CSS Forum for you. Do not create a duplicate thread.
omaradnan2 · Member · Aug 28, 2013 at 4:59 pm
Copy link
Uppppppp
thesacredpath · Member · Aug 28, 2013 at 8:43 pm
Copy link
@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.
omaradnan2 · Member · Aug 29, 2013 at 12:58 am
Copy link
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
thesacredpath · Member · Aug 29, 2013 at 3:40 am
Copy link
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;
}
```
omaradnan2 · Member · Aug 29, 2013 at 2:15 pm
Copy link
the first method worked – thanks
thesacredpath · Member · Aug 29, 2013 at 5:17 pm
Copy link
You are welcome.
omaradnan2 · Member · Oct 5, 2013 at 4:30 pm
Copy link
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
omaradnan2 · Member · Oct 6, 2013 at 10:05 pm
Copy link
up
marianojmiguel · Member · Oct 7, 2013 at 3:50 am
Copy link
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 :)
raincoaster · Member · Oct 7, 2013 at 3:55 am
Copy link
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.

No items found.