-
AuthorPosts
-
August 11, 2015 at 6:52 am #485750
Three things :
1) I’d like for the entire Icon Box to be the hit area, so on rollover ANYWHERE in the box, BOTH the icon AND the Title change color
2) Have hover colors of the Icon and Title Text be different
3) Increase size of icons on Hover (animated / tweened), but only for this home pageAugust 11, 2015 at 12:58 pm #485904Hey Michae1!
Please refer to my post here – https://kriesi.at/support/topic/apply-link-to-column-box/#post-470152
Regards,
YigitAugust 11, 2015 at 7:22 pm #486131Hi Yigit,
I should have mentioned I found that post and already tried it, but I couldn’t get it to work :( The custom CSS activated fine, but after assigning my custom class “jewelry” to the icon-box custom CSS field, nothing happened on rollover :(
On top of that, your reply doesn’t address the (2) and (3) points above.
Thoughts?
Thanx,
MichaelAugust 11, 2015 at 8:11 pm #486151Hi!
Do you mind creating a temporary admin login and posting it here privately?
Cheers!
YigitAugust 11, 2015 at 8:52 pm #486189Sure, here ya go.
- This reply was modified 9 years, 3 months ago by Michae1.
August 12, 2015 at 4:11 pm #486649Hi!
Please review your website now.
1- I have moved the code in Functions.php file lower on the file
2- Please add following code to quick CSS.jewelry .iconbox_top .iconbox_icon:hover { color: orange !important; }
3- Added following code to Quick CSS
.jewelry:hover a.iconbox_icon { -webkit-transform: scale(1.2,1.2); transform: scale(1.2,1.2); } .jewelry { cursor: pointer; }
Regards,
YigitAugust 12, 2015 at 9:28 pm #486794Hi Yigit, thanx! Getting closer :)
Still need to change the title color “Fashionable Jewelry” AND the sub-title color “Pendants . . . etc” on hover.
I tried the CSS I thought would work, but it didn’t :(
.jewelry:hover .iconbox_top iconbox_content_title { background-color: #c94e8e !important; }
Thoughts?
August 13, 2015 at 12:25 am #486857Hey!
Please add following code to Quick CSS as well
.jewelry:hover .iconbox_content_title, .jewelry:hover .iconbox_content_containerp em strong a { color: #c94e8e!important; }
Cheers!
YigitAugust 13, 2015 at 3:30 am #486894Thanx Yigit!
There was a small typo with no space for the “p” here : “.iconbox_content_containerp ” but I found it :) And now it works, so yay! Thanx!
One other little thing though, it’s kind of weird, and I can’t seem to track it down, when the icon scales, the right side gets “clipped” a little, like there’s a black vertical line that’s set just over the edge. It doesn’t look very clean. I’m sure it’s some kind of mask / or border setting, but I haven’t been able to track it down.
Thoughts?
Thanx again,
~ Michael- This reply was modified 9 years, 3 months ago by Michae1.
August 13, 2015 at 1:31 pm #487174Hey!
Good catch! :)
Please add following code to Quick CSS as well.jewelry .iconbox_top .iconbox_icon { padding: 13px; }
Regards,
YigitAugust 18, 2015 at 6:05 am #489277Perfect! Thanx Yigit!!
One last question about these icon boxes. On mobile, when they stack vertically, the last one “Your Office” gets butted RIGHT up against the previous one. I see that there’s only 10px of padding and I attempted to search out the correct class in Dev Tools (as usual) but no luck. Here’s what I tried and a screenshot. What class should I adjust?
https://goo.gl/photos/WKFm1nJXVknGvTyJ8
.flex_cell .no_margin .av_one_third .avia-builder-el-44 .el_after_av_cell_one_third .avia-builder-el-last { padding: 0px 50px 50px 50px; }
August 19, 2015 at 12:10 pm #489975Hi!
Have you figured it out already? I checked your site and this is how it looks on my end – http://i.imgur.com/Wb8Vhgf.png
Regards,
Yigit -
AuthorPosts
- You must be logged in to reply to this topic.