[3.2] Header in myInvision

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.
Benutzeravatar
Melmac
Supporter
Supporter
Beiträge: 2043
Registriert: 15.10.2012 03:27

Re: [3.2] Header in myInvision

Beitragvon Melmac » 08.11.2017 18:24

Es gäbe neben der von vfrblue genannten Extension noch einen Weg, dies zurealisieren, ohne deswegen groß in den Code des Styles eingreifen zu müssen.

Schaue Dir mal diese Extension an: [3.1][3.2] Sitelogo responsive - sie skaliert ein über sie eingebundenes Logo (oder jede andere Grafik, die Du hierfür einsetzt) responsiv.
Zusätzlich lassen sich mit ihr dann auch gleich noch die Searchbox, Forumname und -beschreibung verlagern.
Voraussetzung hierfür wäre dann, dass Du Dein Logo und die anderen Bilder in einer einzigen Grafik passender Abmessungen zusammenfasst, die dann statt des bisherigen phpBB-Logos angezeigt wird.

Dieser Style ist allerdings etwas "eigen" aufgebaut, weswegen sie "out of the box" unschöne Resultate liefert - muss mal schauen, wie man sie an ihn anpassen kann.

_Jo_ hat geschrieben:Eine Frage noch- welche Software ist das die den Namen der Felder anzeigt wie in den Screen?

Jeder moderner Browser verfügt inzwischen normalerweise über integrierte Entwicklerwerkzeuge, unter anderem auch über einen Code-Inspektor.
Je nach Browser wird er unterschiedlich aufgerufen (in Firefox z.B. über F12), eine entsprechende Option sollte aber zusätzlich im Kontextmenü eingetragen sein, wenn Du einen Rechtsklick auf die Seite machst.
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)

Benutzeravatar
Joyce&Luna
Mitglied
Beiträge: 1393
Registriert: 24.11.2013 18:14
Wohnort: NRW
Kontaktdaten:

Re: [3.2] Header in myInvision

Beitragvon Joyce&Luna » 08.11.2017 18:34

Wenn du das so haben willst wie vfrblue das hat, dann mache folgendes.

Öffne die overall_header.html
Lösche dieses komplett

Code: Alles auswählen

         <!-- EVENT overall_header_searchbox_before -->
         <!-- IF $HEADSEARCH == 'yes'-->
         <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
         <div id="search-box" class="search-box search-header searchback" 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 -->
         <!-- ENDIF -->
         <!-- EVENT overall_header_searchbox_after -->


suche diese Position

Code: Alles auswählen

   <!-- INCLUDE navbar.html -->
   <div id="content">
   <div id="page-header">


Füge das hier darunter ein.

Code: Alles auswählen

      <!-- EVENT overall_header_searchbox_before -->
         <!-- 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 -->
      <!-- EVENT overall_header_searchbox_after -->


Öffne die myinvision.css
Suche dieses

Code: Alles auswählen

.search-box {
    margin-top: 4px;
    margin-left: 5px;
}

Ändere margin-top 4px in 26px um.

Öffne die colours.css und suche

Code: Alles auswählen

.search-header {
   box-shadow: 0 0 10px #0075B0;
}

Ändere die Farbe in #c6c6c6

Das ganze müsste dann passen.

Wenn du noch die Extension haben willst gibt es zwei Varianten, einmal als Button Version
viewtopic.php?f=149&t=232155

und einmal nur Text.
viewtopic.php?f=149&t=239348

Anke
Zuletzt geändert von Joyce&Luna am 08.11.2017 18:39, insgesamt 1-mal geändert.
phpBB-Style-Design.de

Es kommt nicht darauf an, mit dem Kopf durch die Wand zu gehen, sondern mit den Augen die Tür zu finden.
Support zu meinen Styles, bitte die Fragen im Forum stellen und nicht per PN. Danke!

Talk19zehn
Ehemaliger
Beiträge: 4334
Registriert: 08.06.2009 12:03

Re: [3.2] Header in myInvision

Beitragvon Talk19zehn » 08.11.2017 18:39

@Melmac
Genau und nicht zu vergessen ist die options.html, die einfließt und Abstände auf den ersten Blick nicht erneut in weiser Voraussicht konzipiert. :cry: Events laufen daher an jener Stelle teils (versehentlich) über das Maß der Dinge hinaus, zerschießen leider manchmal das Layout.

LG
Angaben stets ohne Gewähr, da von vielfachen Konstrukten abhängig.

_Jo_
Mitglied
Beiträge: 37
Registriert: 29.10.2017 21:05

Re: [3.2] Header in myInvision

Beitragvon _Jo_ » 08.11.2017 20:00

Joyce&Luna hat geschrieben:Hallo

Quelle vom Style: https://www.phpbb.com/customise/db/style/my_invision/

öffne im Style template die overall_header.html

Suche dieses und schneide es aus.

Code: Alles auswählen

         <!-- EVENT overall_header_searchbox_before -->
         <!-- IF $HEADSEARCH == 'yes'-->
         <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
         <div id="search-box" class="search-box search-header searchback" 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 -->
         <!-- ENDIF -->
         <!-- EVENT overall_header_searchbox_after -->


Suche dann diese Position.

Code: Alles auswählen

   <div id="page-header">
   
      <!-- EVENT overall_header_navbar_before -->
      <!-- INCLUDE breadcrumb.html -->
   </div>

Füge darunter das ausgeschnittene wieder ein.
Speichern, Cache leeren und Browser Cache leeren.

Anke

wenn ich diese Änderungen mache ist es unterhalb der Navbar und blau umrandet..... :cry:
Es sollte ohne Umrandung in die navbar.
Kan ich da die Erweiterung NavBar Search nutzen??
https://phpbb.hifikabin.me.uk/viewtopic.php?f=3&t=32

Benutzeravatar
Joyce&Luna
Mitglied
Beiträge: 1393
Registriert: 24.11.2013 18:14
Wohnort: NRW
Kontaktdaten:

Re: [3.2] Header in myInvision

Beitragvon Joyce&Luna » 08.11.2017 20:05

Hier ist das was vfrblue dir gezeigt hat ohne den Blauen Rand.
viewtopic.php?p=1375032#p1375032

Ob die Extension funktioniert ... kann ich nicht sagen, ich nutze diese nicht.
phpBB-Style-Design.de

Es kommt nicht darauf an, mit dem Kopf durch die Wand zu gehen, sondern mit den Augen die Tür zu finden.
Support zu meinen Styles, bitte die Fragen im Forum stellen und nicht per PN. Danke!

_Jo_
Mitglied
Beiträge: 37
Registriert: 29.10.2017 21:05

Re: [3.2] Header in myInvision

Beitragvon _Jo_ » 08.11.2017 20:20

[ externes Bild ]

sieht gut aus aber am falschen Platz

Benutzeravatar
Joyce&Luna
Mitglied
Beiträge: 1393
Registriert: 24.11.2013 18:14
Wohnort: NRW
Kontaktdaten:

Re: [3.2] Header in myInvision

Beitragvon Joyce&Luna » 08.11.2017 20:23

Dann hast du colours.css noch nicht bearbeitet

Code: Alles auswählen

.search-header {
   box-shadow: 0 0 10px #0075B0;
}


Da muss du die Farbe in #c6c6c6 noch ändern.
Cache bitte auch danach leeren auch den von deinem Browser.
Hast du alles auch abgearbeitet?

Das hier auch auf margin-top 26px gesetzt?

Code: Alles auswählen

.search-box {
    margin-top: 4px;
    margin-left: 5px;
}
Zuletzt geändert von Joyce&Luna am 08.11.2017 20:29, insgesamt 2-mal geändert.
phpBB-Style-Design.de

Es kommt nicht darauf an, mit dem Kopf durch die Wand zu gehen, sondern mit den Augen die Tür zu finden.
Support zu meinen Styles, bitte die Fragen im Forum stellen und nicht per PN. Danke!

Benutzeravatar
Melmac
Supporter
Supporter
Beiträge: 2043
Registriert: 15.10.2012 03:27

Re: [3.2] Header in myInvision

Beitragvon Melmac » 08.11.2017 20:24

Vollständig responsiv beim Einsatz von Kirks Extension - wenn sie einen an diesen Style angepassten zusätzlichen Styleordner spendiert bekommt:

myinvision_480.png

myinvision_600.png

myinvision_800.png

myinvision_1200.png


Einzige ( :wink: ) Änderung an den Dateien des Styles: eine Zeile mit einem neuen (= eigenen) Event eingefügt (wie gesagt: der Style ist etwas eigen ... :wink: ).
Der Rest lässt sich übers CSS der Extension realisieren.
Das Auslagern von Searchbox und Sitedescription funnzt unverändert.

Talk19zehn hat geschrieben:Genau und nicht zu vergessen ist die options.html, die einfließt und Abstände auf den ersten Blick nicht erneut in weiser Voraussicht konzipiert.

Da funkt jetzt nichts dazwischen: die Sidebar hat auf diesen Bereich keine Auswirkung und die originale Searchbox wird über das CSS der Extension in Rente geschickt :D
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)

_Jo_
Mitglied
Beiträge: 37
Registriert: 29.10.2017 21:05

Re: [3.2] Header in myInvision

Beitragvon _Jo_ » 08.11.2017 21:18

[ externes Bild ]

die Farbe stört nicht- die Position ist komisch...eigentlich soll es an die rote Stelle

das mit dem Icon hat geklappt, nunist aber ein "platzhalter" davor [ externes Bild ]

Benutzeravatar
Joyce&Luna
Mitglied
Beiträge: 1393
Registriert: 24.11.2013 18:14
Wohnort: NRW
Kontaktdaten:

Re: [3.2] Header in myInvision

Beitragvon Joyce&Luna » 08.11.2017 21:21

Kannst du uns ein Link zum Forum geben?
Dann kann ich die Position da besser bestimmen.

Anke
phpBB-Style-Design.de

Es kommt nicht darauf an, mit dem Kopf durch die Wand zu gehen, sondern mit den Augen die Tür zu finden.
Support zu meinen Styles, bitte die Fragen im Forum stellen und nicht per PN. Danke!


Zurück zu „Styles, Templates und Grafiken“