1) In the GoE create a link (single line text or something) and link it to the page you wish.
2) give the GoE a custom class (avail in v1.44)
3) Create a Code Block (Source) as Type: CSS   Position: Header
4) in the CSS block add this
.ClassName a
{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-decoration: none; /* No underlines on the link */
  z-index: 10; /* Places the link above everything else in the div */
  background-color: #FFF; /* Fix to make div clickable in IE */
  opacity: 0; /* Fix to make div clickable in IE */
  filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
5) this will turn the text invisible so if you want text to display then you have to add in some text elsewhere. creating a link with only some text in a block of text works by only making the link part invisible.

the IE workaround needs a background so that the entire area is clickable (i believe) otherwise just the letters would be clickable... or not, lol

I have modified this a bit so you do not need an extra single line text for the link... essentially you can just set the background's alpha to 0.

This enables you to have the text color, background... ect change when you hover
.Button a
{
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  text-decoration: none !important; /* No underlines on the link */
  background: rgba(255, 255, 255, 0) !important;
  filter: alpha(opacity=1) !important; /* Fix to make div clickable in IE not sure you still need this with this new method*/
}

.Button:hover a
{
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  text-decoration: none !important; /* No underlines on the link */
  /* Fallback for web browsers that doesn't support RGBa */
  background: rgb(255, 255, 255) !important;
  /* RGBa with 0.6 opacity */
  background: rgba(255, 255, 255, 0.4) !important; /*This makes the background semi-transparent*/
  color:white !important; /* This is the color of the text while you hover*/
}

one thing to note here is that if you are looking to help push your text to the middle of the GoE simply change its line height to the size of the GoE (works if you are really using this as a single-line text)
otherwise just hit enter and change the size of the empty line's font until you are happy with it.


Edited by Gorksmash - May 07 2014 at 4:13am