Docs

[nezzazvoni]

Hi,

I would like to have link + on mouse effect on whole block grid item (or any element which is capable of similar layout). Is it possible?

Please see the image: this is how I imagine the border of the block grid item looks like, and I would like to have the whole marked area as a link + to change color of the background in marked area (ideally without changing the color of the text).

Thanks in advance!

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[nezzazvoni]

This reply has been marked as private.

[Rue Nel]

Hello There,

Please take note that making a whole column into a link would require customizations. If you want to highlight the column with a border when you hover it, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.page-id-161 .x-content-band .x-content-band {
    margin: 10px;
    padding: 10px !important;
    border: dashed 2px transparent;
    transition: all 0.5s linear;
}

.page-id-161 .x-content-band .x-content-band:hover {
    border-color: red;
}

I have limited the code and it will only affect on the given url of the page in question.

Hope this helps.

[nezzazvoni]

Thanks!

So there is no way how can I make whole marked section a link? Ok, I will find another way…

How can I change the background on mouse over as well? The background-color does not work for me (or maybe I made mistake).

And how can I detect the id of a page, so I can replicate this on other pages?

[Joao]

Hi There,

You can add an ID to each of your columns. than go to Cornerstone > Settings > Custom > Javascript and add the following code:

jQuery("#column-link").wrap("<a href='http://www.syncinteractive.co.uk/get-in-touch/'></a>");

On the example above is for the column ID: column-link

Note that each ID can be used just one time and you will need to paste the code multiple times with the correspondent IDs

Hope it helps

Joao

[nezzazvoni]

Hi there,

can you please rewrite this code for the block grid item(s) on page id 2?

.page-id-161 .x-content-band .x-content-band {
    margin: 10px;
    padding: 10px !important;
    border: dashed 2px transparent;
    transition: all 0.5s linear;
}

.page-id-161 .x-content-band .x-content-band:hover {
    border-color: red;
}

[Joao]

Hi There,

Please provide the URL of the specific page.

Thanks

Joao

[nezzazvoni]

This reply has been marked as private.

[nezzazvoni]

Also, can you please show me how to get rid of the autoscroll effect on the element on the screenshot in previous post?

[Nabeel A]

Hi again,

You can use this code for your homepage:

.page-id-2 .x-content-band .x-content-band {
    margin: 10px;
    padding: 10px !important;
    border: dashed 2px transparent;
    transition: all 0.5s linear;
}

.page-id-2 .x-content-band .x-content-band:hover {
    border-color: red;
}

To stop the scrolling effect please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery( function($) {

$('.vc_tta-tab a').on('click', function( e ){

setTimeout( function() { 
$('html, body').stop().stop();
console.log('scrolling stopped');
}, 100 );

});

$(document).ready(function() {
    $('.vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta-tab a').off('click touchstart touchend');
});

});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[nezzazvoni]

Well it actually highlights every single block on the page, I need just the individual blocks in the tabbed section as visible on screenshot.

[Nabeel A]

Hi again,

Please replace the previous CSS code with this one:

.page-id-2 #x-content-band-3 #x-content-band-5 {
    margin: 10px;
    padding: 10px !important;
    border: dashed 2px transparent;
    transition: all 0.5s linear;
}

.page-id-2 #x-content-band-3 #x-content-band-5:hover {
    border-color: red;
}

Let us know how this goes!

[nezzazvoni]

Well, closer, but no… I need individual blocks to be highlighted, now it highlights the whole row.

[Friech]

Hi There,

Please update the css code given by Rue Nel above to this:

.page-id-161 #x-content-band-3 #x-content-band-5,
.home #x-content-band-5 .x-1-2 {
    margin: 10px;
    padding: 10px !important;
    border: dashed 2px transparent;
    transition: all 0.5s linear;
}

.page-id-161 #x-content-band-3 #x-content-band-5:hover,
.home #x-content-band-5 .x-1-2:hover {
    border-color: red;
}

This should apply the same styling on the columns on the Nabízíme vzdělání v těchto oborech content band, on your home page.

Thanks.

[Author]

Posts