Unable to Dropcap CMS Rich Text Block

I must dropcap first paragraph of CMS text block for all blog posts.

How to reproduce error:

  1. Publish CMS object that has Rich Text BLock with
    • Header 1
    • Pragraph 1
      Header 2
    • Paragraph 2
  1. Edit CMS post and atempt to apply DROPCAP span to first paragraph only.

The following is a standadr Paragraph with ‘Dropcap Class’

The following is first character containing ‘span-dropcap’

The following is what it looks like on blog

Default paragraph has natural indentation, used for all paragraphs AFTER the first paragraph.

^^^ Need to drop cap only first paragraph.

Workarounds:

  1. Create Dropcap Character limit 1 character in CMS and apply hard style to it
  2. Delete first character of first PH
  3. Make new PH block
  4. Dual Rich Text Block, excluding first paragraph
  5. Recalicbrate margins.
    ^^^ I can do this easy, but its tedious and not useful for EDITORS (bad user experience for them)! / I dont have time to go back and edit every uploaded blog post.

I must dropcap only first paragraph what is easiest solution for editors to do this with out me messing with it each time?

Basicially, editors should only use one text block, NOT 4 seperate fields to make this work please.

1 Like

Style your dropcap on a normal paragraph. Then publish, then inspect and grab the CSS code of your dropcap styling.

Use CSS to target only the first letter of the first paragraph of a RT.

I have reproduced your paragraph indentation on a RT:

http://vincent.polenordstudio.fr/snap/Webflow_-__Sandbox_2018-11-19_11-25-52.png

HTML structure of a RT:

http://vincent.polenordstudio.fr/snap/DevTools_-_webflow.comdesignsbx_2018-11-19_11-27-29.png

It’s a DIV containing a series of other elements like H and P. I gave it the class .dp-rt

CSS allows to precisely targets anything. Like the first sub-element of something, only odd elements, the 7th element of a kind… anything. Using pseudo classes and pseudo elements. (check CSS Selectors Reference )

in your case, we need to select the outer div (the RT) and target the first letter of the first paragraph. The CSS selector looks like this:

div p:first-of-type:first-letter

So add a custom code block inside of your page, and add the code to the class of your RT inside of it.

So I design a dropcap first, on a paragraph, using a span on the first letter, and the floating technique.

http://vincent.polenordstudio.fr/snap/Webflow_-__Sandbox_2018-11-19_11-39-09.png

I inspect my work and copy the resulting CSS code.

.dropcap {
    display: inline;
    margin-right: 10px;
    padding-left: 10px;
    float: left;
    border-left-style: solid;
    border-left-width: 7px;
    border-left-color: rgb(223, 0, 0);
    color: rgb(214, 5, 5);
    font-size: 86px;
    line-height: 71px;
    font-weight: 700;
}

I now add a custom code component to my page and copy the code inside of it, and affect it to the class of my RT element. Also, I don’t forget to add CSS code to target the first paragraph to cancel the text indentation of the first line.

http://vincent.polenordstudio.fr/snap/Webflow_-__Sandbox_2018-11-19_11-46-10.png

It works as expected:

http://vincent.polenordstudio.fr/snap/Webflow_-__Sandbox_2018-11-19_11-46-25.png

2 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.