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

How to smaller an overlay class

Discussion in 'XenForo Questions and Support' started by bogus, Mar 16, 2011.

  1. bogus

    bogus Guest

    Hello i wanted to use the OverlayTrigger to show up the Credits in my Style but the Layer width is to "big" (red border part) and after 3 Hours now i still have no idea how to smaller it.

    This is the Code, into the footer, i use
    Code:
    <div id="copyright">{xen:phrase xenforo_copyright} <a href="{xen:link 'Credits', '', 'selected='}" class="OverlayTrigger jumpMenuTrigger" data-cacheOverlay="true" title="Credits"><img src="styles/default/xenforo/widgets/quicknav.png" border="0"/></a></div>
    And this is what it looks like atm
    Unbenannt.jpg
    And this it should look like
    Unbenannt.jpg

    You can watch it live here
    Choose "repLica" in Style Chooser. Click to the arrow sign next to the xenForo copyrights
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    It's set in this css:
    Code:
    .xenOverlay {
    width: 690px;
    }
     
  3. bogus

    bogus Guest

    but if i change this, dont i change every overlayer then too?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Yes.

    So you'll have to create a new class for your code or apply the width styling inline.
     
  5. bogus

    bogus Guest

    So if i create class="OverlayTrigger id="credits"
    and add in EXTRA.css

    Code:
    .overlay #credits {
    width: 230px;
    }
    will that work?
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    Only one way to find out ;)
     
  7. bogus

    bogus Guest

    (y)

    No Sir, its not....I have no idea anymore how i can get that *** thing smaller :coffee:
     
  8. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Try using inline styling like Brogan suggested.

    I pulled the source code from your Credits page and did some testing. Try this:

    Admin CP -> Appearance -> Templates -> keving_credits

    Add a width to the first div, like this:

    Code:
    <div class="section" style="width: 300px;">
    	<div id="jumpMenu">
    		<div class="jumpMenuColumn">
                    
    		        <center><a href="http://www.google.de" target="_blank" ><b>Test</b></a></center>
    
    <center><a href="http://www.google.de" target="_blank" ><b>Test2</b></a></center>
    	        
    		</div>
    	</div>
    	<div class="sectionFooter overlayOnly"><a class="button primary OverlayCloser">Close</a></div>
    </div>
    
     

Share This Page