Block of icons with rollovers + link - Support | Kriesi.at

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

Author

Posts
September 20, 2017 at 9:31 am #854258

brianwelsh
Participant

HI,
I am building a site in a Staging Environment at the moment but am struggling to create an affect where I have 5 icons side-by-side which have roll-overs and link to different pages,

This is the effect:

http://fclean.staging.wpengine.com/testMouse.php (hosted on WPengine)

A few things happen if I try to simply use a code block in that most of the code disappears on Save.

So just pasting a table won’t work::

TestOvers

Creating 5 columns and using individual text or code blocks won’t work as most of the code disappears when I save the columns.

Ideally I would like a plugin that would do it but I haven’t had much luck finding one.

The basic html is this:
<td align=”center”>
<img src=”http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UV_Open_over.jpg”
onmouseover=”this.src=’http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UV_Open.jpg'”
onmouseout=”this.src=’http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UV_Open_over.jpg'”/></td>

Any direction would be appreciated.

Thanks
Brian

September 21, 2017 at 10:05 am #854676

brianwelsh
Participant

Any ideas on this?

September 22, 2017 at 7:06 am #855175
Ismael
Moderator
Hi,

Thank you for using Enfold.

It is working on a code block. Just add a unique class attribute to the table then use it to disable the default image overlay.
```
<table class="custom-table" width="760" border="0" cellspacing="0" cellpadding="0" align="center">
```
And then use the following css.
```
.custom-table .image-overlay {
    display: none !important;
}
```
The “custom-table” is the table’s class attribute.

Best regards,
Ismael
September 22, 2017 at 9:28 am #855272

brianwelsh
Participant

Hi,

Thanks for this!

I must be messing up somewhere or not understanding correctly.

This is my test page: http://fclean.staging.wpengine.com/test-overs/ (hosted on WPengine)

I have added the class attribute:

<table class=”custom-table” width=”760″ border=”0″ cellspacing=”0″ cellpadding=”0″ align=”center”>
<tr>
<td align=”center”>
<img src=”http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UV_Open_over.jpg”
onmouseover=”this.src=’http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UV_Open.jpg'”
onmouseout=”this.src=’http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UV_Open_over.jpg'”/></td>
<td align=”center”>
<img src=”http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UV_Open_over.jpg”
onmouseover=”this.src=’http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UV_Open.jpg'”
onmouseout=”this.src=’http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UV_Open_over.jpg'”/></td>
<td align=”center”>
<img src=”http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UV_Open_over.jpg”
onmouseover=”this.src=’http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UV_Open.jpg'”
onmouseout=”this.src=’http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UV_Open_over.jpg'”/></td>
<td align=”center”>
<img src=”http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UV_Open_over.jpg”
onmouseover=”this.src=’http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UV_Open.jpg'”
onmouseout=”this.src=’http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UV_Open_over.jpg'”/></td>
<td align=”center”>
<img src=”http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UV_Open_over.jpg”
onmouseover=”this.src=’http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UV_Open.jpg'”
onmouseout=”this.src=’http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UV_Open_over.jpg'”/></td>
</tr>
</table>

then added :

.custom-table .image-overlay {
display: none !important;
}

to the Quick CSS box.

It isn’t working for me! Can you let me know where I messed up please.

September 22, 2017 at 12:22 pm #855348

Victoria
Inactive Moderator

Hi brianwelsh,

Well, the image overlay does not show on hover, so this part is working. Which part is not working for you?

Best regards,
Victoria

September 22, 2017 at 12:29 pm #855353

brianwelsh
Participant

Hi,

The links are working but the roll-overs aren’t? Also there are black lines surrounding each image?

This is how it should work ideally:

http://fclean.staging.wpengine.com/testMouse.php (hosted on WPengine)

Thanks for your help,
Brian

September 23, 2017 at 3:22 am #855657

Ismael
Moderator

Hi,

Thank you for the update.

Please provide the login details in the private field and we’ll check it.

Best regards,
Ismael

September 23, 2017 at 9:24 am #855728

brianwelsh
Participant

This reply has been marked as private.

September 23, 2017 at 7:18 pm #855870
Victoria
Inactive Moderator
Hi brianwelsh,

This is for the border:
```
#top table.custom-table  tr td {
    border: none !important;
}
```
As for the hover, there is no need to change the image, just make images brighter and reduce opacity by css, and on hover change opacity to 1. Simple as that.
Best regards,
Victoria
September 23, 2017 at 7:35 pm #855874

brianwelsh
Participant

Thank you sooooo much for your help!

September 24, 2017 at 7:43 am #855972

Rikard
Keymaster

Hi,

Glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

September 24, 2017 at 9:46 am #856002

brianwelsh
Participant

I got this page working with 5 code blocks:

F-CLEAN™ GR Series (UV Cut)

(hosted on <a href="http://bit.ly/kwpengine" target="_blank" rel="nofollow">WPengine</a>) data-secret="hlBJcGYavR" width="600" height="338" title="“F-CLEAN™ GR Series (UV Cut)” — F-CLEAN™ – Bringing the Sunshine Inside" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">

Each code block has this:

<img src=”http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UVOpenOV.jpg”
onmouseover=”this.src=’http://fclean.staging.wpengine.com/wp-content/uploads/2017/07/UVOpen.jpg'”
onmouseout=”this.src=’http://fclean.staging.wpengine.com/wp-content/uploads/2017/09/UVOpenOV.jpg'” height=”139px” width=”230px”/>

How do I reduce the gap between them? Not sure if I need to but would be nice to know.

September 25, 2017 at 5:21 am #856299
Rikard
Keymaster
Hi,

You can target them using this CSS:
```
.page-id-7522 .av_one_fifth {
    margin-left: 6%;
    width: 15.2%;
}
```
Those are the default values, please change them to your liking.

Best regards,
Rikard
September 25, 2017 at 8:33 am #856360

brianwelsh
Participant

Thank you!!!

September 25, 2017 at 10:13 am #856391

Victoria
Inactive Moderator

Hi brianwelsh,

Glad we got things working for you! :)

If you need further assistance please let us know.

Best regards,
Victoria

September 25, 2017 at 4:53 pm #856580

brianwelsh
Participant

Hi,

I have this:

Products

(hosted on <a href="http://bit.ly/kwpengine" target="_blank" rel="nofollow">WPengine</a>) data-secret="IB7NgQwgJq" width="600" height="338" title="“Products” — F-CLEAN™ – Bringing the Sunshine Inside" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">

but would like even less spacing between the columns. If I try to reduce it
further it all shifts left?

Any ideas, it needs to be centered.

Thanks for your help

September 25, 2017 at 5:07 pm #856594

brianwelsh
Participant

Not sure if the link works?

Products

(hosted on <a href="http://bit.ly/kwpengine" target="_blank" rel="nofollow">WPengine</a>) data-secret="sZOXNWx4E2" width="600" height="338" title="“Products” — F-CLEAN™ – Bringing the Sunshine Inside" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">

September 25, 2017 at 7:26 pm #856676
John Torvik
Inactive Moderator
Hi,

You can decrease the gap space using this custom CSS code at Enfold Theme Options > General Styling > Quick CSS:
```
.page-id-3285 .av_one_fifth {
  margin-left: 1% !important;
}

.page-id-3285 .av_one_fifth:first-child {
   margin-left: 4% !important;
}
```
Best regards,
John Torvik
September 25, 2017 at 9:11 pm #856701

brianwelsh
Participant

That does it but the icons are no longer centered?

September 26, 2017 at 1:39 pm #856913

Victoria
Inactive Moderator

Hi,

They look pretty centered. If you see it different, please post a few screenshots.

Best regards,
Victoria
Author

Posts

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

You must be logged in to reply to this topic.