Clickable Banner

[JJ]

Good catch, Spice. Mine is too, on the name. But that name won't be there when I make a new banner with a graphic name. So what then?

[channonite]

I have just checked mine and there is a point about two thirds of the way from the left where it stops being clickable.

[Shrike]

Feb 1, 2013 9:56:19 GMT -8 spiceelicious said:

Feb 1, 2013 8:53:14 GMT -8 Shrike said:

It's been changed so that the link to your forum home page is now included in the $[forum.title] variable. Unless you're wanting it to link to somewhere other than your home page, you shouldn't need to do anything because they've now made the banner clickable by default. If you do want it to link elsewhere, we just need to add back in the <a> tag that was there before and then change the variable so it is just giving us the name of the forum (and not the <a> tag that is now included).

Find $[forum.title] around line 18 and replace it with this, changing the value of the href to the link you want:

<a id="logo" href="/">$[forum.name]</a>

I just checked and my forum banner is clickable but only when you hover over the beginning of the name of the forum. Shouldn't you be able to click anywhere on the name?

Skip to the end for the code if you're not interested in the explanation of why/what we're doing

This is because the forum name isn't the same size as the banner. By default, the intention of the banner image is that it is simply a background to the forum name. I don't know how people have done their banners, but I can see how it'd be confusing if you had a banner that looked like my example. Just from looking at it, you'd think the banner is an actual thing that we can click on but it isn't, it's simply an image being added to one of the containers with CSS. If this is the case, then the previous modifications in this thread aren't quite what we want, we're now essentially looking for a way to make the link on the forum name be the same size as our banner.

One thing to bear in mind is that we'd like to keep the text of the forum name there so that screenreaders can see what the name of the forum is, and there are other reasons to do this too. For some reason, people kept on telling others to set the text colour of the name to be transparent, but there are numerous problems with this, not least because there's no reason to do it when we already have some CSS that does what we want properly.

First of all, you need to have done what I said in my previous post. If you're not changing the link destination and just want the banner to be clickable then that should already be part of your forum by default so you don't need to worry. Then you just need to copy/paste this bit of code to the bottom of your stylesheet (Themes > Colors and styles > click on the Stylesheet tab):

#logo {display:block; height: 100%; text-indent: -100%; width: 100%;}

[spiceelicious]

ok, got it. But I did go back to your previous post and no where did I see the part about adding
#logo {display:block; height: 100%; text-indent: -100%; width: 100%;} to the bottom of the style sheet. I have since done so and now part of the banner is clickable.
Thank you!

[channonite]

Right, that has made my banner clickable, but it doesn't link back to my website. At the moment the banner on my website is clickable to my proboards forum, but I can't get it to link back the other way, as I said in my earlier post here.

[Shrike]

Feb 1, 2013 13:46:42 GMT -8 channonite said:

Right, that has made my banner clickable, but it doesn't link back to my website. At the moment the banner on my website is clickable to my proboards forum, but I can't get it to link back the other way, as I said in my earlier post here.

You need to do what I said in my earlier post if you want it to link somewhere other than the main page of the forum

Feb 1, 2013 8:53:14 GMT -8 Shrike said:

Find $[forum.title] around line 18 and replace it with this, changing the value of the href to the link you want:

<a id="logo" href="/">$[forum.name]</a>

[channonite]

Feb 1, 2013 9:12:14 GMT -8 channonite said:

This is what I have in rows 18,19,20 (I have a shortcut icon in row 7) and it has no effect at all, now.


<h2 id="banner">
<a id="logo" href="http://www.itsbeautifuloutside.co.uk">$[forum.title]</a>
</h2>

It was working to begin with, but it was only just before I converted the forum this week that I noticed that it didn't do anything anymore.

I was referring to the BetaZone board obviously, as my version 4 board worked using the code in the very first post in this thread.

So, I have no idea what to do next, other than to put a link to the website in the menu bar under the banner as a temporary fix

[Shrike]

Feb 1, 2013 16:04:20 GMT -8 channonite said:

Feb 1, 2013 9:12:14 GMT -8 channonite said:

This is what I have in rows 18,19,20 (I have a shortcut icon in row 7) and it has no effect at all, now.


<h2 id="banner">
<a id="logo" href="http://www.itsbeautifuloutside.co.uk">$[forum.title]</a>
</h2>

It was working to begin with, but it was only just before I converted the forum this week that I noticed that it didn't do anything anymore.

I was referring to the BetaZone board obviously, as my version 4 board worked using the code in the very first post in this thread.

So, I have no idea what to do next, other than to put a link to the website in the menu bar under the banner as a temporary fix

On your forum now, what do you have? It should be this, noting that it is forum.name at the end, not forum.title

<h2 id="banner">
<a id="logo" href="http://www.itsbeautifuloutside.co.uk">$[forum.name]</a>
</h2>

[channonite]

Brilliant, that's got it sorted. Yes, it was that one word "name" rather than "title" which I had.



Thanks for your patience.

[Former Member]

I do not even have the code you mentioned before. This is what I have.
<div id="wrapper">
<header>
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title] </h2>

[spiceelicious]

Chris I just added the following code to the bottom of my CSS
(Themes > Colors and styles > click on the Stylesheet tab):

#logo {display:block; height: 100%; text-indent: -100%; width: 100%;}

[Former Member]

Thank you Spice that worked.

[spiceelicious]

You're welcome