Change overlay box on Sela Theme?

laura960 · Member · Jan 27, 2015 at 4:39 pm
Copy link

Add topic to favorites
Hello! The Sela Theme features an overlay box – how can I make that box more translucent? I would also like to test the overlay box as translucent black with white font – what is the CSS for this?

The blog I need help with is: (visible only to logged in users)
staff-happychia · Staff · Jan 27, 2015 at 5:49 pm
Copy link
Current opacity is 0.95. Please reduce the value and see how it goes:
```
.front-page-content-area .with-featured-image {
opacity: 0.95;
}
```
laura960 · Member · Jan 27, 2015 at 6:10 pm
Copy link
Perfect – thanks! I asked a second question elsewhere – is it possible to change the overlay to black and the font on the overlay to white?

staff-happychia · Staff · Jan 27, 2015 at 6:17 pm

Sure, ignore earlier CSS and try this:

.front-page-content-area .with-featured-image {
opacity: 0.95;
background: black;
color:white;
}

.front-page-content-area .with-featured-image .entry-header h1 {
    color: white;
}

laura960 · Member · Jan 28, 2015 at 4:39 pm
Copy link
This worked perfect – thanks!
feelbeautifulboudoir · Member · Jan 31, 2015 at 1:57 am
Copy link
Hey is there any way to move the same overlay box to the right a bit? I dont want it centered anymore
designsimply · Member · Feb 14, 2015 at 5:25 pm
Copy link
To overlay box in the Sela theme home page as seen on the https://selademo.wordpress.com/ demo site is controlled with a rule for margins (“margin: 0 auto;”). You can override that using absolute positioning. Here is an example based on the demo site:
```
.front-page-content-area .with-featured-image {
	position: absolute;
	right: 0;
	top: 25%;
}
```
You would want to adjust the top value to what looks good on your own site.

You might also like this article about absolute positioning as background information:

Absolute Positioning Inside Relative Positioning
joannacohen · Member · Mar 2, 2015 at 7:24 pm
Copy link
can i remove the overlay box in the sela theme but keep the feature image? How can i do it?
staff-happychia · Staff · Mar 2, 2015 at 7:57 pm
Copy link
@joannacohen

Please try this CSS:
```
.front-page-content-area .with-featured-image {
display: none;
}
```
joannacohen · Member · Mar 3, 2015 at 5:56 pm
Copy link
thank you!!!!
raosullivan · Member · Mar 5, 2015 at 4:25 pm
Copy link
Is there any way to keep the white overlay box, but make it smaller?
thesacredpath · Member · Mar 6, 2015 at 6:25 pm
Copy link
@raosullivan, this reduces the top and bottom padding on the front page overlay box. See what you think.
```
.hero-container-inner .hentry {
    padding-top: 1px;
    padding-bottom: 1px;
}
```
cab5572 · Member · Mar 10, 2015 at 7:40 pm
Copy link
Is there anyway to make the feature image and box smaller so it doesn’t take up so much of the page?

Also — is there a way to switch the front page widgets to come before the feature image?

Thanks!! Very helpful stuff.
cab5572 · Member · Mar 10, 2015 at 7:41 pm
Copy link
I’d also like to see what it looked like if I make the overlay box looks like bigger? Thanks!
thesacredpath · Member · Mar 10, 2015 at 10:14 pm
Copy link
@cab5572, I’m not seeing a site under your username using the Sela theme, and I’m also not seeing that you have the Custom Design upgrade. The Custom Design upgrade would be required to make the featured section at the top of the home page in Sela smaller.

That said, making the image shorter would also make it narrower since the theme creates that image. You can give the following a try and see what you think. I’ve limited this change using a media query to screens/windows wider than 768px so that thing work well on tablets and phones.
```
@media screen and (min-width: 768px) {
.attachment-sela-hero-thumbnail {
    transform: scale(0.75);
}
.front-page-content-area .with-featured-image {
    padding-top: 1px;
    padding-bottom: 1px;
}
.front-page-content-area .with-featured-image .entry-header {
    margin-top: 0.6em;
}
.front-page-content-area .with-featured-image .entry-header .entry-title {
    margin-bottom: 0.2em;
}
}
```
You can try out and preview custom CSS before you buy as explained here.
alexschu · Member · Apr 5, 2015 at 1:38 am
Copy link
In regards to the overlay box:
I want to make the box wider, so I can write longer sentences before the text breaks to the next line. I found this solution:
```
.front-page-content-area .with-featured-image {
	width: 657px;
}
```
(Original width is 457px)

This works fine on my desktop. The problem is that on my smartphone the responsiveness of the overlay box seems to be gone. As a result, the page shows wider than my smartphone screen and I have to scroll horizontally.

Any idea how I can keep the responsiveness when changing the width of the overlay box?
alexschu · Member · Apr 5, 2015 at 2:14 am
Copy link
I found out that this has to do with an image that is within the text inside the overlay box. However, I am still missing a solution.

The website is: http://TownsendRoadPower.com
thesacredpath · Member · Apr 6, 2015 at 6:17 pm
Copy link
Hi @alexschu, it looks like you are using WordPress but you are not hosted here at WordPress.com. For self-hosted WordPress sites using Sela, I would suggest asking for help in the Sela Theme Support Forum at WordPress.org.

For general questions on self-hosted WordPress.org installations, visit http://wordpress.org/support/.

The differences between WordPress.com and WordPress.org.

I did take a quick look for you, and
.front-page-content-area.content-area
in the original Sela CSS is set as a percentage width. In almost all cases, responsive themes will either have a width specified as something like 100% or 85%, or alternately they will have a max-width setting. When you use a static dimension, such as 657px, then the browser will always interpret that as 657px. It will not scale it down for smaller screens. Use something like the following instead of what you had.
```
.front-page-content-area .with-featured-image {
width: 75%;
}
```
Or you can use the following which sets a maximum width of 657px and a width of 100%, and that will keep the responsive nature of the theme too.
```
.front-page-content-area .with-featured-image {
max-width: 657px;
width: 100%;
}
```
studiocorsaire · Member · May 16, 2015 at 2:51 pm
Copy link
Hi ! I tried to change the color of the overlaybox in black easily.
But I have one problem now :
– My text is transparent

I tried to make it white as it is explain in the first question, but the title desappear when Internet window is small (like in smartphone screen).

Can we change the opacity and the color between two screen size ?
– white text on top of black overlaybox (for a big size screen)
and
– black text on white backgroung

You can see the problem on my front page website : studiocorsaire.com

Thanks a lot!!!!
staff-happychia · Staff · May 17, 2015 at 7:50 am
Copy link
@studiocorsaire

Please post your question to WordPress.org forums at https://wordpress.org/support/forum/themes-and-templates.

This forum is for WordPress.com users only.

In case you aren’t aware, here is the difference between WordPress.com and WordPress.org: https://en.support.wordpress.com/com-vs-org/