[Support request] Capitalise first letters of blog posts

Home Forums Support Capitalise first letters of blog posts

  • This topic has 9 replies, 3 voices, and was last updated 12 months ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1014041
    John

    Hi there,

    Does anyone have any suggestions for capitalising the first letters of blog posts?
    I have seen some different CSS around the web for it, but nothing quite gives a completely happy finish.
    Many thansk!
    JOhn

    #1014051
    Leo
    Staff
    Customer Support

    Hi there,

    What about this?

    .inside-article p:first-of-type:first-letter {
        text-transform: uppercase;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Let me know 🙂

    #1014086
    John

    Hmm…not quite: I am trying to replicate something more along the lines of the Drop Cap first letter
    https://www.wpbeginner.com/plugins/how-to-add-drop-caps-in-wordpress-posts/

    The plugin they refer to is not in use any more

    #1014107
    Leo
    Staff
    Customer Support

    Try this:

    .inside-article p:first-of-type:first-letter {
        float: left;
        font-size: 75px;
        line-height: 60px;
        padding-top: 4px;
        padding-right: 8px;
        padding-left: 3px;
    }

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

    #1014145
    John

    Wonderful – thank you for such clear and quick support!

    #1014604
    Leo
    Staff
    Customer Support
    #1015717
    John

    Hello again,

    I have noticed a small issue with this – when applied it also adds the Drop Cap to the Blockquotes – this really skews their appearance.
    I have applied the following code to make it fit – but if I make any changes to the Blockquote style (or change to pull quote, then it does not work – :
    .wp-block-quote p:first-of-type:first-letter{
    float: none;
    font-size: 20px;
    line-height: 65px;
    padding-top: 0px;
    padding-right: 1px;
    padding-left: 0px;
    }
    How can I exclude blockquotes from the Drop Cap?
    Many thanks

    #1015750
    David
    Staff
    Customer Support

    Hi there,

    thats odd – can you link me to a post with the code in place so as the issue with the blockquote can be seen.

    #1016427
    John

    Hi David – I found a way around it and am using a Gutenberg add-on to apply a different and more stylised blockquote – this does not seem to suffer the same problem.

    I have though, run into issues with the way the drop cap shopws on different screens.
    My wife uses a MAC and the dop cap appears with spacing issues – it does not fit correctly on the lines.

    Drop Cap Issues
    More Drop Cap Issues on MAC

    Here is the link to the page itself – https://artemes.global/blog/
    On my ASUS desktop it looks fine – takes up two regular lines and fits nicely.

    Is there a different class needed to apply the code for mac users?
    We have tried clearing caches and using diffeent browsers, but the same result occurs.

    #1016464
    David
    Staff
    Customer Support

    Yeah common issue that the two OSes render fonts differently. Try this method which uses EM sizes for the font.

    .inside-article p:first-of-type:first-letter {
        float: left;
        font-size: 6em;
        line-height: .78;
        margin: .05em .1em 0 0;
        text-transform: uppercase;
        font-style: normal
    }
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.