Pos 7 aufteilen

Graffa23 · 23. Juni 2015

Hallo Leute,
ich weiß, ich schon wieder. www.horizont1.bplaced.de
Ich hoffe ich nerve nicht zu sehr.. da ich in letzter Zeit relativ viele Fragen gestellt und Themen eröffnet habe.
Bin eben noch am Anfang und sonst habe ich keine Lösung gefunden.

Und ich hoffe auch, das es zumindest zu diesem Thema das letzte mal sein wird.
Ich habe bei mir die Position 7 eingebaut, sozusagen als Beitragsbild-Alternative.
Nun so gefällt mir das auch jedoch würde ich es gerne so umsetzen das um die Grafik ein Rahmen ist bzw ein anderen Hintergrund hat.
Zu sehen im Anhang 1.

Ich weiß, dass ich diese Position oder diesen div aufteilen muss, wie ich es ja schonmal im Body gemacht habe. Allerdings dringt es bei mir nicht so ganz durch, an welcher Stelle genau. Zusätzlich macht es mir ordentlich Probleme, diesen Bereich dann zu stylen also Hintergrundfarbe, Position etc...

Mein Lösungsansatz wäre folgender:

In der index.php:

PHP

<?php if ($this->countModules('position-7')) : ?>
        <div id="aside" class="span3">        
            <!-- Begin Right Sidebar -->                  
            <jdoc:include type="modules" name="well_back" style="xhtml" />
            <jdoc:include type="modules" name="position-7" style="well" />
             <!-- Begin Background Image -->
              <div id="hintergrund1" class="span3">
            <jdoc:include type="modules" name="hintergrund1" style="well" />



          <!-- End Right Sidebar -->
        </div>
        </div>
        <?php endif; ?>

Alles anzeigen

und dann über die custom.css mit .hintergrund1 { XYZ;} stylen.

Ich habe mir auch nochmal mehrmals den anderen Thread durchgelesen, aber ich komme nicht weiter.

Ich weiß es war in letzter Zeit relativ viel von mir, aber ich bin euch ebenso genau so sehr dankbar das ihr mir helft diesen Weg zur ersten Website zu asphaltieren!

Mit freundlichen Grüßen
Graffa23

anka · 23. Juni 2015

Das geht viel einfacher .

Gebe den Modulen jeweils einen Modulklassen-Suffix mit (z.B. " rot"). Achte dabei darauf, dass du vor dem Suffix ein Leerzeichen setzen musst. Danach kannst du im custom.css den Hintergrund in Abhängigkeit vom Suffix definieren. Z.B.

Code

.well.rot {
background: red;
}
.well.blau {
background: blue;
}

Graffa23 · 23. Juni 2015

Hallo anka,
herzliche Dank für deine Rückmeldung.

Das funktioniert auch so, dass dann mein angegebenes Modul mit der Farbe hinterlegt wird.
Allerdings wollte ich dem Bild einen anderen Hintergrund geben, wie oben im Anhang zu sehen, die Schrift und der Rahmen außenrum sollen dann eine anderen Farbe haben. Gibt es eine Möglichkeit oder sollte man das über Bildbearbeitung lösen?

Mit freundlichen Grüßen und größten DANK,
Graffa23

anka · 23. Juni 2015

Du könntest es z.B. damit lösen

Code

.custom.rot img {
    background: yellow;
    border: 5px solid blue;
  max-width: calc(100% - 10px);
}

Allerdings funktioniert es mit dem farbigen Bildhintergrund nur bei PNG-Format, und das auch nur dann, wenn der Hintergrund beim Originalbild durchsichtig ist.

Wie auch immer, ich würde sowohl Rahmen als auch Hintergrund mit Gimp oder PS machen. Ist einfacher und funktioniert immer .

christine2 · 24. Juni 2015

Hallo Graffa23,
Öhm, woran scheitert es jetzt? Der IST-Stand ist zurzeit, ich sehe nur rot.

a)

Code

.well.rot { background: red;}

Möchte jetzt Ankas Codes näher erläutern. Hoffe, das ist OK
-----------
A)

Wenn Du den Code:

a) lässt und den Code:

b) = im letzten post von Anka reingibst, dann ist es so: Bild 1
------------
B)

Wenn Du den Code:

a) löscht und

b) den letzten Code von Anka reingibst, dann ist es so: Bild 2

Was geschieht bei B)?

da wird die Hintergrundfarbe von: .well {xxxx} genommen.

Habe beim Bild 2 bei der Klasse .well einen roten border reingegeben. Du schreibst ja, dass Du da einen Rahmen drumherum, möchtest.

Erläuterung zu Code b):

Code

.custom.rot img {
 background: yellow;
 border: 5px solid blue;
 max-width: calc(100% - 10px);}

1. Zeile ist ja der (das?) Modulsuffix, den Anka erwähnte: „ rot“ [ohne Abstand davor, hast Du ja gemacht]
Kann natürlich auch anders heißen.

4. Zeile bedeutet: Dass das innere Bild in die Mitte rückt.

Summary: Ich würde für B) plädieren.

Falls da was nun an meine Erläuterungen nicht korrekt ist, darf Anka (Mini)-Haue machen.
------------------------
Ist jetzt nur Zusatzinfo: Im 1. post hattest Du: <div id="hintergrund1" class="span3">, also einen "div container. Formatieren wolltest Du aber mit: .hintergrund1 { XYZ;}
Geht nur so: div id bla1> CSS: #bla1 { } Klasse: div class bla2 > .bla2 { }. Also, die Unterschiede zwischen # und .
Punkt - Ende

Liebe Grüße, Christine

Graffa23 · 24. Juni 2015

Hallo ihr beiden,
wie Immer vielen Dank für eure Hilfe *Verbeug*
Klar ist das genauere erläutern in Ordnung umso besser für mich!
Durch Ankas Quellcode und deine Erläuterung konnte ich das gesamte so umsetzen wie ich wollte.

Manchmal kann es eben so einfach sein.. aber irgendwie denke ich automatisch erster immer an 'kompliziert'.

Mit freundlichen Grüßen und besten Dank,
Graffa23

Graffa23 · 25. Juni 2015

Hallo an alle ich bins nochmal,

ich habe noch eine Frage zu den Positionen.. Aktuell habe ich ja auf der Startseite 'Herzlich Willkommen', das Bild im Content Bereich + den Text.

Warum?:
Die Position 7 bzw 8 haben ja feste Prozentwerte, da ich aber auf der Startseite das Bild größer haben wollte und ich nicht wusste wie ich die Größen der einzelnen Positionen ändere habe ich es jetzt mal so gelöst was mir allerdings nicht gefällt.

Zu der Frage:
Wie kann ich die Größe der Position 8 NUR auf der Startseite ändern?
Das es nur auf der Startseite so ist könnte ich ja theoretisch mit dem Modulklassensuffix angeben.
Ich denke ich muss die Position 8 den Prozentwert anpassen, dafür den Content verkleinern. Jedoch immer wenn ich die Position 8 von der Größe ändern will verschiebt sich alles und der Content rutscht unten drunter. Ich denke auch, dass dafür in der index.php was geändert werden muss.

Weiß einer einen Rat?

Mit freundlichen Grüßen
Graffa23

jacxx · 26. Juni 2015

Eine Position hat keine per se Größe, es sei denn es wird in der css über eine class verlangt.
Du kannst aber mit einem Modul, welches nur auf der Startseite (Modulzuordnung) die Größe anpassen..
wobei ich davon ausgehe, das mit Größe die Höhe gemeint ist.

Graffa23 · 26. Juni 2015

Hallo jacxx,
danke für deine Hilfe!

Eine Position bzw die Class span3 ist ja sozusagen in der css definiert mit dem Wert von xyz%.
Das heißt ich erstelle ein Modul mit einem extra Suffix nur für dieses Modul (Eigene HTML) dort kommt mein Bild Text etc rein.
Erstelle mir eine extra Position in der template.xml
Dann rufe ich mein Modul in meinem Beitrag auf, an der stelle wo ich es haben will mit {loadposition Name}.

Allgemein mit der Größe meine ich die Breite und Höhe der Class Span3 (Position

Mit freundlichen Grüßen
Graffa23

christine2 · 26. Juni 2015

Hallo Graffa23,

kaum möchte ich "eingreifen" - ist es wieder anders Aber Du probierst ja etliche Varianten durch. Brav.

Schreib jetzt nur allgemein Sachen her.

a) in der .custom.blau img statt: width: 100%; > max-width:100% machen.

b) wenn Du das mit der {loadposition Name} machen möchtest, brauchst Du nichts in die templateDetails.xml schreiben. Dort sind ja die bestehenden Positionen.
Für das Modul im eigenen Beitrag, nimmst Du eine Position, die noch nicht existiert. Mehr: Wie kann ich ein Modul in Beiträgen anzeigen lassen {loadposition}

c) Bitte beim Text kein: margin-left:xxxx; rein (war vorher) Ist dann nicht responsive.

d) Bei 1 Bild samt Text, mache ich das normalerweise mit dem JCE. Dann nach links floaten. Mit paddings Im Bild eingeben, dass der Text nicht so dran pickt.

e) Wegen der "spans" grundsätzlich: Man könnte es so probieren: http://www.joomlaportal.de/joo…rungen-2.html#post1594116

Wobei es bei Dir ca. so wäre: span9 auf: span8 ändern.
Die: <div id="sidebar" class="span3"> (= position-8) auf: span4 ändern. Es müssen immer total: span12 sein. Nicht mehr.
Hat aber glaub (leider) Auswirkungen auf die anderen Seiten.

So, das war jetzt nur so "in etwa".

Liebe Grüße & probier fleißig weiter
Christine

Graffa23 · 26. Juni 2015

Hallo Chrstine,
danke für deine Antwort

Ja sry, ich weiß es ist furchtbar zu dann irgendwie helfen zu können aber man muss ja auch selbst wirklich alles ausprobieren und eventuell auch die Lösung selbst erarbeiten. Das ist mir sogar gelungen!

a) Abgehakt!
b) Hm okay, ich habe mir einfach zwei neue Positionen in die Template.xml eingetragen einmal 'Startseite' und einmal 'Welcome' funktioniert auch.
c) Habe ich draußen.. war Übergangsweise zum versuchen, Danke!
d) Habe ich jetzt mehr oder weniger auch so gemacht, Modul für das Bild um den Rahmen etc festlegen zu können. Modul geladen, Text geschrieben diesen auf float right gestellt.
e) Hmm okay, dachte ich mir schon dass das nicht so einfach mit den Prozentangaben getan ist.. aber es gibt oft mehrere Lösungen und das ist auch zum Glück gut so

Ich denke das sollte jetzt 'fachgerecht' umgesetzt sein.

Viele Dank für eure Hilfe!

Schönes Wochenende
Mit freundlichen Grüßen
Graffa23