Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 23, 2018 at 1:56 am #916454
    JustinBean

    Hey everyone!

    I have a small question. How can I re-create this grid style with enfold?
    Especially the Icon on the left with the text on the right etc.

    https://puu.sh/ztCLc/cb8014033c.PNG

    Thank you!

    February 23, 2018 at 8:10 am #916540
    Rikard

    Hey JustinBean,

    There is nothing like that by default in the theme, but maybe you could create something similar using the Icon List element?

    Best regards,
    Rikard

    February 23, 2018 at 11:49 am #916595
    Guenni007

    well to get hexagone icons in enfold is not difficult to reach.

    here you can get some of the clip-path : https://bennettfeely.com/clippy/

    what is to do.

    1) give the icon-box or icon-list a meaningful custom class (here it is hexagones)

    2) this comes to quick css (yes without the ending e):

    .hexagon {
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

    3) this comes to functions.php of your child-theme:

    function add_class_to_icon() {
?>
<script type="text/javascript">
	  jQuery('.hexagones .iconbox_icon').css( 'border-radius' , '0px' );
          jQuery('.hexagones .iconbox_icon').addClass('hexagon');
	  jQuery('.hexagones .iconlist_icon').css( 'border-radius' , '0px' );
	  jQuery('.hexagones .iconlist_icon').addClass('hexagon');
 </script>
<?php
}
add_action('wp_footer', 'add_class_to_icon');

    the clip-path must go to the icon itself. So we had to add the hexagon class to it via addClass

    Results: https://webers-testseite.de/hexagons/
    The demo https://kriesi.at/themes/enfold-medical/ seems to fit well for you

    February 23, 2018 at 1:21 pm #916646
    Victoria

    Hi Guenni007,

    Thank you for the great input, as usual.


    @JustinBean     have you tried the solution above?

    Best regards,
    Victoria

    February 24, 2018 at 3:02 pm #917119
    JustinBean

    @Rikard
    It works like a charm! (the styling)
    Enfold never ceases to amaze me!


    @Guenni007

    UPDATE
    I kinda got it working: https://ibb.co/bXwcCc
    But for a split second while loading the page, you can see the default circle that Enfold is using. Is there a way to hide the default circle?
    Also, the icon inside the hexagon is a bit small.. Is there a way to enlarge it?

    Thank you all for the support.
    Justin

    • This reply was modified 6 years, 9 months ago by JustinBean.
    February 25, 2018 at 4:23 am #917263
    Rikard

    Hi,

    Thanks for the feedback. Could you post a link to your site so that we can have a look at it maybe?

    Best regards,
    Rikard

    February 25, 2018 at 2:01 pm #917361
    JustinBean

    @rikard
    Sure!

    Site: https://huidtherapie.online/

    Thank you!

    February 25, 2018 at 7:15 pm #917520
    Guenni007

    But on your site i can not see that – on the image hoster – yes :lol
    but as i said – on your page i does not see that effect.

    1) By the way – you forgot to set one custom class to the second row left (or is it intentionally)
    2) By the way – you know that interesting page for SIMULATED DAYLIGHT PDT WITH INDOORLUX

    Icon is font-size ( it is hard to simulate it because there are minifying tools on your page)
    try please: 

    #top .iconbox_left_content .iconbox_icon.hexagones, 
#top .iconbox_right_content .iconbox_icon.hexagones {
    font-size: 42px;
    line-height: 70px;
}
    • This reply was modified 6 years, 9 months ago by Guenni007.
    February 25, 2018 at 7:20 pm #917523
    Basilis

    Hi,

    Once again – thank you very very much for all the info!

    Best regards,
    Basilis

    February 25, 2018 at 7:26 pm #917539
    Guenni007

    or if you recognize a font-smallness on that spezific font-icon you can try font-size-adjust on all features-mc icons

    #top .avia-font-features-mc, body .avia-font-features-mc, html body [data-av_iconfont="features-mc"]::before {
    font-size-adjust: 1.1;
}

    Edit: forget about that – cross-browser compatiblity is not given !

    • This reply was modified 6 years, 9 months ago by Guenni007.
    February 26, 2018 at 3:39 am #917640
    Rikard

    Hi,

    Thanks for sharing @guenni007, did any of the suggestions solve your problem @justinbean?

    Best regards,
    Rikard

    February 26, 2018 at 9:40 am #917707
    Guenni007

    Seems that he has taken the last advice – but as i said the crossbrowser compatibility is not there:
    https://caniuse.com/#search=font-size-adjust

    the other quick css code will work too and …

    March 6, 2018 at 10:29 pm #922532
    JustinBean

    Hi all,

    The advice worked great and solved my problems.
    Thank you for the great support!

    • This reply was modified 6 years, 8 months ago by JustinBean.
    March 7, 2018 at 12:38 am #922619
    Jordan Shannon

    Hi,

    Great! I’m glad you were able to find a solution. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘How can I re-create this styling with Enfold?’ is closed to new replies.