• debutdebut

    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 read more
  • debutdebut

    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 read more
  • debutdebut

    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 read more
  • debutdebut

    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 read more
  • debutdebut

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

    posted in Bug Reports read more
  • debutdebut

    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 read more
  • debutdebut

    Hi guys, hi armin!

    I finaly managed it to complete my portfolio/work archive. I'm a self-employed graphic designer based in Basel and St.Gallen, Switzerland. Most of my clients come from a cultural field, but I do commercial jobs as well. Check the site out if you like:

    www.maxfrischknecht.ch

    I'm super happy with Laytheme and the plug-in's/addon's. It's not my first WP Site I've built and not my first theme to work with. From a graphic designers point of view Laytheme ist extremely cool. I'm using it as well on two sites I'm currently working on for clients.

    The only thing I would wish for is a way to limit the height of objects (e.g. text, images, carousels etc..) in a responsive way. This way I could style a magnetic row with text in it that uses 1/4 of the height, while the slider the other 3/4 of it (for example). But I'm a totall grid, baseline and typography nerd, so maybee noone else would have fun with that :)

    Anyway, great theme! And great support! Thx @Armin-Unruh

    Cheers'
    Max

    posted in Showcase read more
  • debutdebut

    Hi @arminunruh

    Thank you for the explanation! This makes totally sense.
    And thank you for the hint about the cover effect, I didn't knew about, it looks very interessting. Thank you!

    Best,
    Max

    posted in General Discussion read more
  • debutdebut

    Hi @Armin-Unruh

    This is the site without parallax:
    http://maxfrischknecht.ch/wordpress/home-2-2-2

    When I give all the "thumbnail-rows" a greater speed (1.5), the Row Gutter becomes bigger and different from row to row.

    Like this: http://maxfrischknecht.ch/wordpress/home-2-2

    How can I fix that? Do I have to ajust the speed from row to row individually?
    Thank you for your help!

    Kind Regards
    Max

    posted in General Discussion read more

Looks like your connection to Lay Theme Forum was lost, please wait while we try to reconnect.