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

Overlay Question

Discussion in 'Styling and Customization Questions' started by toodlez, Oct 21, 2011.

  1. toodlez

    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)
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Overlay?

    Screen shot 2011-10-22 at 12.39.47 AM.png

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

    ShadyX Well-Known Member

    I think he may be referring to what you can see when clicking contact us in the footer :)
     
    toodlez likes this.
  4. toodlez

    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
     
    ShadyX likes this.
  5. toodlez

    toodlez Active Member

    Which by the way, where is the edit-post overlay styling located?
     
  6. Jake Bunce

    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

    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.
     
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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};
    }
    
     
  8. toodlez

    toodlez Active Member

    Top notch stuff, as per usual, Jake!
     

Share This Page