Hotkey problem

Folks:

I use Alizee on my three sites (bulldogottawa.com bulldogcanadian.com bulldogfetch.com) and it is a great design plus it’s very easy to use.

On all three sites I have put header ads at the top of the page.

On two of three of the site, they work perfectly.

However on bulldogottawa.com not only does the ad have a hotkey taking it to the advertiser’s site, but the whole header area is hotkeyed. In other words, if you take your cursor from one margin to the other in the header it is hotkeyed to the ad. I just want the ad hotkeyed.

On two of the three sites, the hotkey function is confined to the ad. But not on Bulldog Ottawa.

This is a problem because if I want to put three ads on the banner of bulldogottawa.com, the centre ad stays on the regular spot but the two side ads go to the area above the centred ad. I gather that this is the case because the entire header space is taken up by the centred ad’s hotkeyed function.

This happens with any ad I put in the middle. And I have turned off the plugins, and still it happens.

I have checked the coding as well as I can. I used to put the ads in manually but on all three sites now I use the Header and Footer plugin.

Might I have left a letter off a code in the header or something like that?

I’ve spent much of the day trying to discover why two sites work perfectly but bulldogottawa.com does not.

The header is the highest revenue spot on the websites so I will eventually need to put three ads on the banner instead of just one.

If you go to bulldogottawa.com, you will notice that no matter where you put your cursor in the header, the whole header area is hotkeyed to the 300x250 ad.

Suggestions on what might be wrong?

Anything you can help me with, I would greatly appreciate it.

cheers and thank you in advance

Ken Gray

Hi,

Please post a link to the site which works, so I can inspect that too.

Best Regards,
Csaba

Csaba:

The link is http://bulldogottawa.com/.

Thank you for getting back to me so quickly.

cheers

Ken Gray

Hi,

I meant to post a link to the page where the issue is not present, you said on this website the issue happens.

Best Regards,
Csaba

Csaba:

Thank you for this.

The issue is present on http://bulldogottawa.com/

The issue is not present on http://bulldogcanadian.com/

As well, the issue is not present on http://bulldogfetch.com/

cheers

Ken Gray

Hi,

On http://bulldogottawa.com/ You have a single image ad, not a google ad with iframe, that’s why the image link contains the full-width of the header area, so the anchor tag contains the full-width of the header, but if you add a google ad instead, just how you have done on the other sites it will only link the ad image itself, not the full-width of the screen.

Best Regards,
Csaba

Thank you for this Csaba.

The only problem with this is that the single image ad owner pays thousands of dollars for the banner spot and the google ad pays much less.

So I need to find a way to put three single-image ads in the banner. Any way you can suggest doing that?

Your help is greatly appreciated.

cheers

Ken Gray

Csaba:

I’m not a coder but is there some code I can put at the beginning and end of the single-image ad that will confine the hot-keying to the 300x250 ad?

I think that might do it for me and then I can put that code on all three ads in the banner.

If you have a better idea, I’d love to hear it but remember my coding experience is very limited.

What I do to make coded images work is put the image in a post and then pick up the code and put it in the theme. It’s not very sophisticated but so far it has worked … at least until now.

Your help is greatly appreciated.

cheers

kgray

Hi,

You can make the ad to link only if the image itself is clicked by using the below code instead ( with a Custom CSS class added to it:

<a href="https://goo.gl/2mbHSt" target="_blank" class="top-ad">
<img class="aligncenter size-full wp-image-719737" src="https://goo.gl/Q4Qedu">
</a>

and also add this Custom CSS which will make the ad image linked ( not the whole section ), but make sure to always adapt the width value ( 300px ) to your ad image’s width ( in your case now it’s 300px, but you may need to change that image in future, then the CSS may have to be changed to adapt to that size ):

.top-ad {
    display: block !important;
    width: 300px !important;
    margin: 0 auto !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Csaba:

Thank you for this and your kind help.

Please be patient with this for I am not a coder.

I’m using the Header and Footer plugin for the header ads so I need to know how the code with your changes should look.

This is the code as it stands now with the entire banner hotkeyed.

<br><br>

How should I add the two pieces of code that you sent me to the code above?

If you could just add the two pieces of code to the present code, that would be very helpful. I am afraid I don’t know where to put it.

Thank you for your extra effort.

cheers

Ken Gray

Hi,

This code:

<a href="https://goo.gl/2mbHSt" target="_blank" class="top-ad">
<img class="aligncenter size-full wp-image-719737" src="http://goo.gl/Q4Qedu">
</a>

should replace the code you have pasted here entirely, so instead of adding what you did before, just add the above code.

This code:

.top-ad {
    display: block !important;
    width: 300px !important;
    margin: 0 auto !important;
}

Add to your Child Theme’s style.css or use this plugin to add Custom CSS to your site: https://wordpress.org/plugins/simple-custom-css/

Best Regards,
Csaba

Csaba:

Thank you for your kind help and going the extra mile.

cheers

Ken Gray

Hi,

You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba