[Damon BParticipant]

I would like to add an image similar to this next to the social media icons on the following site. http://kole.social-operator.com/

What is the best way of doing this?

[RupokMember]

Hi there,

Thanks for writing in! You can place this within a div with a class under Customize > Header > Topbar > Topbar content

You might need to add some CSS to re-position this using the class on div.

Hope this makes sense.

Cheers!

[Damon BParticipant]

No, can you give me an example of what the code would be?

[FriechModerator]

Hi There,

Add this under Custom > JavaScript in the Customizer.

jQuery( document ).ready(function() {
    jQuery( '<img class="img-amazon" src="https://images-na.ssl-images-amazon.com/images/G/01/SellerCentral/legal/amazon-logo_transparent.png" alt="Amazon">' ).insertAfter( ".x-topbar .x-social-global" );
});

And this on Custom CSS

.img-amazon {
    width: 10%;
    float: right;
}

Hope it helps, Cheers!

[Damon BParticipant]

Great works perfect. http://kole.social-operator.com/

One last thing. Where/How would i add a link to the amazon image?

[ThaiModerator]

Hi There,

Please update the Javascript code a bit:

jQuery( document ).ready(function() {
    jQuery( '<a href="http://www.amazon.com/"><img class="img-amazon" src="http://carlsiegel.com/images/amazon_logo_transparent2.png" alt="Amazon"></a>' ).insertAfter( ".x-topbar .x-social-global" );
});

You can replace the http://www.amazon.com/ with your link.

Hope it helps 🙂

[Damon BParticipant]

Can you just check this code for me? I have put this in and it’s not showing the image

jQuery( document ).ready(function() {
    jQuery( '<a href=&quot;http://www.amazon.com/Kole-Tonics/b/ref=bl_dp_s_web_14178778011?ie=UTF8&node=14178778011&field-lbr_brands_browse-bin=Kole+Tonics/&quot;><img class=&quot;img-amazon&quot; src=&quot;https://images-na.ssl-images-amazon.com/images/G/01/SellerCentral/legal/amazon-logo_transparent.png&quot; alt=&quot;Amazon;></a>' ).insertAfter( &quot;.x-topbar .x-social-global&quot; );
});

[Rue NelModerator]

Hello There,

Please use this code instead:

jQuery(document).ready(function() {
    jQuery( '<a href="http://www.amazon.com/Kole-Tonics/b/ref=bl_dp_s_web_14178778011?ie=UTF8&node=14178778011&field-lbr_brands_browse-bin=Kole+Tonics/"><img class="img-amazon" src="//images-na.ssl-images-amazon.com/images/G/01/SellerCentral/legal/amazon-logo_transparent.png" alt="Amazon;></a>' ).insertAfter( ".x-topbar .x-social-global" );
});

Please be very careful when copying and pasting of the code. Other OS will change quotes which make it invalid and which is why the code will no longer work. if still doesn’t work out, would you mind providing us the url of your site with login credentials so we can take a closer look and fix the issue?

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[Damon BParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

X 4.4.1 and Cornerstone 1.2.2 are now available! This release contains several bug fixes and we’re quite excited about the new features, so be sure to check out the changelog. Please do update to the latest version first. After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

[Damon BParticipant]

Have run the update but the image still no showing 🙁

[LelyModerator]

Hi Damon,

Upon checking the source code of your site, the code you’ve added is converted again into HTML markup causing javascript error. See attached screenshot. Please also check above credentials it is not working when I tried to login. We also want permission if we can add the code ourselves so we can see why the code is converting to HTML entity.

Always,
X

[Damon BParticipant]

This reply has been marked as private.

[JadeModerator]

Hi Damon,

Thanks for the details.

I was able to fix the code in the customizer and the cause of the problem was that instead of ending the alt attribute with a closing “ sign, ; was used.

Although the code was fixed, there is still no image that shows up in the site because the image URL http://images-na.ssl-images-amazon.com/images/G/01/SellerCentral/legal/amazon-logo_transparent.png seems to be incorrect. Kindly try to supply the correct image URL in the code.

Hope this helps.

[Damon BParticipant]

OK got it. One last thing. Is there a way to put a couple of pixels padding round it so it doesn’t seem so tight to the top?

[Author]

Posts