• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Overlay Question

toodlez

Active member
#1
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
#5
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
#6
For the Contact Us overlay, this is the controlling CSS for the transparency:

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

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
#7
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

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};
}