Text farbig hinterlegt

  • Liebes Forum,

    ich möchte per css diese Texformatierung erzeugen (siehe http://www.alexandrabald.com/textblau.jpg Anhänge hier hochladen klappt leider nicht).
    Wichtig ist, dass nicht der gesamte Hintergrund des Texts hinterlegt, sondern der Weißraum am Rand frei bleiben soll.

    "zu Fuß" mit html kann ich die Sache recht einfach lösen:

    css:

    .blautext {
    color:#300;
    background: #66F;
    width: 300px;
    }

    html:

    <span class="blautext">Alle Kolumnen von Jakob Augstein ... PANORAMAJustizLeuteGesellschaftmehr Das britische Königshaus: Frömmeln, fummeln, fischen Protzige Gelage, Kammerzofen als Schattenkabinett, uneheliche Kinder und Scheidungskriege: Die Geschichte des englischen Königshauses hat viele Abgründe zu bieten. SPIEGEL ONLINE geht auf Stippvisite bei Generationen</span>


    Leider stehe ich gerade total auf dem Schlauch, wie ich die ganze Sache mit Wordpress hinbekomme.

    Habe ja bloß ne Funktion:

    <div class="text">
    <?php the_content('Read more &raquo;'); ?>
    </div>

    Wenn ich der Klasse .text im stylesheet nun einen blauen Background gebe, wird die gesamte Textfläche blau.


    Hat jemand einen Tipp?


    DANKE !

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • geht zB mit einer filterfunktion, in functions.php des themes eingefuegt:

    PHP
    add_filter('the_content', 'blaubaertext');
    function blaubaertext($text) {
    $text = str_replace('<p>', '<p><span class="blautext">', $text);
    $text = str_replace('</p>', '</span></p>', $text);
    return $text;
    }



    das wirkt ueberall wo 'the_content();' im theme verwendet wird.

    http://codex.wordpress.org/Plugin_API/Filter_Reference

  • wenn du ueber .contenttext die hintergrund-farbe formatierst, formatierst du die div; gib dem span eine individuelle css class.siehe hier, html vom browser::

    HTML
    <div class="contenttext"><p><span class="contenttext">e-lrgbnerjgblejrnbgbeber</span></p></div>
  • habe rumprobiert aber es klappt nicht. kannst du mir sagen, wie genau das in der index aussehen muss?

    wie bringe ich die funktion (<?php the_content('Read more &raquo;'); ?>) da rein? mit einfachem text funktioniert es...

  • das hier ist der html-code von einem post (vom browser):

    HTML
    <div class="post"><h2>lknbljkejblg</h2><div id="punkte" >Punkte 11</div><div class="contenttext"> <!--das hier ist von der index.php--><p><span class="contenttext"> <!--das hier kommt vom filter--><p>e-lrgbnerjgblejrnbgbeber</p></span></p></div><p class="postinfo"> 4 April 2011 <a href="http://www.alexandrabald.com/chips/?category_name=zypern" title="Alle Artikel in ZYPERN ansehen" rel="category">ZYPERN</a>.<br /></p></div>



    wieso ist da wieder ein paragraph tag innerhalb des spans?

    welchen code verwendest du fuer den filter?


    wenn der html paragraph da entfernt ist, ist ansonsten das hier wichtig:
    verwende in der index.php und im filter eine unterschiedliche css class; zB:
    verwende im filter-code die css class .blautext;

    und entferne im stylesheet den hintergrund vom .contenttext style.
    und mach einen neuen style fuer span.blautext mit hintergrundfarbe

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!