btn.block farbig

Thema wurde von sabine_baumann, 5. September 2017 erstellt.

  1. sabine_baumann
    sabine_baumann Erfahrener Benutzer
    Registriert seit:
    29. Juni 2017
    Beiträge:
    296
    Danke erhalten:
    25
    Danke vergeben:
    81
    #1 sabine_baumann, 5. September 2017
    Ich kämpfe gerade mit den Farben. Ich möchte gerne die 4 Blöcke vom Screenshot in jeweils einer anderen Farbe. Ändere ich das in html? Oder CSS? Und vor allem wie? Alle meine Versuche sind bislang gescheitert.
     

    Anhänge:

  2. Kai Stejuhn
    Kai Stejuhn Beta-Held
    Registriert seit:
    26. September 2014
    Beiträge:
    1.455
    Danke erhalten:
    745
    Danke vergeben:
    92
    #2 Kai Stejuhn, 5. September 2017
    Welche 4 Blöcke meinst Du denn genau?
     
  3. sabine_baumann
    sabine_baumann Erfahrener Benutzer
    Registriert seit:
    29. Juni 2017
    Beiträge:
    296
    Danke erhalten:
    25
    Danke vergeben:
    81
    #3 sabine_baumann, 5. September 2017
    Die 4 unter "Neugierig geworden?"

    Also "Themenwelten" "Outdoor" etc.
     
  4. Kai Stejuhn
    Kai Stejuhn Beta-Held
    Registriert seit:
    26. September 2014
    Beiträge:
    1.455
    Danke erhalten:
    745
    Danke vergeben:
    92
    #4 Kai Stejuhn, 5. September 2017
    Schwierig, da der Shop nicht online ist. Prinzipiell ist es erstmal mit CSS zu formatieren, aber je nachdem wie der HTML-Code aussieht, müsste man den evtl. erweitern.
     
  5. sabine_baumann
    sabine_baumann Erfahrener Benutzer
    Registriert seit:
    29. Juni 2017
    Beiträge:
    296
    Danke erhalten:
    25
    Danke vergeben:
    81
    #5 sabine_baumann, 5. September 2017
    Bislang sieht es in html so aus (die Verlinkungen stimmen noch nicht, soweit bin ich noch nicht vorgedrungen)

    HTML:
    <div class="col-xs-12 col-sm-6 col-md-6">
    <a class="btn  btn-default btn-block" href="/specials.php" title="Sale">THEMENWELTEN </a>
</div>

<div class="col-xs-12 col-sm-6 col-md-6">
    <a class="btn  btn-default btn-block" href="/specials.php" title="Sale">WOHNEN UND DEKORIEREN </a><br />
    &nbsp;
</div>
&nbsp;

<div class="col-xs-12 col-sm-6 col-md-6">
    <a class="btn  btn-default btn-block" href="/specials.php" title="Sale">OUTDOOR </a>
</div>

<div class="col-xs-12 col-sm-6 col-md-6">
    <a class="btn  btn-default btn-block" href="/specials.php" title="Sale">GESCHENKESERVICE UND GUTSCHEINE </a>
</div>
<br />
&nbsp;
     
  6. Kai Stejuhn
    Kai Stejuhn Beta-Held
    Registriert seit:
    26. September 2014
    Beiträge:
    1.455
    Danke erhalten:
    745
    Danke vergeben:
    92
    #6 Kai Stejuhn, 5. September 2017
    Probier mal den Code:
    HTML:
    <div class="col-xs-12 col-sm-6 col-md-6">
    <a class="btn  btn-default btn-block block1" href="/specials.php" title="Sale">THEMENWELTEN </a>
</div>

<div class="col-xs-12 col-sm-6 col-md-6">
    <a class="btn  btn-default btn-block block2" href="/specials.php" title="Sale">WOHNEN UND DEKORIEREN </a><br />
    &nbsp;
</div>
&nbsp;

<div class="col-xs-12 col-sm-6 col-md-6">
    <a class="btn  btn-default btn-block block3" href="/specials.php" title="Sale">OUTDOOR </a>
</div>

<div class="col-xs-12 col-sm-6 col-md-6">
    <a class="btn  btn-default btn-block block4" href="/specials.php" title="Sale">GESCHENKESERVICE UND GUTSCHEINE </a>
</div>
<br />
&nbsp;
    und dann soltest Du mit
    Code:
    .block1 {
    background: blue !important;
    color: white !important;
}
.block2 {
    background: blue !important;
    color: white !important;
}
.block3 {
    background: blue !important;
    color: white !important;
}
.block4 {
    background: blue !important;
    color: white !important;
}
    im eigenen CSS die Farben steuern können.
     
  7. sabine_baumann
    sabine_baumann Erfahrener Benutzer
    Registriert seit:
    29. Juni 2017
    Beiträge:
    296
    Danke erhalten:
    25
    Danke vergeben:
    81
    #7 sabine_baumann, 5. September 2017
    Super! Genau danach hatte ich gesucht :D

    Weißt du zufällig auch, wie ich noch den ungewollten Absatz in der mobilen Ansicht rausbekomme? :)
     

    Anhänge:

  8. Kai Stejuhn
    Kai Stejuhn Beta-Held
    Registriert seit:
    26. September 2014
    Beiträge:
    1.455
    Danke erhalten:
    745
    Danke vergeben:
    92
    #8 Kai Stejuhn, 5. September 2017
    Okay, versuch mal folgenden Code:
    HTML:
    <div class="row line1">
<div class="col-xs-12 col-sm-6 col-md-6">
    <a class="btn  btn-default btn-block block1" href="/specials.php" title="Sale">THEMENWELTEN </a>
</div>

<div class="col-xs-12 col-sm-6 col-md-6">
    <a class="btn  btn-default btn-block block2" href="/specials.php" title="Sale">WOHNEN UND DEKORIEREN </a>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
    <a class="btn  btn-default btn-block block3" href="/specials.php" title="Sale">OUTDOOR </a>
</div>

<div class="col-xs-12 col-sm-6 col-md-6">
    <a class="btn  btn-default btn-block block4" href="/specials.php" title="Sale">GESCHENKESERVICE UND GUTSCHEINE </a>
</div>
</div>
    Texte und Verweise ggf. anpassen und dann noch das eigene CSS um:
    Code:
    @media (min-width: $grid-float-breakpoint) {
  .line1{margin-bottom:50px;}
}
    erweitern. Den Abstand kannst Du dann individuell bei "margin-bottom" einstellen.
     
  9. sabine_baumann
    sabine_baumann Erfahrener Benutzer
    Registriert seit:
    29. Juni 2017
    Beiträge:
    296
    Danke erhalten:
    25
    Danke vergeben:
    81
    #9 sabine_baumann, 5. September 2017
    Perfekt! Problem gelöst! Vielen Dank Kai :)