@Nikko
https://kriesi.at/support/topic/how-to-remove-h3-in-slider-accordeon/#post-1202501

this was new to my – and a look to source code is right – the filter ( avf_customize_heading_settings ) is indeed part of this on line 875:

if ( ! class_exists( 'aviaccordion' ) ) 

if i use the filter i always took as victoria intends to do the context from the beginning:

if ( ! class_exists( 'avia_sc_slider_accordion' ) )

it seems to be a specific thing for accordion slider !

@mtrebbi the iconbox has on top of the alb source code:

if ( ! class_exists( 'avia_sc_icon_box' ) )

so context of the filter is : avia_sc_icon_box
only the title is set with conjuction to that filter – so this will be enough:

function my_heading_settings_for_iconbox( array $args, $context, array $extra_args = array() ) {
  if( $context == 'avia_sc_icon_box') {
    $args['heading'] = 'h1';            
    $args['extra_class'] = 'my-iconbox';  
  } 
  return $args;
}
add_filter( 'avf_customize_heading_settings', 'my_heading_settings_for_iconbox', 10, 3 );

the extra_class you can set by yourself – it is only for additonal Styling Options.

sollte – wenn du auch die deutsche WordPress Version installiert hattest eigentlich automatisch so sein.
Sonst geh bitte und schau unter Dashboard – Settings – General nach ob du dort umstellen kannst. : “Site Language”
Wenn du dort nicht auf Deutsch ( Sie oder Du) umstellen kannst, musst du für WordPress die Sprachfiles nachinstallieren.

with custom-class on grid-row element : gridcontent-special

@media only screen and (min-width: 1510px) {
  .gridcontent-special .flex_cell.avia-builder-el-first {
    padding-left: calc((100vw - 1510px)/2 + 50px) !important;
  }
  
  .gridcontent-special .flex_cell.avia-builder-el-first {
    padding-left: calc((100vw - 1510px)/2 + 50px) !important;
  }  
  
  .gridcontent-special .flex_cell.avia-builder-el-last {
    padding-right: calc((100vw - 1510px)/2 + 50px) !important;
  }  

  .gridcontent-special .flex_cell.avia-builder-el-last {
    padding-right: calc((100vw - 1510px)/2 + 50px) !important;
  }
}

@media only screen and (max-width: 1509px) {
  .gridcontent-special .flex_cell.avia-builder-el-first {
    padding-left: 50px !important;
  }
  
  .gridcontent-special .flex_cell.avia-builder-el-first {
    padding-left: 50px !important;
  }  
  
  .gridcontent-special .flex_cell.avia-builder-el-last {
    padding-right: 50px !important;
  }  

  .gridcontent-special .flex_cell.avia-builder-el-last {
    padding-right: 50px !important;
  }
}

for my setting 1510px and 50px setting on Grid-Cell padding overall:
( Sorry this for my page id specific – remove it or replace it to your IDs – or even better give to the grid-row a custom-class )

@media only screen and (min-width: 1510px) {
  .flex_cell.avia-builder-el-first {
    padding-left: calc((100vw - 1510px)/2 + 50px) !important;
  }
  
  .flex_cell.avia-builder-el-first {
    padding-left: calc((100vw - 1510px)/2 + 50px) !important;
  }  
  
  .flex_cell.avia-builder-el-last {
    padding-right: calc((100vw - 1510px)/2 + 50px) !important;
  }  

  .flex_cell.avia-builder-el-last {
    padding-right: calc((100vw - 1510px)/2 + 50px) !important;
  }
}

@media only screen and (max-width: 1509px) {
  .flex_cell.avia-builder-el-first {
    padding-left: 50px !important;
  }
  
  .flex_cell.avia-builder-el-first {
    padding-left: 50px !important;
  }  
  
  .flex_cell.avia-builder-el-last {
    padding-right: 50px !important;
  }  

  .flex_cell.avia-builder-el-last {
    padding-right: 50px !important;
  }
}

see: https://webers-testseite.de/grid-row-layout/

the 1/1 Container shows you the standard of 1510px width on my setting.

• This reply was modified 5 years, 3 months ago by Guenni007.

Kann sein, dass du
a) das Merging der css und js files: Unter Enfold / Leistung: “Alte CSS- und JS-Dateien löschen?” erneuern musst
b) den Browsercache refreshen musst #
und c) natürlich darfst du nicht erwarten, das alt angelegte Layouts sich dadurch verbessern.
– es werden nur neu erstellte Texte beeinflusst.

welche p tags stören dich? manchmal werden nämlich auch lästige leere p-tags erstellt.
da gäbe es eine Lösung für.

you can try to have here a flexed container – and the li’s as flex-items.
Try on quick css:

#avia-menu {
    display: flex !important;
    flex-flow: row wrap;
    justify-content: space-between;
}

this could end up in a multi line menu – but i guess the hamburger state will be effective before that happens

the layout itself is not so hard to style – but the dot-navigation on the left ( or right) it is a bit more complex.
See here with a lot of code: https://webers-testseite.de/pureinstall/dot-navigation-with-colored-sections/
Mine has the active section as title and on hover the others

mir würde schon reichen, wenn du eine analoge Seite in den Demos verlinken könntest.
z.B. sowas hier: https://kriesi.at/themes/enfold-shop/shop/
da dort viele der drüberliegenden Container mit overflow: hidden gesetzt sind müsste man das aufheben um den ja aussenliegenden Schatten zu sehen.

div .products .product a,
.product .inner_product,
.product .thumbnail_container, 
div .products .product a img {
  overflow: visible;
}
.woocommerce-LoopProduct-link:hover .attachment-shop_catalog {
  box-shadow: 2px 2px 8px #888;   
}

oder man gibt dem entsprechenden Container der den Schatten hat soviel margin, dass der Schatten wieder innerhalb desselben liegt:

.woocommerce-LoopProduct-link .thumbnail_container {
    margin: 10px !important;
}

.woocommerce-LoopProduct-link:hover .thumbnail_container {
  box-shadow: 2px 2px 8px #333;
  transition: all 0.3s ease;
}

maybe this little snippet in child-theme functions.php helps you to have on body (#top) the page/post name as new class:

function add_slug_body_class( $classes ) {
global $post;
  if ( isset( $post ) ) {
    $classes[] = $post->post_type . '-' . $post->post_name;
  }
  return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

f.e.
a page “Contact” will have then the class at body: page-contact
a portfolio “news” will get portfolio-news
etc.

1) is it an absolute width (px) or a relative one( 30%, 3em etc )?
– some browsers need here an absolute value.
2) on svg-support – did you have the standard settings or do you mark the “Force Inline SVG” ?
if support-svg inserted for the img the inline svg – an img rule will not work for that.
you have to make a rule vor svg with an absolute value of width.

• This reply was modified 5 years, 4 months ago by Guenni007.

if you layout Image Elements in columns ( on my test page there are 4 1/4 columns with image elements in it)
the images have custom captions and the caption is shown allways.
( Again this is site-specific – maybe a class on one of the surrounding containers would be better)

#top.page-id-34956 .av-image-caption-overlay-position {
  height: 50%;
  background-color: rgba(0,0,0,0.4);
  top: 50%;
}
#top.page-id-34956 .av-caption-image-overlay-bg {
  opacity: 0 !important;
}
#top.page-id-34956 .main_color .avia-image-container a .av-image-caption-overlay-position,
#top.page-id-34956 .main_color .avia-image-container a .av-image-caption-overlay-position p,
#top.page-id-34956 .main_color .avia-image-container a .av-image-caption-overlay-position p strong,
#top.page-id-34956 .main_color .avia-image-container a img {
  transition: all 0.5s ease;
  color: #FFF
}
#top.page-id-34956 .main_color .avia-image-container a img {
    filter: grayscale(0.8);
}
#top.page-id-34956 .main_color .avia-image-container a:hover img {
    filter: grayscale(0);
}
#top.page-id-34956 .main_color .avia-image-container a:hover .av-image-caption-overlay-position {
  background-color: orange;
}
#top.page-id-34956 .main_color .avia-image-container a:hover .av-image-caption-overlay-position p,
#top.page-id-34956 .main_color .avia-image-container a:hover .av-image-caption-overlay-position p strong {
  color: #000;
}

besides the posibility to change it via css styling.
Enfold offers that as a global setting as highlight-color:
(click to enlarge)

this is for anchor-links.

If you like to highlight something else you had to set a rule for the hover state on that selector.

off topic: if you like to highlight selected text phrases in a custom color:

::selection {
  background: #f29811 !important; 
  color: #000 !important; 
}
::-moz-selection {
  background: #f29811 !important; 
  color: #000 !important; 
}

the form-row with
– Profilo
– Indica il prodotto…
do not close

these missing two closing div tags are near the end ( you do not want to nest here – i think)
so close the form-row divs mentioned above – and get rid of these two closing div tags at the end
surrounding <div class="wpcf7-response-output" aria-hidden="true"></div>

ending up in:

<div id="responsive-form" class="clearfix">
	<div class="form-row">
		<div class="column-half first">Nome (*)<br><br>
			your spans inside
		</div>
		<div class="column-half">Cognome (*)<br><br>
			your spans inside
		</div>
	</div>

	<div class="form-row">
		<div class="column-half first">Mail (*) <br><br>
			your spans inside
		</div>
		<div class="column-half">Telefono (*) <br><br>
			your spans inside
		</div>
	</div>

	<div class="form-row">
		<div class="column-full">Profilo (*)<br><br>
			a lot of nested spans
		</div>
	</div> 

	<div class="form-row">
		<div class="column-full">Indica il prodotto a cui sei interessato (*)<br><br>
			a lot of nested spans
		</div>
	</div> 

	<div class="form-row">
		<div class="column-full">Come possiamo aiutarti (*)<br><br>
			a lot of nested spans
		</div>
	</div>

	<div class="form-row">
		<div class="column-full">
			a lot of tags including GDPR Compliance
		</div>
	</div>

	<p><input type="submit" value="Invia la tua richiesta" class="wpcf7-form-control wpcf7-submit" disabled="">
		<span class="ajax-loader"></span>
	</p>

	<div class="wpcf7-response-output" aria-hidden="true"></div>
</div>