Design Bootstrap 3 und Aufmacher

Habe zu den Aufmachern in Bootstrap 3 ein paar Fragen. Finde keine Antwort auf der Seite https://bootstrap.web2date-designs.de/absaetze/aufmacher/ oder sehe den Wald vor lauter Bäumen nicht.

1. Kann man im Aufmacher das Absatzbild auch auf rechts verschieben?
2. Geht der Hintergrund auch transparent zu machen oder mit Linien außen rum?

http://www.jahnfoto.de/testsite/fotografie/

Beim nicht gesplitteten Aufmacher (in Spalten teilen steht auf 1) befindet sich das Aufmacherbild auf der rechten Seite.

Der Hintergrund kann des Weiteren nur per CSS, am besten in der LESS-Datei mit den Selektoren .split-teaser .thumbnail oder .w2d-teaser .thumbnail geändert werden, da dieser in den Varianten vorgegeben ist.

Danke, für den Hinweis.

Schade mit dem Aufmacherbild. Muss ich damit leben.

Verstehe ich das richtig? Den Hintergund müsste ich dann in den css Dateien anpassen?  Klingt wieder kompliziert.

Das Wort "mehr" in "weiterlesen" ändere ich in den erweiterten Einstellungen des Designs?

Warum schade, wenn es rechts beim normalen Aufmacher positioniert wird???

Das „mehr“ ist eine normale Standardsprachressource ... wie in jedem anderen Web/Shop 9 Design.

Das war nur eine Bemerkung.

Bei normalen Absätzen habe ich ja die Möglichkeit das Absatzbild zu versetzen. Deshalb habe ich gedacht beim Aufmacher ist dies auch möglich. Daher "schade". Mir würde es besser links gefallen. Design ist ja auch eine Ansichtsache.

Wichtiger ist für mich der weisse Hintergund. Der passt auf kenen Fall in mein Design.

Manchmal ist es besser auf Bemerkungen zu verzichten

Du fragst im Eingangsbeitrag ob das Absatzbild nach rechts verschoben werden kann, und nun soll es links sein? Hmm.

Wir verallgemeinern die Frage. Ist es generell möglich das Absatzbild bei Aufmachern über erweiterte Eigenschaften oder ähnliches zu versetzen?  

Manchmal schreibe ich zu schnell. Sorry.

Generell nicht, mit gewissen Anpassungen sicherlich schon, es müßte nur das float und padding verändert werden.

Ist das die "lessc.inc.php" Datei? Ich finde in dieser keine Angaben mit den Worten:  .split-teaser .thumbnail oder .w2d-teaser .thumbnail 

Dies müssen wohl als Eigenschaft angelegt werden?

 ... Thomas spricht von einer CSS-Datei ! Wenn Du die Begriffe in eine PHP-Datei suchst und da nichts findest, liegst Du wahrscheinlich falsch.

Entweder ist es die style.css od noch wahrscheinlicher die style.less im Bootstrap-Ordner !

Da Du allerdings nicht wirklich Ahnung hast, solltest Du vorab die Dateien sichern ..

Nichts für ungut !

Bye !

Vielen Dank für den Tipp. Habe mir heute die style.css und style.less Datei kurz angeschaut. Habe noch nichts über "background" und "thumbnails" Aufmacher gefunden. Aber irgendwo muss es ja stehen. 

Schaue heute nochmals in Ruhe nach.

Klaus, wenn du dir die style.less im Designordner mal mit einem Editor aufrufst und dann zu Zeile 598 scrollst findest du u.a. dieses:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<cc:*>###############################################################
######			Teaser bzw. Aufmacher
##############################################################</cc:*>
.split-teaser {
	h3 {
		margin: 10px 0;
	}
}
.center-teaser {
	text-align: center;
	p {
		text-align: left;
	}
}
.w2d-teaser {
	h3 {
		margin: 0 0 5px 0;
	}
	a > img {
		float: right;
		padding-left: 10px;
	}

 Ich gehe mal stark davon aus das Thomas dir sagen wollte, das du hier einen neuen Selektor " .split-teaser .thumbnail" mit den entsprechenden Daten einfügen musst. Oder du fügst den zweiten Selektor .w2d-teaser.thumbnail ein.

Da wahrscheinlich weder deine noch meine Kenne ausreichend sind um damit zu spielen, würde ich mir das vom Fachmann einbauen lassen.

VG

Super !!! Danke.

Das Bild ist links. http://www.jahnfoto.de/testsite/fotografie/

Um den Hintergrund transparent zu machen muss ich doch in der "bootstrap.css" (richtige Variante) den Code ändern?

.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
       -o-transition: border .2s ease-in-out;
          transition: border .2s ease-in-out;

background-color: #transparent;

 Er wird aber nicht angenommen.

Eine Frage noch nebenbei: Wo kann ich das Absatzbild im Aufmacher größer machen?

#transparent   ...? Das wäre ja ganz neu... 

http://www.w3schools.com/cssref/pr_background-color.asp

Danke, schit Tippfehler. Es funktioniert trotzdem nicht. Habe die Variante: Stil Bootstrap und Farbvariante : eigene und dementsprechend die Datei aus dem Ordner Styles  Bootstrap genommen.

background-color: transparent;

 Vielleicht liegt es an der Farbvariante : eigene ?

Dazu habe ich keine Ahnung, da ich das Design nicht habe...

Aber wenn ich in der Browser-Bearbeitung die "background-color" entferne, dann sehe ich es so, wie Du es wahrscheinlich haben willst...

Ich habe jetzt die Dateien "bootstrap.css", style.less" durchgeschaut. Irgendwo ist in dem Design der Hintergrund des Aufmachers extra definiert oder übernimmt die Farbe von einen übergeordneten Code.

Kann es sein das ich für den Aufmacher einen Hintergrund extra definieren muss?

Ich kann in der "bootstrap.css" den "background-color" entfernen. Auch das tut sich nichts.

632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660

<cc :*>###############################################################
######			Teaser bzw. Aufmacher
##############################################################</cc :*>
.split-teaser {
	.thumbnail {
		background-color: red
	}
	h3 {
		margin: 10px 0;
	}
}
.center-teaser {
	text-align: center;
	p {
		text-align: left;
	}
}
.w2d-teaser {
	.thumbnail {
		background-color: red
	}
	h3 {
		margin: 0 0 5px 0;
	}
	a > img {
		float: right;
		padding-left: 10px;
	}
}

Beim Selektor .w2d-teaser und .split-teaser musst du in der style.less lediglich

1
2
3

	.thumbnail {
		background-color: transparent
	}

hinzufügen.

Vielen Dank Thomas !!! Jetzt funktioniert es und so einfach, wenn man Ahnung hat.  

Noch 2 Fragen:

1. Zur Größe der Bilder: Kann ich die über erweiterte Eigenschaften verändern? Oder auch in den css bzw. less Dateien?

2. Rahmen um den Aufmacher. Wenn ich da in die "style.less"

.thumbnail {
		border: 0px
	}

 das so einsetze. Ist das richtig? Funktionieren tut es. 

Ich will nur keine zusätzlichen Fehler in das Design integrieren.

zu 1.) Weder noch, die Breite wird in verschiedenen ccml-Dateien berechnet (paragraph_teaser.ccml, teaser_captionabstractpicture.ccml).
zu 2.) Thumbnail wird auch an anderen Stellen verwendet. Ich würde daher den Rahmen direkt unter der Hintergrundfarbe auf 0 setzen, den Innenabstand (padding) ebenso.

Danke, nochmal an alle für eure Hilfe. Die Seite steht jetzt.

http://www.jahnfoto.de/testsite/fotografie/

Nur noch paar kosmetische OP's. 

 

Ich habe das Thema etwas voreilig auf erledigt gesetzt. In der Handyansicht sind die Bilder nicht mittig. Geht das zu ändern? Bei mehrspaltigen Aufmacher funktioniert es. Ich möchte aber die Schrift nicht zentrieren. Das liest sich dann doof.