Grafisches Logo neben Blog-Titel anzeigen(2k11 oder Next)?

Hier können Probleme und alles andere in Deutscher Sprache gelöst werden.
Post Reply
kybernator
Regular
Posts: 135
Joined: Sat Sep 22, 2012 10:15 pm

Grafisches Logo neben Blog-Titel anzeigen(2k11 oder Next)?

Post by kybernator »

Hallo,

ist es möglich, neben dem Blog-Titel (idealerweise von der Höhe her neben Titel und Beschreibung) ein (von den Proportionen her etwa quadratisches) grafisches Symbol einzubinden?

Ähnlich wie z.B. hier

http://www.typografie.info/

Falls es denn ginge, würde ich sehr gern die gemeinsame Höhe von h1 und nachfolgendem span (in Next) respektive p (in 2k11) nutzen, damit das Ganze noch eine vernünftige Größe hat.

Aus Gründen der Barrierefreiheit und Responsivität ist die Nutzung einer entsprechend gestalteten Banner-Grafik mit Logo und Text eher nicht so Mittel der Wahl, finde ich.

Grüße,

Bernd
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Grafisches Logo neben Blog-Titel anzeigen(2k11 oder Next

Post by yellowled »

kybernator wrote:ist es möglich, neben dem Blog-Titel (idealerweise von der Höhe her neben Titel und Beschreibung) ein (von den Proportionen her etwa quadratisches) grafisches Symbol einzubinden?
Natürlich.
kybernator wrote:Falls es denn ginge, würde ich sehr gern die gemeinsame Höhe von h1 und nachfolgendem span (in Next) respektive p (in 2k11) nutzen, damit das Ganze noch eine vernünftige Größe hat.
Hm, das einzige Problem ist, dass sich dieser Wert in Next ab 1400px nochmal ändert und ggf. von individuellen Anpassungen abhängen kann. In einem Standard-Next wären es z.B. 104px, ab 1400px Breite 117px. Das müsste man als CSS-Hintergrundbild des Container-divs (in Next: #identity) zuweisen.

Code: Select all

#identity {
    background: url('{TEMPLATE_PATH}img/logo.png') left center no-repeat;
    box-sizing: border-box;
    padding-left: 104px;
}
Wahrscheinlich wird praktisch etwas mehr padding nötig sein, eventuell wird auch die tatsächlich sinnvolle Größe der Grafik eine andere sein, damit muss man ein bisschen praktisch rumspielen. Schau Dir auch mal background-size an, das kann hier helfen. Und wie gesagt: ggf. müsste man das für die großen Auflösungen noch anpassen.

Eventuell macht es auch Sinn, via :before ein Pseudo-Element für #identity zu erzeugen und dem das Hintergrundbild zuzuweisen.

(Wie immer gilt: Bei Fragen einfach nochmal hier im Forum fragen.)
kybernator wrote:Aus Gründen der Barrierefreiheit und Responsivität ist die Nutzung einer entsprechend gestalteten Banner-Grafik mit Logo und Text eher nicht so Mittel der Wahl, finde ich.
Naja – jein. Eine über die entsprechende Theme option von 2k11 oder Next eingebundene Grafik wäre „automatisch“ responsive, allerdings hätte sie keinen Alternativtext.

Man müsste also vermutlich Blogtitel und -beschreibung per CSS ausblenden und die Bannergrafik „hochziehen“ – das habe ich z.B. für 2k11 schon mal hier im Forum beschrieben.

YL
kybernator
Regular
Posts: 135
Joined: Sat Sep 22, 2012 10:15 pm

Re: Grafisches Logo neben Blog-Titel anzeigen(2k11 oder Next

Post by kybernator »

OK, dann werde ich mal versuchen, das zu verstehen und umzusetzen, mir auch den verlinkten Thread anschauen.

Leider sind meine CSS-Kenntnisse recht schnell an der Grenze von cut-and-paste, trial-and-error, aber so lernt man auch dazu.

Und ja, bei Fragen frag' ich gerne noch mal nach, danke.

Gruß

Bernd
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Grafisches Logo neben Blog-Titel anzeigen(2k11 oder Next

Post by yellowled »

kybernator wrote:Leider sind meine CSS-Kenntnisse recht schnell an der Grenze von cut-and-paste, trial-and-error, aber so lernt man auch dazu.
Das Dumme ist, dass „mal eben ein (responsives) Logo einbauen, wo keins vorgesehen war“ nichts ist, was man per copy & paste erklären kann. Dafür hat es zu viele Variablen (was auch einer der Gründe ist, warum es dafür keine theme option gibt).

Aber noch haben wir hier im Forum eigentlich jedes CSS-Problemchen gelöst gekriegt. :wink:

YL
Post Reply