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

Style Chooser/Preview Popup Transparency

bambua

Well-known member
#1
Has anyone found what template or style properties you can change the color/transparency of the Style chooser and the Preview popup for posts? I was looking for a bit today and changed a bunch of settings but I'm still not tracking it down.

Thanks all :)
 

bambua

Well-known member
#3
Admin CP -> Appearance -> Style Properties -> Options

> Overlay Mask Color
> Overlay Mask Opacity
Yeah I tried that and it still didn't do it, I think this is for the drop down overlays that come from the top of the screen. I'm talking about the tooltip boxes that pop up with the previews for the threads.
 

Jake Bunce

XenForo moderator
Staff member
#5
That looks like a transparent contentBackground.

Admin CP -> Appearance -> Style Properties -> Color Palette -> @contentBackground

Or this:

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

Code:
.primaryContent
{
    @property "primaryContent";
    background-color: @contentBackground;
    padding: 10px;
    border-bottom: 1px solid @primaryLighterStill;
    @property "/primaryContent";
}
 

bambua

Well-known member
#7
Thanks again Jake, that got me on the right track, it did just pull from the primary content color, which on my site is transparent. What I ended up having to do was go to the preview_tooltip template and put the style I wanted for the background directly in there with a style property on the div:

Code:
<div id="PreviewTooltip">
	<span class="arrow"><span></span></span>
	<div class="section">
		<div class="primaryContent previewContent" style="background-image: url(styles/default/SS/bg_trans.png);background-position:90% 0%;">
			<span class="PreviewContents">{xen:phrase loading}...</span>
		</div>
	</div>
</div>
Thanks again for your help it definitely helped me find it.
 

Jake Bunce

XenForo moderator
Staff member
#10
Admin CP -> Appearance -> Templates -> xenforo_overlay.css

It's the colors for the two border attributes:

Code:
.xenOverlay .section,
.xenOverlay .sectionMain
{
	border-radius: 20px;
	border: 20px solid @primaryDark;
	border: 20px solid rgba(3,42,70, 0.65);
	_border: 20px solid @primaryDark;
	padding: 0px;
	box-shadow: 0px 25px 50px rgba(0,0,0, 0.5);
}