Zur Navigation

Rating Widget verschieben

1 PKV-Wiki (Gast)

Wie kann ich via CSS das Rating Widget verschieben unter www.pkv.wiki nach rechts unten verschieben?

div#form-item div.form-type-item {
right: 0px;
bottom: 0px;
}

brachte kein Ergebnis??

Danke!

20.09.2017 18:31

2 Jörg Kruse

Dieser Selektor:

div#form-item div.form-type-item

würde einem Div innerhalb eines Divs entprechen:

<div id="form-item">
<div class="form-type-item">

Wir haben aber ein Div mit zwei Klassen

<div class="form-item form-type-item">

Dieses würde man mit einen Selektor ansprechen können, in welchem die Klassen hintereinander angefügt werden:

div.form-item.form-type-item

Ich frage mich aber, ob hiermit nicht auch andere Form-Items angesprochen werden, die nicht verschoben werden sollen? gibt es nicht die Möglichkeit noch eine eindeutige ID hinzuzufügen, z.B. so was wie "rating-widget"?

Die Eigenschaften right und bottom machen eigentlich nur Sinn, wenn ein Element mit position:absolute, position:fixed etc positioniert ist. Außerdem müsste es noch eine fest definierte Breite haben, sonst nimmt das Blockelement 100% der Breite ein und ein right:0 hätte hier keinen besonderen Effekt

Das einfachste wäre es hier vielleicht, das Rating-Widget mit einem entsprechenden margin-left Wert nach rechts zu verschieben?

20.09.2017 20:11 | geändert: 20.09.2017 20:12

3 PKV-Wiki (Gast)

wie es schient hat das Drupal Module "Rate" folgende CSS und tpl.php

(1) CSS

.rate-widget-fivestar ul {
list-style: none;
overflow: hidden;
}
.rate-widget-fivestar .item-list ul li {
background-image: none;
padding: 0;
margin: 0;
}
.rate-widget-fivestar ul li {
float: right;
list-style: none;
}
.rate-widget-fivestar ul li a {
display: block;
float: right;
}
.rate-fivestar-btn-filled {
display: inline-block;
background: url(fivestar.png) no-repeat 0 -16px;
width: 16px;
height: 16px;
text-indent: -9999px;
}
.rate-user .rate-fivestar-btn-filled {
background: url(fivestar.png) no-repeat 0 0;
}
.rate-fivestar-btn-empty {
display: inline-block;
background: url(fivestar.png) no-repeat 0 -32px;
width: 16px;
height: 16px;
text-indent: -9999px;
}

hier habe ich float: right; anstelle float: left; ersetzt und damit erschienen die Sterne rechts unten

(2) tpl
was muss ich in die rate-template-fivestar.tpl einfügen, damit "War dieser Artikel hilfreich?" und "Total vote: 0" auch rechts erscheinen?

<?php

/**
* @file
* Rate widget theme
*/

print theme('item_list', array(
'items' => $stars,
//'title' => $display_options['title'],
));

if ($info) {
print '<div class="rate-info">' . $info . '</div>';
}

if ($display_options['description']) {
print '<div class="rate-description">' . $display_options['description'] . '</div>';
}

20.09.2017 22:21

4 PKV-Wiki (Gast)

erster Erfolg: Total vote: 0" erscheint rechts über rate.css

.rate-info, .rate-description {
clear: right;
float: right;
font-size: 0.8em;
color: #666;
}

>> auf clear: right; geändert (war zuvor clear: left;)
>> float: right; eingefügt

Damit bleibt nur noch die Verschiebung von "War dieser Artikel hilfreich?"

20.09.2017 22:46

5 PKV-Wiki (Gast)

Verschiebung von "War dieser Artikel hilfreich?"

geht nur mit

div.form-item.form-type-item {
margin-left: 750px;
}

20.09.2017 23:07

6 Jörg Kruse

Das funktioniert zwar, aber man muss darauf achten, dass dann keine anderen Elemente mit diesen generischen Klassennamen verschoben werden.

Das Label "War dieser Artikel hilfreich?" scheint nicht Bestandteil des Widgets zu sein. Es gibt auch keine Möglichkeit, diesem eine eindeutige ID zu verpassen?

<label id="rate-label">War dieser Artikel hilfreich?</label>

21.09.2017 10:44 | geändert: 21.09.2017 10:45

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]