Docs

[goalsarecool]

How can I make an entire section turn a different color when hovering and link to a new page when clicked?

I’ve tried the CTA but it doesn’t allow enough customization to display the way I want it to.

[goalsarecool]

Podcast

[CMNerds]

Have you considered doing an overlay?

Try this: https://codepen.io/felicia/pen/qKhJt

[Joao]

Hi,

You can add a unique class in the class field of your section.

For example try to add my-section.

You can then add this in Cornerstone > Settings > custom Javascript

jQuery(function($) {
    $( ".my-section" ).wrap( "<a href='http://example.com'></a>" );
});

Change http://example.com with your link.

Than add to Appereance Customizer Custom CSS

.my-section:hover  {
background: red !important;
}

Hope that helps.

Joao

[goalsarecool]

What would the HTML and CSS be if I wanted it to look like the attached? When someone hovers I would want the background to turn #3254a5

[goalsarecool]

CMNerds, What would the HTML and CSS be if I wanted it to look like the attached? When someone hovers I would want the background to turn #3254a5

Thanks Joao! Would i need to add Javascript for every box like the one pictured in the attached if I do it this way?

[Joao]

Hi,

You can use the same class multiple times as long as you have the same destination url, if you want two sections to link to the same page, you will use just one time and repeat the classes on the sections.

If you want to create different links, you need to use different classes and repeat the Javascript on Appereance Customizer Custom CSS

CSS should be something like :

.my-section:hover  {
background: red #3254a5;
}

I am not sure what you refer when you ask for an HTML but if you could use:

Text Element for the date
Custom Headline for the text
Button

Hope that helps,

Joao

[goalsarecool]

The solution provided by CMNerds is preferable since it wouldn’t require Javascript which slows the site down. I’m waiting for a reply from CMNerds who will hopefully provide the HTML and CSS needed to create an overlay like the attached.

[Joao]

No problems 🙂

Let us know if you need further help.

Joao

[goalsarecool]

Thanks Joao! It would be great to get a response from CMNerds.

[Nico]

Happy to hear that.

Feel free to ask us agian.

Thanks.

[goalsarecool]

What would the HTML and CSS be if I wanted it to look like the attached? When someone hovers I would want the background to turn #3254a5.

I’m trying to follow the solution provided by CMNerds earlier so that I don’t have to add a bunch of Javascript which slows my site down. Here is the link: https://codepen.io/felicia/pen/qKhJt

Can you please assist?

[Christopher]

Hi there,

We’ve already provided you with proper CSS here https://community.theme.co/forums/topic/entire-section-button/#post-1153801

If you want to implement codepen CSS and HTML, simply insert HTML code in a text element. The CSS should be added under cornerstone settings tab/ custom css.

Hope that helps.

[CMNerds]

Hi @Goolsarecool, sorry, I didn’t realize you were waiting on me, I had lost track of this thread and had to hunt for it. Do you still need help?

[goalsarecool]

Thanks CMNerds!

Yes, any help you can provide would be greatly appreciated. I really like your solution and would like to use it so that I don’t have to use a bunch of javascript which slows my site down.

That being said, I’m trying to make the overlay look like the attached image and need help with the HTML and CSS to do so.

Thanks in advance for any time and help you can provide!

Blake

[Author]

Posts