Erstes Design auf Wordpress - CSS Fragen

    Hey Leute,
    bin ganz neu hier um Forum und auch mit dem Wordpress-System.
    Bisher hab ich immer nur auf wbb3 "gecoded", wenn man das überhaupt so bezeichnen kann.

    Mein Problem ist hauptsächlich herauszufinden, wie ich welchen Bereich ansprechen kann.
    Im Anhang ist ein Preview von meinem Design und jetzt müsste ich wissen welche Grafik man am schlausten in Welchen div container packt.

    Als Hintergrund verwende ich gerade die Band die hinter dem Schriftzug "a Promise to Mary" steht, die Navigationsleiste und den Anfang vom Content.
    Der Header ist die Schrift ansich (nur Schirft mit Transparentem Hintergrund)
    Jetzt habe ich als erstes das Problem dass ich kein muster mehr in den eigentlichen hintergrund mehr einfügen kann (leichtes rauschen) weil da ja bereits die Band eingefügt wurde.
    Wäre ausserdem noch nett wenn mir jemand sagen könnte wie man die Links in der navi bzw. deren Hover anspricht.
    Danke ;)

    PS: ich bearbeite momentan den Stil "twentyten" um.
    http://simple-gaming.de/wordpresstest/

    • Gerade eben
    • Anzeige

    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

    Du kannst bei [COLOR=#ff0000]body.custom-background[/COLOR] die [COLOR=#ff0000]background-color[/COLOR] auf "[COLOR=#ff0000]transparent[/COLOR]" setzen und anschließend dem Element [COLOR=#ff0000]html[/COLOR] einen Background geben (das Rauschen). Hierbei musste jedoch schauen, dass es gut geschnitten ist, sodass man den Übergang nicht erkennt.

    Falls es nicht klappt, kannst du aber dem eigentlichen Hintergrundbild weiche Kannten verbassen (Verlauf ins Transparente) und somit sollte der Übergang dann nicht mehr zu sehen sein.

    Lad dir mal das Firefox Plugin Firebug (https://addons.mozilla.org/de/firefox/addon/firebug/) herunter. Damit kannst du seeehr viel anstellen und es hilft dir beim Herausfinden solche Probleme. Du kannst mit dem Addon z.B. jedes HTML Tag und jegliche dazugehörige CSS Eigenschaften ansteuern und sie, temporär, live im Browser editieren.

    Einmal editiert, zuletzt von endcore (20. Juli 2012 um 16:36)

    Ok, danke schonmal für die Hilfe!
    Hab folgenden Code eingesetzt:

    Zitat

    body.custom-background {background:transparent;
    }


    html {
    background-image:url(http://simple-gaming.de/wordpresstest/…png)!important;
    position:relative!important;
    }

    allerdings funktioniert das noch nich so ganz, wie du auf dem link oben von meiner Wp-Seite sehen kannst..
    hast du iwelche ideen?
    Oben über dem Logo sieht man, dass die grafik ganz flach eingefügt wurde.

    ja, weil du hier

    CSS
    body.custom-background {
background:transparent!important;
}


    bei [COLOR="#FF0000"]background[/COLOR] alles mit !important überschreibst

    du musst hier

    Code
    [COLOR="#FF0000"]background-color[/COLOR]: #1C282C;


    transparent einfügen
    dürfte im Dashboard sein

    Komisch, mit Firebug gign es gerade ohne Probleme.

    Dann ersetz mal

    Code
    body.custom-background {
    background-attachment: scroll;
    background-color: #1C282C;
    background-image: url("http://simple-gaming.de/wordpresstest/wp-content/media/2012/07/bg2.png");
    background-position: center top;
    background-repeat: no-repeat;
}

    mit

    Code
    body.custom-background {
    background-attachment: scroll;
    background-color: #1C282C;
    background-image: url("http://simple-gaming.de/wordpresstest/wp-content/media/2012/07/bg2.png") [COLOR=#ff0000]!important[/COLOR];
    background-position: center top [COLOR=#ff0000]!important[/COLOR];
    background-repeat: no-repeat [COLOR=#ff0000]!important[/COLOR];
}

    Alles klar, danke hat geklappt! ;)
    Hat noch jemand eine Idee wie ich die Navi ansprechen kann?
    Damit ich als Hintergrund die Leiste und den Hover für die einzelnen links einfügen kann?

    Alles klar, hat wunderbar geklappt.
    Gibts ne Möglichkeit den Hover Effekt im Menü bei der jeweiligen seite auf der man ist Permanent anzeigen zu lassen?
    Also wenn man auf der Home Seite ist, dass der Rote hovereffekt bleibt.

    Wenn du auf einer Seite bist, dann sieht das entsprechende Listitem so aus:

    Code
    <li class="page_item page-item-8 [COLOR=#ff0000]current_page_item[/COLOR]"><a href="http://simple-gaming.de/wordpresstest/?page_id=8">MEDIA</a></li>

    In deiner CSS In Zeile 140 ersetzt du

    Code
    #access li:hover > a, #access ul ul *:hover > a

    mit

    Code
    #access li:hover > a, #access ul ul *:hover > a[COLOR=#ff0000], #access li.current_page_item[/COLOR]

    oder .... Zeile 472

    Code
    #access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a {
    color: #FFFFFF;
}

    ändern in

    Code
    #access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a {
    color: #FFFFFF;
    background: url("http://forum.wpde.org/images/nav_hover.png") no-repeat 0 0 transparent;
    height: 50px;
    min-width: 70px;
}

    Einmal editiert, zuletzt von Tutrix (22. Juli 2012 um 14:18)

    Danke leute ;)
    Funktioniert schonmal einigermaßen, nur stört mich der abstand zwischen den Menüpunkten, wie bekomme ich die näher zusammen ohne dass das Hoverbild abgschnitten wird?

    als erstes zu meinem Post oben, da hat der Forenbug mal wieder zugeschlagen

    Code
    http://forum.wpde.org/images/nav_hover.png


    muss so aussehen

    Code
    images/nav_hover.png


    irgend ein Bug fügt da als die Forenadresse hinzu
    musst also entsprechend korrigieren in deiner css

    zum Abstand

    Zitat

    ohne dass das Hoverbild abgschnitten wird

    dann musst du dieses in der Breite ändern, da das Bild derzeit ja 117 Pixel Breit ist

    Ok, das mit der Navi hab ich selbst hinbekommen, jetzt hätte ich ne Frage, weil ich da schon länger am grübeln bin.
    Wie auf meinem Screenshot im ersten beitrag zu erkennen ist, möchte ich ja de linke spalte, die in der die News stehen einen Hintergrund einfügen (den weißen (auf dem Screenshot noch rechts) und jetz die Frage, wie mache ich dass, dass die Ecken oben abgerundet sind und auf dem unteren teil diese Gemäuer-Textur angezeigt wird.

    mein erster Gedanke war, den Hintergrund in 2 Teile zu unterteilen, das heißt die abgerundeten/spitzen oberen Ecken vielleicht als Hintergrund für den Titel und den unteren Rest als Hintergrund für die eigentlichen News.

    Geht das?

    Zitat von endcore


    Lad dir mal das Firefox Plugin Firebug (https://addons.mozilla.org/de/firefox/addon/firebug/) herunter. Damit kannst du seeehr viel anstellen und es hilft dir beim Herausfinden solche Probleme. Du kannst mit dem Addon z.B. jedes HTML Tag und jegliche dazugehörige CSS Eigenschaften ansteuern und sie, temporär, live im Browser editieren.

    ich gehe mal davon aus das du diesen Ratschlag umgesetzt hast!

    somit siehst du ja welchen css Code du mit dem Hintergrund versehen musst und kannst dies vorab im Browser testen

    wenn nur die Artikel einen Hintergrund haben sollen also Zeile 556

    Code
    .hentry {
    margin: 0 0 48px;
}

    oder nur der Titel

    CSS
    #content .entry-title {
    color: #CC0000 !important;
    font-size: 21px;
    font-weight: bold;
    line-height: 1.3em;
    margin-bottom: 0;
}

    usw.

    Einmal editiert, zuletzt von Tutrix (23. Juli 2012 um 19:21)

    Ich nutze Chrome, deshalbt ist das Addon eigentlich eh schon integriert.
    Mir geht es darum, dass ich ja nicht einfach nur den Hintergrund einfügen kann, da die geposteten Texte unterschiedlich lang sind. Deshalb brauche ich einen Div container für den Anfang des Hintergrunds, für die Mitte (die sich bei langen posts wiederholt) und einen für das Ende. Welche kann man da verwenden?

    Ich hoffe es ist einigermaßen verständlich.

    nun es sind ja schon mehr als 3div's vorhanden, mal mit Firebug 3 davon markiert( mit background versehen)

    diese siehst du ja auch mit deinem Tool

    wie oben schon erwähnt

    rot oben = #content .entry-title
    weiß mitte = .hentry (gesamter Artikel)
    grün unten = .entry-utility

    natürlich kannst du in den php-dateien auch zusätzliche div's einfügen

    Einmal editiert, zuletzt von Tutrix (23. Juli 2012 um 21:10)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden