造型Joomla內容 - 下降帽子CSS

我已經嘗試了各種方式應用到Joomla文章滴蓋。什麼都沒有造型Joomla內容 - 下降帽子CSS

我認爲我只是需要落帽樣式（見下文）粘貼到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; 
}

來源

2012-04-24 Mike Heneroty

你到底想要做什麼？ – Jack 2012-04-24 05:57:27

爲什麼你將這一段分爲兩段？ – Jeroen 2012-04-24 07:13:13

你可以嘗試在包裝跨度的第一個字母，顯示爲內嵌塊。不管你喜歡什麼，這應該允許你設計第一個字母。它應該仍然是內聯的。

來源

2012-04-24 08:00:11 Ollie

我會建議使用簡單的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。

來源

2015-10-30 17:29:48

造型Joomla內容 - 下降帽子CSS

回答

相關問題