CSS in Verbindung mit Wordpress

[onpoint]

Hallo

Ich hätte einige Konflikte, die mich seit vielen Stunden beschäftigen.
Es geht vor allem um text-indent.

Ich würde gerne einen normalen Textlink mit einem Bild ersetzen, das ebenfalls verlinkt sein soll.

Dazu erstellte ich in Wordpress einfach ein Menü und durchsuchte mittels Firebug die Klassen.

Ich konnte erfolgreich den Text durch mein Wunschbild ersetzen. Den Text verschob ich mittels text-indent auf -9999px.

Nun ist das Bild trotzdem nicht verlinkt, was im Grunde ja logisch ist...

Mein momentaner CSS Code sieht wie folgt aus:

li#menu-item-45.menu-item {
    background:url(Bilder/linkstart.png) 0 0 no-repeat;
    width:290px;
    height:48px;
    margin:14px 0 0 24px;
    text-indent:-9999px;
    overflow:hidden;
}

Wie kann ich trotz Ersetzen des Textes ein verlinktes Bild angezeigt bekommen?

Lieben Gruß und danke im Voraus!

 

[cebito]

AW: CSS in Verbindung mit Wordpress

Mach das ganze mal für das inliegende a-Element statt für den li. Gib diesem noch zusätzlich display:block oder inline-block.

 

[onpoint]

AW: CSS in Verbindung mit Wordpress

Mach das ganze mal für das inliegende a-Element statt für den li. Gib diesem noch zusätzlich display:block oder inline-block.

Hallo cebito,

das Problem ist, dass in dem a-Element keine Klasse existiert. "li#menu-item-45.menu-item a {" ergibt leider auch keinen Effekt. Dann tut sich garnichts mehr.

Viele Grüße

-edit- Es funktioniert. Mein FTP-Programm spielte eben nur etwas verrückt! Ich dank dir!

 

[onpoint]

AW: CSS in Verbindung mit Wordpress

Und eine weitere Frage von CSS in Verbindung mit Wordpress:

Es geht um Widgets. Man gibt der functions.php ja folgende Anweisungen:

<?php
if (function_exists('register_sidebar')) {

    register_sidebar(array(
        'name' => 'Sidebar',
        'id'   => 'sidebar',
        'description'   => 'Dies ist der Widget-Bereich der Sidebar',
        'before_widget' => '<div id="sidebar" class="textsidebar">',
        'after_widget'  => '</div>',
        'before_title'  => '<p class="widgetpunkt"><p class="widgetborder">',
        'after_title'   => '</p></p><p class="widgetborderinhalt">'
    ));
?>

So steht es momentan bei mir, so dass es einigermaßen gut läuft.

Frage: Wie gehe ich das an, dass für jedes neu installierte und angewandte Widget eine saubere Darstellung erscheint?

So wie es momentan aussieht funktioniert die Positionierung perfekt für eigene "Text-Widgets". Aktiviere ich jedoch beispielsweise das Widget, das mir die letzten Artikel anzeigt, verschiebt er wieder Elemente. Wie kann das sein?

Hier der Code meiner CSS Datei:

#sidebar {
    width:291px;
    height:auto!important;
    float:left;
    background-color:rgba(255,255,255,0.6);
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    -o-border-radius:8px;
    border-radius:8px;
    margin:10px 0 0 158px;
    padding-bottom:20px;
    padding-top:5px;
    padding-left:5px;
    padding-right:5px;

}

#sidebar li a {
    list-style:none;
    color:#000;
}


.textsidebar {
    margin-bottom:40px;
    padding:20px;
    
}

.textsidebar li a {
list-style:none!important;
    
}


.widgetpunkt {
    background:url(Bilder/widgetpunkt.png) 0 0 no-repeat;
    width:32px;
    height:32px;
    float:left;
    margin:20px 0 0 5px;
    
}

.widgetborder {
    width:210px;
    height:11px;
    border-bottom:1px dotted #000;
    float:left;
    margin-top:22px;
    margin-left:-11px;
}

.widgettitle {
    width:210px;
    height:17px;
    border-bottom:1px dotted #000;
    float:left;
    margin-top:6px;
    margin-left:-2px;
    list-style:none!important;
}


.widgetborderinhalt {
    width:210px;
    float:left;
    margin-top:0px;
    margin-left:5px;
}


.textwidget {
    width:225px;
    height:auto!important;
    float:left;
    margin-top:-10px;
    margin-left:37px;
    list-style:none!important;
    text-align:justify;
    display:block;
}

.widget_text {
    list-style:none!important;
}

In der HTML steht hier nur folgendes:

<div id="widget">




<div class="highlightsidebar">

<?php get_sidebar(); ?>






</div>
</div> <!--widget-->

Danke im Voraus für die Hilfe!

Lg

 

[KireSchattenhaar]

AW: CSS in Verbindung mit Wordpress

Schau mal in der Übersicht über alle PHP-Dateien, ob es da eine eigene PHP für gibt. Ich habe ein extra-Plugin für zuletzt angezeigte Artikel und da gibt es ne Extra-PHP, welche dann eingeladen wird. Und sonst, installiere Dir einfach mal Firebug und schau mal, wie die Elemente zusammengewürfelt werden, das hilft bestimmt um auf des Rätsels Lösung zu kommen^^.

 

[onpoint]

AW: CSS in Verbindung mit Wordpress

Schau mal in der Übersicht über alle PHP-Dateien, ob es da eine eigene PHP für gibt. Ich habe ein extra-Plugin für zuletzt angezeigte Artikel und da gibt es ne Extra-PHP, welche dann eingeladen wird. Und sonst, installiere Dir einfach mal Firebug und schau mal, wie die Elemente zusammengewürfelt werden, das hilft bestimmt um auf des Rätsels Lösung zu kommen^^.

Hallo Kireschattenhaar,

danke für deinen Post! Eine extra Datei gibt es nicht im Themes-Ordner, da ich alle ja selbst angelegt habe. An die anderen Dateien gehe ich nur ungerne ran, da diese bei Updates wohl überschrieben werde.

Ich glaube ich verstehe einfach nicht Die Logik von:

'before_widget' 
'after_widget',
'before_title'
'after_title'

Widget betrifft in dem Fall das gesamte Widget an sich? aber warum steht "after widget" dann nicht ganz am ende?

Lg