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

Hi,
Thanks for the feedback I adjusted the script to this:


function custom_masonry_excerpt_button_script() { ?>
    <script>
var elements = new Array();
var elements = document.getElementsByClassName('av-masonry-entry-content');
for (var e = 0; e < elements.length; e++) {
    var newHTML = elements[e].innerHTML;
    newHTML = newHTML.replace('[buttoncode]','<span class="center-excerpt-button"><span class="avia-button avia-icon_select-yes-left-icon avia-size-large avia-position-center avia-color-theme-color"><span class="avia_button_icon avia_button_icon_left" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">SEE MENU</span></span></span>');
    elements[e].innerHTML = newHTML;
};
</script>
    <?php
}
add_action('wp_footer', 'custom_masonry_excerpt_button_script');

and I added this css to center the buttons:

span.center-excerpt-button {
	display: flex;
    justify-content: center;
}

Please clear any cache plugin and your browser cache and check.

Best regards,
Mike

February 26, 2022 at 12:01 am #1342344

In reply to: Adding Shortcode to Excerpts

Hi,
Thanks for the login, originally I was under the impression that we were talking about a portfolio item, so after testing the solution above was for a portfolio item, but I see that you are using a masonry element to show posts. I couldn’t find a similar solution for this, but I did find a plugin that works Shortcodes Anywhere or Everywhere if the In Post/Page Custom Fields option is used. I first tested this with a simple date shortcode, but using a button shortcode breaks the masonry element.
If you notice the whole masonry block, excerpt and image, is already linked to the item, so you can not add a button to the excerpt that includes a link.
I assume that you understand that this, so I came up with a different solution for you, I replaced your shortcode in the manual excerpt with this:
[buttoncode]
then I added this to your child theme functions.php

function custom_masonry_excerpt_button_script() { ?>
    <script>
var masonryExcerpt = document.querySelector(".av-masonry-entry-content.entry-content");
masonryExcerpt.innerHTML = masonryExcerpt.innerHTML.replace("[buttoncode]", '<span class="avia-button avia-icon_select-yes-left-icon avia-size-small avia-position-center avia-color-theme-color"><span class="avia_button_icon avia_button_icon_left" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">Click me</span></span>');
</script>
    <?php
}
add_action('wp_footer', 'custom_masonry_excerpt_button_script');

and now the button shows.
You can adjust the button html in the script above to suit, if you want help with this please post the button you want to use on a test page so I can copy the html and adjust the script for you.

Best regards,
Mike

February 25, 2022 at 4:36 pm #1342300

Topic: Fullwidth Easy Slider position of caption-content and caption-title responsive

in forum Enfold

josk-design

Participant

Hello There,

I am using a Fullwidth Easy Slider and I want to manage the size and position of the texts.
I already did something. (I am proud as a total css and html and wp beginner. ;-) thanks to the input i found in this forum)

https://kuhl-consult.josk-design.de/5977-2/
(password in private content)

It’s not that bad, but it’s not responsive. I am working o a laptop and a big screen and on the big screen the fonts are too small, and the position is not ok.
Is there a way to say via css that the font should be bigger on big screens and smaller on small screens and the position should be relative like 10% from top and 10% from left for example?

this is the css I’ve put in quick css:

/*—————————————-
// CSS – fullwidth font style
//————————————–*/

/* fullwidth slider title */
.av_slideshow_full .avia-caption-title {
font-size: 40px !important;
line-height: 170% !important;
font-weight: 300 !important;
color: #663515 !important;
}

/* fullwidth slider caption content */
.av_slideshow_full .avia-caption-content p {
font-size: 30px;
line-height: 150%;
font-weight: 200;
color: #000000 !important;
}

/* fullwidth slider caption content */
.avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-content
{
width: 100%;
margin: 0 auto;

}
.avia_transform .av_slideshow_full .avia-caption-title {
width: 100%;
margin: 0 auto;
position: relative;

}
@media only screen and (min-width: 768px) and (max-width: 1920px){
.avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-content
{
width: 100%;
margin: 0 auto;

}

.avia_transform .av_slideshow_full .avia-caption-title {
width: 100%;
margin: 0 auto;

}
}

.slideshow_caption {
z-index: 100;
width: 65%;
position: absolut;
bottom: 0;
top: -15.0em;
left: -5.2em;
height: 100%;
display: block;
text-decoration: none;
padding: -100%;
}

Would be so great if you could help me. :)

Best regards
Josephine

February 24, 2022 at 2:07 pm #1342149

In reply to: How to show "No items" if a certain portfolio tag is empty in Masonry Gallery

Hi,
Thanks for sharing your script, there seems to be an error in my filter but I couldn’t find it so I removed it and adjusted the message script to use your MasTag and this seems to work fine, see the two links below.
You can remove the $('#av-masonry-1.projectgallery').addClass(MasTag); from your script as this is not needed, only the var MasTag is used for the message script to match the child element tags.
This is what is now in your functions.php, please check.

function empty_masonry_message_script() { ?>
    <script>
		(function($) {
			if( $('body.single-product').length || $('body.anotherclass').length ){
		var BreadTrail = $(location).attr("href");
		var BreadTrailx = BreadTrail.replace('https://staging.idgadvertising.com/tiletech/product/concrete-pavers/', '');
		BreadTrailx = BreadTrailx.replace(/\/$/, "");
		BreadTrailx = BreadTrailx.replace(/\//g,"-");
		console.log(BreadTrailx);
		
		if (BreadTrailx.indexOf("porcelain-pavers") >= 0) {
			var PageTitle = $('.rightside .av-special-heading h1.av-special-heading-tag').text();
		PageTitle = PageTitle.toLowerCase().replace(/ /g, '-');
	var MasTag = 'tag-'+PageTitle;
		console.log(MasTag);
		
		$('#av-masonry-1.projectgallery').addClass(MasTag);

		} else {
			
	var MasTag = 'tag-'+BreadTrailx;
		console.log(MasTag);
			
		$('#av-masonry-1.projectgallery').addClass(MasTag); }
		
}

var nocat = $('<div class="nocat">No Current Projects</div>').css({'text-align':'center','font-size': '20px'});
$('#av-masonry-1 .av-masonry-container.isotope a').each( function() {
if (!$(this).hasClass(MasTag)) {
  $(this).css({'display':'none'});
  
}
});
if($('#av-masonry-1 .av-masonry-container.isotope a').is(':hidden')){
	$(nocat).appendTo('#av-masonry-1');
}
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'empty_masonry_message_script');

Best regards,
Mike

February 23, 2022 at 11:19 pm #1342081

In reply to: How to show "No items" if a certain portfolio tag is empty in Masonry Gallery

jgax87

So after studying your code and how it’s implemented, I was able to write a little script that I added before your code and it seems like it worked in theory. The console.log shows the create tag and it does apply to the element, but now it only shows “no current projects”.

any suggestions or ideas let me know

function empty_masonry_message_script() { ?>
    <script>
		(function($) {
			if( $('body.single-product').length || $('body.anotherclass').length ){
		var BreadTrail = $(location).attr("href");
		var BreadTrailx = BreadTrail.replace('https://staging.idgadvertising.com/tiletech/product/concrete-pavers/', '');
		BreadTrailx = BreadTrailx.replace(/\/$/, "");
		BreadTrailx = BreadTrailx.replace(/\//g,"-");
		console.log(BreadTrailx);
		
		if (BreadTrailx.indexOf("porcelain-pavers") >= 0) {
			var PageTitle = $('.rightside .av-special-heading h1.av-special-heading-tag').text();
		PageTitle = PageTitle.toLowerCase().replace(/ /g, '-');
	var MasTag = 'tag-'+PageTitle;
		console.log(MasTag);
		
		$('#av-masonry-1.projectgallery').addClass(MasTag);

		} else {
			
	var MasTag = 'tag-'+BreadTrailx;
		console.log(MasTag);
			
		$('#av-masonry-1.projectgallery').addClass(MasTag); }
		
	}
			})(jQuery);
		
		
const allCategoryClasses = [];
const elementsWithCategoryClasses = document.querySelectorAll("#av-masonry-1[class*='tag-']");
const elementsCount = elementsWithCategoryClasses.length != null;

for (let i = 0; i < elementsCount; ++i) {
  Array.prototype.push.apply(
    allCategoryClasses,
    elementsWithCategoryClasses[i].classList
  );
}
const presentClasses = {};

var tagClass = (allCategoryClasses
  .filter((classname) => {
    const present = presentClasses[classname];
    presentClasses[classname] = true;
    return classname.indexOf("tag-") == 0 && !present;
}));
(function($) {
var nocat = $('<div class="nocat">No Current Projects</div>').css({'text-align':'center','font-size': '20px'});
$('#av-masonry-1 .av-masonry-container.isotope a').each( function() {
if ($(this).children(tagClass).length != 0) {
  $(this).css({'display':'none'});
  
}
});
if($('#av-masonry-1 .av-masonry-container.isotope a').is(':hidden')){
	$(nocat).appendTo('#av-masonry-1');
}
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'empty_masonry_message_script');

This reply was modified 4 years ago by jgax87.

February 23, 2022 at 9:33 pm #1342072

In reply to: Change size of "Terms and Condition checkbox / text" on checkout page

Yigit

Hey Bernhard,

Thanks for contacting us!

Please add following code to Quick CSS field in Enfold theme options > General Styling tab and adjust it as needed


#top .woocommerce .data-privacy span {
  font-size: 16px;
}

Best regards,
Yigit

February 23, 2022 at 5:28 am #1341936

In reply to: Grid Blog view irregular sized images despite all image files being square

Hi,

Thank you for the update.

Some of the images are actually smaller than the designated thumbnail, so they were not resized the same as the larger ones. The images should have the same aspect ratio and they should be of the same size.

You can use this css code to adjust the style of the post title.

.avia-content-slider .slide-entry-title {
    font-size: 0.9em;
    line-height: 1.4em;
    margin: 0;
    font-weight: 400;
}

Best regards,
Ismael

February 22, 2022 at 12:57 pm #1341786

Topic: Font-weight not catching

in forum Enfold

sacoult

Participant

Hi,

I have just made a site using Enfold and it’s looking quite fine. There are a couple of things that are not working yet and I am not sure if it is due to the server, the browser being used or something else.

So what I would like to do is this. In the menu which finds itself on the left side (I am using the Enfold Photography Portfolio demo as the basis), I cannot seem to change the Font weight to bold or any of the other weight numbers.

In Advanced Styling, I have selected Main Menu Links to customise. Font Color, Background Color, Font Size, Font Family and Text Transform all work. However, whichever option I choose for Font Weight does not seem to catch. I don’t see any change while with the other options just mentioned, I do.

I have also downloaded the same font from Google and uploaded the versions I want to use, but they still don’t catch.

The font I would like to use is Raleway Bold, or 700, 800.

Is there a way I can maybe use some CSS or something to make this work?

Thanks in advance.

February 22, 2022 at 4:46 am #1341743

In reply to: Embedded Form Styling

Hi,

Thank you for the info.

You may need to contact the script authors in order to modify the donation form and override the theme styles. For starters, you can add this code in the Quick CSS field to override the default contact form styles but the positioning of the form fields will still require some modifications.

#bbox-root {
    font-size: 13px;
}

#top .bbox-root .input-text, #top .bbox-root input[type="text"], #top .bbox-root input[type="input"], #top .bbox-root input[type="password"], #top .bbox-root input[type="email"], #top .bbox-root input[type="number"], #top .bbox-root input[type="url"], #top .bbox-root input[type="tel"], #top .bbox-root input[type="search"], #top textarea, #top select {
    -webkit-appearance: none;
    border: 1px solid #e1e1e1;
    padding: 4px 0;
    outline: none;
    font: 1em "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    margin-bottom: 0;
    background: #fff;
    line-height: 1.4em;
    padding-left: 5px;
    display: inline;
    font-family: inherit;
    float: none;
    border-radius: 3px;
    width: 50%;
    max-width: 171px;
    margin-right: 4px;
}

Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

Best regards,
Ismael

February 21, 2022 at 6:37 pm #1341711

In reply to: Post Slider Date

Hi,

Thanks for the update. Please try the following in Quick CSS under Enfold->General Styling:

time.slide-meta-time {
  font-size: 12px;
}

.slide-content h3.slide-entry-title {
  padding-bottom: 10px; 
}

Best regards,
Rikard

February 21, 2022 at 4:31 pm #1341676

Topic: Codepen code to enfold

in forum Enfold

Justin Blom

Participant

Hi Guys,

I have a problem with a codepen that I modified. I would like to ask how I can import my codepen code into a page in Enfold. Below you can find my html/css and javascript code.

I already tried to put its javascript in the function.php. I put the html in a code block. And i put the css in the quick css of enfold.

Unfortunately that didn’t work

HTML


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>lenobi Parallax Cards</title>

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
  </head>
  <body>

    <div class="wrapper">

      <!-- Nike 19 -->
      <div class="card card--19">
        <div class="card__header card__header--19">
          <div class="card__watermark" data-watermark="Training"></div>

          <img src="https://test.dutchdesignfabriek.com/wp-content/uploads/2022/02/Logo-Lenobi-wit-met-tekst-wit-02.png" alt="Nike" class="card__logo card__will-animate">

          <span class="card__price card__will-animate">onze diensten</span>

          <h1 class="card__title card__will-animate">Training</h1>
          <span class="card__subtitle card__will-animate">Neem deel aan een van onze trainingen. We verzorgen individuele en teamgerichte trainingen op mbo+ en hbo-niveau aan professionals in de zorg, detailhandel en beveiliging. </span>

        </div>

        <div class="card__body">
          <img src="https://test.dutchdesignfabriek.com/wp-content/uploads/2022/02/training_patroon_2.png" alt="Nike 19" class="card__image card__will-animate">
          <div class="card__wish-list card__wish-list--19 card__will-animate">Lees meer</div>

          <span class="card__category card__will-animate">afgestemd op jouw doel</span>
        </div>
      </div>

      <!-- Nike Solstice -->
      <div class="card card--solstice">
        <div class="card__header card__header--solstice">
          <div class="card__watermark" data-watermark="preventie"></div>

          <img src="https://test.dutchdesignfabriek.com/wp-content/uploads/2022/02/Logo-Lenobi-wit-met-tekst-wit-02.png" alt="Nike" class="card__logo card__will-animate">

          <span class="card__price card__will-animate">Onze diensten</span>

          <h1 class="card__title card__will-animate">Preventie</h1>
          <span class="card__subtitle card__will-animate">Maak gebruik van Preventie Professionals® die ondersteuning bieden en ervoor zorgen dat er voldoende individuele aandacht overblijft voor de cliënt.</span>

        </div>

        <div class="card__body">
          <img src="https://test.dutchdesignfabriek.com/wp-content/uploads/2022/02/training_patroon_B_1.png" alt="Nike Solstice" class="card__image card__will-animate">
          <div class="card__wish-list card__wish-list--solstice card__will-animate">Lees meer</div>

          <span class="card__category card__will-animate">het gewenste resultaat</span>
        </div>
      </div>

      <!-- Nike Huarache -->
      <div class="card card--huarache">
        <div class="card__header card__header--huarache">
          <div class="card__watermark" data-watermark="Care"></div>

          <img src="https://test.dutchdesignfabriek.com/wp-content/uploads/2022/02/Logo-Lenobi-wit-met-tekst-wit-02.png" alt="Nike" class="card__logo card__will-animate">

          <span class="card__price card__will-animate">Onze diensten</span>

          <h1 class="card__title card__will-animate">Care</h1>
          <span class="card__subtitle card__will-animate">In de complexe zorg wordt het steeds moeilijker om cliënten de noodzakelijke primaire zorg te geven. Teams staan vaak onder grote druk en medewerkers wisselen elkaar doorgaans snel af.</span>

        </div>

        <div class="card__body">
          <img src="https://test.dutchdesignfabriek.com/wp-content/uploads/2022/02/training_patroon_C_3.png" alt="Nike Huarache" class="card__image card__will-animate">
          <div class="card__wish-list card__wish-list--solstice card__will-animate">Lees meer</div>

          <span class="card__category card__will-animate">professionele ondersteuning</span>
        </div>
      </div>

    </div> <!-- /wrapper -->

    <div class="cards-placeholder">
      <div class="cards-placeholder__item"></div>
      <div class="cards-placeholder__item"></div>
      <div class="cards-placeholder__item"></div>
    </div>
  </body>
</html>

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;

  font-family: "Roboto", "Helvetica", sans-serif;

  transition: background-color 0.2s;
  will-change: background-color;
}

.inspired-by {
  display: block;
  position: relative;
  margin-bottom: 15px;
  text-align: center;
  color: #fff;
  font-size: 14px;
}

.wrapper {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

.card {
  display: block;
  position: absolute;
  top: 25px;
  margin: 0 auto;
  width: 350px;
  background-color: #fff;
  border-radius: 15px;

  box-shadow: 0 30 50 rgba(0, 0, 0, 0.2);

  transform: translateX(-50%);
  transition: left 0.5s ease-out;
  will-change: left;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.card--19 {
  left: 50%;
}

.card--solstice,
.card--huarache {
  left: 150%;
}

.card__header {
  position: relative;
  height: 170px;
  padding: 30px 30px 300px;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  color: #fff;
}

.card__header--19 {
  background-color: #F72648;
  background-image: linear-gradient(#F72648, #FCCB3C);

  background: #F72648;
  background: linear-gradient(#038ac4, #4ec1c1);
}

.card__header--solstice {
  background-color: #3CA3FC;
  background-image: linear-gradient(#3CA3FC, #FFD300);

  background: #3CA3FC;
  background: linear-gradient(#3CA3FC, #FFD300);
}

.card__header--huarache {
  background-color: #26C9F7;
  background-image: linear-gradient(#26C9F7, #DFFC3C);

  background: #26C9F7;
  background: linear-gradient(#26C9F7, #DFFC3C);
}

.card__watermark {
  overflow: hidden;
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
}

.card__watermark::after {
  content: attr(data-watermark);
  position: relative;
  left: -20px;
  color: rgba(0, 0, 0, .3);
  font-size: 240px;
  font-weight: 700;
  text-transform: uppercase;
}

.card__logo {
  width: 110px;
  height: auto;
}

.card__price {
  float: right;
  font-size: 16px;
  font-weight: 300;
}

.card__title {
  margin: 35px 0 20px;
  font-size: 15px;
  line-height: 1.1em;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.card__subtitle {
  display: block;
  font-size: 13px;
  font-weight: 300;
}

.card__body {
  position: relative;
  padding: 40px 30px 20px;
}

.card__image {
  z-index: 1;
  position: absolute;
  top: -230px;
  left: 30px;
  width: 125%;

  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.card__wish-list {
  display: block;
  width: 50%;
  margin: 0 auto 15px;
  padding: 15px;
  border: 2px solid #fff;
  border-radius: 20px;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
}

.card__wish-list--19 {
  color: #038ac4;
  border-color: #038ac4;
}

.card__wish-list--solstice {
  color: #FFBA00;
  border-color: #FFBA00;
}

.card__wish-list--huarache {
  color: #26C9F7;
  border-color: #26C9F7;
}

.card__category {
  display: block;
  font-size: 12px;
  color: #AEAEAE;
  text-transform: uppercase;
  text-align: center;
}

.card__will-animate {
  will-change: transform;
}

.cards-placeholder {
  display: block;
  position: relative;
  margin-bottom: 15px;
  text-align: center;
}

.cards-placeholder__item {
  opacity: 0.3;
  display: inline-block;
  margin-right: 10px;
  background-color: #fff;
  width: 30px;
  height: 5px;
  border-radius: 5px;

  transition: opacity 0.2s;
  will-change: opacity;
}

.cards-placeholder__item--active {
  opacity: 1;
}

Javascript

(function () {
  'use strict';

  var BODY_BACKGROUNDS = [
    '#91FDFF',
    '#FFBA00',
    '#4054FF'
  ];

  function Slider () {
    this.cards = document.querySelectorAll('.card');
    this.currentIndex = 0;

    this.isDragging = false;
    this.startX = 0;
    this.currentX = 0;

    this.initEvents();
    this.setActivePlaceholder();
  }

  // initialize drag events
  Slider.prototype.initEvents = function () {
    document.addEventListener('touchstart', this.onStart.bind(this));
    document.addEventListener('touchmove', this.onMove.bind(this));
    document.addEventListener('touchend', this.onEnd.bind(this));

    document.addEventListener('mousedown', this.onStart.bind(this));
    document.addEventListener('mousemove', this.onMove.bind(this));
    document.addEventListener('mouseup', this.onEnd.bind(this));

  };

  // set active placeholder
  Slider.prototype.setActivePlaceholder = function () {
    var placeholders = document.querySelectorAll('.cards-placeholder__item');
    var activePlaceholder = document.querySelector('.cards-placeholder__item--active')

    if (activePlaceholder) {
      activePlaceholder.classList.remove('cards-placeholder__item--active');
    }

    placeholders[this.currentIndex].classList.add('cards-placeholder__item--active');

    var bodyEl = document.querySelector('body');
    bodyEl.style.backgroundColor = BODY_BACKGROUNDS[this.currentIndex];
  };

  // mousedown event
  Slider.prototype.onStart = function (evt) {
    this.isDragging = true;

    this.currentX = evt.pageX || evt.touches[0].pageX;
    this.startX = this.currentX;

    var card = this.cards[this.currentIndex];

    // calculate ration to use in parallax effect
    this.windowWidth = window.innerWidth;
    this.cardWidth = card.offsetWidth;
    this.ratio = this.windowWidth / (this.cardWidth / 4);
  };

  // mouseup event
  Slider.prototype.onEnd = function (evt) {
    this.isDragging = false;

    var diff = this.startX - this.currentX;
    var direction = (diff > 0) ? 'left' : 'right';
    this.startX = 0;

    if (Math.abs(diff) > this.windowWidth / 4) {
      if (direction === 'left') {
        this.slideLeft();
      } else if (direction === 'right') {
        this.slideRight();
      } else {
        this.cancelMoveCard();
      }

    } else {
      this.cancelMoveCard();

    }

  };

  // mousemove event
  Slider.prototype.onMove = function (evt) {
    if (!this.isDragging) return;

    this.currentX = evt.pageX || evt.touches[0].pageX;
    var diff = this.startX - this.currentX;
    diff *= -1;

    // don't let drag way from the center more than quarter of window
    if (Math.abs(diff) > this.windowWidth / 4) {
      if (diff > 0) {
        diff = this.windowWidth / 4;
      } else {
        diff = - this.windowWidth / 4;
      }
    }

    this.moveCard(diff);
  };

  // slide to left direction
  Slider.prototype.slideLeft = function () {
    // if last don't do nothing
    if (this.currentIndex === this.cards.length - 1) {
      this.cancelMoveCard();
      return;
    }

    var self = this;
    var card = this.cards[this.currentIndex];
    var cardWidth = this.windowWidth / 2;

    card.style.left = '-50%';

    this.resetCardElsPosition();

    this.currentIndex += 1;
    this.setActivePlaceholder();
    card = this.cards[this.currentIndex];

    card.style.left = '50%';

    this.moveCardEls(cardWidth * 3);

    // add delay to resetting position
    setTimeout(function () {
      self.resetCardElsPosition();
    }, 50);
  };

  // slide to right direction
  Slider.prototype.slideRight = function () {
    // if last don't do nothing
    if (this.currentIndex === 0) {
      this.cancelMoveCard();
      return;
    }

    var self = this;
    var card = this.cards[this.currentIndex];
    var cardWidth = this.windowWidth / 2;

    card.style.left = '150%';

    this.resetCardElsPosition();

    this.currentIndex -= 1;
    this.setActivePlaceholder();
    card = this.cards[this.currentIndex];

    card.style.left = '50%';

    this.moveCardEls(-cardWidth * 3);

    // add delay to resetting position
    setTimeout(function () {
      self.resetCardElsPosition();
    }, 50);
  };

  // put active card in original position (center)
  Slider.prototype.cancelMoveCard = function () {
    var self = this;
    var card = this.cards[this.currentIndex];

    card.style.transition = 'transform 0.5s ease-out';
    card.style.transform = '';

    this.resetCardElsPosition();
  };

  // reset to original position elements of card
  Slider.prototype.resetCardElsPosition = function () {
    var self = this;
    var card = this.cards[this.currentIndex];

    var cardLogo = card.querySelector('.card__logo');
    var cardPrice = card.querySelector('.card__price');
    var cardTitle = card.querySelector('.card__title');
    var cardSubtitle = card.querySelector('.card__subtitle');
    var cardImage = card.querySelector('.card__image');
    var cardWishList = card.querySelector('.card__wish-list');
    var cardCategory = card.querySelector('.card__category');
    var cardWillAnimate = card.querySelectorAll('.card__will-animate');

    // move card elements to original position
    cardWillAnimate.forEach(function (el) {
      el.style.transition = 'transform 0.5s ease-out';
    });

    cardLogo.style.transform = '';
    cardPrice.style.transform = '';

    cardTitle.style.transform = '';
    cardSubtitle.style.transform = '';

    cardImage.style.transform = '';
    cardWishList.style.transform = '';
    cardCategory.style.transform = '';

    // clear transitions
    setTimeout(function () {
      card.style.transform = '';
      card.style.transition = '';

      cardWillAnimate.forEach(function (el) {
        el.style.transition = '';
      });
    }, 500);

  };

  // slide card while dragging
  Slider.prototype.moveCard = function (diff) {

    var card = this.cards[this.currentIndex];

    card.style.transform = 'translateX(calc(' + diff + 'px - 50%))';
    diff *= -1;

    this.moveCardEls(diff);
  };

  // create parallax effect on card elements sliding them
  Slider.prototype.moveCardEls = function (diff) {
    var card = this.cards[this.currentIndex];

    var cardLogo = card.querySelector('.card__logo');
    var cardPrice = card.querySelector('.card__price');
    var cardTitle = card.querySelector('.card__title');
    var cardSubtitle = card.querySelector('.card__subtitle');
    var cardImage = card.querySelector('.card__image');
    var cardWishList = card.querySelector('.card__wish-list');
    var cardCategory = card.querySelector('.card__category');
    var cardWillAnimate = card.querySelectorAll('.card__will-animate');

    cardLogo.style.transform = 'translateX(' + (diff / this.ratio) + 'px)';
    cardPrice.style.transform = 'translateX(' + (diff / this.ratio) + 'px)';

    cardTitle.style.transform = 'translateX(' + (diff / (this.ratio * 0.90)) + 'px)';
    cardSubtitle.style.transform = 'translateX(' + (diff / (this.ratio * 0.85)) + 'px)';

    cardImage.style.transform = 'translateX(' + (diff / (this.ratio * 0.35)) + 'px)';

    cardWishList.style.transform = 'translateX(' + (diff / (this.ratio * 0.85)) + 'px)';
    cardCategory.style.transform = 'translateX(' + (diff / (this.ratio * 0.65)) + 'px)';

  };

  // create slider
  var slider = new Slider();

})();

February 21, 2022 at 4:23 pm #1341674

In reply to: Post Slider Date

markmade

Hi Mike,
Thanks for the quick help. I have one more request.
Can I make the font size of the date a little smaller?
And the distance between category and title is slightly larger

February 21, 2022 at 1:50 pm #1341638

Topic: Adding icon to menu item with button style bordered

in forum Enfold

steviger

Participant

Hi,

I’d like to add the search icon before my last menu item. Bordered works and I can see the icon when using this in the navigation label:

[av_font_icon icon='ue803' font='entypo-fontello' style='' caption='' size='20' position='left' color='' link='' linktarget='' animation='deactivated' id='' custom_class='' av_uid='' admin_preview_bg=''][/av_font_icon]Zoeken op deze website

However the combination of the two doesn’t seem to work. I can’t get the icon inside the blue border. Please see screendump here

Best regards,

Steven

February 20, 2022 at 7:41 pm #1341525

In reply to: different category positions

Veronika

Hi Nikko,

thank you, it worked perfectly. I tried to make it centered, which is also working. I tried to add a special font-weight to the title but nothing changes. Did I wrote something wrong?

#top.home #av-layout-grid-1 .av_one_half.avia-builder-el-first .slide-entry-title {
font-size: 40px;
text-align: center;
font-weight: 300px !important;
}

Thank you very much

Best,
Veronika

February 20, 2022 at 1:39 pm #1341481

In reply to: Unable to change the order of images in a gallery

Hi nancy2434 and goldengate415,

Please try this in your functions.php file:

function ava_custom_css_admin_mod() {
    echo '<style>
      .wp-core-ui .attachments:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
      }
    </style>';
  }
  add_action('admin_head', 'ava_custom_css_admin_mod');

Best regards,
Rikard

February 20, 2022 at 12:25 pm #1341469

In reply to: FIXED: Masonry gallery no longer allows us to re-order photos

Hi Rob,

This problem is not theme related, it comes from WordPress core. Please try this in your functions.php file for a temporary solution:

function ava_custom_css_admin_mod() {
    echo '<style>
      .wp-core-ui .attachments:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
      }
    </style>';
  }
  add_action('admin_head', 'ava_custom_css_admin_mod');

Best regards,
Rikard

February 19, 2022 at 7:10 am #1341385

In reply to: How to show "No items" if a certain portfolio tag is empty in Masonry Gallery

Hi,
Thank you for your patience and the login, the portfolio tags are listed as classes in the masonry items so to ensure that only the correct tags are shown and if there are none show a message we need to know what tag the masonry is going to show, so you will need to add a custom class to the masonry element for the tag that you want to show.
This will allow us to use one script for your whole site instead of writing a different script or css rule for every page.
So for the test page the tag class you want to show was tag-trellis-ice

the portfolio tag slug for this is trellis-ice so you see that you just add tag- to the beginning, this should explain how to adjust your other pages.
you will add this class to the developer settings custom class field:

as you see, if you already have a custom class there add the second class after a space.
I then added this script to your child theme functions.php:

function empty_masonry_message_script() { ?>
    <script>
const allCategoryClasses = [];
const elementsWithCategoryClasses = document.querySelectorAll("#av-masonry-1[class*='tag-']");
const elementsCount = elementsWithCategoryClasses.length !== null;

for (let i = 0; i < elementsCount; ++i) {
  Array.prototype.push.apply(
    allCategoryClasses,
    elementsWithCategoryClasses[i].classList
  );
}
const presentClasses = {};

var tagClass = (allCategoryClasses
  .filter((classname) => {
    const present = presentClasses[classname];
    presentClasses[classname] = true;
    return classname.indexOf("tag-") === 0 && !present;
}));

(function($) {
var nocat = $('<div class="nocat">No Current Projects</div>').css({'text-align':'center','font-size': '20px'});
$('#av-masonry-1 .av-masonry-container.isotope a').each( function() {
if ($(this).children(tagClass).length =! 0) {
  $(this).css({'display':'none'});
  
}
});
if($('#av-masonry-1 .av-masonry-container.isotope a').is(':hidden')){
	$(nocat).appendTo('#av-masonry-1');
}
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'empty_masonry_message_script');

and now a message No Current Projects shows instead of the wrong items:

Try adding the tag classes to other pages that have no matching products to display the message.

Best regards,
Mike

February 18, 2022 at 5:07 am #1341261

In reply to: different category positions

Nikko

Inactive Moderator

Hi Veronika,

You’re welcome :)
Please add this CSS code as well, just change the font-size value:

#top.home #av-layout-grid-1 .av_one_half.avia-builder-el-first .slide-entry-title {
    font-size: 40px;
}

#top.home #av-layout-grid-1 .av_one_half.avia-builder-el-first .blog-categories a {
    font-size: 20px;
}

Best regards,
Nikko

February 17, 2022 at 1:29 pm #1341147

In reply to: Font-size and center text in footer

Hi,
The above example was for portrait & landscape mobile, try adjusting the font size smaller or larger to suit your needs.
The socket is set to 85% width, if you like you can also change this for mobile with this:

@media only screen and (max-width: 767px) { 
.responsive #top #socket > .container {
    width: 100%;
    max-width: 100%;
}
}

this will set the width to 100% to give you more room, try a combination of different widths and font sizes to suit your needs.
If you still have trouble post a screenshot of what you see and what you expect and the width (screen resolution) of the device you are using.

Best regards,
Mike

February 17, 2022 at 12:13 pm #1341101

In reply to: Can't reorder images in masonry gallery

Hey tonyiatridis,

Thank you for the inquiry.

This issue will be fixed on WordPress 5.9.1. For the meantime, you have to add this code in the functions.php file to enable the gallery sorting back.

function ava_custom_css_admin_mod() {
    echo '<style>
      .wp-core-ui .attachments:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
      }
    </style>';
}
add_action('admin_head', 'ava_custom_css_admin_mod');

Best regards,
Ismael

February 17, 2022 at 5:18 am #1341041

In reply to: Button and Font Sizes in mobile

Hi,

Thank you for the update.

You can use this css code to adjust the style of the slider button.

#top #wrap_all .avia-slideshow-button {
    border-radius: 3px;
    text-transform: uppercase;
    padding: 15px 16px;
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
}

Wrap it inside a css media query if you want to only apply the changes on certain screen sizes. What do you mean by “fixed” exactly?

Best regards,
Ismael

February 16, 2022 at 10:08 pm #1340982

In reply to: Issue with Re-ordering Media Files on Masonry gallery

Steve

This issue should be resolved in upcoming WordPress 5.9.1

In the meantime you can add this snippet to your functions.php or as a code snippet to restore the feature:

function ava_custom_css_admin_mod() {
    echo '<style>
      .wp-core-ui .attachments:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
      }
    </style>';
 }
 add_action('admin_head', 'ava_custom_css_admin_mod');

February 16, 2022 at 8:42 am #1340867

In reply to: Burger Menu Customized

Hey Teresa,

Thank you for the inquiry.

You can use this css code to remove the burger menu icon and display the menu text.

@media only screen and (max-width: 989px) {

  /* Add your Mobile Styles here */
  span.av-hamburger-inner {
    display: none;
  }

  .av-hamburger strong {
    display: block;
    float: none;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
  }

  .av-hamburger-box {
    width: auto;
    height: 50px;
    display: block;
    line-height: 30px;
    padding: 7px 13px;
    border: 1px solid;
  }
}

Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

Best regards,
Ismael

February 16, 2022 at 6:56 am #1340845

In reply to: masonry gallery manual sorting not working

Hey freehaan,

Thank you for the inquiry.

This is a known issue in the latest version of WordPress. You have to temporarily use this code in the functions.php file to fix the gallery sorting until version 5.9.1 is released.

function ava_custom_css_admin_mod() {
    echo '<style>
      .wp-core-ui .attachments:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
      }
    </style>';
  }
  add_action('admin_head', 'ava_custom_css_admin_mod');

Best regards,
Ismael

February 15, 2022 at 8:09 pm #1340782

Topic: Button and Font Sizes in mobile

in forum Enfold

sitesme

Participant

Hello,

Can you please check the homepage slideshow? The button is hidden on mobile devices. Is there a way to increase the height on mobiles only to solve this problem?

There is also a problem with the image caption being outside the image area, also on mobile devices only.

Thank you

February 15, 2022 at 6:53 pm #1340764

In reply to: Masonry-Galerry Sorting Option not working

Yigit

Hey Andreas,

Thanks for contacting us!

The issue is related to WordPress 5.9 and it will be fixed in upcoming version. You can read more here: https://core.trac.wordpress.org/ticket/54902

As a temporary solution, I added following code to bottom of Functions.php file of your child theme

function ava_custom_css_admin_mod() {
    echo '<style>
      .wp-core-ui .attachments:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
      }
    </style>';
  }
  add_action('admin_head', 'ava_custom_css_admin_mod');

Please review your website :)

Best regards,
Yigit

February 15, 2022 at 12:25 pm #1340676

In reply to: cannot move photos in masonary gallery

Hey rixi,

That is a WordPress problem and will be fixed in the next update. Please try this in your functions.php file until then:

function ava_custom_css_admin_mod() {
    echo '<style>
      .wp-core-ui .attachments:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
      }
    </style>';
  }
  add_action('admin_head', 'ava_custom_css_admin_mod');

Best regards,
Rikard

February 15, 2022 at 6:48 am #1340647

In reply to: Can't Rearrange Gallery Items

Hey cindybird52,

Please try adding this to your functions.php file:

function ava_custom_css_admin_mod() {
    echo '<style>
      .wp-core-ui .attachments:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
      }
    </style>';
  }
  add_action('admin_head', 'ava_custom_css_admin_mod');

Best regards,
Rikard

February 15, 2022 at 6:02 am #1340636

In reply to: Make my menu adjust to screen sizes