border around text

  • Author
    Posts
  • #3428906

    dennisluxx
    Member

    I feel like this this this should be an easy fix but I am struggling to find a solution. I am simply trying to add a border around my text in one of my blocks. I found following CSS code:

    .content-wrapper.full-width.with-featured-image {
    border-color: black;
    border-style: solid;
    border-width: 2px;
    }

    but adding this code to both the Customizer or directly at the block under “Advanced” did not work.. any help is appreciated :)

    The blog I need help with is luxtrust.ca.

    #3428915

    Hi @dennisluxx,

    There are only two text blocks I can see on your blog. Where exactly you would like to add a border around text?

    #3428927

    dennisluxx
    Member

    Hi,

    the first block, under “Invest Smarter”

    #3430184

    Hi there,

    I can see below screen where I am not seeing “Invest Smarter”

    #3430185

    Hi there,

    Below is a link for your blog screenshot
    https://imgur.com/a/7IPd1c2

    #3431222

    dennisluxx
    Member

    Hi, thanks for the reply!
    Sorry it seems like my website is still set as private so I guess you can’t view it..

    I think I worded my question wrong as well; I would like to add stroke to my text to make it more legible. I came across this code:

    {-webkit-text-stroke-width: 0.2px;
    -webkit-text-stroke-color: black;
    }

    but apparently the webkit feature is not supported. So basically I am just trying to find a CSS code that makes my text more legible.

    #3431269

    dennisluxx
    Member

    I found the correct code I think:

    p {
    color: white;
    text-shadow: -0.5px -.0px 0 #000, 1px .1px 0 #000;
    }

    However, this will change most of the text on my website; I would like to only apply this code to one specific text block, is there any way I can do this?

    #3431276

    Hi there,

    It would be helpful if I can view your blog. Though you can try below code and let me know if it works. I assume that the background colour is White.

    h1 {
      color: white;
      text-shadow:
       -0.5px -1px 0 #000,  
        1px -1px 0 #000,
        -0.5px 1px 0 #000,
         1px 1px 0 #000;
    }

    If your site is private you can link a screenshot to let me check.

    #3431408

    Hi @dennisluxx, please remember that with Premium plan, you can access live chat directly from https://wordpress.com/help/contact – it’s a faster way of getting support.

    Thanks @khushbudesaiblog thanks for trying to help with the CSS :)

    #3431889

    dennisluxx
    Member

    Thanks for the help! :)

    Here is a screenshot: https://imgur.com/a/MVpR8If

    Your code would indeed work, however only for the header which is “Invest smarter” in this case. I would like the text below to be more legible without changing any other text on my website..

    #3431932

    kokkieh
    Staff

    I would like to only apply this code to one specific text block, is there any way I can do this?

    Edit your front page, and select the block containing the text you want to change. In the sidebar, which will now be showing the block settings, click on Advanced. You’ll see an option there to add CSS classes. Add a unique class there, like text-shadow-block, and update the page.

    Now in the Customizer, you can use that class to target that specific block.

    So instead of:

    p {
    color: white;
    text-shadow: -0.5px -.0px 0 #000, 1px .1px 0 #000;
    }

    you’ll use:

    .text-shadow-block {
    color: white;
    text-shadow: -0.5px -.0px 0 #000, 1px .1px 0 #000;
    }

    And what’s nice about this method is that, should you want to apply a text shadow to any other content on your site later, you can just edit the post or page and add the CSS class to the block you want, and the CSS already in the Customizer will be applied to it automatically.

    #3431933

    kokkieh
    Staff

    As an alternative to text shadows, have you considered giving that block of text a semi-transparent background instead? For that you can use something like this:

    .background-block {
    background: rgba(0,0,0,0.3)
    }

    (Note I’m using a different class – for ease of use any class you add to a block in the editor for using in custom CSS should be descriptive of what it does)

    #3432364

    dennisluxx
    Member

    Awesome, thanks so much for your help!

    #3432397

    khushbudesaiblog – I just wanted to share that to embed a screen shot here you need to use the image address, not the short URL. It’s the same for droplr, cloudup, and snag.gy. Right click on the image, Save Image Address, then paste it in to this format.

    <a href="imageURL" target="_blank"><img src="imageURL" /></a>

You must be logged in to reply to this topic.