WordPress.org

Ready to get started?Download WordPress

Forums

Looking for automatic drop caps plugin (7 posts)

  1. RaynerApe
    Member
    Posted 9 years ago #

    There are many posts on CSS drop caps and also solutions involving quicktags and <span> code, but I am searching for a drop cap plugin that automatically turns the first character of the_content into a drop cap via <span>. The reasons I need this automatic are because

    1. CSS solution p:first-letter adds dropcap to every paragraph and because I use WYSI-Wordpress, every paragraph has a .

    2. Because WYSI-Wordpress changes the post text box, quicktags do not work with it.

    So the only solution would be to add a <span id="something></span> around the first character of the_content of an entry. If anyone knows a plugin or can make such plugin, I'd be really grateful. Thanks in advance.

  2. Marc
    Member
    Posted 9 years ago #

    So you make a new quicktag and add it to the js that inputs
    <span id="first letter of para"></span>

    I used that exact method for both WP 1.2 Mingas and WP 1.3 with absolutly zero problems.

  3. Jinsan
    Member
    Posted 9 years ago #

  4. RaynerApe
    Member
    Posted 9 years ago #

    Thanks for the links. It must be my unlucky day on the subject, because of all solutions the only that fits the bill - the last link leading to a JavaScript DOM inspector that encapsulates the first letter after <div id="entry"> - doesn't work if the paragraph starts with a tag and my WYSI-WordPress does just that.... *sigh*

    So without sounding too much picky, I am still trying to find a solution that adds <span id=""></span> around the first letter of the paragraph but takes in account that the post may start with an HTML tag. Maybe a modification of this JS script - the author mentions it's easy to add a check for if the paragraph starts with a tag but so far haven't fixed it...

    http://www.silver-lizard.co.uk/archives/2005/03/05/unobstrusive-drop-caps/

  5. printf
    Member
    Posted 8 years ago #

    I had the same basic need -- drop caps plugin -- and couldn't believe how hard this was to find. So in the end I wrote it myself, first plugin I'd ever done and it's about 3 lines of code! (Not including the css -- another 3). I'm really impressed by the power of the WP plugin scheme.

    First thought was that I'd do span around the first char, but what if the first char is a tag? Starts to get complex. Ok so I went back to look at the CSS solution p:first-letter. But I only want it on the first para right? Easy, so assign a p class with drop cap only to the first para. But the whole idea is to do this automatically, not to have to use a quicktag or something.

    So that's easy, do the plugin to insert p class=bigfirstchar before the post text. But this breaks xhtml because no closing p. No problem, just change the priority of the plugin so that it runs first, before the built in function which closes open xhtml tags. Tada! Working fine.

    You get:

    • Big first char on first para only
    • Works using css so minimal weight no issue if the first part of a post is a link

    Minor issue is that this looks different in firefox and IE so graphic designers may blanche, but for the rest of us the simplicity probably wins out.

    Download it here:

    http://www.printfhelloworld.com/wordpress-plugin-big-first-character.html

    Printf

  6. Skauss
    Member
    Posted 8 years ago #

    Great work printf, I am already using your plugin and it works great! Thanks for your contribution!
    I figured how to make drops caps look the same in both firefox and explorer. I expanded the css that accompanies your plugin to this:

    P.BigFirst:first-letter {
    color: white;
    font-size: 4em;
    font-family:times;
    font-weight:bold;
    float:left;
    padding: 6px;
    margin:0 5px 0 0;
    display:block;
    border:2px solid #ffa729;
    line-height:1em;
    background-color:#ffa729;
    }

    Some of those attributes can be omitted e.g. color, background-color if you dont want them. I am using it this way in my blog http://www.skauss.com and it works fine in both explorer and firefox

  7. WPChina
    Member
    Posted 8 years ago #

    I just installed this plugin and also bladerunn3r's CSS and it works great.

    However, I am trying to figure out how to only use the dropcap on the main post page. Currently it does the dropcap on my blog's homepage where I have brief links to each of the blog posts. However on that homepage I do not want to use dropcaps. I only want to use it on the main post pages with the full blog posts.

    Is this possible?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.