Hallo zusammen!
Mit folgendem Code habe ich mir eine Kommentatoren-Übersicht zusammengebaut:
PHP
function top_commentator_all() {
global $wpdb;
$i = 0;
?>
<div class="walloffame_container">
<?php $topcommentator_query="SELECT comment_author, comment_author_email, comment_type, SUBSTRING_INDEX(comment_author_url, '/', 3) as top_commentator, COUNT(*) as top_num FROM $wpdb->comments
WHERE comment_approved='1'
AND comment_author_url IS NOT NULL
AND comment_author_url != ''
AND comment_author_email NOT LIKE '@domain.de%'
AND comment_author_url NOT LIKE 'http://facebook.com/%'
AND comment_author_url NOT LIKE 'http://themenfreund.de%'
AND comment_author_url NOT LIKE 'http://twitter.com%'
AND comment_type NOT LIKE 'pingback' OR 'trackback'
GROUP BY top_commentator
Order by top_num DESC, comment_date ASC
LIMIT 18";
$topcommentator_result = $wpdb->get_results($topcommentator_query);
if ( !empty($topcommentator_result) ) {
foreach ($topcommentator_result as $comment) :
$co_aut = $comment->top_commentator;
$co_aut = str_ireplace("http://", "", $co_aut); ?>
<div class="walloffame_stage" style="cursor: pointer;">
<div class="walloffame_avatar">
<?php
echo '<a href="'.$comment->top_commentator.'/" target="_blank">'.get_avatar( $comment, 164 ) .'</a>';
?>
</div>
<div class="walloffame_info">
<span class="walloffame_name">
<?php
echo $comment->comment_author.' <br />';
?>
</span>
<span class="walloffame_total">
<?php
echo $comment->top_num.' Kommentare'; ?>
</span>
</div>
</div>
<style="margin-right: 20px;">
<?php
$i++;
if($i%3==0) { ?>
</div><div class="walloffame_container">
<?php
}
endforeach;
$i=0;
}
?>
</div>
<?php
}
Alles anzeigen
Die CSS-Daten sehen so aus:
CSS
.topcommenters table{border-spacing:3px;
width:95%;
border: 0;
float: right;
margin: 0 100px;
padding: 16px 50px;
text-align: center;
}
.topcommenters1{
clear:left;
}
.walloffame_container {
height: 100%;
overflow: hidden;
text-align: center;
margin: 0 120px;
}
.walloffame_stage {
border: 0px solid #BBBBBB;
border-radius: 13px 13px 13px 13px;
box-shadow: 5px 6px 8px rgba(128, 128, 128, 0.8);
float: left;
line-height: 18px;
margin: 8px;
padding: 0;
height: 208px;
width: 160px;
}
.walloffame_stage:hover {
opacity: 0.8;
border: 1px solid #888888;
box-shadow: 0 1px 5px rgba(64, 64, 64, 0.8);
}
.walloffame_stage img {
border-radius: 13px 13px 1px 1px;
border-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.walloffame_stage .walloffame_info {
margin: 3px 5px 0;
overflow: hidden;
white-space: nowrap;
}
.walloffame_stage .walloffame_info .walloffame_name {
font-size: 14px;
font-weight: bold;
text-align: center;
}
.walloffame_stage .walloffame_info .walloffame_total {
font-size: 13px;
height: 50px;
}
.walloffame_widgetstage {
border: 1px solid #BBBBBB;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 5px rgba(128, 128, 128, 0.8);
line-height: 20px;
margin: 8px 5px;
overflow: hidden;
padding: 0;
}
.walloffame_widgetstage:hover {
border: 1px solid #888888;
box-shadow: 0 1px 5px rgba(64, 64, 64, 0.8);
}
.walloffame_widgetstage .walloffame_avatar {
float: left;
margin-right: 18px;
}
.walloffame_widgetstage img {
border-radius: 3px 3px 3px 3px;
border-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.walloffame_widgetstage .walloffame_name {
font-size: 14px;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
}
.walloffame_widgetstage .walloffame_total {
font-size: 13px;
overflow: hidden;
white-space: nowrap;
}
Alles anzeigen
Nun sind dort aber noch 2 mehr oder minder hässliche Fehler enthalten:
1. Beim Mouseover über ein Bild verschieben sich die anderen Bilder auch, zwar nur geringfügig, aber man bemerkt es
2. Ist die Darstellung der restlichen Seite verbogen. Statt weiß ist die Übersicht grau unterlegt und die Sidebar komplett unter die Darstellung gerutscht.
Jemand einen Vorschlag, wie ich das hinbekomme?
Danke im voraus.
Marcus