Buttondarstellung (CSS) nach Kriterium in Datenbank

[Dsimon24]

Guten morgen zusammen,

ich habe auf meiner Website mehrere Tabs (Links - über CSS in Button-Form gebracht).

Szenario:
Ich habe fünf dieser Tabs (Tab 1 - Tab 5). Alle einheitlich über eine CSS-Datei gestaltet.
Jetzt möchte ich diese Tabs, die bereits abgeschlossen wurden, in einer anderen Farbe darstellen.
Diese Farbe soll jedoch beigehalten werden, wenn man sich von einem anderen Rechner erneut
einloggt. Ich würde dazu dann wohl ein Vermerk in der Datenbank einrichten. Wie kann ich die
CSS-Datei aber so umgestalten, dass sich die Farbe der Buttons abhängig der Werte in der
Datenbank (wohl 1 = bearbeitet, 0 = unbearbeitet - oder so) gestalten kann?

VG, David

 

[scbawik]

Guten morgen zusammen,

ich habe auf meiner Website mehrere Tabs (Links - über CSS in Button-Form gebracht).

Szenario:
Ich habe fünf dieser Tabs (Tab 1 - Tab 5). Alle einheitlich über eine CSS-Datei gestaltet.
Jetzt möchte ich diese Tabs, die bereits abgeschlossen wurden, in einer anderen Farbe darstellen.
Diese Farbe soll jedoch beigehalten werden, wenn man sich von einem anderen Rechner erneut
einloggt. Ich würde dazu dann wohl ein Vermerk in der Datenbank einrichten. Wie kann ich die
CSS-Datei aber so umgestalten, dass sich die Farbe der Buttons abhängig der Werte in der
Datenbank (wohl 1 = bearbeitet, 0 = unbearbeitet - oder so) gestalten kann?

VG, David

Du könntest eine Klasse erstellen, zB .completed:

<ul>
<li class="completed">Tab 1</li>
<li class="completed">Tab 2</li>
<li>Tab 3</li>
</ul>

Wäre vermutlich das sauberste.

 

[Dsimon24]

Diese Lösung habe ich nun versucht, auf meinen bestehenden Code anzuwenden:

<input type="radio" name="tabs" class="completed" id="<?php echo $row->tab_no; ?>"/>
<label for="<?php echo $row->tab_no; ?>"><?php echo $row->time ?></label>

Jetzt frage ich mich nur, wie ich hier die Klasse 'completed' ansprechen kann..

mit '.completed' geht´s in der CSS-Datein nämlich wohl nicht.
Mache ich da was falsch?

 

[scbawik]

Diese Lösung habe ich nun versucht, auf meinen bestehenden Code anzuwenden:

<input type="radio" name="tabs" class="completed" id="<?php echo $row->tab_no; ?>"/>
<label for="<?php echo $row->tab_no; ?>"><?php echo $row->time ?></label>

Jetzt frage ich mich nur, wie ich hier die Klasse 'completed' ansprechen kann..

mit '.completed' geht´s in der CSS-Datein nämlich wohl nicht.
Mache ich da was falsch?

Ich tippe mal

.completed + label {background-color:#0F0;}

 

[Dsimon24]

Das hatte ich so auch versucht, macht der nicht :-(

Also folgendermaßen sieht die Standardformatierung aus:

.tabs label {
    display: block;
    padding: 12px 20px;
    border-radius: 3px;;
    margin-right: 10px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    background: rgba(0,0,0,0.6);
    box-shadow: -1px 1px 3px grey;
    position: relative;
    cursor: pointer;
    top: 4px;
    @include transition(all 0.2s ease-in-out);
}

Kann ich da irgendwie auch die class completed einbringen?

 

[SpiceLab]

Das hatte ich so auch versucht, macht der nicht :-(

Sollte aber so im Normalfall funktionieren.

Kann ich da irgendwie auch die class completed einbringen?

Vielleicht die Spezifität erhöhen:

.tabs .completed + label {...}

 

[Dsimon24]

.tabs.completed+ label {...}

So hat es jetzt funktioniert.
Aber ich konnte den Code nicht auslagern.
Wahrscheinlich stimmt da was nicht - mal sehen.

Vielen Dank für die Hilfe!