How to smaller an overlay class

[bogus]

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

 

[Paul B]

It's set in this css:

.xenOverlay {
width: 690px;
}

 

[bogus]

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

 

[Paul B]

Yes.

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

 

[bogus]

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

.overlay #credits {
width: 230px;
}

will that work?

 

[Paul B]

Only one way to find out

 

[bogus]

No Sir, its not....I have no idea anymore how i can get that *** thing smaller

 

[Jake Bunce]

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