Overlay Question

toodlez

Active member
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)
 

toodlez

Active member
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

XenForo moderator
Staff member
For the Contact Us overlay, this is the controlling CSS for the transparency:

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

Rich (BB code):
.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

XenForo moderator
Staff member
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

Rich (BB code):
.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};
}
 
Top