[paulstrobelParticipant]

Dear Support Team,

How can I create a hyperlink that covers the whole area of a column, a content band or a container?

I want to set different hyperlinks on specific columns. The links should cover the whole area then. Columns have the options for ID, Style and Class.

Is it possible to integrate these links there?

Best,
Paul

[Paul RModerator]

Hi Paul,

Yes, that’s possible but you need to input your links manually in classic mode > text tab

eg.

<a href="http://yourlink.com">[column type="1/2"] Place your content in here. [/column]</a>

or

<a href="http://yourlink.com">

[content_band style="color: #333;" bg_color="#ffddea" border="all" inner_container="true"] [custom_headline style="margin-top: 0;" level="h4" looks_like="h3"]Cool Headline[/custom_headline] <p>Esurivi enim et dedistis mihi manducare: sitivi, et dedistis mihi bibere hospes eram et collexistis me nudus et operuistis me, adipiscing ego me: infirmus, et vidi post me, visitastis me in carcere eram et venistis ad me.</p> [/content_band]

</a>

http://screencast.com/t/ANBnTFRt

Hope that helps.

[nolannp11Participant]

I would like to do the same thing, but isn’t that going to cause Cornerstone to pop up an error message that something has been edited outside Cornerstone?

[Prasant RaiModerator]

Hello There,

Thanks for writing in!

No, the above code won’t display any error message. If you have any questions or concerns, feel free to post here and we’d be happy to provide further assistance!

Thanks.

[FlywebMediaParticipant]

Alright staff. I tried this & it shifts the whole layout of the columns.

http://5fc.288.myftpupload.com/

Look under the first content band. I have it set up as 2 columns, each column is 110% width because otherwise there would be white margins. Under it i have a full column. these columns are not surrounded by containers or content bands. Look at the code below. When i take the and move it outside of the columns the images shift and overlap each other. How can i make these columns / images links without screwing up the page layout. [column type=”one-half” link=”true” href=””] doesnt work either.

[/content_band]
[column type=”one-half”]

[/column]
[column type=”one-half” last=”true”]

[/column]
[column]

[/column]
[content_band]

[John EzraMember]

Hi there,

Thanks for writing in! You can use the text element to insert the images inside an anchor tag instead of your current setup that will allow you to make the whole area clickable. If we are misunderstanding what you would like to happen, please explain a bit further and perhaps provide an example link. Would you mind providing us with login credentials as well so we can take a closer look at your set up? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Tristan AParticipant]

Hi there!

Using the instructions from this topics I was able to turn my columns into hyperlinks. Which is great.

However, whenever I go back to Cornerstone, everything does get overwritten….

Is there a way to avoid this?

[Rue NelModerator]

Hello Tristan,

Thanks for the updates. What we can recommend in doing this in Cornerstone is by using a custom javascript. Please follow on this step.
1] Please turn on the advance controls
2] Select which column you would like to link and insert a custom class linked-column for example
3] Insert the following custom JS in the settings tab (in Cornerstone), Settings > Custom JS

(function($){
  $('<a id="column-link" href="#my-link">').insertBefore('.linked-column');
  $('.linked-column').prependTo( $('#column-link') );
})(jQuery);

Please make sure that you have inserted the correct link #my-link for example.

We would loved to know if this has work for you. Thank you.

[Tristan AParticipant]

Hi there!

This is absolutely wonderful!!! Thank you very much!

Is it possible to add a bit of code to the JS that makes the colors in the column change too, when the mouse hovers over it? That way it is even more clearer to the user that the box is actually a link.

Say for example that on hover over, the background color (and perhaps text color too) change, or some kind of semi-transparency effect for both appears?

And another question too: I will have many more similar links. Should I then add the code as follows:

(function($){
  $('<a id="link1" href="#posture">').insertBefore('.linked-column');
  $('.linked-column').prependTo( $('#link1') );
})(jQuery);
(function($){
  $('<a id="link2" href="#people">').insertBefore('.linked-column');
  $('.linked-column').prependTo( $('#link2') );
})(jQuery);

or should it also work if I do it this way:

(function($){
  $('<a href="#posture">').insertBefore('.linked-column');
  $('.linked-column').prependTo( $('#link1') );
  $('<a href="#people">').insertBefore('.linked-column');
  $('.linked-column').prependTo( $('#link2') );
})(jQuery);

Kindest regards,

Tristan

[ChristopherModerator]

Hi there,

No need to add jS code for hover color, just add following CSS :

.linked-column:hover:before {
    background-color: rgba(255,255,255,0.5);
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}
.linked-column:hover a {
    color: red !important;
}

Hope it helps.

[Tristan AParticipant]

Ok wonderful! Thanks!

And can you also let me know how to deal with the JS for multiple links?

Can I add it like so (in case of 2 linked columns)?:

(function($){
  $('<a href="#posture">').insertBefore('.linked-column');
  $('.linked-column').prependTo( $('#link1') );
  $('<a href="#people">').insertBefore('.linked-column');
  $('.linked-column').prependTo( $('#link2') );
})(jQuery);

Or should i repeat the entire section for each column?

Thanks again!

[Tristan AParticipant]

Ok, I just tried out both scenarios; I have 2 linked columns now. When I am finished, I will have 8.

I have tried this code:

(function($){
  $('<a href="#posture">').insertBefore('.linked-column');
  $('.linked-column').prependTo( $('#link1') );
  $('<a href="#process">').insertBefore('.linked-column');
  $('.linked-column').prependTo( $('#link2') );
})(jQuery);

and this:

(function($){
  $('<a id="link1" href="#posture">').insertBefore('.linked-column');
  $('.linked-column').prependTo( $('#link1') );
})(jQuery);
(function($){  
  $('<a id="link2" href="#process">').insertBefore('.linked-column');
  $('.linked-column').prependTo( $('#link2') );
})(jQuery);

When clicking either column, the screen scrolls first to the second link (with id=link2) and then to the first link (with id =link1).

Off course, it should link to the section that corresponds with the column. So when clicking the first column (with id=link1) it should scroll to the corresponding section with the id=#posture and when clicking the second column (with id=link2) it should scroll the the section with the id =#process.

It now scrolls to both, with both columns. Am i doing something wrong?

Kindest regards and thanks for the great support!

[Rue NelModerator]

Hi Tristan,

Since you will be having 8 more columns with a link, please follow on this steps instead
1] Please turn on the advance controls
2] Select which column you would like to link and insert a custom ID #linked-column-1 for example
3] Insert the following custom JS in the settings tab (in Cornerstone), Settings > Custom JS

You can replace your code with this code:

(function($){
  // column 1
  $('<a id="#link1" href="#posture">').insertBefore('#linked-column-1');
  $('#linked-column-1').prependTo( $('#link1') );
  
  // column 2
  $('<a id="#link2" href="#process">').insertBefore('#linked-column-2');
  $('#linked-column-2').prependTo( $('#link2') );

  //.... and more...
})(jQuery);

We would loved to know if this has work for you. Thank you.

[Tristan AParticipant]

I’m afraid it doesn’t work….

Previously, I had assigned the clas linked-column to both columns.

With the new code, i then assigned the class linked-column-1 to the first column and linked-column-2 to the second column. Off course, the still have id=link1 and id=link2 respectively.

But still not working. Any thoughts?

Kindest regards,

Tristan

[Rue NelModerator]

Hi Tristan,

Please DO NOT add a custom class.
Use linked-column-1 in the ID field this time around.

We went ahead and edited your page. The link should be working now. And another thing, you forgot to have the ID attribute in your a tag. You only added $('<a href="#posture">').insertBefore('#linked-column-1');.

We want to let you know that you have to disable the marginless column since you have modified the column structure. Having a marginless column would make the column fullwidth. So please DISABLE the marginless column option in your row settings.

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you for your understanding.

[Author]

Posts