Contao-Camp 2024
Ergebnis 1 bis 12 von 12

Thema: ce_text Template p-Element Klasse hinzufügen

  1. #1
    Contao-Nutzer
    Registriert seit
    10.08.2016.
    Ort
    München
    Beiträge
    38

    Standard ce_text Template p-Element Klasse hinzufügen

    Liebe Mitglieder,

    leider verzweifel ich gerade. Ich fand keine Infos zum p-Element vom ce-Text Template.
    Ich versuche das ce_text Template zu bearbeiten.

    Ich möchte für das darin ausgegebene <p>-Element für den Artikel-Text ein class einfügen.

    Aus dem Standard
    HTML-Code:
    <p>...</p>
    soll ein
    HTML-Code:
    <p class="container-text">...</p>
    werden.


    Der Artikel-Text scheint hiermit
    Code:
    <?php if (!$this->addBefore): ?>
    <?= $this->text ?>
    <?php endif; ?>
    abgerufen zu werden.

    Ich komme leider nur nicht darauf, wie vie hier das p-Element bearbeiten kann bzw. hier ihm eine class/id zuweisen kann.

    Mein ce_text-Template sieht bislang so aus:


    Code:
    <div class="container <?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
    
      <?php if ($this->headline): ?>
        <<?= $this->hl ?> class="container-header"><?= $this->headline ?></<?= $this->hl ?>>
      <?php endif; ?>
    
    	<?php $this->block('content'); ?>
    
    		<?php if (!$this->addBefore): ?>
    			<?= $this->text ?>
    		<?php endif; ?>
    
    		<?php if ($this->addImage): ?>
    			<figure class="image_container<?= $this->floatClass ?>"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>
    
    			  <?php if ($this->href): ?>
    				<a href="<?= $this->href ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?= $this->attributes ?>>
    			  <?php endif; ?>
    
    			  <?php $this->insert('picture_default', $this->picture); ?>
    
    			  <?php if ($this->href): ?>
    				</a>
    			  <?php endif; ?>
    
    			  <?php if ($this->caption): ?>
    				<figcaption class="caption"><?= $this->caption ?></figcaption>
    			  <?php endif; ?>
    
    			</figure>
    		<?php endif; ?>
    
    	<?php if ($this->addBefore): ?>
    		<?= $this->text ?>
    	<?php endif; ?>
    </div>

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.896
    Partner-ID
    10107

    Standard

    Das <p> Element kommt nicht von Contao, sondern wird indirekt durch den Benutzer erzeugt, im TinyMCE.

  3. #3
    Contao-Nutzer
    Registriert seit
    10.08.2016.
    Ort
    München
    Beiträge
    38

    Standard

    Vielen Dank!
    Darauf wäre ich sehr sehr lange nicht gekommen.

    Für alle die auch einmal verzweifeln und diesbezüglich suchen:

    Contao-Backend:
    Artikel -> jeweiligen Artikel bearbeiten oder bei der Neuerstellung berücksichtigen:

    Im TinyMCE-Editor auf "<>"-Quelltext-Symbol navigieren.
    Der entsprechende Artikeltext wird in der HTML-Ansicht angezeigt.
    Hier erscheint das p-Element.
    p-Element dann mit z. B.
    <p class="xyz"> TEXT</p>

    bearbeiten.

  4. #4
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.896
    Partner-ID
    10107

    Standard

    Aus welchem Grund müssen die <p> immer diese Klasse haben? Vielleicht kann man das besser lösen.

  5. #5
    Contao-Nutzer
    Registriert seit
    10.08.2016.
    Ort
    München
    Beiträge
    38

    Standard

    Es geht um eine Übersichtsseite mit verschiedenen optische Blöcke (Class=Container) in der Hauptspalte.
    Jedes dieser Blöcke besitzt eine Überschrift (wie "Willkommen", "Neuigkeiten", Login, etc.), darunter folgt ggf. Text/Artikeltext/ oder die Funktion.


    HTML-Code:
    (...)
    <div id="main">
    
    	<div class="container">
    		<header class="container-header">
    			<h2 class="cubeheader">Willkommen</h2>
    			<p class="container-text">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus </p>
    		<a href="" class="more">Mehr</a>
    		</header>
    	</div>
    	
    	(...) (Weitere Container)
    
    </div>
    
    (...)
    In meiner reinen HTML-Vorlage hatte ich die Margin-Abstände von p eines(! der erste) dieser Blöcke angesprochen.
    Jetzt hatte ich aktuell einfach die 1:1 Umsetzung meiner HTML-Vorlage ins Cantao verfolgt und prallte auf das Problem mit dem P-Element im Template.

    Das CSS für p soll nicht für alle gelten, sondern nur für ein bestimmtes, in meinem Fall das erste Container-Div, da dieses am linken Rand steht und dort immer stehen bleibt.



    Ich möchte für <p> innerhalb des ersten Container-Divs (class="Container") diesen CSS verwenden:
    Code:
        
    box-sizing: border-box;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    Angehängte Grafiken Angehängte Grafiken
    Geändert von seamuc (14.02.2017 um 09:09 Uhr)

  6. #6
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von seamuc Beitrag anzeigen
    Im TinyMCE-Editor auf "<>"-Quelltext-Symbol navigieren.
    Der entsprechende Artikeltext wird in der HTML-Ansicht angezeigt.
    Hier erscheint das p-Element.
    p-Element dann mit z. B.
    <p class="xyz"> TEXT</p>

    bearbeiten.
    Man kann für den Tiny auch Klassen erstellen. Dann muss der Redakteur nicht im Quelltext rumwursteln.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  7. #7
    Contao-Nutzer
    Registriert seit
    10.08.2016.
    Ort
    München
    Beiträge
    38

    Standard

    Vielen Dank!
    Das ist natürlich dann noch mal eine feinere Lösung!

    https://de.contaowiki.org/TinyMCE
    Das geht dann über die files/tinymce.css. Bei Bearbeitung und Hinzufügungen von Klassen etc. den Browser-Cache löschen und ggf. Browser Neustarten, sonst kann es zu Problemen bei der Anzeige/Übernahme führen.
    Geändert von seamuc (14.02.2017 um 09:41 Uhr)

  8. #8
    Contao-Fan Avatar von jscholtysik
    Registriert seit
    19.06.2009.
    Ort
    München
    Beiträge
    366

    Standard

    Hi seamuc,


    um updatesicher zu bleiben, bitte auch das hier im Wiki beachten:

    Für eine updatesichere Modifizierung der Einstellungen verfährt man wie folgt:

    1. tinyMCE.php duplizieren und umbenennen in zum Beispiel tinyMCE_custom.php
    2. Die eigene Datei tinyMCE_custom.php über system/config/dcaconfig.php in Contao einbinden
    3. Eintrag in der system/config/dcaconfig.php


    // Die eigene RTE-Konfiguration verwenden für Text-Elemente
    $GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyMCE_custom';

    Joachim
    *** Kein Backup, kein Mitleid ***

  9. #9
    Contao-Fan Avatar von Schneetiger
    Registriert seit
    26.01.2013.
    Beiträge
    278

    Frage

    Hallo zusammen,

    das würde sich ja auch anbieten, wenn in der ce_text.html ein Absatz mit einer bestimmten Formatierung ausgeliefert werden soll; also z.B. Text in rot und ein Rahmen drum herum. Wenn ich das richtig verstandden habe, bräuchte ich dann auch nicht die ce_text kopieren und unter /templates mit einem neuen Namen abspeichern um dieses Ziel zu erreichen, sondern ich kann dies über den tinymce alegant lösen?

    Also was ich erreichen möchte ist, dass der Kunde bei Bedarf einen Absatz schon vorformatiert bekommt und nur noch seinen Text platzieren muss; that´s all.

    Danke für Eure Rückmeldungen.

    VG
    Schneetiger

  10. #10
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Schneetiger Beitrag anzeigen
    das würde sich ja auch anbieten, wenn in der ce_text.html ein Absatz mit einer bestimmten Formatierung ausgeliefert werden soll; also z.B. Text in rot und ein Rahmen drum herum.
    Ja so etwas kann man damit machen.

    Zitat Zitat von Schneetiger Beitrag anzeigen

    Also was ich erreichen möchte ist, dass der Kunde bei Bedarf einen Absatz schon vorformatiert bekommt und nur noch seinen Text platzieren muss.
    Der Kunde muss in dem Fall im Tiny die Klasse wählen. Das ist prinzipiell auch nicht anders als wenn er für ce_text unten im Backendformular eine Klasse einträgt. Mit stylepicker4ward, kann man dort sehr schön optisch aufbereitet Klassen wählbar machen.

    Ich setze die erste Variante z.B. ein, wenn es notwendig ist innerhalb eines Textelements (ce_text) einen Absatz (p-Tag) anders zu gestalten. Zweite Variante setze ich ein, wenn ich komplett unterschiedlich gestaltete Textelemente (ce_text) habe (z.B. mit und ohne Rahmen). In den allermeisten Fällen ist es m.E. für so etwas nicht notwendig das Template anzupassen.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  11. #11
    Contao-Fan Avatar von Schneetiger
    Registriert seit
    26.01.2013.
    Beiträge
    278

    Standard

    Hi mlweb,

    vielen Dank für Deinen super Beitrag; man lernt immer wieder dazu. Find ich prima. Ich werde mir mal die Extension ansehen und ausprobieren, alternativ werde ich mich mal an den mce wagen und versuchen, eine neue Klasse einzubauen (= Neuland für mich).

    Vielen Dank nochmals und einen schönen Tag.

    Gruß
    Schneetiger

  12. #12
    Contao-Fan Avatar von PaddySD
    Registriert seit
    26.10.2016.
    Ort
    Andechs
    Beiträge
    656

    Standard

    Zitat Zitat von seamuc Beitrag anzeigen
    Es geht um eine Übersichtsseite mit verschiedenen optische Blöcke (Class=Container) in der Hauptspalte.
    Jedes dieser Blöcke besitzt eine Überschrift (wie "Willkommen", "Neuigkeiten", Login, etc.), darunter folgt ggf. Text/Artikeltext/ oder die Funktion.


    HTML-Code:
    (...)
    <div id="main">
    
    	<div class="container">
    		<header class="container-header">
    			<h2 class="cubeheader">Willkommen</h2>
    			<p class="container-text">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus </p>
    		<a href="" class="more">Mehr</a>
    		</header>
    	</div>
    	
    	(...) (Weitere Container)
    
    </div>
    
    (...)
    In meiner reinen HTML-Vorlage hatte ich die Margin-Abstände von p eines(! der erste) dieser Blöcke angesprochen.
    Jetzt hatte ich aktuell einfach die 1:1 Umsetzung meiner HTML-Vorlage ins Cantao verfolgt und prallte auf das Problem mit dem P-Element im Template.

    Das CSS für p soll nicht für alle gelten, sondern nur für ein bestimmtes, in meinem Fall das erste Container-Div, da dieses am linken Rand steht und dort immer stehen bleibt.



    Ich möchte für <p> innerhalb des ersten Container-Divs (class="Container") diesen CSS verwenden:
    Code:
        
    box-sizing: border-box;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    Aber das lässt sich nun wirklich ohne jeden Aufwand machen:
    Code:
    #main div.container:first-child p{
    box-sizing: border-box;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;}
    Da müssen Deine Redakteure gar nichts mehr machen...

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •