Geeklog Forums

I am trying to add a drop-cap to the first letter of my Featured Story, but I can't seem to figure out where to place all the coding to make it work.

I have setup this in my CSS:

p.drop-cap: first-letter {
 font-size: 36pt;
 float: left;
}

I just can't figure out were in the featuredstorytext.thtml file to refer to my class to get it to work. Any help would be appreciated.

If you want to put this in the template file, you can do it like this: <p class="drop-cap">{story_introtext}</p> You'll need to leave off the paragraph tags in the first paragraph to get it work. You can also put the class right inside the text instead of the template like this: <p class="drop-cap">Welcome to my website...blah blah blah.</p>

Neither of these two options seem to work for me. I even tried a couple of different themes and browsers just to make sure it wasn't a different kind of display issue. Any other ideas?

Oh really, I tried this out and it works just fine for me on IE5.5+ and NS6 on a PC. Not sure whether other browsers have implemented this feature. Did you put this part inside your style sheet or between <style></style> tags inside the head tags of header.thtml? p.drop-cap:first-letter { font-size: 36pt; float: left; } and then this one right inside featuredstorytext.thtml? <p class="drop-cap">{story_introtext}</p> You cannot put anything before the {story_introtext} in that tag, and you cannot use <p></p> tags on the first paragraph in your text if you chose to do it this way. If you leave it out of featuredstorytext.thtml, you can insert it right into the text of the paragraph like I pointed out before. If you did this, I'm not sure why it's not working for you unless you're using a browser that doesn't support this feature. There's another way of getting the same effect though. Put this inside your style sheet or between <style></style> tags inside the head tags of header.thtml: .dropcap { font-size: 36pt; float: left; } Add the <span> tag to the allowable html in config.php. Then, add the class to the span and put it in the text wherever you want a drop cap to appear like this: <p><span class="dropcap">W</span>elcome to my website...blah blah blah.</p>

Thanks for your help. I had put the drop-cap class inside the style.css document not inside <STYLE> tags in header.thtml. When I did this, everything worked. Now the only problem I have is the float: left. It works great on IE for Windoze, but drops the first letter down below the second line of text on all of my Mac browsers. I've opted for float: none and that seems to display correctly for everyone. Oh well, at least I'm much closer to what I wanted. Thanks again for your insight.