You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Online

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

#105529 Create custom Dropcap style

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Ryan on Thursday, 08 October 2020 11:22 BST

[email protected]
I'm trying to create a custom style for using a "dropcap" and I can't find where this style is set up "out of the box."

The instructions for this task are rather vague (at least for my skill level), and when I create the new style and apply it, all of the letters in the paragraph change to the dropcap style. Not much help, but I know I'm getting close.

Obviously, I need to be able to put the correct information into the correct fields for the custom style. For example, to create this type of dropcap:

p:first-child:first-letter {
color: #903;
float: left;
font-family: Georgia;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}

I know everything between { and } goes into the "style" field.

Where to enter the "p:first-child:first-letter"?

And am i missing anything else?

Please help!

Ryan
Instead of creating a custom style for this, it would be better to add the css to your template stylesheet, with a specific class to identify the drop cap, eg:

p.dropcap {} /* Used by the Styles list to create an entry */

p.dropcap:first-child:first-letter {
    color: #903;
    float: left;
    font-family: Georgia;
    font-size: 75px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
}
Then, just select the dropcap style from the Styles list in the editor toolbar.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.