[3.2] [erledigt] prosilver: search-box: rechts oben: in die navbar_header.html verschieben

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.1/3.2, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
ZNC
Mitglied
Beiträge: 148
Registriert: 21.05.2014 13:48
Wohnort: Köln

[3.2] [erledigt] prosilver: search-box: rechts oben: in die navbar_header.html verschieben

Beitragvon ZNC » 27.11.2017 08:21

[3.2] prosilver: search-box: rechts oben: in die navbar_header.html verschieben

Die forenweite Suche ist rechts oben in der overall_header.html platziert (verkürzte Darstellung):

Code: Alles auswählen

<!-- Alle Foren durchsuchen -->
<!-- id: wrap > id: page-header > class: headerbar > class: inner > id: search-box -->
<div id="wrap" class="wrap">
   <div id="page-header">
      <div class="headerbar" role="banner">
         <div class="inner">
            <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
            <div id="search-box" class="search-box search-header" role="search">
               <form action="./search.php" method="get" id="search">
                  <fieldset>
                     <input name="keywords" id="keywords" type="search" maxlength="128" title="Suche nach Wörtern" class="inputbox search tiny" size="20" value="" placeholder="Suche…" />
                     <button class="button button-search" type="submit" title="Suche">
                        <i class="icon fa-search fa-fw" aria-hidden="true"></i>
                        <span class="sr-only">Suche</span>
                     </button>
                     <a href="./search.php" class="button button-search-end" title="Erweiterte Suche">
                        <i class="icon fa-cog fa-fw" aria-hidden="true"></i>
                        <span class="sr-only">Erweiterte Suche</span>
                     </a>
                  </fieldset>
               </form>
            </div>
            <!-- ENDIF -->
         </div>
      </div>
   </div>
</div>

Nunmehr möchte ich diesen Bereich rechts auf die Zeile Forenübersicht in die navbar_header.html verschieben. Diese ist bereits dort mit einer Lupe verankert und wird sichtbar, sobald man den Viewport verkleinert. Hierzu habe ich folgende Frage: Welche Bewandtnis hat es mit der If-Klausel "IF S_DISPLAY_SEARCH and not S_IN_SEARCH"?
Zuletzt geändert von ZNC am 27.11.2017 11:32, insgesamt 1-mal geändert.
Keine Witze über ((58 - x : 2) - y * x) * z * 4 - 1 * x + (z * x - 1) + y = jährige und ältere, denn auch Euch wird es treffen. PS: x = √64 und y = √9 und z = 1 : (0.5 * 4)

Benutzeravatar
Kirk
Supporter
Supporter
Beiträge: 5492
Registriert: 24.05.2010 08:31
Kontaktdaten:

Re: [3.2] prosilver: search-box: rechts oben: in die navbar_header.html verschieben

Beitragvon Kirk » 27.11.2017 09:07

Hallo
Für sowas gibt es eine Extension: https://www.phpbb.com/community/viewtop ... &t=2414701

ZNC
Mitglied
Beiträge: 148
Registriert: 21.05.2014 13:48
Wohnort: Köln

Re: [3.2] prosilver: search-box: rechts oben: in die navbar_header.html verschieben

Beitragvon ZNC » 27.11.2017 10:19

Danke Kirk, ich möchte die Anzahl der Extensions so gering als möglich halten. Da dies das Layout betrifft und ich einige Änderungen an meinem prosilver-Style sowieso vornehme, kann ich dies genauso in einem Rutsch selber (dokumentiert, so das es später nachvollzogen werden kann) händisch anpassen.

Kann die If-Clause mir irgendwie dazwischen funken? Wofür steht diese bzw. wann greift die?
Keine Witze über ((58 - x : 2) - y * x) * z * 4 - 1 * x + (z * x - 1) + y = jährige und ältere, denn auch Euch wird es treffen. PS: x = √64 und y = √9 und z = 1 : (0.5 * 4)

Benutzeravatar
Dr.Death
Moderator
Moderator
Beiträge: 15341
Registriert: 23.04.2003 08:22
Wohnort: Xanten
Kontaktdaten:

Re: [3.2] prosilver: search-box: rechts oben: in die navbar_header.html verschieben

Beitragvon Dr.Death » 27.11.2017 10:42

Hi,

das heißt kurz übersetzt:

S_DISPLAY_SEARCH and not S_IN_SEARCH

Wenn du als Betrachter die Berechtigung zur Suche hast (S_DISPLAY_SEARCH) und Du dich nicht innerhalb der Suche befindest (and not S_IN_SEARCH), dann zeige das Suchfeld an.

ZNC
Mitglied
Beiträge: 148
Registriert: 21.05.2014 13:48
Wohnort: Köln

Re: [3.2] [erledigt] [3.2] prosilver: search-box: rechts oben: in die navbar_header.html verschieben

Beitragvon ZNC » 27.11.2017 11:32

Danke :) mein Workaround sieht folgendermaßen aus:

Ziel: Suchformular auf der Homepage von oben rechts neben dem Logo auf die Zeile "Foren-Übersicht" umsetzen:

Aus dem overall_header.html unterhalb der Bereiche id: wrap > id: page-header > class: headerbar > class: inner folgenden Inhalt komplett auschneiden und somit löschen:

Code: Alles auswählen

<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="search-box" class="search-box search-header" role="search">
   <form action="{U_SEARCH}" method="get" id="search">
      <fieldset>
         <input name="keywords" id="keywords" type="search" maxlength="128"
         title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20"
         value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
         <button class="button button-search" type="submit" title="{L_SEARCH}">
            <i class="icon fa-search fa-fw" aria-hidden="true"></i>
            <span class="sr-only">{L_SEARCH}</span>
         </button>
         <a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
            <i class="icon fa-cog fa-fw" aria-hidden="true"></i>
            <span class="sr-only">{L_SEARCH_ADV}</span>
         </a>
         {S_SEARCH_HIDDEN_FIELDS}
      </fieldset>
   </form>
</div>
<!—ENDIF -->


Den ausgeschnittenen Bereich in die Datei navbar_header.html innerhalb <ul id="nav-breadcrumbs" class="nav-breadcrumbs linklist navlinks" role="menubar"> hinter <!-- EVENT overall_header_breadcrumbs_after --> einfügen:

Code: Alles auswählen

<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<li id="search-box" class="rightside search-box search-header" role="search">
   <form action="{U_SEARCH}" method="get" id="search">
      <fieldset>
         <input name="keywords" id="keywords" type="search" maxlength="128"
         title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20"
         value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
         <button class="button button-search" type="submit" title="{L_SEARCH}">
            <i class="icon fa-search fa-fw" aria-hidden="true"></i>
            <span class="sr-only">{L_SEARCH}</span>
         </button>
         <a href="{U_SEARCH}" class="button button-search-end"
         title="{L_SEARCH_ADV}">
            <i class="icon fa-cog fa-fw" aria-hidden="true"></i>
            <span class="sr-only">{L_SEARCH_ADV}</span>
         </a>
         {S_SEARCH_HIDDEN_FIELDS}
      </fieldset>
   </form>
</li>
<!-- ENDIF -->

Bitte beachten: das DIV mit der ID search-box zu einem LI und auch das DIV-Endetag zum LI-Endetag ändern. Die class-Angabe mit rightside ergänzen.

Das Layout dann mit CSS auf die eigenen Bedürfnisse glatt ziehen. Tipp: .search-header {margin:0;}
Keine Witze über ((58 - x : 2) - y * x) * z * 4 - 1 * x + (z * x - 1) + y = jährige und ältere, denn auch Euch wird es treffen. PS: x = √64 und y = √9 und z = 1 : (0.5 * 4)


Zurück zu „Styles, Templates und Grafiken“