Logobild einfügen

atom

hallo benutze das Theme XClusive. Nun wird im Header bereits schön mein Seitentitle + Description angezeigt. Ich hätte nun gerne noch mein Logo davor angezeigt. Habe schon einiges probiert neue css classe mit dem #header_logo und diese dann in der header.php als div id eingefügt, nur wird dann alles durcheinander gehauen. Könnt ihr mir helfen?

layout.css:

Code

#header {
        -moz-box-shadow: 0 2px 4px rgba(90,90,90,.2);
        -ms-box-shadow: 0 2px 4px rgba(90,90,90,.2);
        -o-box-shadow: 0 2px 4px rgba(90,90,90,.2);
        -webkit-box-shadow: 0 2px 4px rgba(90,90,90,.2);
        box-shadow: 0 2px 4px rgba(90,90,90,.2);
        position:relative;
        z-index:100;
}
#headimg {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        clear:both;
        height:auto;
        max-width:100%;
        min-height:298px;
        padding: 0;
        position:relative;
        width:960px;
}
#site-title {
        font-size:3.05em;
        margin-bottom:0;
        text-transform:uppercase;
}
#site-title a {
        font-family: Times, serif;
        word-wrap:normal;
}
#site-title img {
        margin-bottom:5px;


}
#site-description {
        font-size:.9em;
        line-height:120%;
        letter-spacing:.15em;
        margin-bottom:0;
        width:100%;
}


.site-logo {
        height:auto;
        max-width:98%;


}
.no-header-text #site-description,
.no-header-text.no-logo #site-title {
        position:absolute;
        clip:rect(1px, 1px, 1px, 1px);
}

Alles anzeigen

header.php:

PHP

<body <?php body_class(); ?>>


<?php xclusive_before_page(); ?>


<div id="page" class="hfeed">


        <?php xclusive_before_header(); ?>


        <header id="header" role="banner">
                <div class="hgroup">


                        <h3 id="site-title"><span><?php echo xclusive_get_site_branding() ?></span></h3><!--#site-title-->
                        <h4 id="site-description"><?php bloginfo( 'description' ); ?></h4>
                </div><!--.hgroup-->

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Nevery

Was spricht denn dagegen, in der CSS-Datei #header um einen Hintergrund - eben Dein Logo - zu erweitern? Das kannst Du ja auch halbwegs ausrichten und positionieren, sofern Dir das ausreicht, wäre es wohl die einfachste Lösung.

atom

Also einfach sowas in der Art im #header mit einfügen :
background:url(bilder/logo.png) no-repeat left top;

Nevery

Genau, erstmal sowas ausprobieren :)

atom

Also ich komme nicht klar. habe das jetzt hier eingefügt #heading aber es rührt sich nix:

Code

/* =Header
-------------------------------------------------------------- */
#header {
        -moz-box-shadow: 0 2px 4px rgba(90,90,90,.2);
        -ms-box-shadow: 0 2px 4px rgba(90,90,90,.2);
        -o-box-shadow: 0 2px 4px rgba(90,90,90,.2);
        -webkit-box-shadow: 0 2px 4px rgba(90,90,90,.2);
        box-shadow: 0 2px 4px rgba(90,90,90,.2);
        position:relative;
        z-index:100;




}
#headimg {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        clear:both;
        height:auto;
        max-width:100%;
        min-height:298px;
        padding: 0;
        position:relative;
        width:960px;
        [B]background:url(../_img/logo.png) no-repeat left top;[/B]
}
#site-title {
        font-size:3.05em;
        margin-bottom:0;
        text-transform:uppercase;
}
#site-title a {
        font-family: Times, serif;
        word-wrap:normal;
}
#site-title img {
        margin-bottom:5px;


}
#site-description {
        font-size:.9em;
        line-height:120%;
        letter-spacing:.15em;
        margin-bottom:0;
        width:100%;
}


.site-logo {
        height:auto;
        max-width:98%;


}
.no-header-text #site-description,
.no-header-text.no-logo #site-title {
        position:absolute;
        clip:rect(1px, 1px, 1px, 1px);
}

Alles anzeigen

Nevery

Warum denn in #heading und nicht in #header?
Ohne Deine Seite zu kennen kann ichs natürlich nicht sicher beurteilen, aber laut dem Inhalt der header.php wäre es andersherum wohl sinnvoller.

atom

hallo
da passiert leider auch nichts.
hier mal der Link zur Seite:
http://demokratisches-ostvorpommern.de/

SirEctor

Du müsstest bei .hgroup den Background raus nehmen und bei #header den Wert so umschreiben

Code

#header{background:#298cba url(../_img/logo.png) no-repeat left top; .....}

atom

Danke für die Hilfe, aber bei hgroup steht nur flaoat:left drin.
Ich kann immer noch keine Logobild Datei sehen :(

SirEctor

in. hgroup steht definitiv was. Guckst Du in der richtigen css?
/wp-content/themes/xclusive/_css/blue.css

atom

Danke dir!!!! hatte dies natürlich übersehen.
Aber, jetzt bräuchte nochmal hilfe, jetz wäre es schön wenn ich das Logobild etwas runter bekomme das es auch komplett sichtbar ist, und in den dunkel blauen streifen oben den Schriftzug bzw Seitentitel reinschiebe.
Ich bin gerade etwas überfordert mi tdiesem theme...
Aber vielen dank für deine Hilfe !!!

SirEctor

Schreibe es in die CSS einfach so in etwa

Code

[FONT=Consolas]background: #298cba url(../_img/logo.png) no-repeat left 50px;[/FONT]

Du könntest natürlich left auch noch durch px ändern

atom

Du bist echt mein Forenuser der Woche, ach was des Monats !!!

Ob du mir nochmal helfen könntest?

Diese Socialbuttons sidn jetzt ganz links direkt unterm/im Logo.
Die dürften ruhig irgend wie günstiger positioniert sein, zudem hauen die links da auch nicht so ganz hin.
Habe versucht da mit dem padding rumzuspielen, hatte aber nur mäßigen Erfolg, siehst du ja selbst.
Am besten wären sie rechts oben aufgehoben wie ich finde ...
wie krieg ich das hin?

SirEctor

Versuch mal folgendes am Ende der CSS, aber keine Garantie:

Code

#social-nav {
position: relative;
left: 92%;
bottom: 20px;
}
#social-nav li a {
padding: 20px 5px;
}
#menu-social-default a{
overflow:visible;
color: #fff;
}

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Logobild einfügen

Jetzt mitmachen!