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

XF 1.3 How do i open a singel internal xenforo page in a overlay box?

otto

Well-known member
#1
Hello,

i will open a new generated xenforo page ( ACP > Aplications > Elements > New page ) in a Overlay. I hav do this over the link i call this page:

PHP:
<a href="pages/new_pagen_a/" class="OverlayTrigger callToAction"><span>button name to call the new page</span></a>
It now opens als overlay, but uses the complete screen.
overlay_1.jpg

What i must do (CSS ?) to fit this overlay in a "box" ? Like this example: http://xenforo.com/community/resources/change-login-bar-to-an-overlay.480/
 
Last edited:

otto

Well-known member
#3
Sorry, i dont understand what you mean.

All pages in xenfor have only one template and i will only open one page as an overlay. When i do what you say than will affect this all generated pages?

See next post...
 
Last edited:

otto

Well-known member
#4
Ok, i found it - you mean directly the page template how i put the content in. Thanks. :)

But this brings only a 20px frame around my content.
overlay_2.jpg

So, how can i now set the content background color for this overlay a litle bit darker? And the footer is also not inner the box.
 
Last edited:

Valhalla

Well-known member
#5
Be sure of what content you have in the template that you are wishing to display in the overlay.

Often it won't display correctly in the overlay if you have additional DIV elements.
 

otto

Well-known member
#6
Hello,

my page template:
HTML:
<div class="section">
<ul>
      <li><span style="font-family: Arial;"><a target="_top" href="http://www.zetor-forum.de/forum/forums/support.2/create-thread"><span

              style="font-weight: bold;">Support</span></a><br>
        </span>
        <dl>
          <dd><span style="font-family: Arial;">Fragen zur Benutzung von, oder
              Kritik an - Zetor-Forum.de</span></dd>
        </dl>
      </li>
      <span style="font-family: Arial;"> </span>
      <li><span style="font-family: Arial;"><a target="_top" href="http://www.zetor-forum.de/forum/forums/vorstellungen.14/create-thread"><span

              style="font-weight: bold;">Vorstellungen</span></a><br>
        </span>
        <dl>
          <dd><span style="font-family: Arial;">Dich und Deine(n) Zetor in Wort
              und Bild vorstellen</span></dd>
        </dl>
        <span style="font-family: Arial;"><br>
        </span> </li>
      <span style="font-family: Arial;"> </span>
      <li><span style="font-family: Arial;"><a target="_top" href="http://www.zetor-forum.de/forum/forums/zetor-allgemein.12/create-thread"><span

              style="font-weight: bold;">Zetor allgemein</span></a><br>
        </span>
        <dl>
          <dd><span style="font-family: Arial;">Themen die sonst nirgendwo
              passen würden</span></dd>
        </dl>
      </li>
      <span style="font-family: Arial;"> </span>
      <li><span style="font-family: Arial;"><a target="_top" href="http://www.zetor-forum.de/forum/forums/zbrojovka-zetor.4/create-thread"><span

              style="font-weight: bold;">Zbrojovka / Zetor</span></a><br>
        </span>
        <dl>
          <dd><span style="font-family: Arial;">Zetor 15, 25, Super, 50 Super</span></dd>
        </dl>
      </li>
      <span style="font-family: Arial;"> </span>
      <li><span style="font-family: Arial;"><a target="_top" href="http://www.zetor-forum.de/forum/forums/zetor-ur-1.5/create-thread"><span

              style="font-weight: bold;">Zetor UR 1</span></a><br>
        </span>
        <dl>
          <dd><span style="font-family: Arial;">Zetor 2011 ... bis Zetor 7340
              Major</span></dd>
        </dl>
      </li>
      <span style="font-family: Arial;"> </span>
      <li><span style="font-family: Arial;"><a target="_top" href="http://www.zetor-forum.de/forum/forums/zetor-ur-2.10/create-thread"><span

              style="font-weight: bold;">Zetor UR 2</span></a><br>
        </span>
        <dl>
          <dd><span style="font-family: Arial;">Zetor Crystal 8011 ... bis
              Zetor/ZTS 16245</span></dd>
        </dl>
      </li>
      <span style="font-family: Arial;"> </span>
      <li><span style="font-family: Arial;"><a target="_top" href="http://www.zetor-forum.de/forum/forums/zetor-ur-3-und-neuer.11/create-thread"><span

              style="font-weight: bold;">Zetor UR 3</span></a><br>
        </span>
        <dl>
          <dd><span style="font-family: Arial;">Zetor 7520 ... Forterra, Proxima
              und Maxterra</span></dd>
        </dl>
        <span style="font-family: Arial;"><br>
        </span> </li>
      <span style="font-family: Arial;"> </span>
      <li><span style="font-family: Arial;"><a target="_top" href="http://www.zetor-forum.de/forum/forums/andere-marken.38/create-thread"><span

              style="font-weight: bold;">Andere Marken</span></a><br>
        </span>
        <dl>
          <dd><span style="font-family: Arial;">Traktoren aller anderen Marken</span></dd>
        </dl>
      </li>
      <span style="font-family: Arial;"> </span>
      <li><span style="font-family: Arial;"><a target="_top" href="http://www.zetor-forum.de/forum/forums/ger%C3%A4te-zubeh%C3%B6r.21/create-thread"><span

              style="font-weight: bold;">Geräte und Zubehör</span></a><br>
        </span>
        <dl>
          <dd><span style="font-family: Arial;">Einbau-, Anbau-, und
              Anhängegeräte sowie Transportanhänger</span></dd>
        </dl>
      </li>
      <span style="font-family: Arial;"> </span>
      <li><span style="font-family: Arial;"><a target="_top" href="http://www.zetor-forum.de/forum/forums/werkstatt-haus-und-hof.33/create-thread"><span

              style="font-weight: bold;">Werkstatt, Haus und Hof</span></a><br>
        </span>
        <dl>
          <dd><span style="font-family: Arial;">Alles rund um Werkzeuge,
              Elektrogeräte, Bauarbeiten usw.</span></dd>
        </dl>
      </li>
      <span style="font-family: Arial;"> </span>
      <li><span style="font-family: Arial;"><a target="_top" href="http://www.zetor-forum.de/forum/forums/veranstaltungen-treffen-termine.41/create-thread"><span

              style="font-weight: bold;">Veranstaltungen, Treffen und Termine</span></a><br>
        </span>
        <dl>
          <dd><span style="font-family: Arial;">Bekanntgabe oder Berichte zu
              Veranstaltungen</span></dd>
        </dl>
      </li>
      <span style="font-family: Arial;"> </span>
      <li><span style="font-family: Arial;"><a target="_top" href="http://www.zetor-forum.de/forum/forums/plauderecke.34/create-thread"><span

              style="font-weight: bold;">Plauderecke</span></a><br>
        </span>
        <dl>
          <dd><span style="font-family: Arial;">Quer Beet also vom Arztbesuch
              über Politik bis einfach nur mal so</span></dd>
        </dl>
      </li>
      <span style="font-family: Arial;"> </span>
      <li><span style="font-family: Arial;"><a target="_top" href="http://www.zetor-forum.de/forum/forums/suchen.46/create-thread"><span

              style="font-weight: bold;">Suchen</span></a><br>
        </span>
        <dl>
          <dd><span style="font-family: Arial;">Suchanfrage erstellen</span></dd>
        </dl>
      </li>
      <span style="font-family: Arial;"> </span>
      <li><span style="font-family: Arial;"><a target="_top" href="http://www.zetor-forum.de/forum/forums/anbieten.13/create-thread"><span

              style="font-weight: bold;">Anbieten</span></a><br>
        </span>
        <dl>
          <span style="font-family: Arial;"> </span><dd><span style="font-family: Arial;">Angebot
              erstellen</span></dd>
        </dl>
      </li>
    </ul>
</div>

You see - simple html code.
But the overlay did not run like it should. :(

overlay_2.jpg

Realy no one can help?
 

Milano

Well-known member
#7
Because overlay is used to display only part of your page content without all html, head, body, footer tags... (in this case is your code above). I guess when you open a xenforo page in a Overlay, it return full html page content, therefore overlay did not display like it should.
 

otto

Well-known member
#8
Thanks for your answer.

Ok - if so, i think it will be th better way when i make a external HTML file with my code above and call this with the overlaytrigger class.

I will testing this ...
 

otto

Well-known member
#9
Ok, i have played around a litle bit and i have found my solution - and its simple:

HTML:
<div class="section"  style="background: rgba(48, 48, 48, .6)">
This gives a grey background with a opacity - "rgba" is the key... :)

Edit: this works for a internal page in a overlay