Archived

This topic is now archived and is closed to further replies.

  • 0

Image In Header To Link Else Where, Please Advise..

Question

Posted · Report post

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 here

 

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 

 

 

Share this post


Link to post
Share on other sites

19 answers to this question

Posted · Report post

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.

 

 

add_filter( 'pagelines_site_logo', 'my_logo_url' );
function my_logo_url( $site_logo ) {
return '<a class="plbrand" href="Add URL Here" title="">
<img class="mainlogo-img" src="Add URL to Image Here" alt="" /></a>';

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

Share this post


Link to post
Share on other sites

Posted · Report post

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. 

Share this post


Link to post
Share on other sites

Posted · Report post

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.

 

#site .section-branding .mainlogo-img {
display: table-cell;
vertical-align: middle;
margin: 0 auto;
}

 

 
As I mentioned above, some CSS maybe required.

Share this post


Link to post
Share on other sites

Posted · Report post

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...

 

See my website here. 

Share this post


Link to post
Share on other sites

Posted · Report post

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.

http://www.pagelines.com/forum/topic/14667-make-header-jpeg-link-to-email-instead-of-root/

 

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.

http://www.w3schools.com/cssref/pr_pos_z-index.asp

http://www.w3schools.com/cssref/pr_class_position.asp

 

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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="http://google.com" target="_blank"><img src="http://www.ijailbreakthis.com/wp-content/uploads/2013/02/icarbons-top-ad.jpg" class="icarbons_ad"/></a>
</div>
<?php }

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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;
}

Share this post


Link to post
Share on other sites

Posted · Report post

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. positionrelative;
  2. right0;
  3. top-108px;
  4. z-index4;
  5. left23px;
}

Share this post


Link to post
Share on other sites

Posted · Report post

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

 

Take a look at the site. 

Share this post


Link to post
Share on other sites

Posted · Report post

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
 
 
You can also use the ActionMap plugin to find your preferred location - http://support.pagelines.me/docs/plugins/action-map/
 
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 

 

http://www.pagelines.com/pros/

Share this post


Link to post
Share on other sites

Posted · Report post

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? 

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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. 

Share this post


Link to post
Share on other sites

Posted · Report post

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. 

Share this post


Link to post
Share on other sites

Posted · Report post

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? 

Share this post


Link to post
Share on other sites

Posted · Report post

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.

 

http://www.bennadel.com/blog/1174-Negative-CSS-Margins-Are-Not-Cool.htm

 

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

Share this post


Link to post
Share on other sites