is it possible to add drop caps

• 

  edesignhome · Member · Feb 18, 2016 at 3:59 pm

  • Copy link
  • Add topic to favorites

  is there a way to add drop caps to wordpress.com. I have custom design.

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

• 

  staff-jeanpierreac · Staff · Feb 18, 2016 at 4:16 pm

  • Copy link

  Hi there.

  I can’t imagine what you would exactly want to do, but it should work by using “.entry-content p:first-letter” as selector. Then you can modify any single value to adapt it to your needs. For instance:

  .entry-content p:first-letter {
      float: left;
      line-height: 1em;
      font-size: 3.5em;
      margin-right: 0.2em;
  }

  I also suppose you could like to align your entry text to the left to create your drop caps effect.

  .entry-content p {
      text-align: left;
  }

  I hope this helps.

• 

  edesignhome · Member · Feb 18, 2016 at 5:16 pm

  • Copy link

  Thank you so much!! It works,but now it is on every sentence. Sorry for not being clear in what I meant. I only can give you a link from an example. I wanted to make a screenshot, but I have no idea how to upload it in here. I would like it only on the first sentence of a blog post, like this with the big P and than the rest of the text wrapped around it.
  http://www.vogue.co.uk/beauty/2016/02/18/penelope-cruz-beauty-interview

• 

  thesacredpath · Member · Feb 18, 2016 at 7:35 pm

  • Copy link

  Hi, let’s change the CSS selector and add a :first-child pseudo so that it affects only the first paragraph.
  .entry-content p:first-child::first-letter

• 

  edesignhome · Member · Feb 18, 2016 at 10:25 pm

  • Copy link

  Hi, @thescacredpath, thanks again for helping me out:) that is the solution, it works. Now I’m not sure if this really looks nice. Sorry, designer problem. I will try and have a look. Many thanks again!

• 

  thesacredpath · Member · Feb 19, 2016 at 12:15 am

  • Copy link

  No worries, and you are welcome.