[3.2] "Action-Bar" oben und unten verändern

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.
peter2019
Mitglied
Beiträge: 17
Registriert: 08.10.2019 22:31

[3.2] "Action-Bar" oben und unten verändern

Beitragvon peter2019 » 09.10.2019 18:51

Guten Abend,

wie lässt sich denn die obere Action-Zeile über dem Forum ("Neues Thema", Suchfunktion, "Themen als gelesen markieren • 4 Themen • Seite 1 von 1")
ausblenden/nicht anzeigen und die untere Action-Zeile unter dem Forum so modifizieren, dass hinter "Neues Thema" und den Sortieroptionen die Suchfunktion erscheint?

Vermutlich nicht via Mondifikation in einer common.css(?), sondern eher in viewforum.php, oder?

Danke im Voraus!

Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 1526
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

Re: [3.2] "Action-Bar" oben und unten verändern

Beitragvon Tastenplayer » 09.10.2019 20:40

wie lässt sich denn die obere Action-Zeile über dem Forum ("Neues Thema", Suchfunktion, "Themen als gelesen markieren • 4 Themen • Seite 1 von 1") ausblenden/nicht anzeigen
Vermutlich nicht die korrekteste, aber die schnellste Lösung und man muss nicht in der html Code löschen oder ändern:

common.css oder deinstyle.css

Code: Alles auswählen

.action-bar.bar-top {
    display: none;
}


untere Action-Zeile unter dem Forum so modifizieren, dass hinter "Neues Thema" und den Sortieroptionen die Suchfunktion erscheint?

viewforum_body.html - Zeilen 54-69
Ausschneiden

Code: Alles auswählen

   <!-- IF S_DISPLAY_SEARCHBOX -->
      <div class="search-box" role="search">
         <form method="get" id="forum-search" action="{S_SEARCHBOX_ACTION}">
         <fieldset>
            <input class="inputbox search tiny" type="search" name="keywords" id="search_keywords" size="20" placeholder="{L_SEARCH_FORUM}" />
            <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_LOCAL_HIDDEN_FIELDS}
         </fieldset>
         </form>
      </div>
   <!-- ENDIF -->


Suche

Code: Alles auswählen

         <!-- INCLUDE display_options.html -->
         </form>
      <!-- ENDIF -->


Füge den zuvor ausgeschnittenen Code ein

Code: Alles auswählen

   <!-- IF S_DISPLAY_SEARCHBOX -->
      <div class="search-box" role="search">
         <form method="get" id="forum-search" action="{S_SEARCHBOX_ACTION}">
         <fieldset>
            <input class="inputbox search tiny" type="search" name="keywords" id="search_keywords" size="20" placeholder="{L_SEARCH_FORUM}" />
            <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_LOCAL_HIDDEN_FIELDS}
         </fieldset>
         </form>
      </div>
   <!-- ENDIF -->

[ externes Bild ]

Das Gleiche in viewtopic_body.html
Ausschneiden ungefähr Zeile 48-63

Code: Alles auswählen

   <!-- IF S_DISPLAY_SEARCHBOX -->
      <div class="search-box" role="search">
         <form method="get" id="topic-search" action="{S_SEARCHBOX_ACTION}">
         <fieldset>
            <input class="inputbox search tiny"  type="search" name="keywords" id="search_keywords" size="20" placeholder="{L_SEARCH_TOPIC}" />
            <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_LOCAL_HIDDEN_FIELDS}
         </fieldset>
         </form>
      </div>
   <!-- ENDIF -->


Suche

Code: Alles auswählen

   <!-- EVENT viewtopic_dropdown_bottom_custom -->

   <!-- IF .pagination or TOTAL_POSTS -->

Füge in der mitte den oben ausgeschnittenen code ein

Code: Alles auswählen

      <!-- IF S_DISPLAY_SEARCHBOX -->
      <div class="search-box" role="search">
         <form method="get" id="topic-search" action="{S_SEARCHBOX_ACTION}">
         <fieldset>
            <input class="inputbox search tiny"  type="search" name="keywords" id="search_keywords" size="20" placeholder="{L_SEARCH_TOPIC}" />
            <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_LOCAL_HIDDEN_FIELDS}
         </fieldset>
         </form>
      </div>
   <!-- ENDIF -->

Ich hoffe, das stimmt so auch noch mit dem Event! Das kann ich nun nicht überprüfen
[ externes Bild ]

Responsive muss aber diese Searchbox in der Action-Bar bottom noch angepasst werden. Margin-top stimmt nicht! Jedenfalls in meinem Style ist dies der Fall [ externes Bild ]
Bedenke: In der viewtopic gibt es halt unten ein ziemliches Gedränge ob der zusätzlichen Searchbox. Die Anzeige im Responsiven muss ja auch noch stimmen, das vergisst man leider manchmal :wink:
My phpBB Style Board & MoreBROWSERLING - Test your style & website live in all IE VersionsThe best online Translator
Be the best version of yourself rather than a bad copy of someone else!

peter2019
Mitglied
Beiträge: 17
Registriert: 08.10.2019 22:31

Danke!

Beitragvon peter2019 » 09.10.2019 22:11

Ich werde es morgen in Ruhe testen und Rückmeldung geben...

peter2019
Mitglied
Beiträge: 17
Registriert: 08.10.2019 22:31

Das Gedränge ...

Beitragvon peter2019 » 10.10.2019 19:28

(...) Bedenke: In der viewtopic gibt es halt unten ein ziemliches Gedränge ob der zusätzlichen Searchbox. Die Anzeige im Responsiven muss ja auch noch stimmen, das vergisst man leider manchmal :wink:


... hat mich dazu bewogen, es sein zu lassen. Aber wo man was wie ändern würde, war für mich bereits generell interessant - dank Dir für die Hinweise!

Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 1526
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

Re: [3.2] "Action-Bar" oben und unten verändern

Beitragvon Tastenplayer » 10.10.2019 20:25

Man könnte allerdings den Code so ändern, dass unten nur noch das Search Icon angezeigt wird (in meinem Style hatte ich da für die Search Header einfach ein display: none hingesetzt für die Inputbox und das erweiterte Suchen Icon. Der Style wurde so validiert. Aber es ist eben nicht das, was einer vom Fach macht. Deshalb hatte ich Dir das auch nicht hingeschrieben. Aber natürlich müsste man trotzdem alles neu anpassen unten.
My phpBB Style Board & MoreBROWSERLING - Test your style & website live in all IE VersionsThe best online Translator
Be the best version of yourself rather than a bad copy of someone else!


Zurück zu „Styles, Templates und Grafiken“