it-swarm.com.de

Teilen Sie einen Artikel in mehrere Abteilungen auf, indem Sie <div> -Tags hinzufügen

Ich bin neu in Joomla und möchte einen Artikel in Joomla mit mehreren Unterteilungen entwickeln, so wie wir eine normale HTML-Seite durch Hinzufügen von Tags unterteilen. Ich habe versucht, dem Artikel mit Hilfe von sourcerer CSS-Code hinzuzufügen, aber es hat nicht funktioniert. Brauche eine bessere Lösung als diese. Ich habe es auch mit der Add Custom CSS Erweiterung von Joomla versucht, aber keinen Fortschritt. Die folgenden Bilder sind die CSS-Datei und der Artikelcode von joomla.

CSS file CSS-Datei

Joomla article code Joomla-Artikelcode

Output Ausgabe

Sie können alle Ihre benutzerdefinierten CSS-Definitionen im Ordner yourjoomla/templates/yourtemplate/css ablegen, wenn Sie in diesem Ordner eine Datei custom.css oder user.css erstellen. Da dies nicht immer mit allen Vorlagen funktioniert, können Sie ein kostenloses Plugin zum Laden Ihrer benutzerdefinierten CSS-Codes/Stile verwenden:

https://extensions.joomla.org/extension/add-custom-css/

Auf diese Weise können Sie Ihre 'speziellen' Div-Klassenstile auch in anderen Artikeln wiederverwenden und müssen Div-Stile nicht Artikel für Artikel definieren ...

Und ich habe wirklich vergessen zu erwähnen, dass Sie zum Beispiel den CodeMirror-Editor in Ihrem Joomla verwenden müssen und Sie in diesem Fall die Artikel im vollständigen HTML-Modus bearbeiten können, den Sie unter Global configuration-> Default Editor einstellen können -> Editor-CodeMirro r. Und auf diese Weise können Sie zusammen mit der obigen Styling-Lösung oder mit Inline-Styling jede Art von HTML-Seiten/Artikeln erstellen. (Es tut mir leid, dass ich diesen wichtigen Teil meiner Antwort weggelassen habe).

Sehr wichtig bei der Verwendung dieses CSS-Lade-Plugins: Sie müssen dieses Plugin am Ende der Plugin-Reihenfolge im Plugin-Manager einfügen.

Ergebnisse meiner Prüfung der oben genannten:

Mein Artikel html:

<div class="col">
  <div class="coll_1">
    <p>
      This is col 1
    </p>
  </div>
  <div class="coll_2">
    <p>
      This is col 2
    </p>
  </div>
</div>

Mein kurzes CSS in der Datei custom.css:

.coll_1 {
  width: 100px;
  height: 50px;
  background-color: red;
}

.coll_2 {
  width: 200px;
  height:50px;
  background-color: blue;
}

Und mein visuelles Ergebnis im Artikel im Joomla-Frontend:

custom css loading in Joomla with add custom css plugin

So funktioniert es problemlos.

Aber das ganze Thema viel einfacher machen: wenn Sie CodeMirror als Ihren Standard-Editor in Joomla verwenden , dann brauchen Sie das Add Custom CSS Plugin eigentlich nicht, um Ihre Artikel zu stylen. Mit dem CodeMirror-Editor können Sie einfach Ihren Inline-CSS-Stil innerhalb von <style> - Tags im Artikel platzieren, den Artikel speichern und das gleiche Ergebnis erhalten (einen gestalteten Artikel). Fügen Sie also einfach das Ganze in einen ein der Artikel und Sie werden das haben.

Dann sollte Ihr Artikel so aussehen:

<div class="col">
  <div class="coll_1">
    <p>
      This is col 1
    </p>
  </div>
  <div class="coll_2">
    <p>
      This is col 2
    </p>
  </div>
</div>

<style>
.coll_1 {
  width: 100px;
  height: 50px;
  background-color: red;
}

.coll_2 {
  width: 200px;
  height:50px;
  background-color: blue;
}
</style>

Und zum Schluss: Sie können sogar Bootstrap mit CodeMirror Editor in Joomla inline importieren/laden, wenn es nicht standardmäßig in Ihrer Seite geladen ist . Sie können bootstrap in ein 'leeres' Modul laden, wenn es nicht geladen ist, und Sie können bootstrap auch das Styling verwenden, wie Sie möchten. Ich verwende meistens uikit Bibliothek in Layouts und Stilen.

Wenn Sie diesen Code einfach kopieren und in Ihren Artikel einfügen, erhalten Sie 3 Spaltenunterteile im Artikel, wobei bootstrap (Dies ist nur ein Beispiel und nicht das Laden von bootstrap langfristig):

<div class="col">
  <div class="coll_1">
    <p>
      This is row1 1
    </p>
  </div>
  <div class="coll_2">
    <p>
      This is row2 2
    </p>
  </div>
  <div class="coll_3">
    <p>
      This is row 3
    </p>
  </div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
   <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      Second of three columns
    </div>
    <div class="col-sm">
      Third of three columns
    </div>
  </div>
</div>


<style>
.coll_1 {
  width: 100px;
  height: 50px;
  background-color: red;
}

.coll_2 {
  width: 200px;
  height:50px;
  background-color: blue;
}

.coll_3 {
  width: 100px;
  height: 50px;
  }
</style> 

und das Ergebnis mit Bootstrap wo Sie die 3 Spalten Einteilung sehen können:

CodeMirror Editor using Bootstrap

Mit dem CodeMirror-Editor in Joomla können Sie also endlose Dinge tun.

1
Zollie