Anpassung der Startseite

 
badMoon
Benutzer
Avatar
Geschlecht:
Herkunft: Nettetal / NRW
Alter: 70
Homepage: musikzirkus.eu
Beiträge: 216
Dabei seit: 02 / 2013
Betreff:

Anpassung der Startseite

 · 
Gepostet: 25.01.2019 - 14:35 Uhr  ·  #1
...wie angedroht - da bin ich wieder 8-) . Und damit - Hallo in die Runde.

Unser Wunsch ist es, unserer Startseite bzw. den Forenseiten ein individuelles Design zu geben. Hierzu folgende Fragen, die Nummerierung bezieht sich auf die angefügte Grafik:
  • Wo kann ich das cback-Logo gegen unser Logo austauschen?
  • Wo kann ich die Hintergrundgrafik austauschen?
  • An welcher Position kann ich einen in der Hintergrundgrafik eingebundenen Text am besten platzieren, sodass er bei sich anpassender Bildschirmdarstellung immer sichtbar bleibt?
  • Wo kann ich den Seitenhintergrund anpassen (wahlweise Farbe oder Hintergrundgrafik)?

Optimal wäre, wenn ich die Anpassungen so durchführen könnte, dass sie bei einem künftigen Update erhalten bleiben. Sofern das möglich ist, ...welche zusätzlichen Einstellungen müssen vorgenommen werden? Die Angabe der Verzeichnisse/Unterverzeichnisse/Name der Datei/ggfs. Position des Codes wäre sehr hilfreich.

Das war's (...erst einmal O-) )

Vielen Dank und Gruß,
Wolfgang
Der an diesem Beitrag angefügte Anhang ist entweder nur im eingeloggten Zustand sichtbar oder die Berechtigung Deiner Benutzergruppe ist nicht ausreichend.
cback
Admin
Avatar
Geschlecht:
Herkunft: Saarland
Alter: 37
Homepage: cback.net
Beiträge: 17610
Dabei seit: 12 / 2003
Betreff:

Re: Anpassung der Startseite

 · 
Gepostet: 25.01.2019 - 15:05 Uhr  ·  #2
Hallo Wolfgang,

natürlich kannst Du die ganze Software anpassen, gerade beim Design ist das ja auch Sinn der Sache.

Allerdings beachte: Wenn Du eigene Styles machst oder MIRA veränderst, musst Du bei den Updates den templates/ Ordner auslassen und hier aus dem Changelog Forum die Anpassungen am Template manuell ausführen. Umgestaltung des Templates geht natürlich immer tiefer in den HTML Code wenn du die Struktur so stark verändern möchtest, das überschreibt sich natürlich wenn Du beim Update das original Template nochmal drüberspielst. Aber deshalb werden ja die Changelogs bei jedem Update zusätzlich bereitgestellt, damit man auch eigene Styles leicht auf dem aktuellen Stand halten kann.


Um Deine Fragen zu beantworten:

Zitat

Wo kann ich das cback-Logo gegen unser Logo austauschen?

Das Original Logo liegt unter templates/mira/images/cback_logo.svg dort kannst Du natürlich die SVG Datei mit einer eigenen SVG Datei überschreiben.
Oder Du öffnest die templates/mira/header.htm und suchst nach dem img src=" des Logos (such einfach nach {$TPL_PATH}images/cback_logo.svg) und ersetzt das mit einer Grafik Deiner Wahl, z.B. eine PNG.

Zitat

Wo kann ich die Hintergrundgrafik austauschen?

templates/mira/images/header.jpg

Zitat

An welcher Position kann ich einen in der Hintergrundgrafik eingebundenen Text am besten platzieren, sodass er bei sich anpassender Bildschirmdarstellung immer sichtbar bleibt?

Ein Text direkt auf dem Hintergrundbild ist im MIRA Template nicht wirklich empfehlenswert, der Header ist ja komplett Responsive, das heißt Du bekommst je nach Gerät durchaus mal deutlich unterschiedliche Varianten des Hintergrundbildes gezeigt.

Wenn Du ein klassisches Banner willst würde ich die header.htm komplett umbauen, damit sie statt dem Hintergrundbild mit dem Text-Overlay, den Du im ACP ja eingeben kannst, die Überschrift drunter setzt und darüber einfach Deine Grafik mit max-width 100%. Dafür musst Du natürlich die Struktur des Headers im HTML Code der header.htm umbauen.

Mit ein paar grundlegenden HTML Kenntnissen sollte das aber recht fix erledigt sein. :)

Zitat

Wo kann ich den Seitenhintergrund anpassen (wahlweise Farbe oder Hintergrundgrafik)?

Du kannst alle Farben des Systems mittels templates/mira/less/ Configdateien anpassen.
In der miraUI.less findest Du die Farbcodes und Einstellungen aller UI Elemente (Buttons, Formulare, Meldungsboxen)
in der config.less findest Du alle Farbcodes und Einstellungen zum Forensystem selbst (Farbe der Navleiste, Hintergrundfarbe, etc.).

Wenn Du diese geändert hast kannst Du Dir aus den Less Dateien eine neue global.min.css compilieren, sodass die Änderungen auf der Seite ersichtlich werden. Ein gutes Tutorial dazu hat OWS hier bereitgestellt:
less-dateien-kompilieren-t17706.html


Natürlich kannst Du auch individuelle Designs in Auftrag geben. So ein Komplettumbau geht ja schon ein bisschen in die Tiefe, da sitzt man dann mitunter schon ein paar Stündchen bis alles passt und schön aussieht. Ich weiß jetzt nicht wie Dein Kenntnisstand im Bereich HTML&CSS so ist, deshalb biete ich das zumindest mal an. :)

LG und ein schönes Wochenende,
Chris
badMoon
Benutzer
Avatar
Geschlecht:
Herkunft: Nettetal / NRW
Alter: 70
Homepage: musikzirkus.eu
Beiträge: 216
Dabei seit: 02 / 2013
Betreff:

Re: Anpassung der Startseite

 · 
Gepostet: 25.01.2019 - 15:18 Uhr  ·  #3
Hallo Chris, besten Dank für die schnelle Antwort.

Der Schriftzug "Musikzirkus" war bislang eines unserer markanten "Erkennungszeichen" und besteht bereits seit 12 Jahren. Darauf möchten wir ungern verzichten... (siehe anhängende Grafik, hier ist der Schriftzug zusätzlich aufgewertet).

html/css-Kenntnisse sind nur ganz gering vorhanden, aber ich probier es mal O-)

Beste Grüße,
Wolfgang
Der an diesem Beitrag angefügte Anhang ist entweder nur im eingeloggten Zustand sichtbar oder die Berechtigung Deiner Benutzergruppe ist nicht ausreichend.
cback
Admin
Avatar
Geschlecht:
Herkunft: Saarland
Alter: 37
Homepage: cback.net
Beiträge: 17610
Dabei seit: 12 / 2003
Betreff:

Re: Anpassung der Startseite

 · 
Gepostet: 25.01.2019 - 15:24 Uhr  ·  #4
Hi Wolfgang,

hmm am einfachsten wäre es dann, wenn Du den Header einfach nur mit Deiner Grafik ersetzt.

In der header.htm wird dann aus
Code

  <header id="main-header" class="{if isset($CF4_HEADER_BG_CLASS_HOOK)}{$CF4_HEADER_BG_CLASS_HOOK}{else}cf-main-header{/if}"{if !isset($NOPARALLAX)} data-uk-parallax="{ bg: '-100', media: 1160 }"{/if}>
      {if ($CURRENT_PGID=='index' && $CURRENT_PGMODE == '') || isset($L_FORUM_DESC) || isset($L_FORUM_NAME)}
      <div class="uk-container uk-container-center" data-uk-parallax="{ y: '+100', media: 980 }">
        <div class="cf-intro-background uk-text-break uk-text-left cf-text-bigger">
          <div class="uk-flex uk-flex-center">
            <div class="uk-width-xlarge-6-10 uk-width-large-8-10 uk-width-medium-8-10 uk-width-small-1-1 uk-text-center">
              <br />
              {if isset($L_FORUM_DESC) || isset($L_FORUM_NAME)}
                <h1 class="cf-text-xxl uk-text-bold">{$L_FORUM_NAME}</h1>
                {$L_FORUM_DESC}
              {else}
                <h1 class="cf-text-xxl uk-text-bold">{$PAGE_TITLE}</h1>
                {$HOME_PG_INTRO_TXT}
              {/if}
            </div>
          </div>
          <div class="uk-margin"></div>
        </div>
      </div>
      {elseif isset($TOPIC_INFO.topic_title) && $TOPIC_INFO.topic_title != ''}
      <div class="uk-container uk-container-center">
        <div class="cf-small-header">
          {if isset($RATE_ALLOWED) && $RATE_ALLOWED}
            <div class="uk-float-right cf-hdr-rating">{$RATEMENUE}</div>
          {/if}
          <h1>{$TOPIC_INFO.topic_title}</h1>
          {if isset($TOPIC_INFO.topic_subtitle) && $TOPIC_INFO.topic_subtitle != ''}
            <h3>{$TOPIC_INFO.topic_subtitle}</h3>
          {/if}
        </div>
      </div>
      {elseif isset($OWN_HEADER_CONTENT)}
      <div class="uk-container uk-container-center">
        <div class="cf-small-header">
          {$OWN_HEADER_CONTENT}
        </div>
      </div>
      {/if}
  </header>


Sowas hier z.B.:
Code

<div class="uk-container uk-container-center">
  <a href="{rewrite mode='index'}"><img src="HIER_DEIN_BANNERLINK" alt="" title="" style="max-width:100%;border:0;"></a>
</div>
<div class="uk-margin"></div>
<div class="uk-container uk-container-center">
      {if ($CURRENT_PGID=='index' && $CURRENT_PGMODE == '') || isset($L_FORUM_DESC) || isset($L_FORUM_NAME)}
              {if isset($L_FORUM_DESC) || isset($L_FORUM_NAME)}
                <h1 class="cf-text-xxl uk-text-bold">{$L_FORUM_NAME}</h1>
                {$L_FORUM_DESC}
              {else}
                <h1 class="cf-text-xxl uk-text-bold">{$PAGE_TITLE}</h1>
                {$HOME_PG_INTRO_TXT}
              {/if}
      {elseif isset($TOPIC_INFO.topic_title) && $TOPIC_INFO.topic_title != ''}
          {if isset($RATE_ALLOWED) && $RATE_ALLOWED}
            <div class="uk-float-right cf-hdr-rating">{$RATEMENUE}</div>
          {/if}
          <h1>{$TOPIC_INFO.topic_title}</h1>
          {if isset($TOPIC_INFO.topic_subtitle) && $TOPIC_INFO.topic_subtitle != ''}
            <h3>{$TOPIC_INFO.topic_subtitle}</h3>
          {/if}
      {elseif isset($OWN_HEADER_CONTENT)}
          {$OWN_HEADER_CONTENT}
      {/if}
</div>


Ersetze das HIER_DEIN_BANNERLINK mit Deiner Grafik URL.


Das stellt Dir Deine Hintergrundgrafik zentriert unter die Navigationsleiste, schaut, dass die Schrift immer drauf ist.

Und die Überschriften die sonst in dem Banner stehen setzt er einfach drunter.

Die kannst Du ja dann noch hübscher gestalten so wie Du das möchtest. Ist jetzt nur exemplarisches Beispiel.


Es ist allerdings nach dem nächsten Update des CF4 im Frühjahr diesen Jahres ohnehin geplant, dass relativ zeitnah noch ein Template veröffentlicht wird, welches eher diese Boxed Layouts haben für die Boards die es lieber so ein bisschen klassischer angehen. Zusätzlich zum dunklen Mira-Dark (aka CBlACK) also noch so ein Mira-Boxed. - Notfalls kannst auch darauf warten. Dauert aber noch ne Weile, das Update kommt wohl so März / April rum den dreh und das Template dann vermutlich Mai.


LG,
Chris
badMoon
Benutzer
Avatar
Geschlecht:
Herkunft: Nettetal / NRW
Alter: 70
Homepage: musikzirkus.eu
Beiträge: 216
Dabei seit: 02 / 2013
Betreff:

Re: Anpassung der Startseite

 · 
Gepostet: 25.01.2019 - 16:06 Uhr  ·  #5
cback
Admin
Avatar
Geschlecht:
Herkunft: Saarland
Alter: 37
Homepage: cback.net
Beiträge: 17610
Dabei seit: 12 / 2003
Betreff:

Re: Anpassung der Startseite

 · 
Gepostet: 25.01.2019 - 17:00 Uhr  ·  #6
Sehr gerne!

Wünsche Dir viel Erfolg beim Testen und ausprobieren.

Wenn Du die original .htm Dateien für alle Fälle sicherst kannst Du ruhig auch ohne Hemmungen herumexperimentieren. Nachhaltig kaputt kannst Du mit dem Template nichts machen. Im worst case sieht die Seite mal komisch aus oder bei einem Syntaxfehler in den Template-Variablen siehst Du u.U. sogar gar nichts mehr.

Aber wenn Du dann Deine gesicherten .htm Dateien nochmal drüberschiebst und notfalls noch per FTP den Cache Ordner /upload/cache/tc_mira/ löschst (brauchst Du normal nicht aber falls er die "älteren" Dateien nicht direkt erkennt hilft das), dann kann eigentlich gar nichts passieren. :)

Viele Grüße und ein schönes Wochenende,
Chris
badMoon
Benutzer
Avatar
Geschlecht:
Herkunft: Nettetal / NRW
Alter: 70
Homepage: musikzirkus.eu
Beiträge: 216
Dabei seit: 02 / 2013
Betreff:

Re: Anpassung der Startseite

 · 
Gepostet: 25.01.2019 - 18:17 Uhr  ·  #7
Hallo Chris,

...der Test ist angelaufen. Zunächst habe ich den header gewechselt, mit eingebundener Schrift (ist halt noch ein Test O-) ), das klappt auch schon ganz gut.

Wo aber kann ich die im header erscheinenden Standardtexte (ich meine nicht die dynamischen Texte im ACP, sondern Name des Forums, Untertitel zum Forum) entfernen?

Ansonsten: Gut Ding will Weile haben 8-)

Thx und Gruß,
Wolfgang
cback
Admin
Avatar
Geschlecht:
Herkunft: Saarland
Alter: 37
Homepage: cback.net
Beiträge: 17610
Dabei seit: 12 / 2003
Betreff:

Re: Anpassung der Startseite

 · 
Gepostet: 25.01.2019 - 18:29 Uhr  ·  #8
Hi Wolfgang,

freut mich, dass der Tipp Dir helfen konnte.

Die Untertitel sind die Überschriften die ich in meinem Headervorschlag als "stehen dann drunter" genannt hatte, also diese sind auch in der header.htm zu finden.

Das wären dann einzeln betrachtet folgende Zeilen:

Foren Startseitentext:
Code

                <h1 class="cf-text-xxl uk-text-bold">{$PAGE_TITLE}</h1>
                {$HOME_PG_INTRO_TXT} 


Foren Titel und Beschreibung:
Code

                <h1 class="cf-text-xxl uk-text-bold">{$L_FORUM_NAME}</h1>
                {$L_FORUM_DESC} 


Topic Titel, Untertitel, Bewertungssterne (wenn genutzt):
Code

          {if isset($RATE_ALLOWED) && $RATE_ALLOWED}
            <div class="uk-float-right cf-hdr-rating">{$RATEMENUE}</div>
          {/if}
          <h1>{$TOPIC_INFO.topic_title}</h1>
          {if isset($TOPIC_INFO.topic_subtitle) && $TOPIC_INFO.topic_subtitle != ''}
            <h3>{$TOPIC_INFO.topic_subtitle}</h3>
          {/if} 


Ggf. von Plugins erzeugte Überschriften:
Code

{$OWN_HEADER_CONTENT} 



Von denen die Du entfernen willst dann einfach die von mir genannten Codezeilen aus der header.htm rauslöschen, dann sind sie weg.

Bedenke aber, dass in den Topics das Hintergrundbild kleiner wird mit der Standardlösung, wenn Du die Titel ggf. untenstehend und das Bild immer in voller größe haben möchtest baue den Header am Besten zunächst nach meinem Vorschlag in den vorherigen Posts erstmal komplett auf die neue Struktur (Hintergrundbild durch Banner ersetzen). Dann kannst Du besser bestimmen welche Überschriften Du vielleicht zusätzlich noch drin lässt, aber die stehen dann unter dem Banner, nicht mehr drüber.


LG,
Chris
Gewählte Zitate für Mehrfachzitierung:   0

Registrierte in diesem Topic

Aktuell kein registrierter in diesem Bereich

Die Statistik zeigt, wer in den letzten 5 Minuten online war. Erneuerung alle 90 Sekunden.