[3.2] Revolution.

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
chris1278
Mitglied
Beiträge: 795
Registriert: 12.11.2007 06:20
Kontaktdaten:

[3.2] Revolution.

Beitragvon chris1278 » 29.11.2017 03:20

Hallo

Ich bin grade den Revolution Style am anpassen.

Bin schon ein wenig in die Richtung gekommen in die ich möchte.


Hier mal ein bild mit Markierten Infos:

[ externes Bild ]

Anbei sende ich hier noch den geänderten teil des html Codes der overall_header der diese optik ausgibt.


Code: Alles auswählen

<body id="phpbb" class="nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">

<!-- EVENT overall_header_body_before -->
      
      <!-- EVENT overall_header_headerbar_before -->
         
         <!-- EVENT overall_header_headerbar_after -->
      
      <!-- EVENT overall_header_navbar_before -->

<div id="wrap" class="wrap">
   
   <div id="site-description" class="inner" >
      <a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
   </div>
</div>
<div id="wrap" class="wrap">
   <a id="top" class="top-anchor" accesskey="t"></a>
   <div id="page-header">
      <!-- INCLUDE navbar_header.html -->
   </div>

   <!-- EVENT overall_header_page_body_before -->


Und hier zum vergleich der Original teil:

Code: Alles auswählen

<body id="phpbb" class="nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">

<!-- EVENT overall_header_body_before -->
      <div class="headerbar" role="banner">
      <!-- EVENT overall_header_headerbar_before -->
         <div class="inner">

         <div id="site-description" class="site-description">
            <a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
            <h1>{SITENAME}</h1>
            <p>{SITE_DESCRIPTION}</p>
            <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
         </div>

         <!-- 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 -->

         </div>
         <!-- EVENT overall_header_headerbar_after -->
      </div>
      <!-- EVENT overall_header_navbar_before -->

<div id="wrap" class="wrap">
   <a id="top" class="top-anchor" accesskey="t"></a>
   <div id="page-header">
      <!-- INCLUDE navbar_header.html -->
   </div>

   <!-- EVENT overall_header_page_body_before -->


Mein ziel ist es ein bild als Kopf zu einzufügen was auch Über dem Forum bleibt und sich der Grösse der Wrap bar anpasst von der breite.

Das Bild liegt schon im image Ordner also unter /theme/image der pfad würde dann also etwa so aussehen zu dem gif bild:

forenroot/styles/revolution/theme/images/header_logo.gif


Ich glaube wenn ich die anderen angegenem Images in der Colour.css sehe reicht dort da der prfad etwa so: ./images/header_logo.gif allerdings wäre hier die frage ob man das Logo dann über die css einbinden könnte oder in diesem fall besser direkt in der html Datei einträgt.

Eigentlich sieht der style vom Aufbau so aus:

[ externes Bild ]


Wenn ich jetzt den Hintergrund ändere und als Hintergrund ein bild mache würde das logo ja Verschwinden.

Ich denke das hängt damit zusammen das der in dem Bild dargestellte Hintergrund ja ausserhalb des <div id="wrap" class="wrap"> liegt und das logo auch. Somit müsste man das logo bzw. das gewünschte bild ja innerhalb dieses Platzieren. Was mir auch gelingt (zumindest mit dem Logo).

Auf jedenfall danke für eure Hilfe.

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

Re: [3.2] Revolution.

Beitragvon Melmac » 29.11.2017 05:14

Sowas in dieser Richtung?

rev_480.png

rev_640.png

rev_800.png


Kurze Frage noch: arbeitest Du an einem auf Basis von Revolution erstellten Tochterstyle oder passt Du Revolution direkt an?
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)

Benutzeravatar
chris1278
Mitglied
Beiträge: 795
Registriert: 12.11.2007 06:20
Kontaktdaten:

Re: [3.2] Revolution.

Beitragvon chris1278 » 29.11.2017 05:27

das hier sieht ganz gut aus. denke das würde unserem foren admin vom aufbau her zusagen:

download/file.php?id=793&t=1

und ich bin dabei den revolution direkt anzupassen. aber der ist ja eh nur paar Dateien groß die Template Dateien nimmt ja hauptsächlich aus Prosilver selber. hab jetzt Farben schon mal so angepasst wie der in dem Vorgänger war. Das hab ich alles in der colours.css gefunden und angepasst.

Bin jetzt für eine adequate Lösung fürs logo am suchen.

Ich hab gerade die class und id des div containers in der colour.css und common.css verdoppelt. also die wrap angaben kopiert und als wrap2 in beide Dateien gespeichert und habe im Prinzip jetzt zwei seperate classen und ids die aber im moment das selbe ausgeben.

colour.css
.wrap {
background-color: #fef0f0;
border-color: #812b2b;
box-shadow: 0 0 1px 1px #6e6e6e;
}

.wrap2 {
background-color: #114411;
border-color: #812b2b;
box-shadow: 0 0 1px 1px #6e6e6e;
}


common.css

Code: Alles auswählen

.wrap2 {
   border-radius: 0px;
   border-style: solid;
   border-width: 5px;
   margin: 0 auto;
   max-width: 800px;
   padding: 5px 14px 5px 12px;
}

.wrap {
   border-radius: 0px;
   border-style: solid;
   border-width: 5px;
   margin: 0 auto;
   max-width: 800px;
   padding: 5px 14px 5px 12px;
}


reultat:
[ externes Bild ]

Das einzige was jetzt da noch stört ist dieser dünne strich zwischen beiden containern.

Wäre die Frage auch ob es Möglich ist direkt in den div Angabe eine Verlinkung einzubauen so das der div-Container selbst als Verlinkung läuft.

Und bitte erkläre mal kurz was ist ein Tochter style

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

Re: [3.2] Revolution.

Beitragvon Melmac » 29.11.2017 05:46

Ein Tochterstyle - im Prinzip eigentlich das, was Revolution im Verhältnis zu prosilver auch ist: ein Style, der von einem anderen Style abgeleitet wurde und in mehr oder weniger großem Umfang dessen Dateien mitbenutzt.

Diese ganze Umbauaktion der overall_header.html samt Entfernen von Teilen des ursprünglich vorhandenen Codes, nur um die Headerbar umzugestalten, ist eigentlich nicht erforderlich.
Momentan hast Du nur eine neue Hintergrundfarbe für die Headerbar eingefügt - Du wolltest dort aber doch eine Grafik einfügen, oder?
Das Problem dabei: je nach ihrer Größe sind dann noch ein paar Umbauten mehr erforderlich, wenn sie auch responsiv reagieren soll. Also: wenn sie mit der Auflösung skalieren soll, ohne bei bestimmten Auflösungen das Layout zu zerschießen.

Du musst nicht unbedingt auch ein zweites wrap definieren: es reicht, wenn Du der Klasse .headerbar die gleiche Formatierung spendierst, die auch .wrap hat, und dadurch ihre bisherige entsprechend angleichst.

Um bei meinem Muster zu bleiben:
Ich habe einfach ein neues Stylesheet custom.css erstellt und an letzter Stelle in der stylesheet.css importiert. Über diese Datei kann ich jetzt das originale CSS dieses Styles überschreiben bzw. ergänzen, wo erforderlich.

Der komplette Code dort:

Code: Alles auswählen

.wrap,
.headerbar {
  box-sizing: border-box;
}

.wrap {
  border-width: 1px 5px 5px 5px;
  border-radius: 0 0 5px 5px;
}

.headerbar {
  background-color: #FFF;
   border-width: 5px 5px 0 5px;
   border-style: solid;
   border-color: #812b2b;
    border-radius: 5px 5px 0 0;
   box-shadow: 0 0 1px 1px #6e6e6e;
   max-width: 800px;
    height: auto;
   margin: 0 auto;
   padding: 0;
}

@media only screen and (max-width: 770px), only screen and (max-device-width: 770px) {
  .headerbar {
    border-width: 0;
  }
}

@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px) {
   .headerbar,
  .wrap {
      margin: 0 auto;
   }
}


Die Extension: [3.1][3.2] Sitelogo responsive.
Sie braucht für diesen Style nur zwei minimale CSS-Anpassungen.
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)

Verschoben von Styles in Entwicklung nach Styles, Templates und Grafiken am 29.11.2017 05:55 durch Melmac

Benutzeravatar
chris1278
Mitglied
Beiträge: 795
Registriert: 12.11.2007 06:20
Kontaktdaten:

Re: [3.2] Revolution.

Beitragvon chris1278 » 29.11.2017 05:59

Naja um mal kurz zu erläutern worum es eigentlich geht.

Wenn du dir das mal anschaust siehst du wie das Forum im Ursprpnglichen Style ausgesehen hat:

[ externes Bild ]

Problem hierbei ist das der Style im phpbb 3.2 nicht geht da das Forum phpbb 3.0.12 war. Somit kann man den Style nicht benutzen.

Zumal hier sowieso noch die Sache mit dem Logo und dem Regentropfen Hintergrund geklärt werden muss. was aber erst mal nicht weiter problematisch ist.

Jetzt Haben wir das Forum umgezogen und Upgedatet. Aber der Forenbetreiber will auf jeden Fall wieder einen Style der annähernd an den Original rankommt. abgesehen vom Logo und Dem Hintergrundbild mit den Regentropfen. Da kommt dann evtl. andrer Grafiken zum Vorschein.

Und deswegen passt eigentlich vom aufbau der Revolution dort anzupassen.

Am ende eine Gif Grafik eingefügt werden die, egal wo man auf die gif Grafik klickt, mit einem link unterlegt sein soll der auf die index.php des Forums leitet.

Die farbliche Anpassung habe ich allein in der colours.css schon so angepasst wie der original Style aus dem alten Forum Es geht jetzt um die Platzierung und Funktionalität des Logos.

Ich werde das mal ausprobieren was du mir geschrieben hast.

Mit Responsiv was meinst du damit. Du must Entschuldigen ich bin nicht so versiert in php programmier Sprache.

Und nur zur Info im Moment läuft das alles noch auf localem Testsystem der style

PS: Ich hatte dem Forenbetreiber schon am Anfang gesagt das er den Style so nicht eins zu eins übernehmen werden kann. Also das da Abstriche zu machen sind. Und das sollte auch nicht das Problem sein. Aber ich versuche halt den Style so nah wie Möglich Ranzubringen.

Automatisch dem Beitrag hinzugefügt nach 19 Minuten 23 Sekunden. Bitte Regel für „Topic-Bumping“ beachten. Danke.

Hab das jetzt ma gemacht mit dem Revolution wo ich soweit fertig war bevor ich das logo geändert habe. Also da waren nur die colours.css farblich angepasst.

Hab diese ext. Installiert und alles abgeschaltet also logo und searchbox.

Dann deine Änderungen gemacht wie du gesagt hattest und resultat sieht so aus:

[ externes Bild ]

Wie bekomme ich dort wo jetzt der weisse Hintergrund ist ein Gif Image rein Welches als kommplet Hintergrund dort ausfüllt und einen Hyperlinlk inne hat.

Und das mit der Coustom.css hab ich verstanden. alle angaben die da drin stehen überschreiben die original Angaben im Prinzip.

Wenn ich die Angaben z.B. die Farben die ich anpassen will aus der colours.css kopiere und in die coustom.css schreibe und dort änere passe ich meine Farben also so an. super werde das wenn alles soweit ist in diese datei übertragen
Zuletzt geändert von chris1278 am 29.11.2017 06:24, insgesamt 1-mal geändert.

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

Re: [3.2] Revolution.

Beitragvon Melmac » 29.11.2017 06:22

chris1278 hat geschrieben:Problem hierbei ist das der Style im phpbb 3.2 nicht geht da das Forum phpbb 3.0.12 war. Somit kann man den Style nicht benutzen.

Den 3.0-Style natürlich nicht, das ist klar.
Andererseits: dieser Style sieht auf der Abbildung jetzt ersteinmal nur nach einem leicht angepassten prosilver aus. Ein paar farbliche Anpassungen, eine Hintergrundgrafik für den body und eine Grafik im Header, ansonsten aber vom Aufbau her wohl prosilver-Standard.

chris1278 hat geschrieben:Ich hatte dem Forenbetreiber schon am Anfang gesagt das er den Style so nicht eins zu eins übernehmen werden kann.

Das sollte eigentlich nicht allzu schwer zu rekonstruieren sein, auch vollständig.
(btw: Welcher Style ist das?)

Logo/Headergrafik und die Regentropfengrafik kannst Du doch aus dem alten Style übernehmen.

chris1278 hat geschrieben:Mit Responsiv was meinst du damit.

Das Layout und die prinzipiellen Proportionen sollen auch bei unterschiedlichen Displaygrößen und Auflösungen auf Betrachterseite erhalten bleiben bzw. sich automatisch anpassen.
Das hat nichts mit PHP zu tun, sondern mit HTML und CSS :wink:

chris1278 hat geschrieben:Am ende eine Gif Grafik eingefügt werden die, egal wo man auf die gif Grafik klickt, mit einem link unterlegt sein soll der auf die index.php des Forums leitet.

Das ist bei dieser Ext bereits realisiert.
Nur eines zum Thema Grafik: nimm keine GIF, sondern ein Format, mit dem sich eine vernünftige Dateigröße realisieren lässt, z.B JPEG (*.jpg).

chris1278 hat geschrieben:Ich werde das mal ausprobieren was du mir geschrieben hast.

Da Du bereits Änderungen am Code des Styles vorgenommen hast, kann das dann u.U. klemmen. Die custom.css mit dem angegebenen Code ist bei mir in ein originales Revolution eingefügt worden. "Original" im Sinne von: der Revolution-Code wurde nicht angerührt :wink:
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)

Benutzeravatar
chris1278
Mitglied
Beiträge: 795
Registriert: 12.11.2007 06:20
Kontaktdaten:

Re: [3.2] Revolution.

Beitragvon chris1278 » 29.11.2017 07:11

@Melmac

Danke für die Infos.

In diesem Sinne ja sollte also responsoiv sein.

Was die Änderungen in der Colours.css angeht so ist das kein problem diese wieder rückgängig zu machen und die änderungen in eine coustom.css einzufügen.

Was das logo angeht in diesem Fall sollte es eine gif sein da in dem bild eine gimik ist was als jpg ja nicht mehr funktionieren würde.

Und das der original style Prosilver war scheint auch richtig zu sein. Das war auch meine Vermutung. Da dieser Style aber von einem Grafiker fürs Forum gemacht wurde kann ich aber nicht mit 100%tiger sicherheit sagen das es Prosilver war. Was aber auch nicht das Problem ist. Nach dem er sich bei PHPbb.com Styles fürs aktuelle Version angeschaut hat ist er zum schluss gekommen diesen auf Revolution aufzubauen.

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

Re: [3.2] Revolution.

Beitragvon Melmac » 29.11.2017 08:15

Noch ein kleiner Nachtrag zu den Grafiken: wichtig ist, falls Du da etwas übernehmen solltest, dass auch die betreffenden Copyrights/Linzenz- bzw. Urheberrechte etc. beachtet werden, sofern sie nicht von Deinem Auftraggeber selbst erstellt wurden.
Gleiches gilt dann auch fürs Setzen der Referenzen auf den Autoren desjenigen Styles, den Du gerade abwandelst.

Gut, für das GIF-Format kann es Gründe geben, es hängt halt auch davon ab, um welche Gimmicks es geht: manchmal führen eben auch verschiedene Wege zum gleichen Ziel.

Ob Du jetzt mit einem zusätzlich importierten Stylesheet arbeitest oder einen anderen Weg gehst, ist prinzipiell ersteinmal egal. Sofern sich die Anpassungen in Grenzen halten und hauptsächlich auf CSS-Modifikationen beschränken, ist dies jetzt aber vielleicht der einfachere Weg. Vorallem in Hinblick auf irgendwann einmal anstehende Styleupdates.
Letztendlich muss Du das dann für Dich selbst entscheiden.
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)

Benutzeravatar
chris1278
Mitglied
Beiträge: 795
Registriert: 12.11.2007 06:20
Kontaktdaten:

Re: [3.2] Revolution.

Beitragvon chris1278 » 29.11.2017 11:53

Melmac hat geschrieben:Noch ein kleiner Nachtrag zu den Grafiken: wichtig ist, falls Du da etwas übernehmen solltest, dass auch die betreffenden Copyrights/Linzenz- bzw. Urheberrechte etc. beachtet werden, sofern sie nicht von Deinem Auftraggeber selbst erstellt wurden.
Gleiches gilt dann auch fürs Setzen der Referenzen auf den Autoren desjenigen Styles, den Du gerade abwandelst.


Das wäre genau auch das Thema Betreffend der Copyright rechte besagter zweier Grafiken. Da der Forenbetreiber dort noch versucht zu demjenigen Kontakt auf zu nehmen der damals diesen Style gemacht hat und diese Grafiken kreiert hat. Deswegen kann es sein das diese beiden Bilder auch durch andere Ersetzt werden. Nichts desto Trotz kann man mit diesen Bildern ja als Platzhaltern (lokal arbeiten).

Die andere Sache wegen des Styles umbau mit footer Angabe hätte ich eh noch gefragt. Deswegen hatt ich mal einen Footer abgewandelt und Angepasst und wollte fragen ob diese Ausgabe so Reicht.

[ externes Bild ]

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

Re: [3.2] Revolution.

Beitragvon Joyce&Luna » 29.11.2017 14:39

Hallo Chris

Möchtest du für das Logo die Extension nutzen, oder das direkt einbauen?
Ich muss gestehen, ich habe diese Extension nur einmal getestet, da meine Styles eh immer ein responsives Logo haben, war das bisher nicht nötig.
Mit den Suchfeld gibt es meist Problem und müsste eventuell woanders platziert werden, es sei denn man legt dieses Bild in der Headerbar.
Ich persönlich finde das Suchfeld im Logo nicht so gut, mich stört es dort und verdeckt vielleicht ein Teil vom Logo.
Ist halt Geschmackssache.
Die Tropfen im Hintergrund passen irgendwie nicht zu diesem Style.
Was die Grafiken angeht, er hat ja damals den Style für euch gemacht für das Forum. Ich denke das er da keine Probleme machen wird und euch das jetzt verbieten wird.
Wenn ihr das in der overall_header erwähnt das Herr xxx die Grafiken erstellt hat, dürfte das doch kein Problem sein. Oder liege ich da falsch Melmac?

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“