Adding outline to font

  • Resolved sharky1604

    (@sharky1604)


    6 years, 10 months ago

    Hi guys,

    I’ve recreated a web-page for a gym I work for and am trying to add some final touches to make it more professional and sleeker than the previous design. One of the final things I need to do is to add a black outline or maybe a shadow or something to the text in the main carousel at the top of the page. The text currently is hard to read against the picture background. I’m still relatively new to coding and such and have mainly used Elementor in adding other design elements to the theme in place. If anyone could help it would be greatly appreciated!

    As a follow up question if anyone has an easier way to add anchors as well to a pre-designed theme (I’ve found that pretty problematic to be honest as well) but primarily I would like to fix the aesthetic problem first.

    Thank you in advance to any responses!

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • CrouchingBruin

    (@crouchingbruin)

    6 years, 10 months ago

    Try adding these two rules to your custom CSS to add some shadow:

    .carousel-inner h1 {
    text-shadow: 3px 3px #050;
}
.carousel-inner .sub-title {
    text-shadow: 1px 1px #050;
}

    The first is for the larger title, the second is for the smaller subtitle. For the property values, the first value is how far the shadow should extend in the horizontal position, the second value is how far the shadow extends in the vertical position, and the third value is the color (#050 is a dark green). Adjust the values as you like.

    As far as adding anchors go, it looks like all of your anchors are OK except for the Membership one. It looks like the DIV that contains the ID of membership is located in the section that has your class schedules.

    Kartik Shukla

    (@kartiks16)

    6 years, 10 months ago

    Hello sharky1604,

    In most of the banners, I have seen they add a background color behind the text so that it becomes clearly visible.

    Do you think something like this will help?
    Screenshot: https://prnt.sc/nxbw6g

    If this works for you, you can add a CSS 

    h1.hestia-title  {
    background-color: #616161;
    opacity: 0.8;
}

    OR

    h1.hestia-title {
    background: rgba(76, 175, 80, 0.5);
}

    Hope this helps.

    Thanks.

    Thread Starter sharky1604

    (@sharky1604)

    6 years, 10 months ago

    Thank you both for your input. It took me a little longer than I would like to admit to find where to add that line of code.

    I have added the shadow effect and appreciate the extra effort of giving the dark green hex value! Thank you very much for that @crouchingbruin

    @kartiks16 I also appreciate your input on adding the background colour but thought it took a little bit too much space in the background picture, thank you again though for your input.

    Kartik Shukla

    (@kartiks16)

    6 years, 10 months ago

    Happy to help you sharky1604.

    Good to know that you have managed to find a solution.

    Thanks.

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

The topic ‘Adding outline to font’ is closed to new replies.