Services Section Transparent Text Box


#1

I can’t get the text box to be transparent without the font becoming transparent as well. Right now it’s transparent white, and it changed the text to transparent black. I want the text untouched so it stays solid black, while the background box only is transparent.

Here’s my site:
memedawar.com


#2

Hi,

I’ve checked the service section on your site, seems like you already resolve the issue? I can see the the background is transparent white and the text color is solid black.


#3

Hi Awan,

The color is not solid black, it’s transparent black. You can see the photos behind it. I want the font solid black and the box to remain transparent. Can you provide the code for that to be possible please?

Thank you.


#4

Yes… I think its already displayed as your need. See my screenshot:


#5

Sorry if I’m not being clear. Here’s a photo that shows what I mean. See how you can still see the background photo through the black? I want the black solid so you can’t see the background image at all. 08%20PM


#6

Oh I see… That was the service icon, not the text :slight_smile:

To fix the issue, can you please to remove your current CSS code for .service? Please remove this:

.service {
    background-color: #ffffff !important;
    border-right: 1px solid transparent !important;
    opacity: 0.8;
}

Then add this CSS code instead:

.service {
    background-color: rgba(255, 255, 255, .8);
    border: none;
}

#7

Oh, sorry! lol.

That worked great for the service icons and text, but now the transparent box is black instead of white.


#8

Hi,

Where do you put the code? is it in the Customizer > additional CSS?
Do you have custom CSS plugin installed? Can you check it?

I noticed that you put two custom CSS code for the service box:

.service {
    background-color: white !important;
    border: none;
}

and

.service {
    background-color: rgba(0,0,0,0.6);
    border-right: 1px solid #5E5E5E;
}

Please use only one of them. If my code in above is not working, you can add !important rule to the code. So the code would be like this:

.service {
    background-color: rgba(255, 255, 255, .8) !important;
    border: none !important;
}

Regards,
Awan


#9

Hi Awan,

Yes, I put the code in the Customizer - Simple Custom CSS area.

I am not seeing two custom CSS codes for the service box, I only see this one:

.service {
background-color: white !important;
border: none;
}

Are you able to tell me where it is? I’ve looked through the entire Custom CSS section and only see that one.

Thank you!


#10

I’ve just re-checked your site but now I didn’t see both codes which I mentioned above.
Looks like you already manage it as well(?)

But, you are using transparent dark for the background. If you want to change it to transparent white, then use this:
background-color: rgba(255, 255, 255, .8) !important;


#11

Thank you, Awan! That was exactly what I wanted!

How do I do that to the Latest News section too?


#12

Hi,

Here is for the latest news section:

.blog-post {
    background-color: rgba(255, 255, 255, .8) !important;
    height: 450px;
    margin-left: 3px;
    margin-right: 3px;
}

@mediar (min-width: 992px){
  .blog-post.col-md-4{
    width: 30%;
  }
}

#13

Hello Awan,

Thank you for your response! However, the second part of the code didn’t work. I’m attaching a photo to show you the issue I’ve encountered.


#14

Ah I am sorry, that should be @media not @mediar