Stockholm Design: Zweites Element im Kopfbereich erstellen

07.10.2017 23:36 (zuletzt bearbeitet: 10.10.2017 23:05)
#1
ha

Guten Abend,

erst einmal vielen Dank für dieses geballte Wissen hier im Forum. Viele nützliche Tipps und Hinweise - Danke dafür.

Nun zu meiner Frage: Im Design Stockholm nutze ich den ganz normalen Platzhalter .jtpl-logo für eine Textgrafik. Nun möchte ich ähnlich wie bei http://freibeuter.com noch ein Logo oben links einfügen - also zwei Elemente im Kopfbereich unterbringen.

Hoffe jemand kann helfen.

Vielen Dank und Grüße aus Berlin
Chris


 Antworten

 Beitrag melden
12.10.2017 14:31
#2
co

Servus Chris,

die Webseite freibeuter geht bei mir nicht. Stimmt der Link?
Ich jedenfalls habe das selbe Problem. Sehr gerne würde ich im Hintergrundbild ein Textfeld als H1 und H2 integrieren und zusätzlich das Logo im Hintergrundbild implementieren.

Kann uns jemand helfen?

Vielen Dank und liebe Grüße,
Helmut


 Antworten

 Beitrag melden
14.10.2017 19:40
avatar  az_
#3
avatar
az_

...als Logo ein transparentes Bild zu verwenden ist eine gute Idee, wenn man dem Logo einen Hintegrund per CSS zuweisen möchte. Das ist besonders dann genial, wenn Du ein unterschiedliches Logo in der mobilen Version haben möchtest.

Mit :after bzw. before: und content:''; kann man auch Schriftzüge dort einsetzen. Einfacher ist es allerdings, Standard-Elemente per jQuery in den Bereich zu "beamen".

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
15.10.2017 10:18
#4
co

Hi az_,

danke für Deine Antwort. Leider versteh ich nicht viel von wem was du sagst, ich google mich mal durch. :)

Kann ich die mobile Seite unabhängig von der Desktopversion verändern?
Ich habe leider auch das Problem, dass meine mobile Seite lt. PageSpeed Insights relativ langsam ist (57/100). Als Vergleich die Desktop Version (75/100).

Die Nutzung des Browser Caching dürfte dabei besonders negative Auswirkungen haben. Die Vorschläge zur Verbesserung sehen so aus:

Browser-Caching nutzen
Das Festlegen eines Ablaufdatums oder eines Höchstalters in den HTTP-Headern für statische Ressourcen weist den Browser an, zuvor heruntergeladene Ressourcen über die lokale Festplatte anstatt über das Netzwerk zu laden.
Nutzen Sie Browser-Caching für die folgenden cachefähigen Ressourcen:
https://s3.amazonaws.com/…ownloads.mailchimp.com/js/mc-validate.js (Ablaufdatum nicht festgelegt)
https://api.dmp.jimdo-server.com/…/376/versions/1.0/assets/js/stickyNav.js (10 Minuten)
https://www.googletagmanager.com/gtag/js?id=UA-107428718-1 (15 Minuten)
https://connect.facebook.net/en_US/fbevents.js (20 Minuten)
https://connect.facebook.net/…signals/config/1863074067289346?v=2.7.23 (20 Minuten)
https://pagead2.googlesyndication.com/pa.../adsbygoogle.js (60 Minuten)
https://image.jimcdn.com/…f0c3ad1c3a3/version/1504456467/image.png (97,7 Minuten)
https://www.google-analytics.com/analytics.js (2 Stunden)
https://www.google-analytics.com/ga.js (2 Stunden)

Kannst Du mich da vielleicht ein bisschen aufklären oder kennst Du eine Seite, die einen hierzu in für nicht Programmierer verständlicher Sprache aufklären kann? Ich weiß wirklich nicht was ich damit anfangen soll.

Danke im voraus.

LG,
Helmut


 Antworten

 Beitrag melden
16.10.2017 20:48
#5
ha

Guten Abend zusammen,

@copterling
Sorry, hier die korrigierte URL: https://www.freibeutler.com :)

Das Logo oben links mittels CSS zu platzieren sollte nicht all zu schwer sein. Jedoch möchte ich noch zusätzlich ein Textfeld oder ein IMG mittig einfügen.
Meine Page geht demnächst online und aktuell würde ich das Logo oben links verzichten und dafür einen Schriftzug als PNG (transparent) mittig einfügen.

Stockholm sieht schon sehr edel aus.

Grüße


 Antworten

 Beitrag melden
17.10.2017 01:14 (zuletzt bearbeitet: 17.10.2017 01:15)
avatar  az_
#6
avatar
az_

...ich mache sowas gern mit jquery (.appendTo oder .prependTo). Ist manchmal ein bisschen tricky, aber lässt mich auch Standard-Elemente verschieben. Musste mal Googeln. Viele Beispiele bei stackoverflow!

LG, az

PS: https://www.freibeutler.com gefällt mir :)


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
25.10.2017 13:53
#7
co

Ich würde nun gerne die Suche von der Fußzeile in den Kopfbereich ziehen und diese auf jeder Seite sichtbar machen.
Im Kopfbereich direkt kann ich aber kein Textfeld erstellen, sondern hab lediglich die Option das Logo einzufügen.
Könnte mir hier jemand mitteilen wie ich hier vorgehen kann?

Danke und liebe Grüße,
copterling


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!