Make the banner link to the homepage

  • 1
  • Question
  • Updated 4 years ago
  • Answered
  • (Edited)
I'm using Clean Slate which has its own default banner field. I've since modified the dimensions of this banner field with some html, but do not know the code to make this field point to the homepage.

I've read some previous requests about this issue dating back several years. Has a solution been made? It's a pretty basic feature of any website.

I'm aware of the process for adding a text/image widget and putting my 'banner image' into that and then linking to the homepage from it - but this is a bit pointless if I can't get this replacement banner in the position of the original banner field (above my navigation menu at the top of the page).

So what I'm looking for is some extra hyperlink code to add to the html widget that I used to modify the banner field dimensions as follows:

#sys_banner{
width:263px;
height:66px;

}

Could there be an href="/." code thingy that can be included somehow/somewhere?

*Or is there some code to position a text/image banner with hyperlink where the default banner field exists?*

Thanks,
Paul
Photo of Paul Caspall

Paul Caspall

  • 174 Posts
  • 4 Reply Likes
  • hopeful

Posted 5 years ago

  • 1
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Paul

There is a nice and easy workaround to make your banner image clickable in order to link to any URL you want. You will just need to add a bit of Javascript code to every page of your website. Please follow these steps:
  1. Go to your Home Page (index) and drag and drop an HTML Code Widget from the Widget tab to your page.

  2. Add this javascript code:
    <script type='text/javascript'>
    
    $(document).ready(function(){
    $('#sys_banner').wrap("<a href='http://www.yola.com' />");
    });
    </script>

  3. Replace the yola.com URL with the URL you want, such as your home page URL.

  4. Click on "Save" and check in Preview if it works.

I have checked that this code works with the CleanSlate Style. It may not work with other Styles in case their banner area is definded by tags different from "#sys_banner".

You will need to add this code to each page of your website (copy/paste into HTML Code Widgets).

If it doesn't work for you, please post your URL for me to find your Yola account and check.
Photo of Paul Caspall

Paul Caspall

  • 174 Posts
  • 4 Reply Likes
Hi Stefan

Thanks very much for this. At present my current site hasn't been uploaded. However, I have 2 other sites that are live, so I may try it on one of them first.

Out of interest, until my current site is uploaded to its url (already purchased through Yola and reserved), can I substitute "/." ? That is the destination the header presently points to.

I'll try this tomorrow (it's late here now) and let you know how I go.

Thanks again.
Cheers,
Paul
Photo of Paul Caspall

Paul Caspall

  • 174 Posts
  • 4 Reply Likes
Hi Stefan

Worked like a charm. Thanks.

Just need one tiny modification to it if possible...

Instead of applying the hyperlink mouse-over to the entire original banner width (ie all 900px), I'd rather restrict it to my adjusted banner width (ie 263px, left-aligned). So we need something other than the '.wrap' command I suspect.

??

This should be an easy one for you.

:)

Cheers
Paul
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Paul

Thank you for your confidence! :-)

I would need to access your Yola account directly to check for you if this modification can be done. Can you please post any published URL of this account and tell me the name of the website you want to apply this to? It must be the site where you edited the banner width.
Photo of Paul Caspall

Paul Caspall

  • 174 Posts
  • 4 Reply Likes
Hi Stefan

Unfortunately the site in question hasn't been uploaded yet, as it awaits the work of sculptors to provide the products. Very early days on this one. Are you unable to access it via Yola? It's my 3rd site 'karaktermin.com' (short for Karakter Miniatures). Is there any way I can allow you to access it within Yola?

If not, you could always just create a test page site with the bare bones of a Clean Slate template, and modify the dimensions of the banner with the code I provided in my initial question, keeping the header blank. Then add your code with a slight modification that takes into account the reduced banner width, etc.

Maybe?

Alternatively, you could always fire some more potentially useful code at me, and I'll try it out at my end. It worked last time. :)

Yet another option is that I temporarily modify the dimensions of one of the banners of my uploaded sites, and direct you to that...

Cheers
Paul
Photo of Paul Caspall

Paul Caspall

  • 174 Posts
  • 4 Reply Likes
Stefan

Let me know which of the above options is best for you. eg if you want me to temporarily modify the width of one of my banners on an uploaded site...

Cheers
Paul
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Paul

Sorry for the delay. The URL you give me doesn't have to be the one of the website in question, just any published domain name of your account, so that I'm able to locate your account in our system. I will just need to know the name of your website (which is not your domain name) as it displays in your My Yola dashboard.

If you haven't published any site of your account, I'd need to know your login e-mail address (not your password) to find your Yola account in our system.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Never mind, Paul, I've found your account by the domain name you posted above. So am I correct that you refer to your site named "KARAKTER MINIATURES"? Please confirm and then allow a bit of time for me to find a solution for you.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Never mind about the confirmation again, Paul, I was presuming that you meant the site "KARAKTER MINIATURES" because it has the reduced banner area with the pixel values you posted.

The modified javascript code that will give you the desired result is this:
<code><script type='text/javascript'>

$(document).ready(function(){
$('#sys_banner > h1').wrap("<a href='http://www.karaktermin.com' />");
});</script>

I've checked it, and it worked. So you should just remove the previous code and replace it by this one in the HTML Code Widget. Note that you will need to add it to each of your pages if you have the same banner (size) on all pages. Let me know how it goes. All codes were provided by our engineer Pete (my javascript knowledge is limited). ;-)
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
I don't know why it shows the code tag at the beginning, please don't add this tag to your HTML Code Widget.
Photo of Paul Caspall

Paul Caspall

  • 174 Posts
  • 4 Reply Likes
Hi Stefan

I was out all yesterday and missed your replies. Sorry about that. Thanks very much once again for your help (and thanks to Pete the Script-King too!).
I've just tried it out with the adjusted code, and it works perfectly. Yay!!!!

You've just made my day. :)

Cheers
Paul
Photo of Zak Stradley

Zak Stradley

  • 11 Posts
  • 0 Reply Likes
Hello, I would like to do the same thing but how do you apply the link if you haven't publishet the site yet??
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Zak

Well, then there would be no link you can add. The link needs to be valid, i.e. take one to an existing published site. I'd suggest that you only add the javascript codes just before you're about to publish your site. So you won't be able to check in Preview if the link works, only on the live site.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
I haven't tried that, but what you could do is add this for the URL:
$('#sys_banner').wrap("<a href='index.php' />");
(Edited)
Photo of Zak Stradley

Zak Stradley

  • 11 Posts
  • 0 Reply Likes
Thanks Stefan, I figured that I wouldn't be able to add the link until I published it but I did want a code that I could use to be ready and in place for when I publish. Thanks again!