Lay Theme Forum

i would like to use custom post types in laytheme. developing child themes and taking advantage of custom code, this in my eyes would be the last missing step to make laytheme even more powerful and build custom, personalized themes :)

@XLD hey, great idea. all the information for the thumbnail grid is stored in the data-config attribute. changig its values leads to a different appearance on your website.

in this example i changed the desktop columns to be 8 and then attach this value back into the data-config attribute. in your case this would be 4 columns for layout two.

 // Get the thumbnail grid
  const thumbnail = document.querySelector('.thumbs-collection-region');

  // Get the current value of the data-config attribute
  const dataConfig = JSON.parse(thumbnail.getAttribute('data-config'));

  // Update the colCount property of the desktop object
  dataConfig.desktop.colCount = 8;

  // Convert the updated object back to a JSON string
  const newDataConfig = JSON.stringify(dataConfig);

  // Set the updated value of the data-config attribute
  thumbnail.setAttribute('data-config', newDataConfig);

there is one thing however, i could not figure out either. if i wrap this code in a click event ( e. g. if i click on a button ), the code gets updated correctly but on the page itself nothing changes. i guess i am missing something here for updating the css?

maybe someone will read this old post and come up with an idea.

hello

i am currently working on a child theme for lay theme.
when i upload my child theme in wordpress > themes > upload.
everything works fine and all custom styles are applied.

except that all settings from the customizer seem to be overwritten. i guess my child theme is somehow overwriting the parents theme settings for customizer.

however in my code i am not overwriting the customizer at any time.
in my child theme there is only the bare essentials: style.css and function.php, which enqueues the style.

i already took a look here: http://laythemeforum.com:4567/topic/441/main-menu-dropdown/4
and i used the lay-child.zip file you provided.

@arminunruh is there any chance this will be implemented in the future? personally i think it would be really useful in many cases :)

hi
i want to ad mix-blend-mode: difference to the custom arrow cursors (svg) for laytheme carousel and fullscreen slider. how can i do this?

hello

is there any way to change or get rid of the default behavior of categories in url?
by default categories are being displayed with a "#" at the beginning:
... /home/#category-foto

this however prevents doing simple changes to specific category site with just css using .slug .

maybe there is a workaround?

@arminunruh

thank you for your quick response! these are all great tips which i have not thought about yet. i will go for the "get by id" function.

great support as always.

merci :)

hello,

i have question on how to solve a specific problem with code.

i custom coded a modal for my project-pages using custom html, some javascript and custom css (see code below).

on my website i have a button called information. clicking on it activates a modal showing some text (project description). i used custom html, instead of pasting my button in the gridder for every single page so it will be displayed on top of my fixed menu bar(!).

Because i used html at top, it will by default be displayed on every page.
This also means my modal text (project description) will always be the one
i wrote in my html and will not change.

What i am trying to achieve:
While the information button itself should always stay the same, the text inside the modal should change depending on the project currently shown.

What i tried:
For now i am dealing with empty html tags and adding content via css using the pseudo class ::after.

i also tried wordpress plugins for creating modals. after creating a modal one can use shortcode to implement it on a page. great! unfortunately this will not work, because it will be covered by my fixed menu bar on top.

i am not asking for the code itself here. i am more interested in finding a user-friendly solution for implementing multiple modals. since i am not a web developer myself i am wondering how you would do this in a professional way.

best regards!

here is the code i used:

this html goes at top:

<button class="modal-button" data-modal-target="#modal"> information </button>
<div class="modal" id="modal">
<div class="modal-header">
 <div class="modal-title"></div>
 <button data-close-button class="close-button">×</button>
 </div>
 <div class="modal-body">

this javascript goes at bottom:

<script>

const openModalButtons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')

openModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = document.querySelector(button.dataset.modalTarget)
    openModal(modal)
  })
})

overlay.addEventListener('click', () => {
  const modals = document.querySelectorAll('.modal.active')
  modals.forEach(modal => {
    closeModal(modal)
  })
})

closeModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = button.closest('.modal')
    closeModal(modal)
  })
})

function openModal(modal) {
  if (modal == null) return
  modal.classList.add('active')
  overlay.classList.add('active')
}

function closeModal(modal) {
  if (modal == null) return
  modal.classList.remove('active')
  overlay.classList.remove('active')
}

</script>

custom css:

.slug-objects .modal-title::after {
	content:"objects";
}
.slug-objects .modal-body::after {
	content:"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet..";
}

okay i figured out what i needed was the "fullscreen slider" plugin by laytheme.
turns out i did not activate it after installation... now it works fine!

however i am still wondering how can i achieve the same "Give elements a max-width and max-height and center them" effect for single images, without a slider ?

hello

for my website i would like to have a responsive carousel with a fixed height (might as well be browser height), which does not change its height even if on smaller screensizes.

exactly like done here: http://www.virgilijubero.com/lemaire/

things i tried, that did not work:

• "custom row height"

• "browser height for row height"

• applying a html class to my carousel and adjusting the height in css

sometimes it looks good on desktop size screen but when resizing the browserwindow the size of my image will change as well e. g. it will stick to the top and there is lots of white space under it.

any help is appreciated :)

Re: Accordion Bug

hello, i managed to put an acordeon on my website using custom code.
it is working, as long as i am on that site, where the acordeon is placed. when i navigate to a different (project-)site and come back the acordeon is always fully unfolded. there is still no way to close it in that situation, which normally works fine. the only thing that helps is refreshing the site.

how can i fix it? is there something wrong with my code?
-> www.sanderrobert.de/approaching-visual/

<script>

 var toggleStates = [];
    var buttons = document.getElementsByClassName("panelbutton");
    var panels = document.getElementsByClassName("panel");
    
    function ApplyButtonState(index)
    {
        var panel = panels[index];
        
        if (toggleStates[index])
        {
            panel.style.maxHeight = '800px';
            panel.style.margin = null;
        }
        else
        {
            panel.style.maxHeight = 0;
            panel.style.margin = 0;
        }
    }

        
    if (buttons.length != panels.length)
    {
        console.error('panelbutton and panel count mismatch!');
    }
    else
    {
        for (var i = 0; i < buttons.length; i++) {
     
            var button = buttons[i];
            toggleStates.push(false);
            
            ApplyButtonState(i);
                
            button.toggleStateIndex = i;
            button.addEventListener("click", function(evt) {
                    
            
                for (var j = 0; j < toggleStates.length; j++)
                {
                    var toggleStateIndex = evt.currentTarget.toggleStateIndex;
                    
                    var foldedOut = toggleStateIndex === j;
                    if (foldedOut && toggleStates[j])
                        foldedOut = false;
               
                    toggleStates[j] = foldedOut;
                    ApplyButtonState(j);
                }
         
            });
        }
    }
  

</script>

This would be interesting to know. Did you find a solution for this to work in laytheme?

Hello there,

I'm looking for help with the new tag filter feature.
I want to filter a collection of images.
I have several main categories such as all, country, color and material.
When all is selected, all images should appear but all tag filters should be hidden here. When I click on country it should as well show all objects but only those filters of different countries. Same goes for colors and so on...

My main problem here is showing all images consequently as a default, while only filter sets are changing. Also images should not rearrange until a tag filter is applied.

Any help is welcome.

@TYLM said in Théo Marielle – Graphic Design Portfolio:

https://theomarielle.com/

Hey Théo. Great website! Looks stunning.
I am currently working on a website with a similar filter system using the new filter tag option in lay theme. unfortunately it is not working the way i want right now so maybe you could help me out.

1. how did you manage when clicking on a filter the whole filter set stays the same and wont rearrange, while still being combinable?

2. how did you work out having categories, each one with different sub-categories (=tag filter)?

thanks in advance.

best

finished my portfolio website.
first time fully responsive.
i used laytheme add ons and custom coding.

laytheme is a great platform. will definetly recommend.

see my website here: www.sanderrobert.de

Hello again,

good news – i fixed it on my own.
the use of "!important" was missing the whole time.
I ll post the code i used down below in case anyone is struggling with a similar problem.

.lightbox-css-on .grid-inner .col img{
    cursor: url(herewouldbemyurl) 40 40, auto !important;
} 

Dear @Richard

on my website i have a pink circle as custom cursor which changes to another pink form when hovering over clickable items (a, img a). this works totally fine.
however when i hover over images which will open in lightbox, my cursor will not be displayed. the default pointer hand will be displayed instead.

i checked my site code and was able to detect the css which makes it happen (see images). however i am not able to fix it.

here are some lines of code i already tried:

#lightbox-region{
    cursor: url(herewouldbemyurl)
}

body.lightbox-css-on img{
  cursor: url(herewouldbemyurl)
}

i also tried

.pointer{
display:none
}

hey!

i would love to change the default pointer for laytheme's lightbox plugin to my custom cursor.

first i tried to style the pointer via css as a "normal" cursor and secondly tried to overwrite the code which activates the pointer on lightbox images by using a url to my custom cursor instead. neither of them worked.

i guess it will be quite simple but for some reason i do not know how to get it to work.

anybody knows a working solution?

Hey @Richard thank you for your quick response.
i did as you told me and sent armin an email with all links provided.

thanks for your help.

update: i found my website working well without any loading issues on mobile devices. it only affects the desktop version.