sacredpath
(@sacredpath)
Automattic Happiness Engineer
Hi, since you haven’t provided a link to the site, I looked at the Canape demo site and I’m not seeing what you are talking about. Can you explain a bit more what it is you are wanting, possibly referencing to the demo site, or if your site is public now, a link to it would be very helpful.
Thread Starter
freatz
(@freatz)
Hi there!
In the demo site there are the menu section images. They are 3 images that show a text when you hover the mouse on them.
What I want to do is to use the hovering text to explain what you are looking at in the picture. That part is ok. What I don’t want is them linking to other place. I don’t want to use them as buttons nor links.
I’m sorry if I’m not explaining myself properly. English is not my mother language.
sacredpath
(@sacredpath)
Automattic Happiness Engineer
We can set it so that the cursor doesn’t switch to the hand cursor that denotes a link, and set pointer events to none, but the problems is that this CSS is a bit experimental, and some older browsers do not support it. For instance, only Internet Explorer 11 and later will work with this. This is the CSS that would be needed.
#front-page-menu .menu-section-thumbnail {
pointer-events: none;
cursor: default;
}
Thread Starter
freatz
(@freatz)
Hi!
What about creating other images and using them instead? Would them look just like the original ones do? I mean, talking about how integrated they will look in relation with the other parts of the page?
sacredpath
(@sacredpath)
Automattic Happiness Engineer
I’m not sure I’m understanding. Are you talking about using different images in that menu section? The software will link to the Menu Item section set in the Theme Options will like to the Menu Item Sections that are set. If for each of those Menu Sections, you include a description, that will show up below the section title. Then if you don’t want them to be clickable, the above code would make it un-clickable for most browsers.
Thread Starter
freatz
(@freatz)
Now I get it!
Thank you very much!!!
sacredpath
(@sacredpath)
Automattic Happiness Engineer
Hey there,
I am looking to do exactly what @freatz was requesting. This theme is supposed to be a restaurant theme therefore it has a “Food Menu” section in the Dashboard. The theme offers to add three or less “Featured – Food Menu” option on the front page once you’re customizing the theme.
If you look at the Canape demo site, you will see that the three featured menu items are clickable images on the front page (DESSERTS · HORS D’ŒUVRE · MAINS) – I understand that the CSS code you created makes the images unclickable. Thank you for that, it’s great!
Now, is there any way to add additional “Featured Menu” items into other pages? Please advise. I would really love to be able to do this.
Thread Starter
freatz
(@freatz)
Hi, @ashleybnicole!
What I did was to use a Custom HTML widget and to create a code, like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 96%;
width: 96%;
opacity: 0;
transition: .5s ease;
background: rgba(0, 0, 0, 0.6);
top: 48%;
left: 48%;
transform: translate(-48%, -48%);
-ms-transform: translate(-48%, -48%);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-weight: 400;
line-height: 1.4;
position: absolute;
font-family: 'Noticia Text', Arial, sans-serif;
font-style: italic;
top: 50%;
text-align: center;
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
}
</style>
</head>
<body>
<div class="container" style="width: 300px; height: 225px;">
<img src="URL OF THE IMAGE" alt="" class="image">
<div class="overlay">
<div class="text" style="font-size: 1.6rem; font-size: 1.6em; font-size: 16px; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); width: 90%;">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div>
</div>
</div>
</body>
</html>
I hope it works for you!
sacredpath
(@sacredpath)
Automattic Happiness Engineer
@ashleybnicole, to add menu items on other pages, you would need to create a Child Theme and then create an a custom page template using php script and html. It would be quite a bit of work and require a working knowledge of php. If that doesn’t sound like something you want to undertake, you might consider posting on https://jobs.wordpress.net/ to see if anyone is interested in doing that for you, and can give you an estimated cost.
sacredpath
(@sacredpath)
Automattic Happiness Engineer
You can give the solution @freatz gave above as an alternative. It is a clever way of doing it.
