Bootstrap

[NiAlMa]

Hallo Zusammen,

ich versuche mich grad an bootstrap 3 und bin soweit zufrieden.

Einzig ein Problem habe ich mit der Navigation:

Bei active ist in der Navigation das ganze grau hinterlegt und beim dorpdown ebfenfalls und ich finde einfach nicht die passende Stelle im css damit das ganze transparent ist...

Wer mir da evtl. helfen kann dem lasse ich gerne das ganze als zip/rar bzw die index und die style css bzw. bootstrap.css zukommen

 

[cythux]

AW: Bootstrap

Poste mal Deinen Code wo du die Navigation eingebaut hast

 

[MainAngler]

Wollte jetzt kein extra Thema aufmachen , da sich meine Frage, ja auch wie dieser Thread-Betreff, generell um Bootstrap handelt...

Bräuchte nur mal eine Erklärung zu Bootstrap und Joomla3 und das wenn's geht per PN, damit wir den Thread nicht zumüllen.
Da kapier ich nämlich etwas nicht bzw. stehe da auf dem Schlauch.
Für jemanden der sich mit beidem auskennt sollte die Antwort ein Klacks sein.

PS: Kann nichts an Code zeigen, da ich noch nichts festes habe, sondern mir erstmal Gedanken mache...

 

[msa1989]

Hi Angler,
du willst also eine Seite mit Joomla bauen?
Seit einiger Zeit ist das Standard-Theme von Joomla auf Bootstrap Basis. D.h. du kannst dir die Dokumentation von Bootstrap durchlesen, und bei Anpassungen den entsprechenenden Code ändern.
Wenn du nur die Optik anpassen willst, dann empfehle ich dir eine z.B. "override.css" Datei in dein Design aufzunehmen und dort die Farbänderungen etc. vorzunehmen. Willst du wirklich das Layout verändern, dann musst du an den HTML-Code ran.
Wenn du überhaupt kein Plan hast, was du jetzt machen sollst, dann empfehle ich dir hier auf der Seite das ein oder andere Video-Tutorial anzuschauen.
http://www.psd-tutorials.de/tutorials/web/joomla
Viel Erfolg

 

[MainAngler]

Hi Angler,
du willst also eine Seite mit Joomla bauen?

Si (ja).

Seit einiger Zeit ist das Standard-Theme von Joomla auf Bootstrap Basis.

Ist mir bekannt.

Wenn du nur die Optik anpassen willst, dann empfehle ich dir eine z.B. "override.css" Datei in dein Design aufzunehmen und dort die Farbänderungen etc. vorzunehmen.

Genau das will ich nicht!

Willst du wirklich das Layout verändern, dann musst du an den HTML-Code ran.

Das ist mir klar!

Wenn du überhaupt kein Plan hast...

Doch ein bisschen habe ich schon.

Bei meiner Überlegung bin ich wohl auch schon einen Schritt weitergekommen, aber ein "Profi", der sich damit auskennt, könnte meine Bedenken aus dem Weg räumen indem er mir das, was ich bisher nicht kapiert hatte kurz erklärt bzw. bestätigt.

Ok, hier das was ich mir überlegt hatte und wo ich erst nicht klar kam.
Gehen wir von folgendem Aufbau (zum Vergrößern anklicken), basierend auf einem 12 Spalten-Layout, aus:
http://imageshack.com/f/pd1Fedjfp
Das sind ja alles, wenn ich das richtig verstehe, Positionen in Joomla die angesprochen werden können.
Klar, die müssen in der templateDetails.xml von Joomla stehen damit sie bekannt sind.

Gehen wir mal davon aus, dass die Positionen a3-a5 nur eingeblendet werden sollen, wenn dafür auch Inhalt vorhanden ist.
Für jede dieser Positionen benötigt man in Joomla doch ein Modul, richtig?
1. Also könnte man per PHP ein countModules nutzen das prüft ob ein Modul an dieser Position aktiv ist oder nicht oder?
2. Wenn quasi a3-a5 nicht benutzt werden, dann soll sich zudem a2 ausdehnen.
Das müsste es doch automatisch machen, wenn keine feste Höhe dafür festgelegt wird oder?

 

[msa1989]

@MainAngler
Das mit dem "ausdehnen" nach unten ist so eine Sache. Wenn in a2 geügend Content vorhanden ist, dann wird a2 sicherlich so hoch, bzw. noch höher werden als a1.
Ist dies nicht der Fall, dann musst du da ein bisschen mit dem Layout und CSS tricksen. Dafür gibt's aber zahlreiche Anleitungen, wie man 2 divs nebeneinander gleich hoch macht.
Ich kenne die Hintergrundfarben nicht, und weiß nicht ob du damit was spezielles anfangen willst, ich würde jedoch pauschal mit Bootstrap die Seite so aufbauen:

<div class="row">
    <div class="col-md-3">a1</div>
  <div class="col-md-9">
      <div class="row">
        <div class="col-md-12">
          a2
        <div class="row">
            <div class="col-md-4">a3</div>
          <div class="col-md-4">a4</div>
          <div class="col-md-4">a5</div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="clearfix"></div>
<div class="row">
    <div class="col-md-4">b1</div>
    <div class="col-md-4">b2</div>
  <div class="col-md-4">b3</div>
</div>

Hier musst du natürlich die col-md-xx an deine Bedürfnisse anpassen, und für das mobile Layout die entsprechenden veränderungen hinzufügen. Den Bereich

<div class="row">
  <div class="col-md-4">a3</div>
  <div class="col-md-4">a4</div>
  <div class="col-md-4">a5</div>
</div>

unter a2 kannst du ja dann wie gemeint einfügen, oder eben nicht.

In jedem Fall ist mit diesem Layout der Content von b1 - b3 unter dem Content von a1 - a5.
Inwiefern man mit Joomla die Module ein und ausblenden kann, das weiß ich leider nicht. Aber ich denke hier im Forum wird sich damit noch jemand besser auskennen.

 

[MainAngler]

@msa1989
Danke, nur leider bringt mir das auch nicht wirklich was, denn soweit ich weiß muss ich das in Joomla wie erwähnt mit countModules und somit mit PHP machen.
Also quasi eine Abfrage die überprüft ob an Position(en) a3-a5 ein Modul vorhanden ist oder nicht...

Zudem sollte das auch Responsive sein, also muss ich zu jedem col-md-x auch ein col-sx-x (oder wie das jetzt in Bootstrap für kleinere Auflösungen heißt) einsetzen.
Das muss auch mit in die countMoudules-Abfrage mit rein.

Hier kann mir also wirklich nur jemand helfen der sich mit Joomla auskennt!

Und zu:

Wenn in a2 geügend Content vorhanden ist, dann wird a2 sicherlich so hoch, bzw. noch höher werden als a1.

Das soll mir recht sein.
a2 kann ruhig höher werden als a1.

 

[msa1989]

@MainAngler
Naja, wenn du die Bereiche a3-a5 leer lässt, weil eben grad kein Modul drin ist, dann wirst du sie eh nicht bemerken, weil sie ja keine Höhe haben. Die Höhe bekommen sie ja erst durch den Content.
Mit dem responsive Layout sehe ich auch nicht das große Problem. Du kannst ja jedem Modul seine größe in jeder Ansicht über die col-lg-xx, col-sm-xx etc. geben. Wie gesagt, wenn gerade kein Content in das Modul reinkommt, dann ist der Bereich so breit wie er sein soll, jedoch leer. Das fällt z.B. bei der Smartphone-Ansicht nicht weiter auf, weil dort wirst du vermutlich die Bereiche untereinander anordnen, und dann hat der leere Bereich eine Höhe von 0 und ist somit nicht sichtbar.
Blöd ist es nur, wenn Bereich a3 und a5 gefüllt sind, a4 jedoch nicht. In der Desktop-Ansicht hast du dann einen weißen Fleck zwischen den Bereichen. Aber je nach Content ist das ja eventuell nicht mal störend.
Schöner ist es allerdings den HTML-Code für den Bereich komplett wegzulassen. Aber ich denke da lässt sich mit ein paar css-Klassen die Bootstrap bietet eine funktionierende und brauchbare Lösung zaubern.