turn icon box into button - Support | Kriesi.at

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
October 8, 2016 at 9:15 am #696856
yampieters
Participant
hi, is it possible to connect a link to the icon box?
if you go now on my homepage , you can see 3 icon boxes at the bottom.
putting the mouse over it, they does have links , but i linked the text itself (see the underlining) which is quite ugly.
i try to put this text into a <div>
but that didnt work.

ps: you can choose to link to the title, or the title and the icon
but not the title, icon AND text
- This topic was modified 8 years, 3 months ago by yampieters.
October 9, 2016 at 8:11 am #696995

Rikard
Keymaster

Hi jelle,

You have the Title Link? option in the element, do you mean that you want to link the whole element to the same place?

Best regards,
Rikard

October 9, 2016 at 11:55 am #697045

yampieters
Participant

hi rikard, ive found the title link option, but my client wants the whole rectangle to be clickable, see image

October 11, 2016 at 3:26 am #697596
Ismael
Moderator
Hi,

Please remove the link from the text and retain the title link. Add this code in the functions.php file.
```
add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {
	function a() {
		var iconbox = $('.iconbox'),
			boxlink = '';

		iconbox.on('click', function() {
			boxlink = $(this).find('.iconbox_content_title a').attr('href');
			window.location.href = boxlink;
		});	
	}

	a();
})(jQuery);
</script>
<?php
}
```
And this in the Quick CSS field:
```
#top .iconbox {
    cursor: pointer;
}
```
Best regards,
Ismael
October 11, 2016 at 8:57 am #697682
yampieters
Participant
works great, ismael, thanks

but now on other pages where i dont want this its also happening…
how to get rid of that?
- This reply was modified 8 years, 2 months ago by yampieters.
October 12, 2016 at 3:00 am #698127
Ismael
Moderator
Hi!

Turn on the custom css class field, add a unique class attribute to the iconboxes where you want to apply the modification.

// http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

Adjust the selector in this line.
```
var iconbox = $('.yourcustomclass .iconbox'),
```
Cheers!
Ismael
October 12, 2016 at 1:40 pm #698235
yampieters
Participant
hi ismael
the above peace of code, ive changed the

var iconbox = $(‘.iconbox’),
into
var iconbox = $(‘jelle.iconbox’)

in the quick css ive put:
#top .jelle.iconbox {
cursor: pointer;
}

now i can see a custom class field below the text field in the icon box, see image ccf.jpg
i fill in : jelle
and yes, the pointer is now for the whole box. but…still ONLY the title is linking to the destination page.
there is a ‘hand’ – pointer over the rest of the text, but once clicked its not linking
see: http://jeelsites.nl/veiling/ (were talking about the left box called: Test.
what is going wrong?

NB: the code looks like this now:
<script type=”text/javascript”>
(function($) {
function a() {
var iconbox = $(‘jelle.iconbox’),
boxlink = ”;

iconbox.on(‘click’, function() {
boxlink = $(this).find(‘jelle.iconbox_content_title a’).attr(‘href’);
window.location.href = boxlink;
});
}

a();
})(jQuery);
</script>
- This reply was modified 8 years, 2 months ago by yampieters.
October 17, 2016 at 3:32 am #699742
Ismael
Moderator
Hi,

In the custom css class field, use “jelle” without the “dot” and then change the whole function with the following code.
```
add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {
	function a() {
		var iconbox = $('.jelle'),
			boxlink = '';

		iconbox.on('click', function() {
			boxlink = $(this).find('.iconbox_content_title a').attr('href');
			window.location.href = boxlink;
		});	
	}

	a();
})(jQuery);
</script>
<?php
}
```
Best regards,
Ismael
October 17, 2016 at 8:25 am #699818

yampieters
Participant

ok ismael , thanks.
i did exactly so but still the icon boxes NOT having a ‘jelle’ ID still are showing a pointer – hand. see image. not good.
how to get rid of this?

October 18, 2016 at 10:09 pm #700906
Andy
Inactive Moderator
Hi,

use this code inside Quick CSS field:
```
header.entry-content-header {
pointer-events: none;
}
```
Best regards,
Andy
October 19, 2016 at 8:21 am #701050

yampieters
Participant

hi andym thanks
no sorry, still a hand….
there is no link, but still comes a pointer-hand

October 19, 2016 at 1:35 pm #701272
Andy
Inactive Moderator
Hi,

it’s because of this code which you’re using:
```
#top .iconbox {
cursor: pointer;
}
```
Remove it and it should work fine.

Best regards,
Andy
October 19, 2016 at 1:55 pm #701300

yampieters
Participant

hi andy
ive changed that now into

#top .jelle.iconbox {
cursor: pointer;
}

to keep the pointer in the .jelle ID , and its oke now.

thanks a lot!

October 21, 2016 at 12:44 pm #702337

Andy
Inactive Moderator

Hi,

glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

Best regards,
Andy
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘turn icon box into button’ is closed to new replies.