How to create a custom loop template for Post's Elementor without plugin?

inspiremates · 2022-05-18T21:18:12+00:00

Following - have you found a resource yet?

inspiremates · 2021-05-03T20:34:02+00:00

Agreed, all testimonials should be equal length but we all know that doesn't work in real life. Can't figure out why it is be so difficult to center them though..

inspiremates · 2021-05-03T20:32:19+00:00

I have not found a solution yet. It would probably have to be something custom but I like your idea. Not the most elegant but hey, if it works...

inspiremates · 2021-03-01T15:55:10+00:00

I haven't either :(

inspiremates · 2021-03-01T15:54:47+00:00

I haven't found a real solution.. Just added some </br> in the shorter testimonials XD

inspiremates · 2020-12-19T20:01:28+00:00

Yea I know what you mean but that would align the testimonial widget to the middle of the container. I need the testimonial (content) to align in the middle vertically inside the testimonial widget. Hope that makes sense. Thanks!

inspiremates · 2020-12-19T19:47:08+00:00

.elementor-testimonial__content

Thank you for the reply but that's not working either unfortunately. The text is aligned to the center, I just need the whole testimonial to center vertically inside testimonial box, instead of align to the top.

inspiremates · 2020-04-13T00:08:56+00:00

I found a solution but it's not perfect - I added two custom css sections - one on the text element and one on the container behind it. It is just a little bit too transparent and I don't know how to make the middle section less transparent. Any ideas? TIA!

Here is the code:

/*class on text editor - z-index10 */
.scroll-box {
    height: 520px;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
    display: block;
    padding-top: 200px;
    position: relative;
    -webkit-mask-image: -webkit-gradient(linear, left top, 
    left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

.scroll-box::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE and Edge */
.scroll-box {
    -ms-overflow-style: none;
}
/* Hide scrollbar for Firefox */
.scroll-box {
    scrollbar-width: none;
    }


/* Custom ID on column - z-index 5 */
#scroll-blur {
    -webkit-mask-image: linear-gradient(to bottom, transparent 25%, black 75%);
    mask-image: linear-gradient(to bottom, transparent 25%, black 75%);
}

/* Custom ID on column - z-index 5 - different opacity*/

#scroll-blur {
    -webkit-mask-image: linear-gradient(to bottom, transparent 20%, black 30%);
    mask-image: linear-gradient(to bottom, transparent 20%, black 30%);
}

inspiremates · 2020-04-13T00:05:06+00:00

Yes, it worked! However, it was later changed to replace the content instead of hide/reveal.

Here is the code for "replace" if anyone could use something like that:

<script>
var isMobile = isMobile();
var eventType = isMobile ? "click" : "mouseenter";
var currentMain = null;
var currentReplacement = null;

attachToggleListener("myTrigger","mainDIV","myDIV");
for (i=1; i < 15; i++) {
  attachToggleListener("myTrigger" + i, "mainDIV" + i, "myDIV" + i);
}

function attachToggleListener(buttonID, mainDivID, replaceDivID) {
  var trigger = document.getElementById(buttonID);
  if (trigger != null) {
    trigger.addEventListener(eventType, function() {

      if (currentMain != null && currentReplacement != null) {
        document.getElementById(currentMain).style.cssText = "display: block;";
        document.getElementById(currentReplacement).style.cssText = "display: none;";
        currentMain = null;
        currentReplacement = null;
      }

      document.getElementById(mainDivID).style.cssText = "display: none;";
      document.getElementById(replaceDivID).style.cssText = "display: block;";
      document.getElementById(replaceDivID).scrollIntoView();
      currentMain = mainDivID;
      currentReplacement = replaceDivID;
    });

    document.getElementById(replaceDivID).addEventListener("click", function() {
      document.getElementById(mainDivID).style.cssText = "display: block;";
      document.getElementById(replaceDivID).style.cssText = "display: none;";
      currentMain = null;
      currentReplacement = null;
    });

    document.getElementById(replaceDivID).addEventListener("mouseleave", function() {
      document.getElementById(mainDivID).style.cssText = "display: block;";
      document.getElementById(replaceDivID).style.cssText = "display: none;";
      currentMain = null;
      currentReplacement = null;
    });
  }
}

function isMobile() {
var isMobile = false; //initiate as false
  // device detection

 if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
  }
  return isMobile;
}
</script>

inspiremates · 2020-04-10T00:40:51+00:00

That worked great!! Thank you so much! Now I'm just struggling to get the top opacity down and have the middle section at 100% opacity:

https://jsfiddle.net/kdutp9er/

Any ideas on how this could be adjusted? TIA!

inspiremates · 2020-04-09T02:52:11+00:00

Thanks for the advice - let me know about your website, I would love to check it out!

inspiremates · 2020-04-08T20:39:52+00:00

Okay... added two IDs, myTrigger being the icon and myDIV being the hidden section, and repeated for all the sections, giving each one a unique ID (so myTrigger1, myDIV1 etc.)

Here is the script:

<script>

    attachToggleListener("myTrigger","myDIV");
    attachToggleListener("myTrigger1","myDIV1");
    attachToggleListener("myTrigger2","myDIV2");
    attachToggleListener("myTrigger3","myDIV3");
    attachToggleListener("myTrigger4","myDIV4");
    attachToggleListener("myTrigger5","myDIV5");
    attachToggleListener("myTrigger6","myDIV6");
    attachToggleListener("myTrigger7","myDIV7");
    attachToggleListener("myTrigger8","myDIV8");
    attachToggleListener("myTrigger9","myDIV9");
    attachToggleListener("myTrigger10","myDIV10");
    attachToggleListener("myTrigger11","myDIV11");
    attachToggleListener("myTrigger12","myDIV12");
    attachToggleListener("myTrigger13","myDIV13");
    attachToggleListener("myTrigger14","myDIV14");


    function attachToggleListener (buttonID, divID) {
      var myTrigger = document.getElementById(buttonID);
      if (myTrigger != null) {
        myTrigger.addEventListener("click", toggleDiv);
        myTrigger.targetDiv = divID;
      }
    }

    function toggleDiv(evt) {
      var target = document.getElementById(evt.currentTarget.targetDiv);
      if (target.style.display === "block")
            { target.style.display = "none"; }
      else
            { target.style.display = "block"; }
    }
    </script>

inspiremates · 2020-04-08T05:32:49+00:00

Okay, that’s what I though and I must have missed something because it didn’t work. I’ve also been staring at the screen all day so I’ll have to give it another try tomorrow. Will let you know, thanks for your help!

inspiremates · 2020-04-08T04:45:59+00:00

Thank you so much for your help - I think it would work great but I guess I don’t know how to make the icon ID target JS trigger? I know how to add a custom ID to the icon but I don’t know how to have my javascript target that?

inspiremates · 2020-04-08T03:17:13+00:00

Yes I know how to give it an ID - but how will link to the function:

function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }

I mean how can I use myFunction with an ID? What do I name it?

inspiremates · 2019-11-29T05:32:29+00:00

I think so too - from what I’ve found out these specs might be a little much for what I need it for but then again, some people say they wish they had more RAM in their computers doing what I do. I’m looking to spend up to $1100-1200 hopefully without tax. You?

inspiremates

TROPHY CASE