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
    <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
    And this it should look like

    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:
    .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


    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

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

    Brogan XenForo Moderator Staff Member

    Only one way to find out ;)
  7. bogus

    bogus Guest


    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:

    <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 class="sectionFooter overlayOnly"><a class="button primary OverlayCloser">Close</a></div>

Share This Page