TEMPLATE: Bootstrap4 für Shop 2.x - freies responsive Template

[Rehol]

Hallo in die Runde,

möchte gerne die Farbe hinter der Navigation ändern, finde aber nicht heraus wie ich diesen Bereich ansprechen kann.
(der blaue Bereich soll grün werden)
Habe mal einen Screen angehangen.
Vielen Dank für die Unterstützung
Grüße René

[Karl1]

Hallo René,
stelle in Erw. Konfiguration -> Bootstrap 4 Template-Manager -> BS4 Konfiguration im Reiter Klassen den Wert "Main Hintergrund" auf "bg-custom".

Schreibe dann in deine Datei templates/bootstrap4/css/rs_bs4.css in Zeile 18 statt

Code: CSS  [Auswählen]

.container-fluid, {
        background-color: #004000;
}

das hier

Code: CSS  [Auswählen]

.container-fluid, .bg-custom {
        background-color: #004000;
}

Noch eine Info für dich, wenn du die Bootstrap-CSS-Klasse ".bg-info" überschreiben willst, dann musst du "!important" hinzufügen.

Code: CSS  [Auswählen]

.bg-info {
        background-color: #0040ff !important;
}

Gruß Karl

[Rehol]

Hallo Karl,

vielen lieben Dank, habe den ganzen Nachmittag gesucht, getestet, gespielt und bin nicht zum Ziel gekommen.
Hätte schon viel früher nachfragen sollen

Grüße René

[noRiddle (revilonetz)]

@Karl
In /template/bootstrap4/module/includes/slider.html  übderdeckt carousel-caption  einen potentiellen Link hinter einem BannerIch habe das so behoben:

Code: PHP  [Auswählen]

{if $slider.LINK != ''}
  {if isset($slider.IMAGE_SRC_MOBILE) && $slider.IMAGE_SRC_MOBILE != ''}
    <a title="{$slider.TITLE}" href="{$slider.LINK}" {$slider.TARGET}>
      <picture>
        <source media="(max-width:600px)" srcset="data:,1w" data-srcset="{$slider.IMAGE_SRC_MOBILE}">
        <source srcset="data:,1w" data-srcset="{$slider.IMAGE_SRC}">
        <img class="lazyload img-fluid" src="data:," data-src="{$slider.IMAGE_SRC}" alt="{$slider.TITLE|onlytext}" title="{$slider.TITLE|onlytext}">
      </picture>
      <div class="container"><div class="carousel-caption">{$slider.TEXT}</div></div>
    </a>
  {else}
    <a title="{$slider.TITLE}" href="{$slider.LINK}" {$slider.TARGET}>
      <img class="lazyload img-fluid" src="data:," data-src="{$slider.IMAGE_SRC}" alt="{$slider.TITLE|onlytext}" title="{$slider.TITLE|onlytext}">
      <noscript><img class="img-fluid" src="{$slider.IMAGE_SRC}" alt="{$slider.TITLE|onlytext}" title="{$slider.TITLE|onlytext}"></noscript>
      <div class="container"><div class="carousel-caption">{$slider.TEXT}</div></div>
    </a>
  {/if}
{elseif $slider.IMAGE_IMG != ''}
  {if isset($slider.IMAGE_SRC_MOBILE) && $slider.IMAGE_SRC_MOBILE != ''}
    <picture>
      <source media="(max-width:600px)" srcset="data:,1w" data-srcset="{$slider.IMAGE_SRC_MOBILE}">
      <source srcset="data:,1w" data-srcset="{$slider.IMAGE_SRC}">
      <img class="lazyload img-fluid" src="data:," data-src="{$slider.IMAGE_SRC}" alt="{$slider.TITLE|onlytext}" title="{$slider.TITLE|onlytext}">
    </picture>
  {else}
    <img class="lazyload img-fluid" src="data:," data-src="{$slider.IMAGE_SRC}" alt="{$slider.TITLE|onlytext}" title="{$slider.TITLE|onlytext}">
    <noscript><img class="img-fluid" src="{$slider.IMAGE_SRC}" alt="{$slider.TITLE|onlytext}" title="{$slider.TITLE|onlytext}"></noscript>
  {/if}
{/if}
{*<div class="container"><div class="carousel-caption">{$slider.TEXT}</div></div>*} {*put this inside a-tag, 07-2023, noRiddle*}

Nebenfrage:
Wo kann man die Styles für carousel-caption  anpassen ?

Gruß,
noRiddle

[Karl1]

Hallo noRiddle,
muss ich mir genauer anschauen.

Die Styles für ".carousel-caption" werden in der bootstrap.min.css definiert.

Code: CSS  [Auswählen]

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

Am einfachsten und updatesicher wäre es eine Datei templates/bootstrap4/custom.css mit den Style-Änderungen anzulegen, oder in die stylesheet.css schreiben.

Gruß Karl

[noRiddle (revilonetz)]

Jau, danke dir, das mit der stylesheet.css  wusste ich bereits, custom.css  ist mir neu.

Gruß,
noRiddle

[noRiddle (revilonetz)]

Hattest du dir die Sache aus Antwort #1893 drei Posts höher angeschaut ?

Gruß,
noRiddle

[Karl1]

Hallo noRiddle,
deinen Vorschlag habe ich übernommen - bei GitHub momentan noch "unreleased".

In diesem Zusammenhang bin ich auf ein weiteres Sliderproblem hinsichtlich CLS (cumulative layout shift) gestoßen, das ich zur Zeit untersuche.

Gruß Karl

[radolu]

Hallo,

Wie kann man bei den Artikeln auf der Startseite (Top Artikel und Bestseller ) den "Details" Button loswerden?

Bootstrap4, Themes - Simplex, modified-shop_2.0.7.2-r14622

[Karl1]

Hallo radolu,
die Buttons findest du in den Dateien
- templates/bootstrap4/boxes/box_best_sellers.html
- templates/bootstrap4/module/new_products_default.html
jeweils in der Zeile

Code: [Auswählen]

<div class="lb_buttons mb-2">...
Gruß Karl

[radolu]

Vielen Dank Karl, das hat prima funktioniert!

Gruss, Ralph

[radolu]

Bootstrap4, Themes - Simplex, modified-shop_2.0.7.2-r14622

Zahlungsmethoden im Footer

Hallo,

Hat jemand die Anzeige der Zahlungsmethoden im Footer so anpassen, dass man die Images laden kann und mit einer Hover Funktion versehen, der die Darstellung von sw auf farbig ändert?

Gruss, Ralph

[awids]

Dein Satz klingt nach Kauderwelsch (vielleicht bin ich auch nur zu müde). Wenn ich dich trotzdem richtig verstanden habe, möchtest du die Zahlungsicons im Standard ausgegraut haben, bei Hover soll die Farbgebung wieder hergestellt werden. Da ist CSS dein Freund:

Code: CSS  [Auswählen]

/* vollstaendig ausgegraut */
.layout_footer_inner img {
        filter: grayscale(1);
}
/* vollstaendige Farbwiederherstellung */
.layout_footer_inner img:hover {
        filter: grayscale(0);
}
 

Falls du im Footer noch andere Grafiken hast, die nicht ausgegraut dargestellt werden sollen, wäre es sinnig, den Zahlungsicons eine eigene CSS-Klasse zuzuweisen, z. B. so:

Code: CSS  [Auswählen]

/* vollstaendig ausgegraut */
.layout_footer_inner img.MEINE_KLASSE {
        filter: grayscale(1);
}
/* vollstaendige Farbwiederherstellung */
.layout_footer_inner img.MEINE_KLASSE:hover {
        filter: grayscale(0);
}

[noRiddle (revilonetz)]

Ich vermute, daß er dein Modul hat, finde es gerade nicht. Und wenn dem so ist könnte es sich um deine Font-Icons handeln.
Aber bei dem grammatisch innovativen Stil den radolu  schreibt weiß man das ja nicht.

Gruß,
noRiddle

*NACHTRAG*
 Da isset: BOX: Versand- und Zahlungs-Logos automatisch in Info-Box anzeigen

[awids]

Wenn dem so ist, ist es sein Versagen, denn ich konnte das ohne richtigen Input ja nicht wissen.* Hatte das mit dem CSS gerade nur auf der Pfanne, weil ich es gerade gestern erst für ein Shopware-Projekt gebraucht habe.

* Wer Hilfe erwartet, sollte auch alle wichtigen Informationen bei einer Fragestellung mit angeben. (Muss ich dir ja nicht sagen, da du es selbst oft genug erwähnst. Diese Aussage war für die Anderen.) Bin damit auch raus, da mir dieser "grammatisch-innovative Stil" echt Kopfschmerzen bereitet.