Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] How can I integrate Drop Caps?

Home Forums Support [Resolved] How can I integrate Drop Caps?

Home Forums Support How can I integrate Drop Caps?

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #452987
    Edin

    My old theme had a drop cap functionality build in, that’s why I have [dropcap]first letter[/dropcap] in every article.

    Is there a way to integrate that in GP as well without the use of a plugin (I’m trying to minimize the use of plugins).

    Thanks,
    Edin

    GeneratePress 2.0.1
    #453457
    Joni

    Just add this or similar styling to your CSS file:

    span.dropcap {
    	float: left;
    	padding: 0 8px 0 0;
    	font-size: 80px;
    	font-size: 4rem;
    	line-height: 1;
    	color: #00b5e8;
    	font-family: viga, cambria, georgia, serif;
    }

    Here are some tutorials:
    https://www.abeautifulsite.net/css-drop-caps
    http://oddbird.net/2017/1/3/initial-letter/

    HTH.

    #453527
    Tom
    Lead Developer
    Lead Developer

    That’s why themes shouldn’t add shortcodes.

    It would be best to convert those shortcodes to simple HTML, then use the code Joni provided above to style it.

    Shortcodes for something simple like a <span></span> element aren’t necessary.

    #453619
    Edin

    Thank you Joni and Tom. The only problem now is that I have to change all [dropcap] shortcodes in the database directly…

    #453709
    Joni

    Why on earth would you need to do that? If you deleted the theme, there shouldn’t be any of its refuse in the database. You should be making these kind of edits in the editing panel on your post or page.

    #453739
    Edin

    Joni, I have 250+ articles published on the site, and I don’t have the time to open every article and change all the [dropcap] to <span class=”dropcap”> manually. So I thought I’ll try a “search & replace” plugin instead.

    #453746
    Joni

    Then it shouldn’t take that long to do it if you’re going to do it en masse. I guess the thing to do is to search for the first half of the short code and replace it with the opening span tag and class for the drop, and then search for the back half of the short code and replace it with the closing span tag. I’m assuming the short code encloses the first letter of the first word. This is a prime example of why we shouldn’t always just turn to plug-ins to do our jobs for us. Sometimes they can create more problems than they solve in the long run. Just my opinion.

    #453931
    Tom
    Lead Developer
    Lead Developer

    Using a search/replace plugin should be pretty easy.

    [dropcap] => <span class="dropcap">
    [/dropcap] => </span>

    Otherwise you can always just recreate the shortcode.

    #453932
    Edin

    Yes, that’s the way I planned to do this. Thanks Tom!

    #453951
    Tom
    Lead Developer
    Lead Developer
    #1616788
    Simon

    hi,
    happy new year!
    With regards the css from @Joni – how would that class be applied within the html?:

    <p class=”span.dropcap”>

    Also, would it work with the <mark> class in the same block? If so, would you need two </p> tags?

    With best wishes

    #1616817
    Joni

    No, the p tag and span classes are separate.

    you would write something like this:

    <p><span class=”dropcap”>F</span>ourscore and seven years ago….</p>

    Or I’ve also see this done but it will create a dropcap effect for the first letter of each first child paragraph. This article has some nice examples.

    https://css-tricks.com/snippets/css/drop-caps/

    #1616846
    David
    Staff
    Customer Support

    Thanks Joni for sharing your answer ๐Ÿ™‚

    As per the drop cap first-letter of first paragraph – heres an example that applies to the content of the single post:

    .single-post .entry-content p:first-child:first-letter {
      font-weight: bold;
      font-size: 3em;
      line-height: 1;
      float: left;
      padding-right: 0.25em;
    }

    The sizes need tweaking to suit the font and layout.

    #1616946
    Simon

    Joni, David, thank you for posting. I must admit I cannot get that to work. As you can guess, I am a html and css newb!

    This is what is currently working (from the first link @Joni posted). I would like to add the <mark> attribute to the same wordpress block, alas not having much luck with that either.

    Customising > Additional CSS:

    P.drop-cap:first-letter {
    font-size: 4.5em;
    float: left;
    margin-top: .1em;
    }

    HTML block:

    <p class=”drop-cap”>text text text text. I want to use the <mark> attribute from here: but it doesn’t work</p>

    #1616964
    David
    Staff
    Customer Support

    Can you raise a new topic where you can share a link to a page where you’re trying to add the drop cap ? We can take a look at the HTML in place to see whats going on.

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.