Adding a button that links to another site

  • Unknown's avatar
    fleeceactress · Member ·

    Hi there, I am wondering if it’s possible to add a “button”, meaning an small icon image that can be clicked on, which will link to another site. Specifically, I want this on the upper right hand corner of my website. The website I want to link to is my IMDb page, http://www.imdb.com/name/nm7254796/?ref_=fn_al_nm_1

    Also, I already have the jpeg image of the IMDb logo that I can use as the button. It’s just that I don’t know how to get it on the site.

    Thanks so much for your help!

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

  • Unknown's avatar
    charliescheer · Member ·

    Hello,

    This should work, first on your front page, go into edit, and switch to the HTML viewer. Add something like this


    <img src=”the location of the imdb logo image”>

    That should add an image on your page that links to your IMDB profile.

    Next go into your CSS and add this text.

    #imdb-link {
    position: absolute;
    top: 10px;
    right: 10px;
    }

    That should move the link to the top right corner. You can modify the pixel amounts to move it where you want it to go.

    I hope this helps, let me know if you have any questions.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, this can be done, but there are a couple of things to consider. On narrower screens, the title and tagline/description take up the entire header area, so we would have to take that into account. One suggestion would be to make it a tab on your top navigation, but that switches to the touch device menu at 599px in window/screen width.

    My suggestion I think would be to add the image and link it using an Image Widget at the top of the sidebar and then we can position that into the upper right. We would use a Media Query to limit this change to a certain width of screen and wider and then below that point, it would move back to the top of the sidebar, which would be below the content. It could be that we could change the size of the image with CSS and keep it in the header area below 600px in width, but I that would be dependent on the image and such.

    If you are willing to give this a try, add the Image Widget at the top of your sidebar and then let me know and I can work on the CSS and see what we can do.

  • Unknown's avatar
    fleeceactress · Member ·

    Thank you both so much for these insights! charliescheer, I tried your suggestion, but it placed the image in a slightly different area than I wanted it. (In other words, it ended up on my Home page under my header image, rather than above my header image on the top right of the site across from my name.)

    thesacredpath, thanks! I have created the image widget, and I can see it there at the top of my sidebar. So…I’m letting you know, as requested, and let me know if you have thoughts about how to get it in the position that I’m looking for. Best, Fleece

  • Unknown's avatar
    thesacredpath · Member ·

    Hi Fleece, thanks for letting me know. Let’s try the following and see what you think. Add this below any existing CSS you have. 

    #page {
    position: relative;
}
.site-main {
    position: static;
}
#image-3 {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 50px;
    margin-bottom: 0;
    background: transparent;
    width: 100%;
}
#image-3 .widget-title {
    display: none;
}
#image-3 img {
    margin-bottom: 0;
}
@media screen and (max-width: 600px) {
	#image-3 {
		right: 20px;
	}
	#image-3 div:first-of-type {
		overflow: visible !important;
	}
}
  • Unknown's avatar
    fleeceactress · Member ·

    Thanks so much! This is great! I’ve done so, but I was wondering about a few tweaks to make it look perfect:

    – I noticed that the left side of the image is slightly cut off…any way to correct this?

    – If i wanted to make the image slightly bigger, how would I do that?

    – Is there a way to make it such that it doesn’t appear faded out until you put your mouse over it, but rather that it appears in full color all the time, regardless of whether or not you are hovering over it?

    Many thanks,

    Fleece

  • Unknown's avatar
    thesacredpath · Member ·

    Fleece, this takes care of the cut off on the left of the IMDb logo. 

    #image-3 div:first-of-type {
    overflow: visible !important;
}

    On the widget opacity shift, that is set on the sidebar container itself and when you hover over anything in the sidebar, the opacity of the entire sidebar changes, and the IMDb widget still takes the styling from the sidebar. I’ve tried overriding that on the widget itself and it was a no go. I can reverse things for the entire sidebar, or I can remove that effect from the sidebar and instead apply it to individual widgets. Let me know your thoughts on that.

  • The topic ‘Adding a button that links to another site’ is closed to new replies.