Joomlaのスタイルをスタイリング - ドロップキャップCSS

Question

私はJoomlaの記事にドロップキャップを適用する様々な方法を試してみました。何も動作しません。

は、私はちょうどtemplate.cssにドロップキャップのスタイル（下記参照）を貼り付けるために必要なことを想定し、私はそれから...昔フレーズにクラスを適用することができることを次のように：

<p class="introduction">O</p><p>nce upon a time...</p> 

私はおそらく非常に単純なものを見逃していますが、私はそれを理解することはできません。追加情報：テキストエディタはtinyMCEです。テンプレートは複数のスタイルシートを使用します。

p.introduction:first-letter 
{ 
font-size: 44px; 
float: left; 
color: #D4D4C7; 
line-height: 35px; 
padding-top: 3px; 
padding-right: 3px; 
font-family: Times, serif, Georgia; 
} 

Answer 1

あなたはスパンの最初の文字をラップしようとして インラインブロックとして、それを表示することができます。それはあなたが好きなのに最初の文字をスタイルすることができるはずです。それはまだインラインで座るべき​​です。

Answer 2

単純なjQueryを使用して記事の最初の文字を取得し、記事の先頭にある浮動小数点型のdivに入れることをお勧めします。

あなたのHTMLはかなり同じでなければなりません：ドロップキャップ（ビッグ大文字）のための

<div class="content"> 
    <div class="drop-caps"></div> 

    <p>Once upon a time lorem ipsum dolor sit amet, nibh fuga quam at ut, justo ante nullam urna est, turpis...</p> 
</div> 

CSSルール：

.drop-caps { 
    padding: 0 10px; 
    float: left; 
    font-size: 48px; 
    display: block; 
    text-transform: uppercase; 
    line-height: 48px; 
} 

とjQuery：ここ

var firstSentence = $('.content').find('p:first').text(); 
    $('.content').find('.drop-caps').append(firstSentence.charAt(0)); 

    if ($('.drop-caps + div').length) { 
     $('.drop-caps').hide(); 
    } 

が実際ですJSFfiddle Demo。