Portlets

General Plone elements to copy into theme templates.

Event Portlet

../../../_images/portletevents.png
<dl class="portlet portletEvents">
    <dt class="portletHeader">
        <span class="portletTopLeft"></span>
        <a href="events" class="tile">Termine</a>
        <span class="portletTopRight"></span>
    </dt>

    <dd class="portletItem odd">
      <a href="events/quis-aute-iure-reprehenderit"
        class="tile"
        title="Duis autem vel eum iriure dolor in.">
            Quis aute iure reprehenderit
      </a>
      <span class="portletItemDetails">
        <span>20.03.2012 - 21.03.2012</span>
      </span>
    </dd>

    <dd class="portletItem even">
      <a href="events/world-plone-day-2012"
        class="tile"
        title="Der World Plone Day 2012 findet am 25. April weltweit statt.">
        World Plone Day 2012
      </a>
      <span class="portletItemDetails">
        <span>25.04.2012 10:00 - 17:00</span>
        <span> — Inqbus GmbH &amp; Co. KG, Karl-Heine-Str. 99, Leipzig</span>
      </span>
    </dd>

    <dd class="portletFooter">
        <a href="events" class="tile">Kommende Termine…</a>
        <span class="portletBottomLeft"></span>
        <span class="portletBottomRight"></span>
    </dd>
</dl>

News Portlet

../../../_images/portletnews.png
<dl class="portlet portletNews">
  <dt class="portletHeader">
    <span class="portletTopLeft"></span>
    <a href="news" class="tile">Nachrichten</a>
    <span class="portletTopRight"></span>
  </dt>

  <dd class="portletItem odd">
    <a href="news/lorem-ipsum-sed-do"
      class="tile"
      title="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
      Lorem ipsum sed do
    </a>
    <span class="portletItemDetails">19.03.2012</span>
  </dd>

  <dd class="portletItem even">
    <a href="news/lorem-ipsum-dolor-sit-amet"
      class="tile"
      title="Lorem ipsum dolor sit amet.">
      Lorem ipsum dolor sit amet
    </a>
    <span class="portletItemDetails">19.03.2012</span>
  </dd>

  <dd class="portletFooter">
    <span class="portletBottomLeft"></span>
    <a href="news">Weitere Nachrichten…</a>
    <span class="portletBottomRight"></span>
  </dd>
</dl>

Recent Portlet

../../../_images/portletrecent.png
<dl class="portlet portletRecent">
  <dt class="portletHeader">
    <span class="portletTopLeft"></span>
    <a href="recently_modified">Aktuelle Änderungen</a>
    <span class="portletTopRight"></span>
  </dt>

  <dd class="portletItem odd">
    <a href="events/world-plone-day-2012/view"
      class="state-published tile"
      title="Der World Plone Day 2012 findet am 25. April weltweit statt.">
      World Plone Day 2012
      <span class="portletItemDetails">19.03.2012</span>
    </a>
  </dd>

  <dd class="portletItem even">
    <a href="events/quis-aute-iure-reprehenderit/view"
      class="state-published tile"
      title="Duis autem vel eum iriure dolor in hendrerit.">
      Quis aute iure reprehenderit
      <span class="portletItemDetails">19.03.2012</span>
    </a>
  </dd>

  <dd class="portletFooter">
      <a href="recently_modified" class="tile">Alle Änderungen…</a>
      <span class="portletBottomLeft"></span>
      <span class="portletBottomRight"></span>
  </dd>

</dl>

RSS Portlet

../../../_images/portletrss.png
<dl class="portlet portletRss">
  <dt class="portletHeader">
    <span class="portletTopLeft"></span>
    <a href="http://inqbus-hosting.de" class="tile">Dokumentation - Übersicht</a>
    <span class="portletTopRight"></span>
  </dt>
  <dd class="portletItem odd">
    <a href="" class="tile">
      Plone: Portlets in Diazo Regel filtern
      <span class="portletItemDetails">
        27.02.2012
      </span>
    </a>
  </dd>

  <dd class="portletItem even">
    <a href="" class="tile">
      Solved: IPMI interface unsuable due to vanished gateway MAC
      <span class="portletItemDetails">
        23.02.2012
      </span>
    </a>
  </dd>

  <dd class="portletFooter">
    <a href="http://inqbus-hosting.de">Mehr…</a>
    <span class="portletBottomLeft"></span>
    <span class="portletBottomRight"></span>
  </dd>
</dl>

Collection Portlet

../../../_images/portletcollection.png
<dl class="portlet portletCollection portlet-collection-kollektionsportlet">
  <dt class="portletHeader">
    <span class="portletTopLeft"></span>
    <a href="news/aggregator">
      <span>Kollektionsportlet</span>
    </a>
    <span class="portletTopRight"></span>
  </dt>

  <dd class="portletItem odd">
    <a href="news/lorem-ipsum-sed-do"
      class="tile"
      title="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
      Lorem ipsum sed do
      <span class="portletItemDetails">19.03.2012</span>
    </a>
  </dd>

  <dd class="portletItem even">
    <a href="news/lorem-ipsum-dolor-sit-amet"
      class="tile"
      title="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
      Lorem ipsum dolor sit amet
      <span class="portletItemDetails">19.03.2012</span>
    </a>
  </dd>

  <dd class="portletFooter">
    <span class="portletBottomLeft"></span>
    <span>
    <a href="news/aggregator">Weiter…</a>
    </span>
    <span class="portletBottomRight"></span>
  </dd>
</dl>

Calendar Portlet

../../../_images/portletcalendar.png
<dl class="portlet portletCalendar">
  <dt class="portletHeader">
    <span class="portletTopLeft"></span>
      <a href="?month:int=2&amp;year:int=2012&amp;orig_query="
        rel="nofollow"
        title="Vorheriger Monat"
        id="calendar-previous"
        class="calendarPrevious">«</a>
        März 2012
      <a href="?month:int=4&amp;year:int=2012&amp;orig_query="
        rel="nofollow"
        title="Nächster Monat"
        id="calendar-next"
        class="calendarNext">»</a>
        <span class="portletTopRight"></span>
  </dt>
  <dd class="portletItem">
    <table class="ploneCalendar" summary="Kalender">
      <caption class="hiddenStructure">März</caption>
      <thead>
        <tr class="weekdays">
          <th scope="col">Mo</th>
          <th scope="col">Di</th>
          <th scope="col">Mi</th>
          <th scope="col">Do</th>
          <th scope="col">Fr</th>
          <th scope="col">Sa</th>
          <th scope="col">So</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
          <td>11</td>
        </tr>
        <tr>
          <td>12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
          <td>16</td>
          <td>17</td>
          <td>18</td>
        </tr>
        <tr>
          <td class="todaynoevent"><strong>19</strong></td>
          <td>20</td>
          <td>21</td>
          <td>22</td>
          <td>23</td>
          <td>24</td>
          <td>25</td>
        </tr>
        <tr>
          <td>26</td>
          <td>27</td>
          <td>28</td>
          <td>29</td>
          <td>30</td>
          <td>31</td>
          <td></td>
        </tr>
      </tbody>
    </table>
    <span class="portletBottomLeft"></span>
    <span class="portletBottomRight"></span>
  </dd>
</dl>

Login Portlet

../../../_images/portletlogin.png
<div class="portletWrapper">
  <dl class="portlet portletLogin">
    <dt class="portletHeader">
      <span class="portletTopLeft"></span>
      <a class="tile" href="">Log in</a>
      <span class="portletTopRight"></span>
    </dt>
    <dd class="portletItem odd">
      <form method="post" id="loginform" action="">
        <div>
          <input type="hidden" value="1" name="form.submitted">
          <input type="hidden" value="" name="came_from">
          <input type="hidden" value="0" id="js_enabled" name="js_enabled">
          <input type="hidden" value="" id="cookies_enabled" name="cookies_enabled">
          <input type="hidden" value="" id="login_name" name="login_name">
          <input type="hidden" value="0" id="pwd_empty" name="pwd_empty">
        </div>
        <div class="field">
          <label for="__ac_name">Login Name</label><br>
          <input type="text"
            id="__ac_name"
            value=""
            name="__ac_name"
            alt="Login Name"
            size="10">
        </div>
        <div class="field">
          <label for="__ac_password">Password</label><br>
          <input type="password"
            id="__ac_password"
            name="__ac_password"
            alt="Password"
            size="10">
        </div>
        <div style="display:none" class="cookiesMessage portalMessage">
          Cookies are not enabled. You must enable cookies before you can log in.
        </div>
        <div class="formControls">
          <input type="submit" alt="Log in" value="Log in" name="submit" class="context">
        </div>
      </form>
    </dd>
    <dd class="portletItem even">
      <a class="tile" href=""><img width="16" height="16" title="" alt="" src="images/info_icon.gif">Forgot your password?</a>
    </dd>
  </dl>
</div>

Static Text Portlet

../../../_images/portletstatictext.png
<dl class="portlet portletStaticText portlet-static-lorem-ipsum-dolor-sit-amet">
   <dt class="portletHeader">
      <span class="portletTopLeft"></span>
      <span>
         Lorem ipsum dolor sit amet
      </span>
      <span class="portletTopRight"></span>
   </dt>
   <dd class="portletItem odd">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco
         laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <span class="portletBottomLeft"></span>
      <span class="portletBottomRight"></span>
   </dd>
</dl>

Search Portlet

../../../_images/portletsearch.png
<dl class="portlet portletSearch">

  <dt class="portletHeader">
      <span class="portletTopLeft"></span>
      <a class="tile" href="@@search">Suche</a>
      <span class="portletTopRight"></span>
  </dt>

    <dd class="portletItem">
      <form id="livesearch1"
        action="@@search">
        <div class="LSBox">
          <input class="searchField portlet-search-gadget"
            name="SearchableText"
            type="text"
            size="15"
            title="Website durchsuchen"
            placeholder="Website durchsuchen"
            autocomplete="off">
          <input class="searchButton" type="submit" value="Suche">

          <div class="LSResult" style="">
            <div class="LSShadow"></div>
          </div>
        </div>
      </form>
      <div class="visualClear"><!-- --></div>
    </dd>

    <dd class="portletFooter">
        <a href="@@search" class="tile">Erweiterte Suche…</a>
        <span class="portletBottomLeft"></span>
        <span class="portletBottomRight"></span>
    </dd>
</dl>

Newsletter Portlet

Portlet from Products.EasyNewsletter extension.

<dl class="portlet portletNewsletterSubscriber">
  <dt class="portletHeader">
    <span class="portletTopLeft"></span>
    <span>Newsletter</span>
    <span class="portletTopRight"></span>
  </dt>

  <dd class="portletItem lastItem">
    <form action="@@register-subscriber">
      <input type="hidden"
          name="newsletter"
          value="/newsletter">

      <select class="easynewsletter_text"
          id="salutation"
          name="salutation">
        <option value="">Anrede wählen...</option>
        <option value="ms">Frau</option>
        <option value="mr">Herr</option>
      </select>

      <input class="easynewsletter_text"
          onclick="this.value=''"
          name="fullname"
          value="Vorname Nachname">
      <input class="easynewsletter_text"
          onclick="this.value=''"
          name="subscriber"
          value="Ihre E-Mail">
      <input class="standalone easynewsletter_button"
          type="submit"
          value="Abonnieren">
    </form>

    <span class="portletBottomLeft"></span>
    <span class="portletBottomRight"></span>
  </dd>
</dl>