Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Suggestion / placeholder image for placeholder color

Suggestion / placeholder image for placeholder color

Scheduled Pinned Locked Moved General Discussion
3 Posts 2 Posters 22 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    matejmoravec
    wrote on Feb 14, 2025, 11:13 PM last edited by
    #1

    Hi,
    I have a suggestion.

    Would it be possible to add an option to Image Placeholder Background Color section also a image?

    I would like to have there instead just a color box, a small gif (5kb) that has written Loading... in it.

    Otherwise, is it possible to add a text box in this area where users could write loading or some other message? I know I can add placeholder images to single files, but this solution would help me to setup all globally.

    I believe I am not alone who would appreciate it 🙂

    Screenshot 2025-02-15 at 00.05.27.png

    Screenshot 2025-02-15 at 00.12.34.png

    1 Reply Last reply
    0
    • A Offline
      A Offline
      arminunruh
      Global Moderator
      wrote on Feb 17, 2025, 7:17 PM last edited by
      #2

      yea text would be better

      an additional gif has to be loaded otherwise.
      gifs often are kinda big!

      and who knows if the gif is loaded before the image is loaded

      using text is much better, thats a good idea!

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

      .type-img .ph::after{
          font-size: 20px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          content: 'loading…';
          z-index: 0;
          font-family: sans-serif;
      }
      .type-img img {
          z-index: 1;
      }
      

      will result in:

      Screenshot 2025-02-17 at 20.15.50.png

      (only for image elements)

      1 Reply Last reply
      0
      • A Offline
        A Offline
        arminunruh
        Global Moderator
        wrote on Feb 17, 2025, 7:17 PM last edited by
        #3

        if you have gifs on your website its better to replace them with mp4s

        better quality and less size

        1 Reply Last reply
        0
        Reply
        • Reply as topic
        Log in to reply
        • Oldest to Newest
        • Newest to Oldest
        • Most Votes

        1/3

        Feb 14, 2025, 11:13 PM


        I also code custom websites or custom Lay features.
        💿 Email me here: 💿
        info@laytheme.com

        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
        L
        leili
        4 minutes ago
        Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
        laytheme.com
        • Login

        • Don't have an account? Register

        • Login or register to search.
        1 out of 3
        • First post
          1/3
          Last post
        0
        • Recent
        • Tags
        • Popular
        • Users
        • Search