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

Discussion in 'Styling and Customization Questions' started by otto, Aug 20, 2014.

  1. otto

    otto Well-Known Member

    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: Aug 20, 2014
  2. Milano

    Milano Well-Known Member

    Wrap your template in
    HTML:
    <div class="section">
    // Your template here
    </div>
     
  3. otto

    otto Well-Known Member

    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: Aug 20, 2014
  4. otto

    otto Well-Known Member

    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: Aug 20, 2014
  5. Valhalla

    Valhalla Well-Known Member

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

    otto Well-Known Member

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

    Milano Well-Known Member

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

    otto Well-Known Member

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

    otto Well-Known Member

    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
     

Share This Page