Text box on Sela Theme

doulaslove · Member · Apr 16, 2015 at 10:47 am
Copy link

Add topic to favorites
Hi,

I would like this text box on the home page of my website to be more transparent so we can see the photo on the background better.
Would it be possible to also reduce the size of the box or even delete it at all and leave the text only?

Thanks

http://www.doulaslove.com

The blog I need help with is: (visible only to logged in users)
staff-jeanpierreac · Staff · Apr 16, 2015 at 2:18 pm
Copy link
Hi there!

You can do it with custom CSS. Your text box is an article whose interesting properties (having to do with the box beneath your text) are defined in a class called ‘.with-featured-image’. So, once introduced, we can change them a little bit:

More transparency. You can use the opacity property that accepts values from 0 –transparent- to 1 –opaque-. Right now, the value is 0.95, so you could try with a lower value convenient to your layout. For instance:
```
.with-featured-image {
	opacity: 0.5;
}
```
Reduce box size. I’m not sure this is a good idea, because conceptually your text is in the box, not on it… So if you reduce width, for instance, the text will need more height. Do you see what I mean? In any case, you could do it by using width property of well known .with-featured-image class. Current value is 457px, so we can try 300px, to understand the effect.
```
.with-featured-image {
	width: 300px;
}
```
Delete it! Yes. You can delete your class background so that it will became transparent.
```
.with-featured-image {
    background: none;
}
```
So opacity:0 and background:none is the same? Not at all. Opacity affects the background, but also the text, so basically opacity:0 will make your text invisible. And in the other hand background:none will not alter your text color… but it becomes illegible because of the image bellow. Maybe a well-chosen opacity value could be an appropriate option in my opinion.

I hope this helps you. Enjoy blogging!
doulaslove · Member · Apr 17, 2015 at 3:50 pm
Copy link
Hi Raul,

Thank you very much for your detailed answer and I hope to be able to use it soon.
I am totally totally new to all this and don’t even know where to type all this that you mentioned.
I found the text box, but tried typing some of these information in and nothing has change. All I could see was this code on my webpage :)

Can you give me a hand please?
staff-jeanpierreac · Staff · Apr 17, 2015 at 4:10 pm
Copy link
Yes, of course! :)
What I gave you is called CSS Style Sheets and you can modify you pages aspect with it. You can learn more about CSS here: https://en.support.wordpress.com/custom-design/css-basics/

But… where do you need to write it? In ‘Your site’ there is a Menu topic called ‘LOOK AND FEEL’ and in it a ‘Customize’ option. Once in Customizer, there is an option called CSS. You can add here CSS code and have a visualization of these changes effects (That will be permanent if you have a Premium Plan :)
I hope this helps you.
doulaslove · Member · Apr 17, 2015 at 4:37 pm
Copy link
HI Raul,

I got to this place (I have a Premium Plan), copied the text you suggested, and clicked on Save & Update, but still nothing has changed.

Is there anything else I have to do other than CTRL+C CTRL+V?

I’m reading the info on the link you sent me but I’m still scared of just looking at those codes!

Many thanks
thesacredpath · Member · Apr 17, 2015 at 10:02 pm
Copy link
Hi, we need to get a bit more specific on the CSS selector. Also, instead of using opacity, I would suggest setting opacity to 1 (fully opaque) and then using an RGB color with alpha transparency. With Opacity, that ends up also making the other stuff in that box (text, buttons, etc.) more transparent. See what you think of this. I’ve make the box a bit smaller as well.
```
.front-page-content-area .with-featured-image {
    opacity: 1;
    background: rgba(255, 255, 255, 0.5);
    padding-bottom: 0;
}
.front-page-content-area .with-featured-image .entry-header, .front-page-content-area .with-featured-image .entry-meta {
    display: none;
}
```
staff-jeanpierreac · Staff · Apr 17, 2015 at 10:21 pm
Copy link
Hi @thesacredpath!

I totally agree with you about opacity.

And also about specificity on selectors. Anyway it should work. Why do you think it does not?
thesacredpath · Member · Apr 18, 2015 at 4:28 pm
Copy link
staff-jeanpierreac, if you inspect that element, it is the article .hentry, and if you scroll down in the inspector a bit on the CSS side, you will find this rule where the existing opacity and such is set.
```
.front-page-content-area .with-featured-image {
    background: none repeat scroll 0 0 #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    opacity: 0.95;
    padding: 1.5em;
    width: 457px;
}
```
That is selector used for the main styling of that element. Since the selector on that is more specific than the selector you used (.with-featured-image) it will take precedent over yours, even if yours is loaded after the original. Your code will work, but it would need to have the !important keyword added to the opacity declaration, and I try and avoid using !important wherever possible as it can sometimes cause issues.

On my second rule, I may have gone a little overboard on the selector, but in the past I have had times when, because I wasn’t more specific, it ended up affecting other things on other pages.
doulaslove · Member · Apr 20, 2015 at 8:48 am
Copy link
Hello Gentlemen,

That’s exactly what happened. When I applied
```
.with-featured-image {
	opacity: 0.5;
}
```
it made two pages of my website go transparent (including all the text inside), but the home page was still the same.

I’ve now applied
```
.front-page-content-area .with-featured-image {
    opacity: 1;
    background: rgba(255, 255, 255, 0.5);
    padding-bottom: 0;
}
.front-page-content-area .with-featured-image .entry-header, .front-page-content-area .with-featured-image .entry-meta {
    display: none;
}
```
and it looks exactly like what I wanted!

Thank you both for your help!
staff-jeanpierreac · Staff · Apr 20, 2015 at 12:21 pm
Copy link
@thesacredpath Yes!

Thanks a lot for your generous explanations.
thesacredpath · Member · Apr 21, 2015 at 2:00 am
Copy link
staff-jeanpierreac, you are welcome.

@doulaslove, awesome, and you are welcome.

No items found.