[Gelöst] Text im Header und Höhe ändern

[Chriscraft]

Version 1.6.1.10 / Theme Bootstrap

 

Hallo,

wie bzw. wo kann ich oben im Header zwischen Telefonnummer und den Links Kontakt und Anmelden einen individuellen Text mit einem Font awesome Icon davor einfügen?
Es soll dort "Verkauf nur an Gewerbe. Alle Preise netto zzgl. MwSt." stehen.
Da der Platz sehr begrenzt ist, wüsste ich auch gerne wo ich die Höhe dieses Bereichs ändern kann.

Falls die Idee mit dem Top Banner kommt - das möchte ich vermeiden.

Beste Grüße

Edited December 16, 2016 by Chriscraft (see edit history)

[Whiley]

Das machst du in der

/themes/default-bootstrap/modules/blockcontact/nav.tpl?

 

Die Höhenänderungen machst du in:

/themes/default-bootstrap/css/global.css

Suche dort nach

header.nav

 

 

Grüsse

Whiley

[Chriscraft]

Vielen Dank Whiley!

Ich habe mich jetzt mal an die tpl und die CSS gemacht.
Ich muss ehrlich sagen, dass ich von PHP null Ahnung habe und mit CSS absoluter Anfänger bin
aber ich finde Learning by doing ist noch die beste Methode.

Was ich bis jetzt erreicht habe, sieht man im Anhang.
Ich bekomme es einfach nicht hin, beide Zeilen zentriert in der Mitte zu positionieren:

Mit der ersten Zeile geht es halbwegs, die Zweit bewegt sich aber trotz jeglicher Versuche nicht nach rechts.

In der nav.tpl habe ich es wie folgt eingefügt:

<span class="shop-b2b"> Verkauf nur an Handel und Gewerbe <br/>

                                          Alle Preise zzgl. MwSt. 

</span>

Die CSS Klasse sieht folgendermaßen aus:

 .shop-b2b {

    font-size: 16px;

    color: #fff;

    margin-left: 210px;

    font-weight: bold;}

Wo liegt der Fehler bzw. was muss ich ändern?

 

Edited December 14, 2016 by Chriscraft (see edit history)

[rictools]

Oh je, du bist nicht nur was PHP und CSS Anfänger, du kennst nicht einmal die Grundlagen von HTML (und die sollte man wirklich kennen, wenn man selbst an seiner Website rumbasteln will). Du kannst da so viele Leerzeichen einfügen wie du willst, der Browser behandelt 1 Leerzeichen als 1 Leerzeichen und hundert Leerzeichen auch als 1 Leerzeichen. Statt dessen mußt du   (Non Breaking Space = nicht umbrechendes Leerzeichen) einfügen (eleganter ist aber eine Formatierung per CSS).

 

Wenn du uns keinen Link zur Seite mitteilen kannst, mußt du selbst lernen, wie man mit dem Firefox-AddOn Firebug oder entsprechenden eingebauten Browserfunktionen (erreichbar über Rechtsklick -> Untersuchen oder ähnlich) herausbekommt, welche CSS-Anweisungen was bewirken und wo man diese dann ändern kann.

[Whiley]

na, zentrieren müßte so irgendwie gehen (nicht getestet)

 

   <p class="shop-b2b">textblahblah </p>

 

in der css

 

 .shop-b2b {
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    width: 20em}

oder so ähnlich

 

Grüsse

Whiley

[Chriscraft]

Wow das war ne harte Klatsche, zieht mich aber nicht runter. Das mit den Leerzeichen ist mir bewusst, sonst hätte ich im CSS

ja nicht mit dem margin-left gearbeitet.
Für diese Information im Header habe ich die CSS Anweisung (shop-b2b) selbst geschrieben, das war ja nicht vorhanden
und muss daher auch nicht gesucht werden.
Habe den Shop schon so weit im CSS angepasst, dass ich ganz zufrieden mit meiner Leistung bin - trotz Anfänger und jeder muss sich mal rantasten.
Ich tue ja keinem Weh damit.
Natürlich weiß ich wie ich in Firefox oder Chrome die entsprechenden CSS Zeilen finde und dort schon mal ändere um das Ergebnis zu sehen.
Wie gesagt, es war nur die zweite Zeile, die ich einfach nicht bewegt bekommen habe und das ist die Frage gewesen.

[Shad86]

Wenn du die zweite Zeile unabhängig von der ersten behandeln willst würde ich beides jeweils in <p> Tags packen und es mit seperaten CSS bearbeiten. So kannst du zb. float:right verwenden.

Quasi so:

<p class="shop-b2b">Verkauf nur an Handel und Gewerbe</p>
<p class="preise">Alle Preise zzgl. MwSt. </p>

.shop-b2b {
    font-size: 16px;
    color: #fff;
    margin-left: 210px;
    font-weight: bold;
    float: left;
    margin-left: 50px;
}
.preise {
    font-size: 16px;
    color: #fff;
    margin-left: 210px;
    font-weight: bold;
    float: right;
    margin-right: 10px;
}

Sind nur beispiele. Wird so wahrscheinlich nicht gehen aber damit einfach mal rumspielen.

Edited December 15, 2016 by Shad86 (see edit history)

[rictools]

Wow das war ne harte Klatsche, zieht mich aber nicht runter. Das mit den Leerzeichen ist mir bewusst, sonst hätte ich im CSS

ja nicht mit dem margin-left gearbeitet.

Für diese Information im Header habe ich die CSS Anweisung (shop-b2b) selbst geschrieben, das war ja nicht vorhanden

und muss daher auch nicht gesucht werden.

Habe den Shop schon so weit im CSS angepasst, dass ich ganz zufrieden mit meiner Leistung bin - trotz Anfänger und jeder muss sich mal rantasten.

Ich tue ja keinem Weh damit.

Natürlich weiß ich wie ich in Firefox oder Chrome die entsprechenden CSS Zeilen finde und dort schon mal ändere um das Ergebnis zu sehen.

Wie gesagt, es war nur die zweite Zeile, die ich einfach nicht bewegt bekommen habe und das ist die Frage gewesen.

Ich wollte dich nicht "runterziehen", hatte aber den Eindruck, daß du mit zahlreichen Leerzeichen versucht hättest, die zweite Zeile nach rechts zu schieben (mit   geht das ja dagegen durchaus). Bei dem margin-left weiß man halt nicht immer, woran sich dieser Abstand orientiert oder ob er mit einer anderen Anweisung kollidiert. Da ist die "Untersuchen"-Funktion halt Gold wert und diese ist durchaus nicht als bekannt vorauszusetzen, sonst würden sich hier viele Fragen erübrigen.

[Chriscraft]

Mit Whiley's Hilfe hat es jetzt geklappt.
Zwar sind Telefonnummer und der B2B Text nicht auf einer Höhe, aber ich lass das mal so stehen und
kümmere mich um andere Baustellen.

[Shad86]

Oder gib uns einen Link und vielleicht guckt da mal einer rein und gibt dir einen Tip.