Community Forums › Forums › Archived Forums › General Discussion › WordPress instructions for adding a drop cap quicktag
- This topic has 6 replies, 3 voices, and was last updated 9 years, 11 months ago by greybird.
-
AuthorPosts
-
May 7, 2013 at 10:54 pm #39825Carla the MooseMember
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
May 8, 2013 at 6:11 am #39853AnitaKeymasterGreg Rickaby provides instructions on how to do this here - http://gregrickaby.com/2011/04/how-to-create-drop-caps-in-thesis-and-genesis.html.
Love coffee, chocolate and my Bella!
May 8, 2013 at 10:26 am #39907Carla the MooseMemberThanks 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. 🙂
May 8, 2013 at 10:37 am #39910Carla the MooseMemberAs 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!!
May 11, 2014 at 11:43 pm #104608greybirdMemberWould it be possible for you to share your solution? I know it was a long time ago (a year ago), do you remember what you did?
I've been trying to do this with CSS but the Genesis columns are messing it up, they don't place the dropcaps in the first paragraph for some reason. I haven't tried other column solutions yet.
I'm new to Genesis (and to dropcaps in blogs), so this has been rather confusing and time consuming.
May 12, 2014 at 3:00 pm #104744Carla the MooseMemberAfter lots of experimenting and really hoping for a clean way to do this, I finally resorted back to span tags and creating a class in my CSS. It seems to work consistently.
This is the CSS:
.first-letter { float: left; font-family: georgia, serif; color: #4B5481; font-size: 327%; line-height: 0.85em; margin-right: 0.15em; margin-top: 0.06em; margin-bottom: 0.0em; vertical-align: baseline; }
And for every post, I wrap the first letter with <span class="first">H</span> so that the H is the drop cap. There are cleaner ways to do this, but nothing seemed to create drop caps across all browsers. My solution may not be ideal, but it seems to work great for me.
I hope that helps. Is that you were doing but wasn't working?
May 12, 2014 at 3:23 pm #104747greybirdMemberWow, thanks! Thank you for remembering and for the fast response! But I guess if you're having to do those span tags every time you write a new post that would keep it fresh in your memory. I may have to resort to that, but I was hoping for something a bit more automatic especially for my client's sake. He wants it to be as easy to use as possible. There is a CSS bit that IS more automatic but it doesn't play nice with Genesis Columns. I have an open ticket with CopyBlogger on that very issue as we speak.
.entry-content p:first-child:first-letter { font-family: Open Sans; float:left; font-size:70px; font-size:7.0rem; color: #333; margin-right:0.10em; line-height:85%; text-shadow: 0.02em 0.02em #C0C0C0; }
PS. If you use the above CSS don't pay much attention to the font-size the way I have it... I'm still learning about rem vs px.... pick your own values 🙂
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.