SMFPortal.de

Willkommen !

Autor Thema: Zusätzliche Grafik in Header platzieren  (Gelesen 3060 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Rasmus

  • Spezialist
  • ****
  • Beiträge: 122
  • Geschlecht: Männlich
    • Rasmus` Heimseite
Zusätzliche Grafik in Header platzieren
« am: 04. Januar 2014, 20:55:26 »
Hallo,
wie in jedem Theme hab ich mein logo.pnp auf der linken Seite. Ganz klassisch.
Ganz rechts die Neuigkeiten und Suche und der Slogan und dazwischen eine Menge Platz (klar bei 1200px Breite)

Nun möcht ich dazwischen eine eigene Grafik hinzufügen. Dazu könnte ich zwar das logo neu gestalten und breiter machen, aber das ist so gut, denn ich möchte hin und wieder das
neue Bild ändern.

Ich hab schon probiert in der index.php bei

background:....logo....   ein weiteres
background:....logo2... danebenzuschieben mit anderen padding- und margin-Werten

aber ich stolper wohl über meine eigenen Füße, denn das zweite logo ist nicht zu sehen.
Vielleicht muss ich in die index.template rein  :[

Jemand einen Tipp?
Danke
Rasmus
Erlebe jede Stunde, es ist viel später, als Du denkst!

Ruth

  • Spezialist
  • ****
  • Beiträge: 331
Re: Zusätzliche Grafik in Header platzieren
« Antwort #1 am: 04. März 2014, 11:28:46 »
Hallo, Rasmus!

Hast du schon eine Lösung gefunden?

Ich weiß nicht, ob diese Vorgehensweise korrekt ist,  ;) aber beliebig viele, weitere Grafiken, Links oder Texte lassen sich mit schlichtem HTML ganz einfach in die index.template.php einbauen.

Mein Header schaut bestimmt anders aus als deiner, hab da viel verändert und hab ein breites, durchgehendes Banner; die zusätzlichen Grafiken (bei mir sind es Smileys) befinden sich bei mir deshalb unter dem eigentlichen Logo, nicht daneben, wie du es möchtest:

Code
function template_body_above()
{
   global $context, $settings, $options, $scripturl, $txt, $modSettings;

   echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
   <div id="header"><div class="frame">
      <div id="top_section">
         <h1 class="forumtitle">
            <a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />', '</a>
</br><img src="http://URL_zu_deinem_Logo2.png" alt="">
         </h1>';

Hier in der vorletzten Zeile ist die Änderung, die ich in der index.template.php vorgenommen habe:

Code
</br><img src="http://URL_zu_deinem_Logo2.png" alt=""> 

Du müßtest wohl das </br> für den Zeilenumbruch weglassen, damit dein 2. Logo rechts neben deinem ersten erscheint.

Rasmus

  • Spezialist
  • ****
  • Beiträge: 122
  • Geschlecht: Männlich
    • Rasmus` Heimseite
Re: Zusätzliche Grafik in Header platzieren
« Antwort #2 am: 04. März 2014, 19:41:20 »
Hey Ruth, vielen Dank.
Ich hatte mir schon ein Theme gesucht von Dzinerstudio, aber bei diesen aufgepimpten Themes hab ich immer kein gutes Gefühl vom Code her.
Ich nehm mir mal ein einfaches und versuch mein Glück mit Deinem Tip!  ;d
Erlebe jede Stunde, es ist viel später, als Du denkst!

Rasmus

  • Spezialist
  • ****
  • Beiträge: 122
  • Geschlecht: Männlich
    • Rasmus` Heimseite
Re: Zusätzliche Grafik in Header platzieren
« Antwort #3 am: 08. März 2014, 15:41:50 »
Hallo, wie im Anhang zu sehen, erscheint tatsächlich die zusätzliche Grafik (rot, rechts oben). Für mich als Newbie eine keine Sensation.
Nun ist es aber so, dass die Grafik sich an die h1 heftet. h1 ist hier rechts oben "Harley-Klönschnack".
Wenn ich die zus. Grafik erschieben möche geht dass natürlich nicht einzelnd, sonder h1 geht mit und der ganze header bricht zusammen.

Ich muss irgendwie die Grafik so einagen, dass sie mir einzelnd zu Verfügung seht.
Ich glaub auch, dass noch Einträge in der index.php fehlen, denn dort möch ich ja per padding etc. einsellen.

Vielleicht darf die Zeile <img src="', $settings['images_url'], '/theme/hd-logo.png" alt="">
nicht an die stelle bei h1 rein ??

 >:(
Erlebe jede Stunde, es ist viel später, als Du denkst!

Ruth

  • Spezialist
  • ****
  • Beiträge: 331
Re: Zusätzliche Grafik in Header platzieren
« Antwort #4 am: 08. März 2014, 19:06:33 »
Wo genau möchtest du denn die zusätzliche Grafik haben? Im Prinzip kann sie an jede beliebige Stelle platziert werden. Ob das dann sofort wie gewünscht aussieht, hängt davon ab, welches Theme du benützt und welche Änderungen du bezüglich Header und Logo bereits vorgenommen hast.

Die vorgegebenen div-Anweisungen sind oft sehr hartnäckig - zur Not kann man mogeln und eine Tabelle einfügen, wenn man z.B. etwas zentriert haben möchte, was links- oder rechtsbündig vorgegeben ist.

Was sind das für große graue Grafiken da halb rechts unten - Buttons? Ich würde da gar nicht mehr allzuviel weitere Grafiken reinbringen, sonst wirkt der Header insgesamt vielleicht etwas zu überfrachtet

Zeig doch mal den Code-Abschnitt aus der index.template.php (müßte ab Zeile 191 sein), vielleicht kann dir dann jemand sagen, wo du die entsprechenden Änderungen vornehmen mußt.

Rasmus

  • Spezialist
  • ****
  • Beiträge: 122
  • Geschlecht: Männlich
    • Rasmus` Heimseite
Re: Zusätzliche Grafik in Header platzieren
« Antwort #5 am: 08. März 2014, 20:57:40 »
Hallo Ruth,
die vier grauen Grafiken sind zusammen eine png. Eingewechselt von mir gegen ein dort schon existierendes. Das ist ja nicht schwer. Es sind vier Motoren aus der Ära von Harley-Davidson.
Diese Grafik sitzt eigentlich ganz rechts am Rand bei gleicher Höhe, wurde nun aber verrückt durch die neue Grafik (Logo von Harley-Davidson Company).
Dieses Harley-Markenzeichen soll nun in die Mitte des headers, also links von den vier grauen Motorgrafiken. Ich könnte auch schummeln und das rote Bildchen per Gimp in das Bild der vier grauen Motoren einbauen, aber -nöö- ich will das ja auch lernen, wie das richtig geht  ::)

Das Theme ist eigentlich für diese meine Lernzwecke ungeeignet, da es aus dem schätze mal türkischen smf-club stammt, wenn man den Kommentaren in den php`s glauben kann. Macht einen aufgeblähten Eindruck, nachdem, was ich derweil so gelernt hab.

Interessant wäre mir eben nur, wie ich eine Grafik zur Anzeige bringen kann, unzwar allein-stehend und diese dann in der index.css positionieren kann.

Oder eine Textzeile?! Es muss ja keine Grafik sein. Bei einer Textzeile mit großer Schrift als Motto etc. kann man die ja auch verschieben. Geht mit Firebug zB. ganz gut zum testen.
Das Element muss ja in der index.template erstmal aufgerufen werden, unzwar in richtiger Zeile und wie ist dann die Verbindung zur index.css?? um Einstellungen vorzunehmen?

Tausen Dank im vorraus
Rasmus

Erlebe jede Stunde, es ist viel später, als Du denkst!

Ruth

  • Spezialist
  • ****
  • Beiträge: 331
Re: Zusätzliche Grafik in Header platzieren
« Antwort #6 am: 08. März 2014, 21:43:25 »
Statt einer Grafik kannst du auch Texte verwenden, das geht genauso.

Bin nicht sicher, Rasmus...ich müßte das auch erst ausprobieren - und mein Header schaut ganz anders aus als deiner....aber du könntest es hier mal probieren, hier sind doch die grauen Motorgrafiken, oder?:

Code
// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']))
echo '
<h2>', $txt['news'], ': </h2>
<p>', $context['random_news_line'], '</p>';

echo '
</div>
<div class="logo"><img src="', $settings['images_url'], '/theme/motor.png" alt="' . $context['forum_name'] . '"/></div></div>';

Setze doch hier mal testweise dein Logo Nr. 2 rein:

Code
echo '
</div>
<div class="logo"><img src="http://URL_zu_deinem_Logo2.png" alt=""><img src="', $settings['images_url'], '/theme/motor.png" alt="" . $context['forum_name'] . '"/></div></div>';

Und dann mal schauen, was passiert... ;) Ist immer wieder spannend.

Ich bin nicht die Richtige, um dir da gezielt weiterzuhelfen...ich probiere auch bloß immer so herum, bis es in etwa so aussieht, wie ich mir das vorstelle.


Rasmus

  • Spezialist
  • ****
  • Beiträge: 122
  • Geschlecht: Männlich
    • Rasmus` Heimseite
Re: Zusätzliche Grafik in Header platzieren
« Antwort #7 am: 09. März 2014, 13:16:34 »
 ;d Mach ich genauso.
Und wenn ich dann Erfolg hab, mach ich mir gleich ne kleine Textdatei und schreib rein, was ich gerad getan hab.
Toll ist da Firebug, der zeigt Dir gleich watt so passiert.
Macht auch Spaß, so herumzuprobieren, aber was man da so genau tut, weiß man am Ende auch nicht.
Hab mir mal vom Stiefsohn das php-Handbuch geschnappt, aber das Ding ist so dick wie eine Dachlatte. Bei Seite 32 bin ich hinten übergekippt.
Ob das in meinen 45-Jahre alten Brägen noch rein geht?!

Wie stark Deine Kompetenz ist, ist völlig zweitrangig! Du versuchst zu helfen und wiegt alles auf!
Das SMFPortal scheint tatsächlich langsam zu verdunkeln. Das spürt man einfach.

(PS: Muss mich mal entschuldigen für die Schreibfehler weiter oben. Ist ja schlimm! Passiert meist wenn Akku leer geht von der Funktastatur, aber man sollte dann nochmal drüberschauen)

So nun muss ich bißchen mit dem Notepad++ kämpfen.
Schönen Sonntag
Rasmus
Erlebe jede Stunde, es ist viel später, als Du denkst!

Rasmus

  • Spezialist
  • ****
  • Beiträge: 122
  • Geschlecht: Männlich
    • Rasmus` Heimseite
Re: Zusätzliche Grafik in Header platzieren
« Antwort #8 am: 09. März 2014, 17:33:59 »
Dein Tipp hat mich viele Schritte weitergebracht. Das HD-Logo hab ich schon mal ungefähr da, wo es sein soll (die farblichen Aspekte sind erstmal nicht so wichtig, ist alles noch zu bunt)
Ich hab die neue zweite Grafik mal in Deine Vorschlag-Zeile gesetzt, also in die eigentliche Logo-Zeile. Da schoß mir ein, dass <div class="logo"> die "Brücke" zur Zeile .logo in der index.css sein wird!

Ich habe die Zeile in der index.template kopiert, unter die originale gesetzt erste Grafik eingetragen und div class geändert in logo2, sowie in der index.css die Zeile .logo kopiert, darunter gesetzt und .logo2 benannt.
Und dann ging es ans hinrücken. Dafür hat man ja mehrere Möglichkeiten. Mit dem Unterschied zwischen margin und padding muss man sich auch mal befassen.
Erfolge kann man aber mit beiden erzielen  ??? . Dann gibts noch width, float, position ...
Irgendwie klappt das dann auch, aber ob der entstandene Code nun der sinnvollste ist (Performance etc), weiß man auch nicht.
Erlebe jede Stunde, es ist viel später, als Du denkst!

neotask

  • Mitglied
  • **
  • Beiträge: 40
Re: Zusätzliche Grafik in Header platzieren
« Antwort #9 am: 03. September 2014, 10:49:51 »
Hallo, ich hänge mich mal hier an. Habe ein neues Forum installiert und bin nun bei den Anpassungen. Auch ich hätte gern eine Grafik oben eingebunden. Nun habe ich das Theme "Thing" wo kein Logo vorhanden ist welches man anpassen/nutzen könnte.

Kann mir Jemand helfen da ein Logo einzupflegen ?

Gruß Olli



Parmaster

  • Isomorpher Algorithmus
  • Administration
  • *****
  • Beiträge: 1205
  • Geschlecht: Männlich
Re: Zusätzliche Grafik in Header platzieren
« Antwort #10 am: 03. September 2014, 14:53:16 »
Kannst du mir mal bitte den Link zu dem Theme geben, ich finde das gar nicht.

EDIT:

ist es das? http://custom.simplemachines.org/themes/index.php?lemma=2038
Eine digitale Welt zur Neugestaltung des menschlichen Daseins

neotask

  • Mitglied
  • **
  • Beiträge: 40
Re: Zusätzliche Grafik in Header platzieren
« Antwort #11 am: 03. September 2014, 18:26:11 »
Hi, ja genau. Thing2Rc3

Gruß Olli

neotask

  • Mitglied
  • **
  • Beiträge: 40
Re: Zusätzliche Grafik in Header platzieren
« Antwort #12 am: 09. September 2014, 12:02:20 »
Hi, und kann man da was machen ?

Gruß Olli

 

Internes

Nutzungsbedingungen Impressum

Wissenswertes

Hilfe Knowledge Base

Nützliches

Downloads Socialmedia