"Weiterlesen" anpassen

hearandshout

Hallo Leute ich habe eine Frage :confused:

ich möchte den "weiterlesen" text unter wordpress posts mit einem bild ersetzen welches beim hovern/rübernavigieren wechselt.

Zur Verdeutlichung:
We Are not Freelancers
(hier wirds so gemacht wie ich es seit langem versuche:sad:)

Customizing the Read More WordPress Codex
hilft auch nicht viel weiter

ich danke für jeden tipp :?

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

hearandshout

ich hab es jetzt erstmal so hinbekommen, ein einfaches bild kann ich schonmal anzeigen:

index.php:

PHP

<?php the_content("<img src='http://localhost/wordpress/wp-content/themes/fluid-solution/img/1.png' />"); ?>

Ich hab nun in der style.css die logos erstellen lassen um den hover-effekt hinzubekommen:

style.css:

Code

.logo2 {
    background: url('img/1.png') no-repeat right middle;
    padding: 10px 50px 15px 5px
}


.logo2:hover {
    background: url('img/2.png') no-repeat right middle;
    padding: 10px 50px 15px 5px

ich weiß aber nicht wie ich nun die css klassen mit dem the_content() verbinden kann...:confused:

maxe

versuch mal

Code

<img [COLOR=Red]class='logo2'[/COLOR] src='.....

Aber ob das so funktioniert ... für ein Bild einen Background zu bestimmen :confused:
Du könntest vielleicht eher mit einem span arbeiten:

PHP

<?php the_content('<span class="logo2" />'); ?>

und dann irgendwie die css so aufbauen:

Code

a span.logo2 {
    background: url('img/1.png') no-repeat right middle;
    padding: 10px 50px 15px 5px;
width:50px;
height:20px;
}
a:hover span.logo2 {
    background: url('img/2.png') no-repeat right middle;
    padding: 10px 50px 15px 5px;
width:50px;
height:20px;
}

Alles anzeigen

Aber auch alles grad mal so ungetestet.

hearandshout

erster vorschlag funktioniert nicht,

der zweite ergibt sowas:
http://img3.imagebanana.com/img/od5sglvg/g…0322_110215.png

einen rosa strich wenn ich rüber hover :/

maxe

vielleicht gibst du einfach mal eine Link zur Site!
Ansonsten bleiben wieder nur die Glaskugeln :-|
Existieren die Grafiken mit richtigem Namen&Endung im richtigen Ordner?

hearandshout

HEAR AND SHOUT
ja die bilder sind im ordner mit der endung

hearandshout

sorry für den doppelpost aber ich kann nicht editieren+eine datei anhängen,
deswegen hier nochmal mein template für euch damit ihr das besser versteht :)

maxe

Mir ist grad erst aufgefallen...
...sag mal, wie kommst du bei background auf das middle?? Für das middle auf jeden Fall center setzen:

Code

url(img/1.png) no-repeat right [COLOR=Red]center
[/COLOR]url(img/2.png) no-repeat right [COLOR=Red]center[/COLOR]

dann das padding nach links erhöhn ... jetzt klappt's auch mit dem Nachbarn ;)

hearandshout

perfekt :D es funktioniert das einzige was mich jetzt noch stört ist der rosa strich der beim hovern auftaucht... das muss iwo in der css stehn ich finds aber nicht..

edit habs gefunden :D

Code

.content a:hover,.footer a:hover {
    color: #444;
    /*border-bottom: 1px solid #F06;*/

Willkommen! Melden Sie sich an oder registrieren Sie sich.

"Weiterlesen" anpassen

Jetzt mitmachen!