Joomla Templates Club 406,261 posts

[hendon Friend hendonJoin date: October 2007Posts: 31Downloads:0Uploads:2 Thanks: 3]

#133989

How does this template achieve the drop cap effect on the first paragraph only of articles. If I look at the html of any article, I do not see any code that defines this characteristic. However, if I look on the Typography page, in the section that talks about Drop Caps, I see a very clear peice of code in the HTML that defines the drop cap – but nowhere else do I see this.

The reason I ask is because I’ve tried replacing some content on the demo pages, only to find that the drop cap effect completely disappears – all I get is a three line deep space where the first character should be. Its a complete mystery on how this drop cap gets put back in its space.

:confused:

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#273697

Hi
Example in Typography page
dropcap use:

<span class="dropcap">T</span>
in content
typo.css (line 63)(/templates/ja_pyrite/css/ folder)

.dropcap {
-x-system-font:none;
display:block;
float:left;
font-family:Georgia,Times,serif;
font-size:60px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:58px;
padding:0 10px 0 0;
}

[tempusserbia Friend tempusserbiaJoin date: January 2008Posts: 270Downloads:0Uploads:5 Thanks: 29 Thanked: 32 times in 8 posts]

#273698

Have you tried selecting text and choosing Drop Cap feature from style menu?

[hendon Friend hendonJoin date: October 2007Posts: 31Downloads:0Uploads:2 Thanks: 3]

#273715

<em>@tempusserbia 83758 wrote:</em><blockquote>Have you tried selecting text and choosing Drop Cap feature from style menu?</blockquote>

That’s the problem, I don’t see a Drop Cap style option in the style dropdown, so how do I add this feature? Do I have to manually edit the HTML of every paragraph? if so, what do I do – highlight the first letter and then apply some styling code, or what? Its just not very clear how this is done, and looking at the html code in the example pages reveals absolutely nothing!!!

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#273717

Hi
you must edit HTML
Example of page Pyrite’s Typography, you can see
<blockquote>This is a Magazine Style Drop Cap. The first letter in this paragraph is big. JA Pyrite bring into your Jooomla template the magazine drop cap technique and CSS2 includes the first-letter pseudo class. In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words.</blockquote>
That have “T” is dropcap
in HTML , you only need add like :

<p>
<span class="dropcap">T</span>
his is a Magazine Style Drop Cap. The first letter in this paragraph is big. JA Pyrite bring into your Jooomla template the magazine drop cap technique and CSS2 includes the first-letter pseudo class. In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words.
</p>

1 user says Thank You to Sherlock for this useful post

1. hendon

[hendon Friend hendonJoin date: October 2007Posts: 31Downloads:0Uploads:2 Thanks: 3]

#273722

Thanks for that. It does work. However, if I use this tecnique when editing one of the existing articles in the demo site, I get the drop cap ok, but there is still a 3 line space BEFORE the new drop cap where the original drop cap was. There is no other html code in the paragraph so there must be some other function of the template that attempts to create a drop cap automatically on the first paragraph.

[hendon Friend hendonJoin date: October 2007Posts: 31Downloads:0Uploads:2 Thanks: 3]

#273732

Thanks for your help guys,

I now see what was going wrong. The drop cap automatically gets applied to the FIRST p tag of an article. I was editing an article that conatined an image, and the first p tag comes AFTER the image. If there is a double space between the image closing tag and the first p tag, the template doesn’t apply the drop cap. Reducing the space between the tags to one space only corrects the problem.

😀

[kevin bates Friend kevin batesJoin date: September 2014Posts: 44Downloads:0Uploads:4 Thanks: 20 Thanked: 1 times in 1 posts]

#274141

I am really confused now.
I tried following the directions + a few other attempts at removing <p> tags and the Drop Cap still shows up.
What tags do I apply to prevent a drop cap?

Thanks!
kevin

[hendon Friend hendonJoin date: October 2007Posts: 31Downloads:0Uploads:2 Thanks: 3]

#274230

<em>@kdbates 84350 wrote:</em><blockquote>I am really confused now.
I tried following the directions + a few other attempts at removing <p> tags and the Drop Cap still shows up.
What tags do I apply to prevent a drop cap?

Thanks!
kevin</blockquote>

I don’t know what you do to prevent drop caps altogether, but my problem was trying to discover HOW they work in the first place. From what I now understand, the template style sheet seems to apply a drop-cap to the first letter of the first paragraph of an article. If the first character happens to be a space, you cet a drop-cap space instead of a drop-cap letter. So, I guess a quick fix to removing the drop-cap styling on an article by article basis would be to simply start an article with a space, followed by a line break. This would start the text a little further down the content area, but would prevent the drop-cap from showing.

[Author]

Posts