Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Forum › Drupalcenter.de › Themes & Theming ›

Falls sich jemand mit dem Thema Bootstrap Barrio auskennt

Eingetragen von Kulturmensch (103)
am 29.06.2020 - 11:02 Uhr in
  • Themes & Theming
  • Drupal 9.x

Das Thema Bartik gefällt mir eigentlich gut, möchte aber nun zu einem etwas moderneren Design wechseln. Dazu habe ich jetzt testweise das Thema Barrio (Bootstrap 4) installiert.
Da stehe ich mit einigen Fragen am Anfang.

1. Gibt es eine ausführlichere Dokumentation/Tutorial zur Einrichtung von diesem Thema Barrio als das, was man unter https://www.drupal.org/docs/8/themes/barrio-bootstrap-4-drupal-89-theme/... finden kann?

2. Beim Wechsel von Bartik auf Barrio konnten bei meiner Testinstallation die existierenden Blöcke der Produktivseite (Header, Footer etc.) gut den Barrio-Regionen zugeordnet werden und meine Barrio-Startseite sieht (fast schon) so aus wie meine Bartik-Startseite Leider bekomme ich es nicht hin, die vorhandenenn Views in Barrio so darzustellen wie in Bartik. Die Views sind aktuell als Grid aufgebaut und stellen die Aufmacher Fotos von Blogbeiträgen als 3 X 3 Matrix dar. Klickt man auf eines dieser Elemente, gelangt man zum entsprechenden BLOG-Beitrag. Bei Barrio liegen jetzt die einzelnen Elemente dieser 3X3-Matrix übereinander und nicht - wie bei Bartik eingerichtet neben- und untereinander. In der Barrio-Dokumentation (s.o.) steht: To add columns to the main content modules like Bootstrap Layouts or Views itself can do the job. In the case of views, the view itself should have the row class. Welche row class muss man denn hier bei Views eintragen, um mein Problem zu lösen?

3. Google-Fonts: bei Barrio lassen sich Einstellungen für Fonts direkt im Adminbereich auswählen. Allerdings werden z.B. dann Googlefonts wie Roboto aus dem Internet geladen. Bei Bartik hatte ich die Fonts recht einfach per css und @font-face lokal laden können. Wie erreichtt man das bei Barrio? Alle Einträge, die ich im Subtheme in der style.css mache, werden von Barrio z.Zt. ignoriert - da scheine ich auch etwas falsch zu machen oder verstanden zu haben.

4. Klasse finde ich, dass bei Barrio den eingerichteten Regionen direkt css-Klassen im Adminbereich zugewiesen werden können. Jetzt die absolute Anfängerfrage - wo definiere ich diese Klassen bzw. gibt es eine Liste bereits eingerichteter Klassen, die hier eingetragen werden können?

‹ Frage zu Collapse von Bootstrap Falls sich jemand mit dem Thema Bootstrap Barrio auskennt ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

Ich mache inzwischen alles

Eingetragen von montviso (1886)
am 30.06.2020 - 06:26 Uhr

Ich mache inzwischen alles mit Bootstrap Themes, auch wenn ich mal Wordpress-Kunden bedienen muss.
Was Du brauchst, ist also die Doku für Bootstrap 4, wo auch die s.g. Helperklassen vorgestellt werden.
Hier ist das Grid-System vorgestellt:
https://getbootstrap.com/docs/4.5/layout/grid/

Die Klassen kannst Du auch in der View beim Design des Feldes hinterlegen.
Also als Format unformated wählen statt Rows und dann z.B. folgende Klassenkombi bei Deiner 3x3 Matrix einfügen:

"col-12 col-lg-6 col-xl-4"

Damit wäre sicher gestellt, dass auf allen Geräten (also auch Smartphone) jeder Block über die ganze Breite geht.
Auf dem Tablet hättest Du zwei Blöcke nebeneinander und erst auf den breiten Bildschirmen drei.
Mit diesen paar Klassen erspart man sich also viel Media-Query Arbeit.

Das was ich da beschreibe, beantwortet dann auch Deine 4. frage (sofern ich alles richtig verstehe) woher Du die Klassen bekommst.
Eben aus obiger Bootstrap Doku.

LG Regina Oswald
-------------------------
Montviso - Internetdienstleistungen
http://www.montviso.de

  • Anmelden oder Registrieren um Kommentare zu schreiben

Die Fonts solltest du aus

Eingetragen von Jenna (1832)
am 30.06.2020 - 13:58 Uhr

Die Fonts solltest du aus DSGVO Gründen besser über deinen Server ausgeben, statt Google jeden Seitenaufruf mitzuteilen.

Das geht ganz einfach:

https://google-webfonts-helper.herokuapp.com/fonts

Grüße Jenna

  • Anmelden oder Registrieren um Kommentare zu schreiben

Danke Regina für die guten Informationen!

Eingetragen von Kulturmensch (103)
am 30.06.2020 - 15:55 Uhr

Dein Kommentar hat mich gut weiter gebracht! Danke dafür! Ich verstehe endlich, wo die einzusetzenden Klassen herkommen. Jetzt gelingt es mir nur noch nicht, dies meiner Testinstallation beizubringen.
Wenn Du Dir das Bild bartik.JPG anschaust, dann siehst Du wie der View z.Zt. auf meiner Produktivseite dargestellt wird. Auf der Barrio-Testseite sieht es aus wie auf dem Anhang barrio.JPG.
Bei Barrio kann ich theoretisch den Regions eigene Klassen zuweisen Foto: barrio-einstellungen. Wenn ich hier aber bei Content z.B. col-12 col-lg-6 col-xl-4 eintrage. ändert sich nichts (Caches etc. geflusht). Wenn ich die Views-Einstelluneg für
GRID ändere (Foto: views-bartik.jpg natürlich auch in Barrio) bekomme ich bisher lediglich eine Spalte hin aber keine Matrix
Hast Du dazu eine Idee, a) was ich bei Barrio unter content eintragen müßte, um eine Matrix mit drei Spalten zu erzeugen? Bzw. was ich bei den Views eintragen müßte, um die gleiche Matrix bei Barrio wie bei Bartik hinzubekommen?

Bei Bartik habe ich die Darstellung der Fotos in der Matrix wie folgt per css angepasst, was mir bei Barrio auch noch nicht geglückt ist:

.views-field-field-image {
max-width: 90%;
height: auto;
padding: 5px;
margin: 5px;
border-style: solid;
border-width: 6px;
border-color: #f6f6f2;
}

/* Punktierte Linie unter Fotos entfernen (global) in views*/

.view a {
border-bottom: none;
}

/* Titel zentrieren und auf Bildbreite begrenzen in views */

.views-field-title {
text-overflow: ellipsis;
text-align:center;
overflow: hidden;
white-space: nowrap;
}

AnhangGröße
bartik.JPG 63.78 KB
barrio.JPG 48.34 KB
views-bartik.JPG 78.95 KB
barrio-einstellungen.jpg 39.84 KB
  • Anmelden oder Registrieren um Kommentare zu schreiben

Danke Jenna, für den Font-Tipp

Eingetragen von Kulturmensch (103)
am 30.06.2020 - 15:56 Uhr

Bei Bartik lade ich die Fonts von meinem Server mit:
/* roboto-regular - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Roboto'), local('Roboto-Regular'),
url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */

Ich weiß nur nicht, wie ich das dem Bootstrap-Theme Barrio beibringen kann, das die Fonts aus dem Internet lädt.

  • Anmelden oder Registrieren um Kommentare zu schreiben

@Kulturmensch,hast Du denn

Eingetragen von montviso (1886)
am 30.06.2020 - 16:28 Uhr

@Kulturmensch,
hast Du denn ein Sub-Theme für Barrio erstellt?
Dort sollte dann eingestellt sein, dass Du eine eigene style.css Datei hast für die Änderungen, wie Du sie oben für Bartik vorgenommen hast.
Ich mache da auch noch Mediaqueries in die subtheme.breakpoints.yml, damit ich unterschiedliche CSS-Dateien für unterschiedliche Ausgabemedien habe.
Das ist aber evet. bei einem kleineren Projekt nicht nötig.

Ich bin davon ausgegangen, dass Du Deine Änderungen nicht per SASS machen möchtest.
DAzu habe ich mir zwar auch was eingerichtet, aber meistens mache ich es dann doch ohne.

Warum Deine Bilder so übereinander liegen, weiß ich nicht.
Hast Du die Spalenausgaben (3) aus der View entfernt?
Stattdessen auf unformated umstellen und in den zeilen-Einstellungen die Klasse row schreiben.
Jede Zeile, die Blöcke im Grid ausgibt, braucht einen Container mit der Klasse row, siehe Grid-Doku von Bootstrap.

LG Regina Oswald
-------------------------
Montviso - Internetdienstleistungen
http://www.montviso.de

  • Anmelden oder Registrieren um Kommentare zu schreiben

Subtheme

Eingetragen von Kulturmensch (103)
am 30.06.2020 - 18:14 Uhr

Ja, ich habe ein Subtheme in "custom" angelegt. Das ist bei Barrio gleich dabei und man muss nur an diversen Stellen den Namen Subtheme durch einen eigenen ersetzen. Danach kann es unter dem neuen Namen direkt in den Drupal-Einstellungen als Standardtheme ausgewählt werden. Das Sutheme hat einen css-Ordner in dem sich eine color.css und eine style.css befinden. Wenn ich hier Einträge vornehme bzw. in der color.css mal testweise Farben ändere, wird das nicht dargestellt.
Ich finde keine Doku, was ich hier falsch mache bzw. noch ergänzen muss. Ich habe jetzt auch die Standardklasse row in einer View eingestellt. Das hat zumindest zu einer Änderung geführt aber die images werden noch zu groß dargestellt und das grid-system scheint auch nicht zu funktionieren. S. Foto

AnhangGröße
barrio-neu.JPG 69.67 KB
  • Anmelden oder Registrieren um Kommentare zu schreiben

Eigentlich macht man die

Eingetragen von montviso (1886)
am 30.06.2020 - 18:27 Uhr

Eigentlich macht man die Änderungen in der Style.css.
Wird die im Quelltext eingebunden?
Cache geleert?

Kann man die Seite anschauen?
Dann könnte ich mir das mal ansehen.
Sicher umgestellt auf unformatted statt 3er Grid in der View?
Cache geleert?
(Versuch ist es ja wert ;-) )

LG Regina Oswald
-------------------------
Montviso - Internetdienstleistungen
http://www.montviso.de

  • Anmelden oder Registrieren um Kommentare zu schreiben

Das steht in der

Eingetragen von Kulturmensch (103)
am 30.06.2020 - 19:44 Uhr

Das steht in der xxx.libraries.yml:
global-styling:
version: VERSION
js:
js/global.js: {}
css:
component:
css/style.css: {}
css/colors.css: {}
bootstrap:
js:
/libraries/bootstrap/js/bootstrap.bundle.min.js: {}
css:
component:
/libraries/bootstrap/css/bootstrap.min.css: {}
color.preview:
version: VERSION
css:
theme:
color/preview.css: {}
js:
color/preview.js: {}
dependencies:
- color/drupal.color

Reicht das, um die styles.css einzubinden?

Wenn Du mal auf meiner Testseite nach dem Rechten schauen willst, finde ich das aber sehr nett:-) Melde Dich dann doch bitte unter test2tenckhoff.de/user an - die Seite entspricht nahezu komplett meiner Produktivseite.

  • Anmelden oder Registrieren um Kommentare zu schreiben

Kulturmensch schrieb Wenn Du

Eingetragen von montviso (1886)
am 30.06.2020 - 20:09 Uhr
Kulturmensch schrieb

Wenn Du mal auf meiner Testseite nach dem Rechten schauen willst, finde ich das aber sehr nett:-) Melde Dich dann doch bitte unter test2tenckhoff.de/user an - die Seite entspricht nahezu komplett meiner Produktivseite.

Leider funktioniert der Link nicht.
Muss ich mich denn anmelden, oder reicht Blick ins Frontend?
Wenn ja, brauche ich noch Zugangsdaten.

Das sieht soweit nicht schlecht aus in der xxx.libraries.yml
Das global-styling muss natürlich analog in der xxx.info.yml stehen.

Entscheidend ist halt, was im Quelltext steht.
Da würde mir ein Blick ins Frontend reichen.

LG Regina Oswald
-------------------------
Montviso - Internetdienstleistungen
http://www.montviso.de

  • Anmelden oder Registrieren um Kommentare zu schreiben

Ah, OK, den Link habe ich hin

Eingetragen von montviso (1886)
am 30.06.2020 - 20:13 Uhr

Ah, OK, den Link habe ich hin bekommen: test2.tenckhoff.de/user
Aber der ist im Wartungsmodus, weiter komme ich da nicht.
Was auch wichtig wäre, um etwas zu erkennen:
Cache im Entwicklungs-Stadium ausschalten, bzw. Komprimierung der CSS-Dateien.

Sonst sehe ich nur sowas:

    <link rel="stylesheet" media="all" href="/sites/default/files/css/css_YXhEuI2G3qsrgTAwL-9e6ucSrbESrAi6vTLlN5zqA14.css"/>
<link rel="stylesheet" media="all" href="/sites/default/files/css/css_hTxFqLJkM1EMExxt4llJLYXnxn_7691nK9WdyugrWV0.css"/>
<link rel="stylesheet" media="all" href="/sites/default/files/css/css_6mauck9L3S1WWNRJ_1z7idI6fks85iimCWvD1NBsW0g.css"/>
<link rel="stylesheet" media="all" href="/sites/default/files/css/css_pevTh26--lMGMhITcuqaIfnQfOiOWYgZlqReEvr2DXA.css"/>
<link rel="stylesheet" media="all" href="/sites/default/files/css/css_DQL9s4IP6j00ceuJuqAC0j_v3cNObiGEVeM22sZPA_I.css"/>
<link rel="stylesheet" media="all" href="/sites/default/files/css/css_COWvhSee6LEfzS9TKOfV_T1Hf8zp7eNkUyyl6Uk523k.css"/>
<link rel="stylesheet" media="all" href="/sites/default/files/css/css_Ej9heXH6uyzHZqEFUYTW-J6cPbsddV19ZXpGIqfTbf4.css"/>
<link rel="stylesheet" media="all" href="/sites/default/files/css/css_UiE5ZJINw1MP-V1Cw946Gqs6kuXwTkyItXOKpw16yqk.css"/>
<link rel="stylesheet" media="all" href="/sites/default/files/css/css_1LcyldBYjdIPJUjO1Qa2yDZ8ZRHT95u2UJtJCm0UPfM.css"/>
<link rel="stylesheet" media="all" href="/sites/default/files/css/css_dOq0W7bY3Rv5rFJ41VqGXvtg3VILJO4l2McOgjvbzXo.css"/>

LG Regina Oswald
-------------------------
Montviso - Internetdienstleistungen
http://www.montviso.de

  • Anmelden oder Registrieren um Kommentare zu schreiben

So, wieder registrierbar

Eingetragen von Kulturmensch (103)
am 30.06.2020 - 20:33 Uhr

https://test2.tenckhoff.de/user/login
Den Wartungsmodus habe ich jetzt rausgenommen und jetzt kann man sich auch wieder anmelden (hatte ich wegen den SPAM-Anmeldungen unterdrückt)

  • Anmelden oder Registrieren um Kommentare zu schreiben

@kulturmensch Ich habe mir

Eingetragen von Jenna (1832)
am 30.06.2020 - 23:14 Uhr

@kulturmensch

Ich habe mir deine Testseite eben angesehen und du würfelts da noch einiges durcheinander.

Zum Beispiel finde ich bei dir ein views-view-grid horizontal cols-3 clearfix col

Das brauchst du aber nicht wenn du mit den Bootstrap Klassen arbeitest. Bootstrap besitzt ja ein eigenes, ausgereiftes Gridsystem.

Momentan ist das wie: "Nehme ich schneller ab wenn ich 2 Diäten gleichzeitig mache"...., glaube mir, funktioniert nicht, ich habe es probiert...

Bring da mal etwas Ruhe rein, kein Mensch hat Bootstrap an einem Abend gelernt, ich habe nach ca. 2 Monaten erst erkannt welche genialen Möglichkeiten dieses Framework bietet.
Google nach Bootstrap Tutorials oder Bootstrap beginners und arbeite dich ein wenig ein oder nimm ein Fertig Kauf Theme, falls es schnell gehen muss, welches dir 100% so schon gefällt und ändere nur die Inhalte.
Bootstrap ist nicht nur ein Theme, sondern ein komplettes Framework und wenn du wie jetzt 2 verschiedene Grids vermischt, wird es schwierig und macht auch wenig Sinn.

Die Fonts Einbindung:
Ich habe eine extra css angelegt, fonts.css (muss nicht sein, kann auch alles in die style.css rein), ich finde es aber übersichtlicher. Dort werden die Fonts CSS Angaben, wie auf Webfonts Helper angegeben, eingetragen.

Entweder du nimmst die style.css, die dein Theme schon kennt, oder du bindest die fonts.css dementsprechend neu ein (Cache löschen danach) und dann werden deine Fonts auch ausgeliefert. Der Pfad muss natürlich stimmen und du musst die Fonts auf deinen Webspace geladen haben.

Grüße Jenna

  • Anmelden oder Registrieren um Kommentare zu schreiben

Hähä, genau wie Jenna sagt,

Eingetragen von montviso (1886)
am 01.07.2020 - 05:49 Uhr

Hähä, genau wie Jenna sagt, zwei Diäten helfen nichts. Da kann ich auch mit reden. ;-)

Ich habe mal bissl im Quelltext rum gespielt und in einer Zeile alles raus geworfen, was nicht hin soll und die Klassen rein, was es braucht.
Das musst Du der View bei bringen, in dem Du erst mal auf unformated umstellst und dann die row und col Angaben machst, die Bootstrap braucht.

Ich habe einen Screenshot angehängt.
Wenn Du Text unter das Bild gibst, dann sitzen die auf einer Linie, egal, ob ein- oder zwei Zeilen.

Und sie hat auch recht, was die Lernkurve von Bootstrap angeht.
Das wäre nicht so mächtig, wenn man es sofort verstanden hätte.

Vielleicht musst Du Dich aber erst noch rein arbeiten, wo überall Du in der View solche Angaben platzieren kannst.
Also row und col-md-4 ect.

LG Regina Oswald
-------------------------
Montviso - Internetdienstleistungen
http://www.montviso.de

  • Anmelden oder Registrieren um Kommentare zu schreiben

@Regina, @Jenna, danke für

Eingetragen von Kulturmensch (103)
am 01.07.2020 - 09:28 Uhr

@Regina, @Jenna,
danke für Eure Mühe und die hilfreichen Erklärungen! Ich probiere heute Eure Vorschläge aus und versuche zunächst herauszufinden, warum meine styles.css nicht funktioniert. Vermutlich legt hier das subtheme ja auch die Änderungen im Adminboard ab und da dies nicht funktioniert, werden auch die Klassen nicht angewendet, die Ihr mir genannt habt. Auch wenn in der Barrio-Dokumentation steht, man könne das Grid in den views-Einstellungen einrichten, scheint mir hier Euer Vorschlag, in views auf "unformatiert" zu stellen und die GRID-Formatierung Bootstrap zu überlassen sinnvoller zu sein - 2 Diäten und so;-):-) Mal sehen, was der Tag bringt:-)

  • Anmelden oder Registrieren um Kommentare zu schreiben

Ach ja stimmt, die Einbindung

Eingetragen von montviso (1886)
am 01.07.2020 - 09:46 Uhr

Ach ja stimmt, die Einbindung der style.css wollte ich noch anschauen.
Das geht aber nicht vernünftig, solange die Komprimierung für CSS eingeschaltet ist.
Da kriegt man nur CSS-Salat...mag ja gute Diät sein, aber satt macht es nicht. ;-)

LG Regina Oswald
-------------------------
Montviso - Internetdienstleistungen
http://www.montviso.de

  • Anmelden oder Registrieren um Kommentare zu schreiben

style.css

Eingetragen von Kulturmensch (103)
am 01.07.2020 - 11:56 Uhr

Wenn Du jetzt mal nachschauen könntest? Caches und Komprimierung sind nun raus (wenn ich alles erwischt habe:-) und Bootstrap wird jetzt lokal genutzt und nicht via CDN. In der Konsole werden mir übrigens zig Fehler angezeigt - das sieht schon ziemlich gruselig aus:-( Welchen Eintrag in der style.css würdest Du empfehlen, um ihre Wirkung zu testen?
12:54
styles.css funktioniert nun:-)
Läßt sich dort eine Klasse, wie Du empfohlen hattest, für das GRID der Views eintragen?

  • Anmelden oder Registrieren um Kommentare zu schreiben

Im

Eingetragen von montviso (1886)
am 01.07.2020 - 11:50 Uhr

Im Quelltext
view-source:https://test2.tenckhoff.de/reisetagebuecher

sehe ich, dass diese Datei eingebunden wird:
https://test2.tenckhoff.de/themes/custom/tenckhoff2/css/style.css?qcsdnd

Wenn ich die aufrufe, steht noch nichts drinnen.
Du kannst z.B. sowas machen:
body{
background: red;
}

Das fällt dann auf.
Aber ich bin sicher, dass alles, was Du da rein schreibst, gezeigt wird.

LG Regina Oswald
-------------------------
Montviso - Internetdienstleistungen
http://www.montviso.de

  • Anmelden oder Registrieren um Kommentare zu schreiben

styles.css funktioniert nun

Eingetragen von Kulturmensch (103)
am 01.07.2020 - 12:06 Uhr

Mit p { font-size: 36px; margin-left: 5em; } zeigten sich jetzt die Änderungen. Lag vielleicht an der ursprünglichen Bootstrap-Einbindung über cdn. Jetzt geht's an das Grid. Mit meinen eigenen css-Einstellungen von Bartik habe ich jetzt Rahmen und mittige Überschriften hinbekommen. Die images liegen allerdings über den Rahmen und auch noch nicht nebeneinander https://test2.tenckhoff.de/reisetagebuecher
Was würdest Du hier eintragen, um 3 Columns zu erzeugen und die images in die Rahmen zu setzenn? In den Einstellungen von views steht alles auf unformatiert.

  • Anmelden oder Registrieren um Kommentare zu schreiben

Bei den Feldern Titel und

Eingetragen von montviso (1886)
am 01.07.2020 - 12:44 Uhr

Bei den Feldern Titel und Bild würde ich die Angaben für die drei Spalten machen, so wie ich es oben im ersten Post geschrieben hatte.
Schau Dir dazu die Grid Doku an.
Und dann muss im Zeilen Design (Einstellungen Unformatiert) noch row eingetragen werden.

Man macht nicht nur col-4, was die drei Spalen erzeugen würde, sondern unterschiedl. Angaben für versch. Bildschirmbreiten, damit es eben im Smartphone nicht drei Spalten, sondern nur eine gibt.
Und im Tablet zwei oder so.

LG Regina Oswald
-------------------------
Montviso - Internetdienstleistungen
http://www.montviso.de

  • Anmelden oder Registrieren um Kommentare zu schreiben

row hat bereits etwas gebracht

Eingetragen von Kulturmensch (103)
am 01.07.2020 - 13:07 Uhr

In dem Drupal view "Reiseberichte" habe ich jetzt "Unformatierte Liste" und Klasse row eingestellt. Zusammen mit

.views-field-field-image {
max-width: 90%;
height: auto;
padding: 5px;
margin: 5px;
border-style: solid;
border-width: 6px;
border-color: #f6f6f2;
}

in der styles.css des subthemes gibt es jetzt schöne Rahmen um passende Bilder. Danke für den Tipp:-)

Jetzt fehlt nur noch dem Theme Barrio ein Grid zu entlocken.
Ich habe das mit Deiner Klasse versucht und in der styles.css folgendes eingetragen:

<div class="row">
  <div class="col-12 col-lg-6 col-xl-4">.col-12 col-lg-6 col-xl-4</div>
</div>

Da das keine Wirkung zeigt (Caches geleert) bei https://test2.tenckhoff.de/reisetagebuecher mache ich etwas falsch. Ist der Eintrag hier in der styles.css völlig falsch?

  • Anmelden oder Registrieren um Kommentare zu schreiben

Ja das ist falsch. Du musst

Eingetragen von montviso (1886)
am 01.07.2020 - 13:34 Uhr

Ja das ist falsch.

Du musst in die View gehen, und bei den Feldern, die Du hier im Grid ausgibst, also vermutlich Titel und Bild, z.B. bei Titel:
Feld: Inhalt: Titel konfigurieren -> Design-Einstellungen -> HTML-Code des Feldes und der Bezeichnung anpassen (Haken setzen) -> Eine CSS-Klasse erstellen (Haken setzen) und hier die von mir oben genannten drei Grid-Klassen eintragen.

LG Regina Oswald
-------------------------
Montviso - Internetdienstleistungen
http://www.montviso.de

  • Anmelden oder Registrieren um Kommentare zu schreiben

Cool:-)

Eingetragen von Kulturmensch (103)
am 01.07.2020 - 14:23 Uhr

Das hat jetzt mit Deiner Anleitung und einer kleineren Image-Größe (220) geklappt.Klasse! Größere Images werden überlappend eingestellt. Anbei der letzte Stand. Mein Code für die Titelformatierung

.views-field-title {
text-overflow: ellipsis;
text-align:center;
overflow: hidden;
white-space: nowrap;
}

in der styles.css funktioniert auch:-)

Mein Code für den Rahmen der Images

.views-field-image-image {
max-width: 90%;
height: auto%;
padding: 50px;
margin: 5px;
border-style: solid;
border-width: 6px;
border-color: #f6f6f2;
}

in der styles.css funktioniert leider nicht mehr. Hast Du dafür auch eine Idee?
Blöd ist auch, dass ich den verfügbaren Contenbereich noch nicht vergrößern kann. Barrio hält anscheinend den Bereich rechts des Contents für eine 2te Sidebar frei.

AnhangGröße
letzter-stand.JPG 46.49 KB
  • Anmelden oder Registrieren um Kommentare zu schreiben

Ja, sieht ja wirklich schon

Eingetragen von montviso (1886)
am 01.07.2020 - 14:43 Uhr

Ja, sieht ja wirklich schon ganz gut aus mit dem Grid.

Irgendwie ist jetzt die Standardformatierung für .views-field-image-image kaputt gegangen.
Also bei Designeinstellungen für das Feld.
Standardklassen sollen weiter greifen, nur die Cols-Klassen dazu kommen.

Entweder findest Du, wie Du das wieder hin bekommst, oder Du sprichst das so an:
.view-karins-reisetagebuecher.view-display-id-page_1 img{
// hier der Code
}

Die gefühlte dritte Spalte kommt daher, dass Bootstrap per Default mit sehr schmalem Content-Bereich kommt.
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: 1140px;
}

Ich schreibe für breite Bildschirme deutlich mehr
container-xl {
max-width: xxxxx px;
}

Musst ausprobieren, was bei Dir gut aussieht und immer wieder in den unterschiedl. Breiten testen.

LG Regina Oswald
-------------------------
Montviso - Internetdienstleistungen
http://www.montviso.de

  • Anmelden oder Registrieren um Kommentare zu schreiben

.views-field-field-image

Eingetragen von Kulturmensch (103)
am 01.07.2020 - 16:57 Uhr

Jetzt habe ich die Klasse .views-field-field-image wieder drin und sie wird auch - wie in style.css eingetragen - dargestellt und das GRID sieht nun so aus wie in Bartik - danke für`s Coaching:-)
Die Änderung der Contentbreite in der styles.css mit

container-xl {
max-width: 1600px;
}

funktioniert noch nicht.
Oder geht das garnicht?
Anbei ein screenshot der Einstellungsmöglichkeiten von Barrio. Die Klasse row ist in allen Bereichen voreingestellt. Könnte ich hier die Inhaltsbreite verändern?

In der Region Hervorgehoben befinden sich meine Header-Fotos. Die möchte ich responive ansprechen. Dazu habe ich die Klasse .img-responsive gefunden. Wie könnte ich die in der style.css einbauen, dass sie auf alle Fotos wirkt?
.img-responsive {} klappt nicht.

AnhangGröße
barrio-config.jpg 48.47 KB
  • Anmelden oder Registrieren um Kommentare zu schreiben

Sorry, das ist die Klasse

Eingetragen von montviso (1886)
am 01.07.2020 - 16:38 Uhr

Sorry, das ist die Klasse container nicht container-xl.

LG Regina Oswald
-------------------------
Montviso - Internetdienstleistungen
http://www.montviso.de

  • Anmelden oder Registrieren um Kommentare zu schreiben

Super:-)

Eingetragen von Kulturmensch (103)
am 01.07.2020 - 17:08 Uhr

das hat geklappt.
Jetzt möchte ich heute noch 2 Probleme lösen.
1. Meine Headerfotos in der Region "Hervorgehoben" möchte ich - wie bei Bartik - reponsive darstellen, Dazu habe ich die Klasse .img-responsive gefunden. Wie könnte ich die in der style.css einbauen, dass sie auf alle Fotos wirkt?
.img-responsive { } klappt nicht.
2. Mein Menü im Bereich Primary menue verschwindet, wenn der Bildschirm zu klein wird und ist z.B. auf dem IPhone nicht zusehen. Ich hätte erwartet, dass es sich in ein "HH-Menü" ändert? Muss man das Bootstrap auch extra mitteilen?
Falls Du noch Lust und Zeit hast ....

  • Anmelden oder Registrieren um Kommentare zu schreiben

Bootstrap 4

Eingetragen von Jenna (1832)
am 02.07.2020 - 11:37 Uhr

Bootstrap 4 Images
https://getbootstrap.com/docs/4.4/content/images/

Du nutzt wahrscheinlich schon Bootstrap 4 und nicht mehr 3.41 oder? Sonst dementsprechend auf die andere Version umschalten.

Grüße Jenna

  • Anmelden oder Registrieren um Kommentare zu schreiben

Kampf mit Bootstrap Barrio...

Eingetragen von janes_p (1)
am 03.11.2020 - 21:20 Uhr

Liebe Drupaler*innen,

Danke für die Barrio Tips - sie haben mich ein Stück weitergebracht, insbesondere die Unformatted List im View (wenn auch noch nicht ganz ans Ziel - Baustelle Bilder...).

Das Problem mit dem Fonts hatte ich auch - hier eine mögliche Lösung (habe soeben noch den Feedback aus einer Issue Antwort für mehrere weitere Font Kombinationen ergänzt).

Auch am Problem mit den überlappenden Bildern habe ich mir schon stundenlang die Zähne ausgebissen. Basierend auf diesem Forum Beitrag habe ich nun einen Barrio Issue eröffnet (Details dort zu finden); der Maintainer antwortet in der Regel recht rasch. Die korrekte Lösung wäre m.E. img-fluid (wie in der Bootstrap Dokumentation erklärt); ziemlich unklar ist für mich, wann welche Breakpoints zum Zug kommen (Drupal oder Bootstrap?).

Jegliche Klärungen sind willkommen.

Herbstliche Grüsse aus der Schweiz ...Peter

Nachtrag: Alberto von Barrio hat innerhalb von 20 Minuten geantwortet - siehe obigen Barrio Issue für die Lösung

  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • Drupal 8/9 SEO-Beratung/Coaching
  • Verschachtelte UND / ODER Abfrage mit hook_views_query_alter
  • Kartenansicht, Position des Users und Nodes anzeigen
  • Hilfe zu Views und Filter?
  • Views für 2 Kategorien
  • [gelöst]Probleme nach löschen eines Menüpunktes im Adminmenü
  • [gelöst]Zufallsausgabe von Inhalt
  • Variable aus dem inkludierten Partial Template auslesen
  • Probleme beim Versand von Mails via Drupal 9
  • Drupal 9: Wie kommt der Inhalt eines selbst erstellten Feldes in page-title.html.twig
  • Drupal DACH Meetup - Donnerstag 4. März 2021, 19 Uhr
  • Layout-Builder hängt
Weiter

Neue Kommentare

  • Ich mache so Sachen:-)
    vor 1 Stunde 55 Minuten
  • Bei Google musst Du erst ab
    vor 1 Tag 12 Stunden
  • Filter
    vor 2 Tagen 2 Stunden
  • Ich bin mir nicht sicher,
    vor 2 Tagen 4 Stunden
  • Noch eine Frage
    vor 2 Tagen 6 Stunden
  • Setze bitte noch ein [gelöst]
    vor 2 Tagen 10 Stunden
  • Ändere mal deinen Pfad
    vor 2 Tagen 10 Stunden
  • habs gelöst Drush updb hat
    vor 3 Tagen 3 Stunden
  • ronald schrieb wenn du die
    vor 3 Tagen 5 Stunden
  • Habs gefunden
    vor 4 Tagen 2 Stunden

Statistik

Beiträge im Forum: 246088
Registrierte User: 18884

Neue User:

  • uniquename
  • xapizm
  • maklko

» Alle User anzeigen

User nach Punkten sortiert:
wla9015
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3917
ronald3832
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 1 Benutzer und 6 Gäste online.

Benutzer online

  • ronald

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association