• 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

B

bogus

Guest
#1
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
 
B

bogus

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

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

Jake Bunce

XenForo moderator
Staff member
#8
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>