Add an outline to header text/socials

  • Hi folks,

    I am trying to add an outline to the text and social icons on my home page header, so it will be more readable.

    Unfortunately, I couldn’t find this option anywhere. Is there a way to add it by using custom CSS?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hey @theye!

    There is not “setting” to add this outline/shadow, but you can add it using a little bit of custom CSS code:

    
/* Add shadow to Site Title and Text Links */
nav a, .wp-block-site-title a {text-shadow: 1px 1px 5px #FFFFFF;}
/* Add shadow to Logos */
nav svg {filter:drop-shadow(1px 1px 5px rgb(255 255 255 / 1));}

    To access the CSS editor you will want to visit this URL: https://www.theijevisser.nl/wp-admin/customize.php`

    The code above will make your text looks like this:

    Screen Shot on 2022 10 12 at 17 56 52

    If you want to adjust the appearance of the outline, you can use this site for reference with the code: https://html-css-js.com/css/generator/text-shadow/

    Please do let me know if that helps!

    Thread Starter theye

    (@theye)

    Hi @mrfoxtalbot , thanks for your reply. I’ve added the customized code, and it’s already a lot more readable.

    I was wondering if there is a way to have a solid outline without the blur/gradient of a shadow?

    Thanks again!

    Hi @theye!

    > I was wondering if there is a way to have a solid outline without the blur/gradient of a shadow?

    Absolutely! Try replacing the code I shared above with this other code:

    
/* Add white border to Site Title and Text Links */
nav a, .wp-block-site-title a {
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
/* Add white border to Logos */
nav svg {
stroke: #fff;
  stroke-width: 1px;
  stroke-linejoin: round;  
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Add an outline to header text/socials’ is closed to new replies.

Tags