Pagebar: Design sieht komisch aus

Chrischan

Hallo,

ich habe mir das Pagebar-Plugin von elektroelch.de runtergeladen und aktiviert. Als CSS-Design habe ich einfach mal das Standard digg-Design von der Seite genommen. Leider sieht das auf meinem Wordpress-Blog nicht so schön aus, wie auf dem elektroelch.de-Bild: Mein Blog (ganz runter scrollen).:cry: Kann sich das mal jemand anschauen und mir bitte helfen? Hab das extra aus all meinen <div>s rausgenommen. Weiß nicht mehr weiter :?

Danke und Grüße,
Chrischan

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

tomatl

Hallo Chrischan,

Versuch mal folgendes in die style.css zu kopieren:

.pagebar {
text-align: center;
}
.pagebar a {
background: #f5f5ee;
padding: 1px 3px; margin: 0 1px; border: 1px solid #BBC0A2;
}
#inhalt .pagebar a:hover {
text-decoration: none;
}

Dann musste halt nur noch die Farben anpassen... vielleicht hilfts...

Beste Grüße
Henry

Chrischan

Hallo Henry,

danke für deinen Tipp, leider zeigte er nicht die gewünschte Wirkung :-(
Woran mag das nur liegen... Es ist immer die rechte Seite neben der Seitenzahl :x

tomatl

Probier mal, diesen Code in deine index.php und archiv.php reinzukopieren:

<?php
if (function_exists('wp_pagebar')) {
wp_pagebar(array('before'=>'Seite: ', 'tooltip_text'=>'Seite', 'next'=>'»', 'prev'=>'«'));
}
else { ?>
<div class="weiter"><?php posts_nav_link(' – ', __('« Zurückblättern'), __('Weiterblättern »')); ?></div>
<?php } ?>

Die ursprüngliche Navigation dafür auskommentieren:

vielleicht klappt es diesmal?

Henry

Chrischan

Hab den Code erstmal nur in die index.php reinkopiert, bis auf die andere Darstellung (mit Seite davor und ausblenden von next) ist nichts passiert. Es scheint irgendein designtechnisches Problem zu sein.:(

Chrischan

Ich habe das jetzt mal jetzt in der pagebar.php vor den Link auf die 2. Seite und 3. Seite einen <span>-Tag geschrieben mit Verweis auf die Klasse page. In der CSS-Klasse page steht jetzt folgendes:

.pagebar .page
{
border: 1px solid #9AAFE5;
text-decoration: none;
padding: 0.2em 0.5em;
}

So klappt das einwandfrei in der Darstellung. Nur gehen mir jetzt die hover Effekte flöten (Verändern der Umrandungs-Farbe). Wie könnte ich die hinbekommen, also dass sich die Farbe ändert, wenn ich über das span-Element gehe?

marX

.pagebar .page a:hover {
}

.pagebar .page:hover geht auch, aber nicht im IE(6?)

Chrischan

So macht er mir wieder einen Rahmen um die Seitenzahl aber nicht um den <span>-Tag :roll: In der CSS steht

.pagebar .page a:hover
{
border: 1px solid #2E6AB1;
color: #2E6AB1;
}

im html-output:

HTML

<div class="pagebar">Seite: <span class="this-page">1</span><span class="page"><a href="http://www.christian-schlender.de/blog/page/2" title="Seite 2">2</a></span><span class="page"><a href="http://www.christian-schlender.de/blog/page/3" title="Seite 3">3</a></span><a href="http://www.christian-schlender.de/blog/page/2" title="Seite 2">&raquo;</a></div>

Olafb

Erklär doch mal bitte was du erreichen möchtest!? "Sieht komisch aus" ist wenig bis gar nicht hilfreich :|

marX

Meine Lösung funktioniert, allerdings musst du noch ein wenig tricksen. <a> muss ein Blockelement sein (display:block), Breite und Höhe auf 100% und margin:-1px (bzw. so breit wie der border).

Du suchst aber wahrscheinlich eher nach der Eigenschaft display:inline-block - damit verhalten sich die Boxes für die Zahlen wie Blöcke, bleiben aber in einer Zeile. Leider kennt Mozilla diese Eigenschaft nicht, hat aber eine äquivalente -moz-Eigenschaft.

Ansonsten versuch's mit float:left...

Chrischan

Ich habs hinbekommen, aber indem ich den Link und den Span-Tag vertauscht habe :)

Mein hover sieht jetzt so aus:

.pagebar a:hover .page
{
border: 1px solid #2E6AB1;
color: #2E6AB1;
}

Und beim Drüberfahren der Box ändert sich die Farbe der Box, super :)

Danke für eure Hilfe

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Pagebar: Design sieht komisch aus

Jetzt mitmachen!