WordPress instructions for adding a drop cap quicktag

Community Forums Forums General Discussion WordPress instructions for adding a drop cap quicktag

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  WiggleChicken 11 months, 2 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #39825

    WiggleChicken
    Participant
    Post count: 123

    Hello!

    I’ve been adding dropcaps to the first letter of each post manually, using HTML. But following the instructions on this page (scroll down a bit), I tried creating a new quicktag in my post editor:

    http://codex.wordpress.org/FAQ_Layout_and_Design

    I added the CSS and then found my wp-includes/js/quicktags.js file and added this:

    `edButtons[edButtons.length] =
    new edButton(‘ed_capdrop’
    ,’CapDrop’
    ,”
    ,”
    ,’c’
    );`

    But it’s not working. My website isn’t public yet, so you can’t see my code. But I simply pasted it into the edbuttons section and uploaded it to my website.

    I don’t want to use a plugin for this. So if I can’t get it to work, I’ll do this manually. But do you have any suggestions? Is there anything in this file that’s unique to Genesis? It seems like it’s all standard WordPress stuff, but I’m not sure.

    I’d sure love some input.

    Thanks!

    The Chicken has Spoken

    #39853

    anitac
    Participant
    Post count: 6402

    Greg Rickaby provides instructions on how to do this here – http://gregrickaby.com/2011/04/how-to-create-drop-caps-in-thesis-and-genesis.html.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #39907

    WiggleChicken
    Participant
    Post count: 123

    Thanks so much!

    It works perfectly. My only concern is browser compatibility with pseudo classes. His second step involves span tags that need to be manually added around the first letter of each post. That’s how I’ve been doing it. He says span tags address browser concerns. But you can’t do both. You have to either add CSS from his first step, or use span tags, or you’ll end up with the first two letters as drop caps.

    I did post a question about this in the comments section, and I also asked about this in reference to this article, which was written this year:

    http://css-tricks.com/almanac/selectors/f/first-of-type/#comment-436182

    It looks like the first-of-type pseudo class works great in most browsers, but it only works in IE9. If IE9 is the current version, then lots of people may still be running IE8, right? I’d like it to work in IE8. I’ll have to take a look at the screen shots in multiple browsers. If there isn’t any kind of wonky code showing up in place of the pseudo class, I can probably live with that. But I did ask in the comments about Javascript and whether that might be a better option.

    Of course, I haven’t a clue as to how to write that code. :)

    #39910

    WiggleChicken
    Participant
    Post count: 123

    As I was hoping it would, using the pseudo class in my CSS preserves the drop caps in post excerpts. This is awesome. Archives set up as excerpts removes all HTML. So using span tags around the first letter of each post means no drop caps on the archive pages, and that really bothered me.

    I’m very excited about this!!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.