How to Remove automatic Dropcap feature in Article?

elitakey

Hi, How to Remove automatic Dropcap feature in Article?

Ninja

elitakey
Hi
Can you give more information with a illustrated screenshot what you refer by dropcap in the articles?

synapsis

I got rid of them by applying a different class or wrapping a div style around my text, which you can call whatever you like and style in your own custom.css file. (See example below.)

Ninja

synapsis
Hi
The first letter is capital with layout style You can add this code in custom css and chnage the font size and color to initial


element.style {
}
p {
    margin-top: 0;
    margin-bottom: 30px;
}
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
@media (min-width: 576px)
.item-page .com-content-article__body {
    font-size: var(--h5-font-size);
    line-height: 1.778;
}
body {
    background-color: var(--body-bg-color);
    color: var(--body-text-color);
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    font-style: var(--body-font-style);
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letter-spacing);
}
body {
    font-weight: 400;
}
body {
    margin: 0;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--body-text-color);
    text-align: left;
    background-color: var(--body-bg-color);
}
:root {
    --nav-font-family: Barlow;
    --meta-color: #9E9E9E;
    --meta-link-color: #212121;
    --meta-font-size: 0.6875rem;
    --link-cat-normal: #212121;
    --light-reverse: #fff;
    --dark-reverse: #212121;
    --color-blue: #0071E3;
    --color-indigo: #3F51B5;
    --color-purple: #9C27B0;
    --color-pink: #FF7CBC;
    --color-red: #DB3334;
    --color-orange: #FFC107;
    --color-yellow: #C1AB7C;
    --color-green: #1BCBAB;
    --color-teal: #009688;
    --color-cyan: #17A2B8;
    --color-yellow-light: #FFFAF5;
    --gray-100: #FAFAFA;
    --gray-200: #eee;
    --gray-300: #E0E0E0;
    --gray-400: #BDBDBD;
    --gray-500: #9E9E9E;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;
    --border-color: #eee;
    --border-dark-color: #212121;
    --input-border-color: #eee;
    --input-border-focus-color: #999;
    --grid-gutter-width: 32px;
    --global-spacing: 8px;
}
:root {
    --body-font-family: Barlow;
    --body-font-size: 15px;
    --body-font-weight: 400;
    --body-font-style: normal;
    --body-line-height: 1.5;
    --body-letter-spacing: 0px;
    --heading-font-family: DM Serif Text;
    --heading-font-weight: 400;
    --heading-font-style: normal;
    --heading-line-height: 1.3333;
    --heading-letter-spacing: 0px;
    --h1-font-size: 36px;
    --h2-font-size: 30px;
    --h3-font-size: 24px;
    --h4-font-size: 21px;
    --h5-font-size: 18px;
    --h6-font-size: 15px;
}
:root {
    --color-primary: #e45e4d;
    --color-secondary: #212121;
    --color-success: #28a745;
    --color-info: #17a2b8;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-light: #f8f9fa;
    --color-dark: #212529;
    --color-white: #ffffff;
    --color-black: #000000;
    --body-bg-color: #ffffff;
    --heading-color: #212121;
    --body-text-color: #212529;
    --body-link-color: #e45e4d;
    --body-link-hover-color: #eb2a11;
    --mainnav-text-color: #212529;
    --mainnav-link-color: #212529;
    --mainnav-link-hover-color: #e45e4d;
    --mainnav-link-active-color: #ee2910;
    --footer-bg-color: #ffffff;
    --footer-text-color: #616161;
    --footer-title-color: #212121;
    --footer-link-color: #616161;
    --footer-link-hover-color: #e45e4d;
}
:root {
    --global-spacing: 8px;
    --spacing-xs: calc(var(--global-spacing) / 2);
    --spacing-sm: var(--global-spacing);
    --spacing-md: calc(var(--global-spacing) * 1.5);
    --spacing-lg: calc(var(--global-spacing) * 2);
    --spacing-xl: calc(var(--global-spacing) * 3);
    --border-radius-sm: 3px;
    --border-radius-md: 5px;
    --border-radius-lg: 7px;
}
html {
    font-size: var(--body-font-size);
}
html {
    font-size: 15px;
}
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.item-page .com-content-article__body > p:first-child::first-letter, .item-page .com-content-article__body p.has-letter::first-letter {
    color: var(--color-primary);
    float: left;
    font-family: var(--heading-font-family);
    font-size: 96px;
    font-weight: 400;
    line-height: 0.7;
    margin-right: 16px;
    padding-top: 16px;
}