Lay Theme Forum

the code for the editor is just so old, it doesnt recognize that css as valid css

no extra css is needed
the color will always depend on whats beneath the text

ok if you update lay theme now, go to customize → intro.
here u will find:

in here, you can add the html code of your video
you'd need to write custom css for that video to be sized properly and for it to have the correct placement inside the intro

if you want i can help you with this but first u'd need to add your html there and then post the link to the website

about having a video background for the website:
you'd need to add your video html markup in:
lay options → custom css & html → custom html at bottom

then you'd need to write css to position that video correctly
i can also help u with that, but first you'd need to add the html there and then post a link to your website here

im working on a feature where you can add html into an intro pls wait a little

is there a plugin that works with lay theme (like https://wpbackgrounds.com/ but I didnt find a way to make it work)

you mean you want a video as a background for the whole website?

i see!

looking at it, it seems like the current projectindex element is hidden when you arrive on the page.

can you go to lay options → scroll all the way down.
you will find:
"Hide current Project from Thumbnailgrid & Project Index Elements"

make sure to uncheck this:

does it work now?

ah clever! did that work?

for site title:

.sitetitle{
mix-blend-mode: difference;
}

and you need to set the site title to white font too!

I think if you had a black background website maybe you need to set the texts to black not sure about that!

for menus:

.laynav desktop-nav{
mix-blend-mode: difference;
}

Enter this css in "lay options" -> "custom css & html" -> "custom css for desktop"

but you have to use a white color font for your menu items.
in customize → menu style → primary menu → text color

and possibly in
in customize → menu style → menu point active → text color
in customize → menu style → menu point mouseover → text color

you can also try to use the plugin:
really simple ssl

after you installed and activated the plugin, in the plugin settings, there is some button to enable it

hey so if your images are "place freely"
then if you add a row on top, it wont actually change the position of the place freely items. it will only add a row.

can you check if this is the case for u please

size down the images/text to fit into tablets?

choose fixed height in carousel options and give carousel a height of 100svh?
or 100dvh

not sure if you mean this

I'm struggling with getting the images to fit within the tablet browser window not letting the text overlap.

i dont know what text u mean do u have a link

My client is keen for this mouse scroll layout to work on tablets

how does it work on tablets?
can he scroll left and right on a tablet with "mouse scroll" enabled?

do you still have the problem?
https://aleksandartodorovic.com/

for me it loads in one second:

you can see it here:
https://capture.dropbox.com/Xvo5s1eEZel6Ppb3

i disabled my browsers cache so it doesnt even load the website from my cache

try this

this makes all menubars of project pages black:

body[data-type="project"] .navbar {
background-color: black!important;
}

similarly you can do:

body[data-type="page"] .navbar {
background-color: green!important;
}

which makes all "pages" menubars green

hey i think i fixed this issue already, can you make sure you're using the latest version of lay theme?

if it doesnt work can you post a link to where the issue is so i can take a look please

hey please dont insert jquery, its already inserted!,
so remove this:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

please read this on how to do something when a new page is loaded:
https://laytheme.com/documentation/custom-javascript.html#newpage-events

we have a custom javascript event window.laytheme.on("newpageshown", function(){

the onload event will only trigger one time, instead of every time you go to another page IF your website doesnt do a hard reload on navigation but instead uses the default ajax way of navigating

your website uses the normal ajax navigation

this is how i would do it. on newpageshown, it checks if the page is a project or not. if it is, it hides the star.
if its not a project it shows the star and moves it.

<script>
  window.laytheme.on("newpageshown", function(){
    if(jQuery('body').attr('data-type') == 'project'){
      jQuery('#logo').hide();
    } else {
      jQuery('#logo').show();
      move();
    }
  })

  function move() {
    let img = document.getElementById('logo');
    let imgWidth = img.width; // Récupère la largeur actuelle de l'image
    let imgHeight = img.height; // Récupère la hauteur actuelle de l'image

    // Calcule les positions aléatoires en tenant compte des dimensions de l'image
    let maxX = window.innerWidth - imgWidth; // Position horizontale maximale
    let maxY = window.innerHeight - imgHeight; // Position verticale maximale

    // Déplace l'image dans un emplacement aléatoire mais dans les limites de la fenêtre
    img.style.left = Math.floor(Math.random() * maxX) + "px";
    img.style.top = Math.floor(Math.random() * maxY) + "px";
  }
</script>

you may also want to use this css

#logo{
pointer-events:none;
}

this way you can click things that are behind the star

https://stackoverflow.com/questions/15829172/stop-chrome-back-forward-two-finger-swipe

it seems like you could maybe use this css:

html, body {
overscroll-behavior-x: none;
}

in that link, there are some other answers you can try,
like this js solution

<script>
document.addEventListener(
  'touchstart',
  this.handleTouchStart,
  {passive: false}
)
document.addEventListener(
  'touchmove',
  this.handleTouchMove,
  {passive: false}
)
</script>

hey @alasdair17
the "mouse scroll" of the carousel works like this:

your mouse is on the carousel
you scroll down
the carousel moves horizontally until it is at the end

then your page moves down, the normal scroll continues

as far as i know, there is no left and right scrolling inside of a carousel.
however, there can be click and drag left and right on a carousel with free drag enabled:

When i change the column count to 20, and click save, the column count stays 20 here:

(I didnt check "Apply values")

When i then create a new project, the column count that is in use is then 20

Can you confirm this?
If so, it works as expected.

If you change a value in "lay options -> gridder defaults", does it not stay when you after you click save and it goes back to the previous value?

cause its position: fixed; its css
MAYBE

maybe cause its fixed not sure