Overlay Question

[thunderup]

Is there a way to make my border #000 as the color, with a 50% opacity? While keeping the content area of the overlay a solid color still? (for instance #FFF)

 

[Jake Bunce]

Overlay?



It doesn't have a border. You want to add one?

 

[dtmcl]

I think he may be referring to what you can see when clicking contact us in the footer

 

[thunderup]

Overlay?

View attachment 20434

It doesn't have a border. You want to add one?

I'm talking about the overlay when you click logout, or contact us, etc.
Not the membercard.

I have a solid background, I want to add a transparent border to it... like how this edit post overlay looks

 

[thunderup]

I'm talking about the overlay when you click logout, or contact us, etc.
Not the membercard.

I have a solid background, I want to add a transparent border to it... like how this edit post overlay looks

Which by the way, where is the edit-post overlay styling located?

 

[Jake Bunce]

For the Contact Us overlay, this is the controlling CSS for the transparency:

Admin CP -> Appearance -> Templates -> xenforo_overlay.css

.xenOverlay .formOverlay
{
	@property "formOverlay";
	color: #eee;
	background: rgba(0,0,0, 0.75);
	padding: 15px 25px;
	border: 20px solid rgba(0,0,0, 0.25);
	border-radius: 20px;
	box-shadow: 0px 25px 50px rgba(0,0,0, 0.5);
	_zoom: 1;
	@property "/formOverlay";
}

But you can't have a border that is less opaque than the background. In my testing I found that the border overlays the background color, so you can have more opacity but not less.

 

[Jake Bunce]

Which by the way, where is the edit-post overlay styling located?

This is the content template:

Admin CP -> Appearance -> Templates -> post_edit_inline

This is the CSS for that border color:

Admin CP -> Appearance -> Templates -> xenforo_overlay.css

.xenOverlay .section,
.xenOverlay .sectionMain
{
	@property "overlaySection";
	padding: 0px;
	border: 20px solid @primaryDarker;
	border-radius: 20px;
	box-shadow: 0px 25px 50px rgba(0,0,0, 0.5);
	@property "/overlaySection";
	
	border-color: {xen:helper rgba, @overlaySection.border-color, 0.5};
}

 

[thunderup]

Top notch stuff, as per usual, Jake!