[mvivesParticipant]

Hi, I searched the forums but didn’t find a thread about this. I have seen a couple of sites built with X that have a transparent overlay on top of an image where text can be placed. I was thinking this might be a container, but I haven’t been able to replicate this with X’s container.

In this screenshot: http://screencast.com/t/mLIJsij4UV1m

You’ll see a red box. Is there any way to create a slightly transparent, dark grey overlay on top of the background image, so that the image can be seen, and I can change the text color to white and the white text could be seen?

I hope this makes sense. Please let me know. I’d greatly appreciate it.

[SenthilMember]

Hi there,

Can you please share your URL and also please add the background image and add a content band?

So we can help you to make the content box transparent.

Thanks!

[mvivesParticipant]

This reply has been marked as private.

[mvivesParticipant]

This reply has been marked as private.

[drulesParticipant]

I have the exact same problem. I’m trying to put a header on top of a transparent image. Please don’t make the response private. I came to this forum to find the answer.

[ChristopherModerator]

Hi there,

To add transparent background add background-color: rgba(0,0,0,.5); in style field of content band.
To add rounded corner you can add border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px; in style field of content band too.

Regarding to font size i find them the same size, you can add font-size:20px; in style field of your headline or text shortcode.

Hope it helps.

[eimkeithParticipant]

Hi there – I’m after this as well – a transparent text background, but more translucent, as shown here:
https://www.zuffenhaus.us/cgi-bin/commerce.exe?listcategories

I’m also new to the website work, so please excuse the question – but where should the code shown above be entered? (assuming all site text bodies/content should have a translucent background)

[ChristianModerator]

Hey Keith,

Sorry for the confusion. The code background-color: rgba(0,0,0,.5); is translucent. Transparent background code is background-color: transparent;. Every element or shortcode in X has a style attribute. You need to insert that code in the Style field or attribute (see http://prntscr.com/640mvf). Please see http://theme.co/x/demo/integrity/1/shortcodes/content-band/ if your using X Shortcodes.

Thanks.

[leannevenierParticipant]

I had the same issue and this style fix works perfectly!!Thanks!

(I modified the code you provided slightly to adjust the degree of black in the background by changing the .5 up or down depending on desired degree of gray to blackness. (I set mine to .7) ). Good to know that we can create any translucent or solid background color this way, too!

A related question about this – is there a style code to add to the above code where this translucent background box can extend slightly above, below and to the left and right of the written text (ie so the text has a border (ie margins) all the way around it, instead of the translucent background ending right where the letters of the title end?

This way it will look as though the title is on a background box, instead of the background translucency showing just behind the text letters only.

Or, if it isn’t possible to specify margins around the text for the translucent box (so it’s responsive on all devices) is there a way to create a translucent box of any specific desired size and then just type text on top of that?

It would be ideal to be able to create the margins around the text, though – top, bottom, left and right – ie, all around the written text.

Thanks for any help you can provide! 🙂

[Rue NelModerator]

Hello There,

Thanks for updating the thread!

You can simply add a padding to have a space around the element so that your text would stand out.
Perhaps this should be the inline css code and feel free to change the padding.
background-color: rgba(0,0,0,.5); padding: 30px;

Hope this helps. Please let us know how it goes.

[leannevenierParticipant]

That worked perfectly! Thank you! 🙂

On a related note, as soon as I added in the padding, The box where I used ‘Custom Title’ as the cornerstone element, the padding is even on all sides.

But the 2nd text box that I overlaid on that same image, I didn’t want the text to be as large as Custom Title, so I set the text size to H4. When I added the padding code for that text box style element, the padding added was 30 px on the 2 sides and the bottom, but the top added in 30 px PLUS the additional padding that is hard coded universally on x the theme for h4 (can’t recall how many extra pixels h4 adds in as top padding).

Is there a way to override the h4 top padding settings just for that Text box (ie. the 2nd text box, with the translucent box behind it)?
Meaning, I don’t want to change the settings for h4 sitewide, just for that one text box so the padding of 30px overrides the h4 additional top padding. Or it would also be fine to change the h4 settings for that entire page (since I don’t use it anywhere else on that home page)

Not sure if I”m explaining this clearly? 🙂

Thanks for your fabulous help! 🙂

[FriechModerator]

Hi There,

Regretfully, at this time I am not entirely certain of the issue, providing us the site URL and some screen shot is greatly appreciated. We’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks!

[leannevenierParticipant]

Thanks for the response!
Here, you can see the page I’m building to become my home page.

I changed the second text box font to be h5 (which I’ve already changed in my x master css settings to have a much smaller top padding). but you can see that the top padding is slightly larger than the other 3 sides. (by about 15 px since that’s what I set the universal h5 top padding to be on my entire site).

http://catalyticcolor.com/how-to-be-happier-healthier-more-creative-and-500-percent-more-productive/

I’d like to be able to override the x default top padding which is above every header (different numbers of pixels are over each header. I think h5 used to be 30 or 40 px, but I switched mine to 15 px).

Is this clearer what the issue is? Hope so! 🙂

I’d like to know how to override the default x theme top padding on header text
1. within specific text boxes (like the example page above (text box #2)
2. as well as know how to override the default header top padding on an entire page (I assume the code would be the same?)

[Rue NelModerator]

Hello There,

Thanks for updating the thread!

To know how to override the default x theme top padding on header text
1. within specific text boxes (like the example page above (text box #2)
Please turn on the advance controls and insert a custom custem-text class in the text element. You can the use this custom css to target the elements like the h5 inside text element.

custom-text h5 {
  padding: 10px;
  /* and other styling */
}

2. as well as know how to override the default header top padding on an entire page (I assume the code would be the same?)
To override the default header on the entire page, insert the following custom css in the settings tab, Settings > Custom CSS

h1,
.h1 {
  padding: 10px;
  /* and other styling */
}

h2,
.h2 {
  padding: 10px;
  /* and other styling */
}

If you are using a custom headline, you can use this code as well.

.h-custom-headline{
padding: 10px;
/* and other styling */
}`

Hope this helps. Please let us know how it goes.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

[leannevenierParticipant]

Hi there, I’ve been trying to figure out where to put your various lines of code.
None of them are working for me.

For example, you said for this code:

custom-text h5 {
padding: 10px;
/* and other styling */
}

to put it inside the “Text Element” for that box.

The only thing I can find with the word TEXT on it when I’m in Cornerstone for the page I’m building, is above the actual Text Box for the text that appears on the screen with the Translucent Overlay.

When I add the code within the Text mode for that box (where you can input CSS Code) All it does when I add it to the Text box is show up on my screen as that code.

If it, in fact, goes where the text that appears on the page goes, can you give me an example with some text written in. Example: THIS IS THE TEXT THAT WILL SHOW UP ON THE BOX

This is what I currently have in the TEXT box under TEXT:

<h4><span style=”color: #ffffff;”>Are you Ready to Discover True Happiness, 500% Increased Productivity, Your Natural Creativity and Optimal Health?</span></h4>

Can you please be more clear about where to insert YOUR code? Thanks!
It doesn’t work if I put it in the Style box in Advanced Settings for this Overlay Text box either.

Thanks for clarifying! 🙂

[Author]

Posts