Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search
    1. Home
    2. debutdebut
    • Profile
    • Following 0
    • Followers 0
    • Topics 6
    • Posts 13
    • Best 3
    • Controversial 0
    • Groups 0

    debutdebut

    @debutdebut

    6
    Reputation
    374
    Profile views
    13
    Posts
    0
    Followers
    0
    Following
    Joined Last Online
    Website debutdebut.com/ Location Basel, Switzerland

    debutdebut Unfollow Follow

    Best posts made by debutdebut

    • P5js in Laytheme

      Hi everyone!

      I've seen a few people asking about P5js sketches in Laytheme. We recently did a project like that and wanted to share our findings on this with you.

      Here is the project: https://ja-kob.ch/

      I had two goals:

      1. Show the sketch only on one specific site
      2. Make the sketch responive (full width / auto height)

      Here is my current solution:

      I stored the library files in a folder assets in wp-content (probably theres a better place for this?) and implemented them in Lay Options -> Custom CSS & HTML -> Custom <head> content like this:

      <script src="https://yoururl/wordpress/wp-content/assets/libraries/p5.js"></script>
      <script src="https://yoururl/wordpress/wp-content/assets/libraries/p5.dom.js"></script>
      <script src="https://yoururl/wordpress/wp-content/assets/libraries/p5.sound.js"></script>
      

      I created an empty div with an ID of sketch-holder in Lay Options -> Custom CSS & HTML -> Custom HTML at top. I later place the sketch canvas inside it to have better control.

      <div id="sketch-holder"></div>
      

      To place the sketch canvas into this div I gave the canvas a parent element in sketch.js like so:

      function setup() {
      	var cnv = createCanvas(1998, 1080); 
      	cnv.parent('sketch-holder'); // this is the id of the div
      	cnv.position(0, 0); // this gives the sketch an absolute position in the top left corner
      }
      

      To make the sketch responsive I added the following code to Lay Options -> Custom CSS & HTML -> Custom CSS for Desktop Version

      #sketch-holder {
        margin: 0;
        padding: 0;
        width: 100%;
      }
      
      #sketch-holder canvas {
        width: 100% !important;
        height: auto !important;
        margin: 0;
        padding: 0;
      }
      

      Ok, now comes the fun part. Somehow the sketch.js broke all the functions of the mobile navigation. I haven't found a solution for this and decided to only use the sketch on desktop sizes and instead using a static image for the mobile version. I used the following code to load the sketch.js file only when the window width was greater than the breakpoint for mobile:

      if (jQuery(window).width() > 600) {
        jQuery.getScript( "https://yoururl/wordpress/wp-content/assets/sketch.js", function( data, textStatus, jqxhr ) {
          console.log( data ); // Data returned
          console.log( textStatus ); // Success
          console.log( jqxhr.status ); // 200
          console.log( "Load was performed." );
        }); 
      }
      

      Last but not least I only wanted to show the sketch on a single page. I used a piece of code from the Laytheme docs to determine the page (since Laytheme isn't really realoading from page to page as far as I understood):

      window.laytheme.on("newpageshown", function(layoutObj, type, obj){
        if(obj.slug == "ja-kob"){
          jQuery('#sketch-holder').show();
          } else {
           jQuery('#sketch-holder').hide();
        }
      });
      

      It's very important to hide the #sketch-holder (meaning your sketch) if you don't want to show it. Because the sketch.js file creates a default canvas element on every page no matter what. Even if you placed the actual sketch inside a parent element. This default element remains empty but still takes up space at the bottom of every page, underneath the footer. This is because it's using visibility: hidden (instead of display: none.) I didn't managed to trigger a css class with JQuery so I ended up using it's built in function hide/show.

      Probably there is a way better way to achive this. But I wanted to share it anyway for the public discussion. If you see some bugs of the site, let me know. Also if you have found other ways to use P5js inside Laytheme. :-)

      Cheers'
      Max

      posted in General Discussion
      debutdebut
      debutdebut
    • RE: Custom Lines/page dividers

      You can easily give a row a line above or below. For that you must give the row a html class. Right click on the pink frame of a row and chose Edit HTML Class and ID, then give it a name (e.g. row-line).

      Under Lay Options -> Custom HMTL & CSS add the following code:

      .row-line{ border-bottom: 1px solid black; padding-bottom: 2%; }

      This would generate a full width line underneath the row.

      posted in General Discussion
      debutdebut
      debutdebut
    • RE: P5js in Laytheme

      hey @kanouu1

      Glad to hear that it worked out for you. In order to only use the sketch on a particular "site" you have to show & hide it. This is because Laytheme is built as a "Single Page" Javascript applications (see here).

      Therefore I used the following code to determine my "current page":

      window.laytheme.on("newpageshown", function(layoutObj, type, obj){
        if(obj.slug == "ja-kob"){
          jQuery('#sketch-holder').show();
          } else {
           jQuery('#sketch-holder').hide();
        }
      });
      

      What you have to replace is obj.slug == "ja-kob" to meet your specific website. Meaning ja-kob becomes your specific slug. The slug is the last part of the url, like so: www.mywebsite.com/myslug.

      I hope this helps!

      Cheers

      posted in General Discussion
      debutdebut
      debutdebut

    Latest posts made by debutdebut

    • RE: P5js in Laytheme

      dear @lena-weber, from your description I suppose that the path to your font is wrong. I good place to start is by opening the developer console of your browser. Usually, p5js tells you there if something is wrong with your path.

      Hope this helps! ✌️

      posted in General Discussion
      debutdebut
      debutdebut
    • RE: P5js in Laytheme

      hey @kanouu1

      Glad to hear that it worked out for you. In order to only use the sketch on a particular "site" you have to show & hide it. This is because Laytheme is built as a "Single Page" Javascript applications (see here).

      Therefore I used the following code to determine my "current page":

      window.laytheme.on("newpageshown", function(layoutObj, type, obj){
        if(obj.slug == "ja-kob"){
          jQuery('#sketch-holder').show();
          } else {
           jQuery('#sketch-holder').hide();
        }
      });
      

      What you have to replace is obj.slug == "ja-kob" to meet your specific website. Meaning ja-kob becomes your specific slug. The slug is the last part of the url, like so: www.mywebsite.com/myslug.

      I hope this helps!

      Cheers

      posted in General Discussion
      debutdebut
      debutdebut
    • RE: Change z-index of stacked elements on hover

      @mariusjopen thx! Will try this approach

      posted in General Discussion
      debutdebut
      debutdebut
    • Change z-index of stacked elements on hover

      Hi!

      I'm looking to change the z-index of stacked elements (mostly carousels) on hover so that every element can be visible.

      I have here an example here:.
      https://debutdebut.com/simonhaemmerli/home-2

      I achived to make it work with the first element with additional css like

      .stack-wrap:nth-child(1):hover > .stack-element { z-index: -1; }

      but it's not working with:
      .stack-wrap:nth-child(2):hover > .stack-element { z-index: -1; }

      maybe there is also a js approach to this?
      Thx for any feedback.

      Cheers
      Max

      posted in General Discussion
      debutdebut
      debutdebut
    • RE: Custom Lines/page dividers

      You can easily give a row a line above or below. For that you must give the row a html class. Right click on the pink frame of a row and chose Edit HTML Class and ID, then give it a name (e.g. row-line).

      Under Lay Options -> Custom HMTL & CSS add the following code:

      .row-line{ border-bottom: 1px solid black; padding-bottom: 2%; }

      This would generate a full width line underneath the row.

      posted in General Discussion
      debutdebut
      debutdebut
    • Mobile Menu offset in newest Firefox

      Hi!

      I just seen a bug in the newest firefox (firefox quantum, 57.0.4., 64-Bit, on macOs Sierra 10.12.6) (It worked fine in Safari & Chrome)

      On the right side a gap appears as soon as the dropdown menu slides down. Maybe something scroll-bar related? The space looks quite the same like the scrollbar.

      Here a screenshot:

      0_1516628277034_Bildschirmfoto 2018-01-22 um 14.27.07.png

      Cheers
      Max

      posted in Bug Reports
      debutdebut
      debutdebut
    • Cultural website / Laytheme x P5js

      Hi everyone!

      We just launched a new project using lay:
      https://ja-kob.ch/

      We worked with P5js for the interactive visual of the front page. For those who are interested in this, here is how we did it:

      http://laythemeforum.com:4567/topic/1919/p5js-in-laytheme

      Feedback welcome! (Bug reports also ;) )

      Cheers
      Max

      posted in Showcase
      debutdebut
      debutdebut
    • P5js in Laytheme

      Hi everyone!

      I've seen a few people asking about P5js sketches in Laytheme. We recently did a project like that and wanted to share our findings on this with you.

      Here is the project: https://ja-kob.ch/

      I had two goals:

      1. Show the sketch only on one specific site
      2. Make the sketch responive (full width / auto height)

      Here is my current solution:

      I stored the library files in a folder assets in wp-content (probably theres a better place for this?) and implemented them in Lay Options -> Custom CSS & HTML -> Custom <head> content like this:

      <script src="https://yoururl/wordpress/wp-content/assets/libraries/p5.js"></script>
      <script src="https://yoururl/wordpress/wp-content/assets/libraries/p5.dom.js"></script>
      <script src="https://yoururl/wordpress/wp-content/assets/libraries/p5.sound.js"></script>
      

      I created an empty div with an ID of sketch-holder in Lay Options -> Custom CSS & HTML -> Custom HTML at top. I later place the sketch canvas inside it to have better control.

      <div id="sketch-holder"></div>
      

      To place the sketch canvas into this div I gave the canvas a parent element in sketch.js like so:

      function setup() {
      	var cnv = createCanvas(1998, 1080); 
      	cnv.parent('sketch-holder'); // this is the id of the div
      	cnv.position(0, 0); // this gives the sketch an absolute position in the top left corner
      }
      

      To make the sketch responsive I added the following code to Lay Options -> Custom CSS & HTML -> Custom CSS for Desktop Version

      #sketch-holder {
        margin: 0;
        padding: 0;
        width: 100%;
      }
      
      #sketch-holder canvas {
        width: 100% !important;
        height: auto !important;
        margin: 0;
        padding: 0;
      }
      

      Ok, now comes the fun part. Somehow the sketch.js broke all the functions of the mobile navigation. I haven't found a solution for this and decided to only use the sketch on desktop sizes and instead using a static image for the mobile version. I used the following code to load the sketch.js file only when the window width was greater than the breakpoint for mobile:

      if (jQuery(window).width() > 600) {
        jQuery.getScript( "https://yoururl/wordpress/wp-content/assets/sketch.js", function( data, textStatus, jqxhr ) {
          console.log( data ); // Data returned
          console.log( textStatus ); // Success
          console.log( jqxhr.status ); // 200
          console.log( "Load was performed." );
        }); 
      }
      

      Last but not least I only wanted to show the sketch on a single page. I used a piece of code from the Laytheme docs to determine the page (since Laytheme isn't really realoading from page to page as far as I understood):

      window.laytheme.on("newpageshown", function(layoutObj, type, obj){
        if(obj.slug == "ja-kob"){
          jQuery('#sketch-holder').show();
          } else {
           jQuery('#sketch-holder').hide();
        }
      });
      

      It's very important to hide the #sketch-holder (meaning your sketch) if you don't want to show it. Because the sketch.js file creates a default canvas element on every page no matter what. Even if you placed the actual sketch inside a parent element. This default element remains empty but still takes up space at the bottom of every page, underneath the footer. This is because it's using visibility: hidden (instead of display: none.) I didn't managed to trigger a css class with JQuery so I ended up using it's built in function hide/show.

      Probably there is a way better way to achive this. But I wanted to share it anyway for the public discussion. If you see some bugs of the site, let me know. Also if you have found other ways to use P5js inside Laytheme. :-)

      Cheers'
      Max

      posted in General Discussion
      debutdebut
      debutdebut
    • RE: Error uploading .woff

      thank you armin, this plug-in works for me! cheers

      posted in Bug Reports
      debutdebut
      debutdebut
    • RE: Error uploading .woff

      I got the same error but found a plug-in to get .woff uploaded. The plug-in's called "Unsafe Mimetypes" (to allow all types of file uploads).

      But it didn't not solve the problem. I could upload woff files but when I tried to define a new text format wp told me that's a "wrong woff file".

      maybe worth trying .woff2 files?

      posted in Bug Reports
      debutdebut
      debutdebut