[phpBB2] Ecken der Statusanzeige bei Postfach (PN) abrunden

Hi,
ich bins schon wieder. Diesmal habe ich ein Problem mit ecken. Ich möchte diese Ecken abrunden, da sie über den Rand gehen:



Ich habe zu diesen Ecken nichts passendes gefunden und hoffe, dass jemand mir helfen kann.

LG

Da hast du ein Problem, das sich aber auch auf andere Bereiche im Forum Auswirkungen hat.
Du hast ja diesen CSS Code eingesetzt:

Code:

.bodyline {
    border: 2px dotted #FFFFFF;
    border-radius: 20px;

Damit hast du ja deinen Rahmen gesetzt.
Diese Anzeige die du hier zeigst, ist nun aber auch eine Tabelle mit der Class bodyline. In dieser Tabelle befinden sich Zellen mit der Class row1.
All diese Elemente sind nun aber auch an anderen Stellen im Forum vorhanden.

---

Um nur diese Anzeige zu verändern, müssen wir einiges machen.

1. Template unter "Posten & Private Nachrichten" privmsgs_body bearbeiten.
Diesen Abschnitt (Zeile 18 - 38) suchen:

Code:

           <!-- BEGIN switch_box_size_notice -->
            <table class="bodyline" width="250" border="0" cellspacing="1" cellpadding="0">
                <tr>
                    <td class="row1" colspan="3" nowrap="nowrap" width="250"><span class="gensmall">{BOX_SIZE_STATUS}</span></td>
                </tr>
                <tr>
                    <td class="row2" colspan="3" width="250">
                        <table border="0" cellspacing="0" cellpadding="1">
                            <tr>
                                <td class="pourcentback"><img src="{PATH_IMG_FA}empty.gif" alt="{INBOX_LIMIT_PERCENT}" height="8" width="{INBOX_LIMIT_IMG_WIDTH}" /></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="row1" width="33%"><span class="gensmall">0%</span></td>
                    <td class="row1" align="center" width="34%"><span class="gensmall">50%</span></td>
                    <td class="row1" align="right" width="33%"><span class="gensmall">100%</span></td>
                </tr>
            </table>
            <!-- END switch_box_size_notice -->

Diesen bitte mit diesem Abschnitt ersetzen:

Code:

           <!-- BEGIN switch_box_size_notice -->
            <table class="bodyline_post" width="250" border="0" cellspacing="1" cellpadding="0">
                <tr>
                    <td class="row1_post" colspan="3" nowrap="nowrap" width="250"><span class="gensmall">{BOX_SIZE_STATUS}</span></td>
                </tr>
                <tr>
                    <td class="row2_post" colspan="3" width="250">
                        <table border="0" cellspacing="0" cellpadding="1">
                            <tr>
                                <td class="pourcentback"><img src="{PATH_IMG_FA}empty.gif" alt="{INBOX_LIMIT_PERCENT}" height="8" width="{INBOX_LIMIT_IMG_WIDTH}" /></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="row3_post" width="33%"><span class="gensmall">0%</span></td>
                    <td class="row4_post" align="center" width="34%"><span class="gensmall">50%</span></td>
                    <td class="row5_post" align="right" width="33%"><span class="gensmall">100%</span></td>
                </tr>
            </table>
            <!-- END switch_box_size_notice -->

das Template absenden und veröffentlichen.

2. In deinem CSS diesen Bereich Formatieren!
Bitte diese Codes einsetzen:

Code:

/* Anpassung der Statusanzeige im PN Bereich Beginn */
.row1_post, .row2_post, .row3_post, .row4_post, .row5_post {
    background-color: #FF6600;
}
.bodyline_post {
    border: medium dotted #FFFFFF;
    border-radius: 10px;
}
.row1_post {
    border-radius: 10px 10px 0 0;
}
.row3_post {
    border-radius: 0 0 0 10px;
}
.row5_post {
    border-radius: 0 0 10px;
}
/* Anpassung der Statusanzeige im PN Bereich Ende */

Das Ergebnis sieht nun so aus:


Was haben wir nun gemacht?
Mit der Templateänderung von oben haben wir der Anzeige neue Classen zugewiesen.
Der gesamten Tabelle haben wir nun die Class "bodyline_post" zugewiesen, damit wir diese nun getrennt ansprechen können.
Allen fünf in der Tabelle enthaltenen Zellen haben wir eine enthaltenden jeweils eine row Class zugeordnet (row1_post bis row_5_post).
Das wurde notwendig, um auch jeder der Zellen ihren Rahmen zuzuordnen.
Du kannst nun diese Tabelle in jeder Zelle auch noch andere Farben im Hintergrund und auch in der Schriftfarbe zuweisen.
Die Schriftfarbe der einzelnen Zellen kannst du so mit diesem Code ändern:

Code:

.row1_post .gensmall, .row2_post .gensmall, .row3_post .gensmall, .row4_post .gensmall, .row5_post .gensmall {
    color: #ffffff;
}

Das weist allen Schriften die selbe Farbe zu.
Du kannst diese aber auch einzeln ansprechen und hier jeder Zelle eine andere Schriftfarbe zuordnen.
Das selbe gilt auch für die Zellen die du mit dem Code von oben ansprichst:

Code:

.row1_post, .row2_post, .row3_post, .row4_post, .row5_post {
    background-color: #FF6600;
}

Die Farben musst du natürlich noch an dein Forum anpassen.
Ich würde dir empfehlen den Radius nicht größer als 10 PX zu wählen, weil es sonnst nicht mehr ganz passt.
Ich hoffe, das du damit diese Anzeige genau deinen Vorstellungen anpassen kannst.

Vielen, vielen dank! Es hat perfekt funktioniert!