Text box for title

Shapely
1

Is there a way to put the title in a text box so that it can still be seen when you have a picture background that has the same color as the text?

Thanks!

2

Hi there,

I hope you are having an awesome day and thanks for contacting us regarding your query.

This can be done with the help of some Custom CSS. Kindly provide me with a link to a page with this so that I may be able to write up some CSS that should work for your setup.

Looking forward to your reply :slight_smile:

Best Regards,
Support

3

Hello!

Did we find a solution for this? I am having the same problem.

The title I would like to put in a text box is ‘Support a Community’ here:
temp.worldvisioncambodia.org

Thanks, hope to hear back soon!
Jason

4

Hello there,

I hope you are doing well today.

You can use the following CSS code to add a background color to the text by going to Appearance > Customize > Additional CSS and pasting it there.


/*Background color*/
.text-center h1 {
    background-color: #f37021;
}

Best Regards,
Support

5

Hi,

Here’s a link to the site: https://www.profileoptimize.com/

Thanks

6

Hello there,

I hope you are doing well today.

You can use the following CSS code to add a text box by going to Appearance > Customize > Additional CSS and pasting it there.


/*Text box*/
.image-bg h3, .image-bg h1 {
    background-color: #745cf9;
    margin-left: 150px;
    margin-right: 150px;
}

Best Regards,
Support

7

Should I use the same code?

Thanks

8

Perfect! This was very helpful, thank you so much!

9

Hello @kiwiparty,

Please go ahead and try using the code, then tell us if the code worked for you.

Best Regards,
Support

10

Good morning,

I have been trying to get a box around my title with a different background color on my illdy theme with no avail. I tried using the codes you provided further up in the post, but nothing happens. Any ideas. I would really appreciate your help. My page is www.rolandsgardenguesthouse.com . I would love to gt a box around title, menu and description in which I can darken the background image, o change color completely.

11

Hi @rolandsgarden,

For menu you can use this CSS Snippet in Appearance -> Customize -> Additional CSS

.menu-item {
    background-color: green;
    border: 1px solid #000;
    padding: 5px;
}
.menu-item a {
    padding: 5px;
}
#header .top-header .header-navigation ul li { margin-left: 10px; }

For other areas, can you tell exactly where it is, share a screenshot about the element, so that it is easy for us to give the Custom CSS. Customize the colors, margin, paddings according to your needs. :slight_smile:

Let us know,

Thanks,
laranz.

12

Hello @laranz,
This for sure brings me one step closer. This is a good start. How can I now set opacity of that box to 0.5 or something similar? Also I would like to do the same for the main title (Roland’s Garden Guesthouse), and for (your true island experience). So I can use a black background that I can then dim to where I can read the text well, but still see the image behind.

Thank you so much for your help.

13

I just realized, your code showed fine in the preview, but when I open my website in a separate window the changes do not show. I did save and publish. Also I tried using a different computer to rule out cache.

14

Here a screenshot.

15

It did show now. So I would love to do the following things now:

1- Change the opacity of the menu textbox.
2- Make a textbox around the main Title and “Your truely autherntic Island Experience!” on which I can also set the opacity.
3- And last, make te text bigger on the two buttons.

16

Hi,

  1. You can change that CSS to this,
.menu-item {
    background-color: rgba(0,0,0,0.5);
    border: px solid #000;
    padding: 1px;
}

I added the rgba, that’s all :slight_smile:

  1. Use this,
#header .bottom-header .section-description {
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid #fff;
    padding: 10px;
}

Adjust each value according to your needs.

  1. Use this,

#header .bottom-header .header-button-one, #header .bottom-header .header-button-two { font-size: 28px; }

Let us know,

Thanks,
laranz.

17

Thank you so much @laranz!

This is almost what I wanted now. Sorry, Im new to css and I cant do anything on my own yet. Would it be possible to make the textbox for the section description less wide? So it has equal space around the text on the sides like it does on top and bottom?

THank you so much for your help!

18

Hi,

Use this Custom CSS,

@media only screen 
  and (min-width: 1024px) {
#header .bottom-header .section-description {
    margin: 0 auto 30px;
    width: 520px;
}
}

Let us know,

Thanks,
laranz.

19

Thank you very much @laranz

20

@laranz, I still have a serious translation problem going on on my site. And I have found a forum post that talks about what I need to do, but I cant seem to be able to get anybody to help me with the issue. Would you mind to have a loo?

https://colorlibsupport.com/t/translate-titles-of-sections-on-the-home-page/#post-115974