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! ✌️
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
@mariusjopen thx! Will try this approach
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
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.
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:
Cheers
Max
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
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:
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
thank you armin, this plug-in works for me! cheers
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?
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:
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
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
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
I also code custom websites or custom Lay features.
💿 Email me here: 💿
info@laytheme.com
This often solves issues you might run into
