adding a translucent box?

egarell · Member · Jan 4, 2016 at 11:46 pm
Copy link

Add topic to favorites
Brand new to WordPress, and don’t know the extent of the CSS capabilities. I have this strong desire to put a translucent box under text on the Home Page (PORT theme), and change the color of the font.

The blog I need help with is: (visible only to logged in users)
balanc3d · Member · Jan 4, 2016 at 11:51 pm
Copy link
Hey there,
It looks like your blog is marked private so is not visible to other users. Check out this page to see how to change those privacy settings then we can take a look.

Also, you may know this already, but changing the CSS is only available to users with a Premium account.
egarell · Member · Jan 4, 2016 at 11:54 pm
Copy link
Oops. Now live. And yes, I do have the premium account. Thanks for any help you can give me!!!
balanc3d · Member · Jan 5, 2016 at 12:00 am
Copy link
It’s still saying it’s a protected blog on my end. Did you maybe forget to click “Save Settings” at the top of the box?
egarell · Member · Jan 5, 2016 at 12:03 am
Copy link
saved. . . . sigh :(
balanc3d · Member · Jan 5, 2016 at 12:11 am
Copy link
Got it! :)

Try adding this:
```
.wf-active #home-banner #banner-text .main h2 {
    color: #000000;
    background-color: rgba(255,255,255,.6);
    padding: 10px;
}
```
I have the color of the font set to black in the above example, but you can change that to whatever you want – I can help you change it to something different if you have an idea of what color you’d prefer there.
egarell · Member · Jan 5, 2016 at 12:14 am
Copy link
This is PERFECT, balanc3d! Thanks! Can we put the same shadow box on the #down button? and make it the same color????
egarell · Member · Jan 5, 2016 at 12:17 am
Copy link
“it” meaning the down button. also, can we make the box a bit bigger? More room around the text?
balanc3d · Member · Jan 5, 2016 at 12:19 am
Copy link
You definitely can!

Try this:
```
#down-button {
color: #000000;
background-color: rgba(255,255,255,.6);
}
```
If you want to make the down button round (with I think looks a little better, you can do this:
```
#down-button {
color: #000000;
background-color: rgba(255,255,255,.6);
border-radius: 30px;
}
```
balanc3d · Member · Jan 5, 2016 at 12:21 am
Copy link
Regarding making the box around the text a bit bigger, just increase the padding. So right now it’s set to padding: 10px; but you can increase that number to 15 or 20px and that’ll make the box bigger, like this:
```
.wf-active #home-banner #banner-text .main h2 {
    color: #000;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 20px;
}
```
egarell · Member · Jan 5, 2016 at 12:23 am
Copy link
I am sooo excited! This looks great. Thank you, thank you! One question: can we make the translucency around the arrow just a little more opaque? A little hard to see . . .
balanc3d · Member · Jan 5, 2016 at 12:27 am
Copy link
Sure can :)

Here’s the updated code (the round version):
```
#down-button {
color: #000000;
background-color: rgba(255,255,255,.8);
border-radius: 30px;
}
```
All I’m changing from the way it was before is where it says background-color: rgba(255,255,255,.8); — the decimal number at the very end was a .6 so I changed it to a .8 — the higher the number, the more opaque.

Hope that makes sense :)
egarell · Member · Jan 5, 2016 at 12:30 am
Copy link
Yes it does. Thank you—-it’s so so helpful.

I would really appreciate more help . . . with pictures . . . Do I need to start a new thread? or can you help me here?
balanc3d · Member · Jan 5, 2016 at 12:32 am
Copy link
I would start a new thread since it’s a different topic and I’ll take a look if I can, or if not someone else will grab it and help you out!
egarell · Member · Jan 5, 2016 at 12:33 am
Copy link
OK. Thanks so much for all of your help, balanc3d!!
balanc3d · Member · Jan 5, 2016 at 12:34 am
Copy link
No problem at all!

No items found.