Customize Drop Cap BBCode

This article explains how you can customize the look of the Drop Cap BBCode.

Technically the Drop Cap BBCode styles the first letter of the paragraph that you selected via CSS using ::first-letter. If you want to customize the look of your Drop Cap you can do this either for all styles by clicking on Customization Global CSS and SCSS (in you ACP that is) or per style by clicking Customization Styles Name of Your Style Advanced Settings Own Declarations/ Individual CSS and SCSS and then adding your code like this


CSS
 .dropcapBBCode::first-letter {
    font-size: 4em;
    font-family: Georgia, serif;
    color: rgba(0,0,0, 1);
}

The code above would change the font size to 4em, the font family to Georgia or serif and the color to black.

Remember: The first thing in the paragraph needs to be a letter or it would not work.

Related Articles