19 replies to this topic

[mattpato]

Hi guys, 

 

I wanting to link the image in my header to an external site as this an ad for another company. I have my logo on the left and then the ad on the right. As you can see

Please Login or Register to see this Hidden Content

 

I have added the image HTML code to my branding section template in my child theme and added some CSS to make it fit where it lies now. 

 

However, it is linking to my homepage rather than the external link. 

 

Can you please tell me what code I need to insert into my branding template to make this work. Attached is what I currently have placed in there. 

 

Cheers in advance. 

Matthew 

 

 

[Danny]

Hi Matthew,

 

If I understand correctly what you're trying to do, then add the following code to your functions.php in either your child theme or customise plugin. Some additional CSS maybe required.

 

 

Please Login or Register to see this Hidden Content

 

Enter your URL for both link and image and this should do the trick.

[mattpato]

Hi, thanks for that. It worked however my logo has now disappeared from the left. I need to keep the logo and have the ad to the right of the main site logo. 

[Danny]

You can either change your image size as its only 700px wide and your sites content area is 936px or you can add the following CSS, which should position your image.

 

Please Login or Register to see this Hidden Content

 

 

As I mentioned above, some CSS maybe required.

[mattpato]

Not sure you understand what I am saying. 

 

Right now I have no site logo which is uploaded via the PL backend under site option tab. All I have is the Add in the branding section. I need both. I have removed the code that you suggested and replaced it with what I had originally. You can see from there I have my site logo on the left and then add on the right. 

 

The site logo needs to link to my homepage and the add needs to link to an external source (google for example). 

 

Right now both are linking to my homepage...

 

Please Login or Register to see this Hidden Content

[Danny]

Ah Ok, I see what you mean.

 

Basically, you're going to need to use a hook to get your image in the correct postion. At the moment, you're currently using negative margins to position your image, negative margins are really a big no no.

 

So see the code on this topic as an example.

Please Login or Register to see this Hidden Content

 

Then once you have your image in the correct position, which may require additional CSS, you will most likely need to use position relative and the z-index properties. For more information on position and z-index see the links below.

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

 

Basically, whats happening at the moment is your image on the right certainly has a link to google but your Logo container is displayed over it (think layers) and therefore, you're only able to click your sites logo link.

[mattpato]

Hi, I have added the code that was in the post you mentioned and altered it as needed. No CSS added yet. 

 

However there is still no link to the ad's URL. In this case I have placed Google's domain there as a test. However the image is not linking. 

 

Here is the code I have added to the Functions PHP file: 

 

 

// ADDS CONTACT DETAILS TO BRANDING ------- //

add_action('pagelines_branding_icons_end', 'icarbons_ad');

 

function icarbons_ad(){

 

?>

<div <a href="

Please Login or Register to see this Hidden Content

" target="_blank"><img src="

Please Login or Register to see this Hidden Content

" class="icarbons_ad"/></a>

</div>

<?php }

[Danny]

I told you above, this is happening because the PageLines uploaded logo image (plbrand) is a block, therefore its link covers the full area and is (think of layers) above your ad image.

 

That is why I mentioned above the position relative and z-index, you will need to use these properties if you wish to have both elements clickable.

[mattpato]

What would my z-index need to be? Not familiar with them?

[mattpato]

This is what I have right now, the image is in the correct position however no link. 

 

 

img.icarbons_ad {

position: fixed;

right: 0;

top: 70px;

left: 617px;

z-index: 4;

}

[mattpato]

Made a quick change as the position did not need to be Fixed. 

 

This is now what I have, still no link though. 

 

 

img.icarbons_ad {

1. position: relative;
2. right: 0;
3. top: -108px;
4. z-index: 4;
5. left: 23px;

}

[Danny]

Your code isn't valid.

 

 

<div <a="" href="

Please Login or Register to see this Hidden Content

" target="_blank">

<img src="

Please Login or Register to see this Hidden Content

" class="icarbons_ad">

</div>

 

You can use <div a="" href="" you are also missing the </a> tag, this is not valid HTML and is the reason as to why it is not working.

 

Use something like this:

 

<div class="my-add-image">

<a href="

Please Login or Register to see this Hidden Content

" target="_blank">

<img src="

Please Login or Register to see this Hidden Content

" class="icarbons_ad">

</a>

</div>

[mattpato]

That worked! One thing though, the image ad has now gone microscopic, you can hardly see it. 

 

Take a look at the site. 

[Danny]

First the hook location may be wrong for what you're trying to do, the link I gave you with that code was just for example purposes. You may want to try one the following:
 

pagelines_before_branding_icons

pagelines_branding_icons_start

 

Please Login or Register to see this Hidden Content

 

You can also use the ActionMap plugin to find your preferred location - 

Please Login or Register to see this Hidden Content

 

Then you need to change the style for the plbrand ( your logo image) as it is currently using display block. Once you have made changes to both the plbrand and your ad image, then both links should work correctly.

 

Unfortunately, we are unable to provide you the custom CSS needed to achieve your layout. If you're not comfortable or struggling with custom CSS or code. I recommend you contact one of our Pros for assistance 

 

Please Login or Register to see this Hidden Content

[mattpato]

Im getting there, I think that one more little tweak and it will be a winner. 

 

If you look at the site now the images are in the right place and the links work. However there is a massive gap under them?  How can I fix this? Also if the logo image isn't supposed to be set to Block then what is it supposed to be? 

[Danny]

Your applying the CSS to the ad image class and not the div container it is placed in. Therefore remove the CSS for the ad image and add this CSS to the div class for your ad image.
 

With the CSS you have at the moment, the image is positioned correctly, but the div it is inside is still in its original position.

 

It may be easier if you change the hook location, like I mentioned above.

[mattpato]

I have it all in postion but I am not sure that I have the correct CSS. You mentioned -margins before and to get it where it is now I needed to use one. 

[mattpato]

There is something that I do not have right, Just checked on browsers and it seems fine a little off in some places but on iOS device (iPhone 5) it has shifted the website to the left and there is now a gap. 

[mattpato]

Nevermind, I had to add a width of 700px to match that of the banner. All done now apart from these -Margins? What is the reason that they are a  no no? 

[Danny]

As they usually can break layouts or cause adverse effects. There is no law against using them, but they can be a pain in the backside, I have linked you to an article which has makes some good points.

 

Please Login or Register to see this Hidden Content

 

But if the layout works for you with the negative margins, then you can use them.