Page 7 – Support | Kriesi.at – Premium WordPress Themes

don’t forget the css in quick css:


#top #button-on-top  .avia-button-fullwidth {
    padding: 20px 0px;
}
#button-on-top .avia_iconbox_title {
    font-size: 20px !important;
}

and :

add_action('ava_main_header', function() {
if(wp_is_mobile()){
  echo '<div id="button-on-top">';
  echo do_shortcode("[av_button_big label='100% Donation Policy' description_pos='below' link='manually,https://mydonate.bt.com/events/unite4humanity/461708' link_target='_blank' icon_select='no' icon='ue800' font='entypo-fontello' custom_font='#ffffff' color='custom' custom_bg='#b02b2c' color_hover='custom' custom_bg_hover='#106736' custom_class='' admin_preview_bg=''][/av_button_big]");
  echo '</div>';
}
});

you see the label= that is the text in the button
you see that in the code are custom_bg color and color_hover (hex-codes) so you can change yourself.

and if this fits for you – it makes no sense that you have on mobile this donate menu button:

.avia_mobile #menu-item-668 {
    display: none;
}

April 10, 2018 at 8:08 am #939682

In reply to: background colour icon box

// http://graphitivity.com/enfold/docs/intro-to-advanced-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

Hey june,

Thank you for using Enfold.

Use the following css code to change the default background color of the icon box.

.main_color.iconbox_top .iconbox_content {
    background-color: red;
}

Enable the custom css class field in order to define specific styles for the elements.

Best regards,
Ismael

March 26, 2018 at 4:27 pm #933075

In reply to: Columns are messed up after theme update

Hi bakbek,

It seems to me that the lower 3 iconboxes should be in a separate container, but here is the css to try to adjust them.
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css


.rtl div.flex_column.avia-builder-el-53  {
    float: right !important;
    margin-left: 2%;
    width: 45%;
    min-height: 263px;
}

body.rtl .flex_column.av_one_fourth.first.avia-builder-el-10,
body.rtl .flex_column.av_one_fourth.first.avia-builder-el-16  {
  margin-left: 0px;
 
}
body.rtl .flex_column.av_one_fourth.avia-builder-el-14 {
    min-height: 340px;
}
body.rtl .flex_column.av_one_fourth.avia-builder-el-22 {
  margin-left: 6%;
}

If you need further assistance please let us know.

Best regards,
Victoria

March 24, 2018 at 7:18 pm #932457

In reply to: Vertical align Title in IconBox

maybe – best will be to give a custom class to all these iconboxes (your account, services, operations, co-op …)
i have set the selectivity for now via page id and color-section id

.page-id-76 #after_section_1 .iconbox {
    display: inline-flex;
}

.page-id-76 #after_section_1 .iconbox .entry-content-header {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

on smaller screens set back to display: block or do insert to the headings some soft-hyphens with &shy and ;
sorry board soft will immediatly change the entitie code even if placed in code so &shy with semicolon behind

March 22, 2018 at 1:12 pm #931242

In reply to: Iconbox after update

Hi jjdenmark,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css


.page-id-17 #main .av_one_half .iconbox.iconbox_top,
.page-id-17 #main .av_one_half .iconbox.iconbox_top .iconbox_content {
  min-height: 412px;
  margin-bottom: 20px;
}

Not, sure I understand, what do you mean by the image being weird. Can you please explain a bit more?

If you need further assistance please let us know.

Best regards,
Victoria

March 21, 2018 at 6:01 am #930316

In reply to: Iconbox after update

Hi jjdenmark,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css



#after_section_1 .av_one_half .iconbox.iconbox_top,
#after_section_1 .av_one_half .iconbox.iconbox_top .iconbox_content {
  min-height: 322px;
  margin-bottom: 20px;
}

If you need further assistance please let us know.

Best regards,
Victoria

March 9, 2018 at 2:17 pm #924497

In reply to: How to make icons smaller only on mobile?

Mike

Hi,
It looks like in your custom css or General Styling > Quick CSS field you have this code:

#top .iconbox_icon, #top .iconbox_icon {
	font-size: 100px !important; /* Icon size */
	width: 74px !important; /* Container size */
	height: 74px !important; /* Must be the exact same value as the width */
}

please adjust “font-size: 100px !important;” to a smaller number.

Best regards,
Mike

March 5, 2018 at 2:16 pm #921481

In reply to: Cusom CSS not working after theme update

Mike

Hey DROR,
It would be good if you had a custom ID for the element on each page, but it does seem that they all are called “av-layout-grid-1” on the few pages that I checked, so please try this code:

#av-layout-grid-1 .iconbox_icon {
margin-left: 44px!important; 
position: relative!important; 
top: 24px!important; 
}

Best regards,
Mike

March 4, 2018 at 10:15 pm #921215

Topic: Cusom CSS not working after theme update

in forum Enfold

bakbek

Participant

Hi, I updated the theme to the latest version and a custom CSS code that was given to me here before is no longer working:

.page-id-18256 #av-layout-grid-1 .iconbox_icon {
margin-left: 44px;
position: relative;
top: 14px;
}

It should align the iconbox icon but it isn’t. It was working great before I updated the theme.

February 25, 2018 at 7:15 pm #917520

In reply to: How can I re-create this styling with Enfold?

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 7 years, 10 months ago by Guenni007.

February 23, 2018 at 11:49 am #916595

In reply to: How can I re-create this styling with Enfold?

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 22, 2018 at 11:31 pm #916406

Topic: Custom images for IconBox?

in forum Enfold

bonbuttercup

Participant

Instead of using icons, is it possible to use images for the IconBox? If not, is there another way to utilize the functionality of the IconBox (the way the icons/text fade in, as well as the rollover functionality) but allow custom images in lieu of the icons?

Site is still in development but is http://www.tciwest.com/j4f/ and I’m looking to replace the icons under Current Rebates with thumbnail circle images of each boat. Please let me know if this is possible.

February 8, 2018 at 4:48 pm #909830

In reply to: Make entire column clickable

First i edited again links are the same as above.
I added the option to set the link target !

1) on which version of enfold you are with your install ?
2) what is behind that custom-class (iconboxstyle) ? (css code please)

February 8, 2018 at 3:01 pm #909792

In reply to: Tab Section – Link from content in one tab…to another tab

Hi,

Oh ok. Please replace the icon boxes’ custom link “manually” with “#submit-details” then add the following script in the functions.php file.

// custom script
add_action( 'wp_footer', 'ava_custom_script_tab_section' );
function ava_custom_script_tab_section() {
?>
<script type="text/javascript">
(function($) {
	function scrollToTab(s, e,) {
		$(s).on(e, function(event) {
			var anchor, loc, cur, hash, tab, parent, pos;

			if( e == 'load' ) {
				loc  = window.location.hash;
				hash = loc;
			} else {
				loc = $(this).attr('href');
				hash = loc.substring(loc.indexOf('#'));
			}
	
			tab = $('.av-section-tab-title[href='+ hash +']');
			parent = tab.parents('.av-tab-section-outer-container');
			pos = parent.offset();

			tab.trigger('click');
			
			if(hash) {
				setTimeout( function() {
					$(window).scrollTop( pos.top - 100 )
				}, 1000 );
			}
		});
	}

	scrollToTab( '#top .iconbox_top a', 'click' );
})(jQuery);
</script>
<?php
}

Best regards,
Ismael

February 5, 2018 at 3:10 pm #908028

In reply to: Use custom icons

Hi marquitoweb,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css


#top .iconbox.av-no-box .iconbox_icon {
    width: 50px;
    height: 50px;
}

If you need further assistance please let us know.

Best regards,
Victoria

January 30, 2018 at 3:19 am #904581

In reply to: (Newer) way to change IconBox title to H2?

Mike

Hi,
Here is a post for changing in the H in the iconbox: https://kriesi.at/support/topic/hn-for-iconlist/#post-903934
It’s a custom file.
As for you child theme, you may need to clear your browser cache a few times, along with any cache plugin and minify plugin for your site. Sometimes css files are the hardest to clear.

Best regards,
Mike

January 24, 2018 at 4:27 am #901869

In reply to: Equal height of icon boxes

Hi,

Please add a unique class attribute to the columns containing the iconbox ( ex: custom-column) then use the following script in the functions.php file.

//add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {
	function a() {
        var maxHeight = 0;

        $('.custom-column .iconbox_content').each(function(){
           var thisH = $(this).height();
           if (thisH > maxHeight) { maxHeight = thisH; }
        });

        $('.custom-column .iconbox_content').height(maxHeight);
    }
	
	$(window).on('load debouncedresize', function() {
		a();
	});
})(jQuery);
</script>
<?php
}

Best regards,
Ismael

January 23, 2018 at 10:18 pm #901720

Topic: Icon Box style and Custom Classes

in forum Enfold

mcraig77

Participant

Ahoy,

I have some icon boxes and implemented a custom css class to them in order to hide the icon and shrink the text in one of them. Something seems off and I can’t seem to solve, perhaps you enfold genius’s can help!

For the first icon box I wan tot remove the icon and make the text normal size. I inserted this class .no-icon-homepage in the element and add this quick css. The icon disappears but the text doesn’t change

.no-icon-homepage .iconbox .iconbox_content .iconbox_content_title {
    font-size: 24px;
}

.no-icon-homepage .iconbox_icon.heading-color {
    display: none!important; 
}

On The other page i have a custom class name .smaller-text. The text doesn’t change size for this… so i’m guessing the element for text on the icon box I found using inspector is wrong….

.smaller-text .iconbox .iconbox_content .iconbox_content_title {
    font-size: 12px;
}

January 22, 2018 at 4:38 am #900553

In reply to: How to change Iconbox font and icon size.

Hey DROR,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css


#top #wrap_all .all_colors .avia-builder-el-5.iconbox h3.iconbox_content_title  {
    font-size: 25px;
}
.avia-builder-el-5.iconbox .iconbox_content p:last-child {
  font-size: 22px;
}
#top .avia-builder-el-5.iconbox.iconbox_right_content.av-icon-style-no-border .iconbox_icon {
    font-size: 70px;
}

If you need further assistance please let us know.

Best regards,
Victoria

January 16, 2018 at 11:16 pm #898184

Topic: Custom Class Icon Box

in forum Enfold

mcraig77

Participant

Ahoy,

I added a custom class attribute to my icon box called no-icon and inspected the page using my inspector tool. I have several icons boxes used in my site but want to remove some of icons and circles just leaving the box. I than added this code to my in hope of removing that icon and circle from certain element but it doesn’t seem to work.

no-icon.iconbox_icon.heading-color {
    display: none;
}

Have any clues to why this isn’t working? I’m going to be using the no-icon class on a few different elements on a few different pages.

December 27, 2017 at 10:26 pm #892254

In reply to: Google AdWords Icon – Home Page – IconBox Icon – Font: entypo-fontello

Hey Colm,

You need to upload custom icon and use it.
https://kriesi.at/support/topic/how-to-add-custom-icons-to-iconbox/

Adding your own Icon Fonts

If you need further assistance please let us know.
Best regards,
Victoria

November 24, 2017 at 6:42 am #881075

In reply to: anchors in navigation icons on iPad

Hi,

Thank you for the info.

We added the following script in the functions.php file.

// custom script
add_action( 'wp_footer', 'ava_custom_script' );
function ava_custom_script() {
?>
<script type="text/javascript">
(function($) {
  function a() {
      $('.iconbox').on('click', 'a', function(e) {
          var anchor, loc, cur, hash, tab, parent, pos;
          anchor = $(this).attr('href');
          hash = anchor.substring(anchor.indexOf('#'));
          tab = $('p[id='+ hash +']');
          parent = tab.parent('.av_textblock_section');
          pos = parent.offset();

          if(hash) $(window).scrollTop( pos.top - 100 );
      });
  }

  a();
})(jQuery);
</script>
<?php
}

Best regards,
Ismael

November 17, 2017 at 8:49 am #877973

In reply to: Maximum Container Width

maybe it is better to have only on those iconboxes a pointer which has a link
so add a class with this code to iconboxes which includes an anchor in it and only give the css to those new class.

add_action( 'wp_footer', 'ava_custom_script' );
function ava_custom_script() {
?>
<script type="text/javascript">
(function($) {
    $('.iconbox').has('a').addClass('withlink');
	function a() {
			$('.iconbox.withlink').on('click', function(e) {
					var link = $(this).find('a').attr('href');
					window.location.href = link;
			});
	}
	a();
})(jQuery);
</script>
<?php
}

.iconbox.withlink {
    cursor: pointer;
}

November 17, 2017 at 4:35 am #877897

In reply to: Maximum Container Width

Hi,

Please add this code in the functions.php file.

// custom script
add_action( 'wp_footer', 'ava_custom_script' );
function ava_custom_script() {
?>
<script type="text/javascript">
(function($) {
	function a() {
			$('.iconbox').on('click', function(e) {
					var link = $(this).find('a').attr('href');
					window.location.href = link;
			});
	}
	
	a();
})(jQuery);
</script>
<?php
}

And add the following code in the Quick CSS field.

.iconbox {
    cursor: pointer;
}

Best regards,
Ismael

October 24, 2017 at 3:47 pm #868246

In reply to: How to center bulleted list ?

please do erase all the rest you tried till now:

.su-list ul li {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: table !important;
}

maybe you play a bit with left positioning

BUT ! now you have to say if you only wanted to have it more specific. Because it goes to all su-lists
maybe you set a custom css on that fields where you like to have it
f.e. if you only want to have it on iconboxes:

.iconbox .su-list ul li {
    position: relative;
    left: 47%;
    transform: translateX(-50%);
    display: table !important;
}

October 24, 2017 at 10:55 am #868076

In reply to: How to center bulleted list ?

Hi,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css


.iconbox_content_container  ul {
    min-width: 100px;
    width: 50%;
    margin: 0 auto;
    text-align: left;
}

If you need further assistance please let us know.

Best regards,
Victoria

October 22, 2017 at 9:23 pm #867326

In reply to: Equal height iconboxes

Hi KingFilly,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css


.iconbox_top .iconbox_content {
  min-height: 245px;
  word-wrap: break-word;
}

But the amount of text is not equal and so on smaller screens, the rule can not apply.
If you need further assistance please let us know.
Best regards,
Victoria

October 9, 2017 at 5:57 pm #862011

In reply to: Enfold Critical CSS

Guilherme Pereira