Make Drop Cap Larger Zuki Theme

  • Unknown's avatar
    jeff1137 · Member ·

    I use Zuki and when I add the drop cap tag, the resulting drop cap is not quite two lines tall. I like drop caps but I want to make them larger like 3 lines high or maybe even four. I have a premium WordPress account so I can make custom changes to my theme, but I don’t know how to adjust drop caps. Can anyone help?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    gemmacevans · Member ·

    Hi jeff1137,

    Sure, I’ve written some CSS which should increase the height size of the drop cap to 3 lines. Please paste the following code in to My Sites > Customise > CSS:

    .entry-content p span.dropcap {
    font-size: 73px;
}

    The 73px value can be increased or decreased until you find the optimum size (it was originally 47px). If you find a size you like but the spacing around the text isn’t quite right, just let me know and I can have another look.

    Your plan includes direct support so you’re welcome to start a chat if you would prefer to ask questions there :)

    P.S. Your woodwork is impressive by the way!

  • Unknown's avatar
    jeff1137 · Member ·

    Thanks. Than worked. There appears to be some padding at the top of the drop cap pushing it down. Is there a way to adjust that? Not a big deal though.

    Thanks again.

  • staff-zinnia · Staff ·

    Even if I remove the top padding around the “I” with CSS there is still a very small height difference.

    We can control the padding on each side of the drop cap letter individually. Look at the green box around it here.

    Try using a different first letter in the post to see how that looks. Something more dramatic might have less of a noticeable height difference.

  • staff-zinnia · Staff ·

    This is the right screen shot. Showing zero padding at the top of the drop cap.

  • Unknown's avatar
    jeff1137 · Member ·

    The zero padding at the top looks really good. How do I add that?

  • kokkieh · Staff ·

    Just add padding-top: 0px; to the existing code:

    .entry-content p span.dropcap {
	font-size: 75px;
	padding-top: 0px;
}

    By default the drop-cap only has a top-padding of 2px, though, so it doesn’t make a massive difference. You can play around with that value, though – you can also use a negative value if you want.

  • Unknown's avatar
    jeff1137 · Member ·

    Thanks for your help with this.

  • kokkieh · Staff ·

    You’re very welcome :)

  • The topic ‘Make Drop Cap Larger Zuki Theme’ is closed to new replies.