Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #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 page

    #485904

    Hey Michae1!

    Please refer to my post here – https://kriesi.at/support/topic/apply-link-to-column-box/#post-470152

    Regards,
    Yigit

    #486131

    Hi 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,
    Michael

    #486151

    Hi!

    Do you mind creating a temporary admin login and posting it here privately?

    Cheers!
    Yigit

    #486189

    Sure, here ya go.

    • This reply was modified 9 years, 3 months ago by Michae1.
    #486649

    Hi!

    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,
    Yigit

    #486794

    Hi 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?

    #486857

    Hey!

    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!
    Yigit

    #486894

    Thanx 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.
    #487174

    Hey!

    Good catch! :)
    Please add following code to Quick CSS as well

    .jewelry .iconbox_top .iconbox_icon {
        padding: 13px;
    }

    Regards,
    Yigit

    #489277

    Perfect! 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;
    }
    
    #489975

    Hi!

    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

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.