Skip to content

Lay Theme Forum
  1. Home
  2. General Discussion

General Discussion

A place to talk about anything Lay Theme related
4.4k Topics 18.6k Posts
  • J

    change text content on hover

    4
    0 Votes
    4 Posts
    476 Views
    RichardR

    Dear Jeff @jeff

    Please remove your current CSS with the 'Before {content}' setup - Its not working properly :)

    Its not targeting your link <a href#>
    it's just inserting the text "REALISATRICE" " :before" the 'Class .mb' (this element being a parent of the <a> element) .

    After removing it, please insert the following code into your 'Custom <head> Content' area:

    <script> window.laytheme.on("newpageshown", function(layoutObj, type, obj){ jQuery('[data-id=73]').hover(function(){ jQuery(this).text("REALISATRICE"); }, function() { jQuery(this).text("MYRIAM BOU-SAHA"); }); jQuery('[data-id=75]').hover(function(){ jQuery(this).text("ILLUSTRATEUR"); }, function() { jQuery(this).text("VINCENT DUPERRAY"); }); jQuery('[data-id=76]').hover(function(){ jQuery(this).text("GRAPHISTE"); }, function() { jQuery(this).text("CAROLE GENIN"); }); jQuery('[data-id=77]').hover(function(){ jQuery(this).text("MOTION DESIGN"); }, function() { jQuery(this).text("GUILLAUME COQUARD"); }); jQuery('[data-id=77]').hover(function(){ jQuery(this).text("MOTION DESIGN"); }, function() { jQuery(this).text("CÉLESTIN JEAN-CHARLES"); }); jQuery('[data-id=78]').hover(function(){ jQuery(this).text("DESIGN & ARCHITECTURE"); }, function() { jQuery(this).text("LES MARSIENS"); }); jQuery('[data-id=79]').hover(function(){ jQuery(this).text("DESIGN OBJET & ESPACE"); }, function() { jQuery(this).text("GEOFFREY PAUCHARD"); }); jQuery('[data-id=12]').hover(function(){ jQuery(this).text("REALISATRICE"); }, function() { jQuery(this).text("STEPHANIE WEERTS"); }); }); </script>

    When using Laytheme and JS/jQuery we need to remember two things as stated in the documentation:
    https://laytheme.com/documentation.html#custom-javascript

    You need to wrap your code in a 'newpage event' and also the common abbreviated '$' for jQuery should be changed/written as the full 'jQuery'.

    In the code above we want to target the link itself and change it, not another element - Every link <a> has its own 'data-id' so we can use that to target. E.g

    [data-id=75]

    If you need help with how to inspect your pages HTML structure and find Elements and Attributes etc,
    On the documentation page is help with using the browsers "development tools'
    https://laytheme.com/documentation.html#custom-css-styling

    .
    .
    Screen Shot 2021-03-11 at 4.16.10 PM.png

    .
    .
    .

    I hope this helps Jeff & best of luck - Google is your friend and also the Documentation page :)

    Best wishes
    Richard

  • leoooL

    make project thumbs have a fixed height / while filling it in with the correct aspect ratio

    9
    0 Votes
    9 Posts
    609 Views
    RichardR

    Dear @fr

    With Project Thumbnails within the Element Grid this is possible - With standard images not.
    The image dimensions are set normally and not with this 'PH' padding.

    So Image <img> being 100% width and its parent container controlling its dimensions:

    E.g

    .parent-container{ width:48%; } img{ width:100%; height:auto; }

    Hope this answers your question :)

    Best wishes
    Richard

  • M

    Understanding question about menu structure.

    2
    0 Votes
    2 Posts
    44 Views
    RichardR

    Dear @MickeyOne

    Recently a 'Thumbnail Grid Filter' was built in by Armin, so the function of clicking categories and seeing the related projects is there:

    http://laythemeforum.com:4567/topic/6408/category-filters-with-lay-theme-version-3-6-1?_=1615336804678

    The difference in your case is how to use an Image instead of Text. Some trickery would be needed either with JQuery to go in and replace the Text with an Image.

    A crude hack would be to place an Image over the Text so the user would not see it -The issue would be if you are able to click the Text underneath then

    It would be a little difficult, the option is not built in at the moment sorry Mickey.

    Best
    Richard

  • J

    Drawing Canvas

    4
    0 Votes
    4 Posts
    68 Views
    F

    @josehoudini I did not add anything. I think you have to give it a height, maybe use "browser height for row height" in the grinder with the html code.

  • P

    Fade text on scroll

    2
    0 Votes
    2 Posts
    42 Views
    F

    @paulcalver try some jQuery like in this example:

    http://jsfiddle.net/e84enbf2/

  • A

    mobile version

    4
    0 Votes
    4 Posts
    111 Views
    RichardR

    Dear Almah @almah

    Your Project Thumbnails are always in their 'Mouseover state' on Mobile (hover):

    Screen Shot 2021-03-09 at 9.08.36 PM.png

    When "Brightness 17%" is removed your mobile layout displays fine -
    Given that further down in the Project Thumbnail options there is > Behaviour on Movile Devices > Always show mouseover state:

    Screen Shot 2021-03-09 at 9.17.22 PM.png

    I would assume that this is checked and needs to be 'un-checked'

    Best wishes & have a wonderful day :)
    Richard

  • A

    Center table text horizontally in carousel

    10
    0 Votes
    10 Posts
    182 Views
    RichardR

    Dear Ana @aheneah

    Unfortunately the whole 'slide' has the 'click event' - To describe it like a 'Glass Window' over the carousel. anywhere you click will be on this window (triggering the slide).

    With the Current Lay Theme options you cannot select/highlight the text - sorry about this and any inconvenience it may cause to your design.

    It is likely possible with some further Coding/hacking - I wanted to give this a go for you as a solution:
    https://stackoverflow.com/questions/53367064/how-to-enable-select-text-in-swiper-js

    But it hasn't worked. I cannot go in further at the moment to get this to work sadly.

    Once again sorry if cannot help further Ana - You may wish to seek the aid of a developer if you know someone who could lend a hand- - Or any others reading this Thread if that could Help Ana please :)

    Have a lovely day Ana & best wishes
    Sincerely
    Richard

  • C

    Compact WP Audio Player

    2
    0 Votes
    2 Posts
    71 Views
    RichardR

    Dear Cristian

    Currently Lay Theme does not offer support for Compact WP Audio player, them being a third-party plugin, though it may work just fine - I havent tested it myself.

    I do wish to offer a solution if this helps you.

    Audio players can be created with some very basic code, here in this link some is provided:
    https://www.w3schools.com/html/html5_audio.asp

    <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

    These <source> elements can be linked with any audio format that modern web browsers understand - most commonly .mp3

    When uploading an mp3 into your 'Media Library' - on closer inspection you can copy the URL path for use/input with these <source> elements

    Screen Shot 2021-03-09 at 8.30.19 PM.png

    For Example:

    <audio controls> <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-11.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

    A Closer look at the <source>

    <source src="https://www. <--- I HAVE INSERTED THE URL FILE PATH THAT I WANT HERE---> .mp3" type="audio/mpeg">

    Now I am able to take this code and insert it into my Gridder in a Project or Page using the " +MORE - +HTML" Option ( Adding the code into the input provided ) :

    Screen Shot 2020-09-14 at 2.50.29 PM.png

    Now on my Front-end i have an audio player, playing the mp3!

    Screen Shot 2021-03-09 at 8.37.34 PM.png

    This is the default audio controller, but with Google you can find heaps of reference for changing this up.

    This example was to provide a 'plan-B' for if the "Compact WP Audio Player" was not compatible for whatever reason ( likely one of the many Audio plugins will work with Laytheme )

    <NOTE: You may find it difficult to autoplay the music - Since i think 2018, Browsers have stopped the ability to play sounds automatically on page load - the user has to initiate this >

    Hope this helps Cristian & have a wonderful day! :)

    Sincerely
    Richard

  • SMSTUDIOS

    Category edit page

    3
    0 Votes
    3 Posts
    39 Views
    A

    @Richard-K, @SMSTUDIO,
    Richard is right: just deactivate Yoast and it comes back. I had the same problem and this post helped me. Thank you both.

  • BaptisteB

    Dot cursor using Vanilla.js issue with carousel

    8
    0 Votes
    8 Posts
    173 Views
    BaptisteB

    Hey @arminunruh,

    Problem solved, thanks ✌️

    Best,

  • B

    Site title links to Intro Page

    14
    0 Votes
    14 Posts
    334 Views
    D

    Hey all!

    I want the opposite.

    I want the intro to come back when I click on the site title image.

    http://www.gib8.eu/

    How do I implement a shortcode for the intro to come back?

  • G

    Category Filter not showing on Mobile - HELP

    8
    0 Votes
    8 Posts
    129 Views
    arminunruhA

    mmh it seems that the textformat you used for your filter is not added to the code correctly

    can you send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?

  • L

    Is it possible to delete those embeds?

    8
    0 Votes
    8 Posts
    365 Views
    arminunruhA

    hey i think with the latest lay theme and addon versions these embeds are gone

  • V

    Vimeo & autoplay and loop

    6
    0 Votes
    6 Posts
    478 Views
    V

    Hey Rick, just sent my site via PM. At first the movies had autoplay on some of them. Now none of them work anymore. It's good to know I tried this with different MP4's I uploaded to Vimeo, but all rendered without sound.

    This is the video embed code I used for all of them. I used XXXXX instead of actual Vimeo ID in this example.

    <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/XXXXXX?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

  • W

    Primairy menu centered on the left

    5
    0 Votes
    5 Posts
    57 Views
    W

    @Baptiste said in Primairy menu centered on the left:

    }

    You are the best! Thanks :)

  • K

    Same Mobile display for Tablet display

    6
    0 Votes
    6 Posts
    96 Views
    RichardR

    Dear Karim @karimus1888

    Cool, that link works now :)
    To clarify: is the question that you want to have the Tablet layout on Mobile?

    OR how to have the Menu displayed in the centre on older devices ( it should )..

    Best
    Richard

  • L

    Menu Point (Desktop Version) in other corner

    6
    0 Votes
    6 Posts
    57 Views
    L

    It worked thank you!

  • H

    Vertical Scroll for Carousel Plugin

    3
    0 Votes
    3 Posts
    244 Views
    H

    @Richard-K Thank you Richard! I'll look into this.

  • A

    Hover effect from project thumbnails on image

    8
    0 Votes
    8 Posts
    576 Views
    RichardR

    Dear @anamsp

    If you need the colour overlay on hover it gets a bit more tricky as this is a <span> overlay - to get all the effects without the colouring:

    .special:hover{ filter: blur(2px); -webkit-filter: blur(2px); -moz-filter: blur(2px); -ms-filter: blur(2px); -o-filter: blur(2px); opacity: 0.5; transition: all 400ms ease-out; }

    When you want the image to act the same as project Thumbnails when hovered > right-click & give it a 'custom class' in my example i gave it

    special

    The above code can be added to 'CSS' in customizer or through ' Lay Options - Custom CSS & HTML'

    Hope this helps @anamsp & have a wonderful day, sorry for the delay!

    Best
    Richard

  • A

    Front page - Google description

    2
    0 Votes
    2 Posts
    40 Views
    RichardR

    Dear @AJ

    If i'm not mistaken this is your site title / tagline - These can be changed in the left hand admin menu > Settings > General > --

    Hope this helps! :)

    Best wishes
    Richard

Before you post:
  1. When using a WordPress Cache plugin, disable it or clear your cache.
  2. Update Lay Theme and all Lay Theme Addons
  3. Disable all Plugins
  4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

This often solves issues you might run into

When you post:
  1. Post a link to where the problem is
  2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
  3. If the problem is difficult to explain, post screenshots / link to a video to explain it
Online Users
M
Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com