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. Text on top of an image

Text on top of an image

Scheduled Pinned Locked Moved General Discussion
3 Posts 2 Posters 79 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.
  • W Offline
    W Offline
    willowj
    wrote on last edited by
    #1

    Hi all,

    I saw an old post about wanting to place text on top of an image. I would prefer to not 'paste' it in to the image, but have it on top of the image. I saw you mentioned this wasn't possible, however I'm wondering if this is now possible with the most updated version?

    Many thanks, and I love your theme! :)

    1 Reply Last reply
    0
    • W Offline
      W Offline
      willowj
      wrote on last edited by
      #2

      Hi again,

      Okay I worked out I can achieve what I want to do by adding my bio to the site tagline box in the customizer. The only thing is I can't add padding to each side of the text (in the screengrab I've just added turnarounds for now). I'm not a coder so am wondering what the code would be to add padding to the tagline and where I would place it?
      Many thanks! :)

      Screen Shot 2022-05-11 at 4.56.02 pm.jpg

      1 Reply Last reply
      0
      • RichardR Offline
        RichardR Offline
        Richard
        Global Moderator
        wrote on last edited by
        #3

        Dear @willowj

        The Tagline region can be targeted with the following code:

        .tagline {
        // insert desired CSS here
        }
        

        And you can add padding in two different ways, the short hand way:

        padding: 0px 20px 0px 20px;
        

        This works on a compass, so North, east, south, west - (or top, right, bottom, left)

        north 0px, east 20px, south 0px, west 20px

        And long-hand or individual paddings:

        Padding-left:20px;
        Padding-right: 20px;
        

        Details here:

        https://www.w3schools.com/css/css_padding.asp

        For example:

        .tagline {
        padding-bottom:20px;
        padding-left:20px;
        }
        

        Custom CSS can be added via:

        Lay Options > Custom CSS & HTML > Custom CSS

        https://laytheme.com/documentation/custom-css-styling.html


        Have a wonderful day @willowj 🌻
        Richard
        1 Reply Last reply
        0
        Reply
        • Reply as topic
        Log in to reply
        • Oldest to Newest
        • Newest to Oldest
        • Most Votes


        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
        A
        alasdair17
        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.
        • First post
          Last post
        0
        • Recent
        • Tags
        • Popular
        • Users
        • Search