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

[otto]

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:

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


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/

 

[Milano]

Wrap your template in

<div class="section">
// Your template here
</div>

 

[otto]

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

 

[otto]

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.


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.

 

[Valhalla]

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]

Hello,

my page template:

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



Realy no one can help?

 

[Milano]

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]

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]

Ok, i have played around a litle bit and i have found my solution - and its simple:

<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

 

[abdfahim]

View attachment 81323

I have been looking for a solution for this, where I don't want that extra title and the cross button.