Drop Cap on About Us page

  • Posted in : TheBlogger
  • heyitsyajna
    Participant
    25 April 2021 at 00:33
    #71593

    Hey

    I’ve managed to add drop caps to my posts using:

    .drop-cap:first-letter, .single-post .entry-content > p:first-child:first-letter { font-family: ‘Archivo Narrow’; font-size: 58px; line-height: 0.99; font-weight: 700; float: left; padding: 0 6px 0 0; margin-bottom: -6px; }

    I want to apply the same to the About us page (page-id-110). How do I do that?

    Thank you

    serkan
    Moderator
    27 April 2021 at 12:28
    #71610

    Hi,
    You can use the css code like this;
    #page-id-110 .single-post .entry-content > p:first-child:first-letter …..

    heyitsyajna
    Participant
    27 April 2021 at 14:40
    #71613

    Hey

    It didn’t work. Used it like this:

    #page-id-110 .single-post .entry-content > p:first-child:first-letter { font-family: ‘Archivo Narrow’; font-size: 58px; line-height: 0.99; font-weight: 700; float: left; padding: 0 6px 0 0; margin-bottom: -6px; }

    also tried to add drop-cap code which also didn’t work:

    #page-id-110 .drop-cap:first-letter .single-post .entry-content > p:first-child:first-letter { font-family: ‘Archivo Narrow’; font-size: 58px; line-height: 0.99; font-weight: 700; float: left; padding: 0 6px 0 0; margin-bottom: -6px; }

    Let me know if I’ve inserted correctly or if there is another way – Thank you

    serkan
    Moderator
    27 April 2021 at 18:05
    #71625

    Hi,
    Could you provide me your related url?
    Thanks

    heyitsyajna
    Participant
    27 April 2021 at 18:09
    #71627

    Sent in private – Thank you

    serkan
    Moderator
    28 April 2021 at 18:14
    #71639

    Hi,
    I will forward this topic to our developer and I will keep you updated.
    Thanks

    ahmetsali
    Keymaster
    28 April 2021 at 22:04
    #71653

    Hi, you can try this one;

    #post-110 .entry-content > p:first-of-type:first-letter { font-family: ‘Archivo Narrow’; font-size: 58px; line-height: 0.99; font-weight: 700; float: left; padding: 0 6px 0 0; margin-bottom: -6px; }

    Cheers.

    heyitsyajna
    Participant
    28 April 2021 at 22:45
    #71655

    Thanks for that – Didn’t work, unfortunately.

    ahmetsali
    Keymaster
    29 April 2021 at 02:46
    #71658

    Hi, I have just checked your source code and I can’t see that code, are you sure have added it to “Additional CSS” box and you don’t have any syntax error on the css codes in that box? Also please make sure to purge your caches if you are using a caching plugin.

    Thanks.

    heyitsyajna
    Participant
    29 April 2021 at 06:54
    #71664

    Hey

    I’ve added the code and cleared the site and page cache – still doesn’t work.

    heyitsyajna
    Participant
    29 April 2021 at 07:18
    #71665

    Woohoo! Solved!

    Weirdly, simply adding the page drop cap code above the post code made it work.

    /* drop cap – about page – desktop*/

    .post-110 .entry-content > p:first-of-type:first-letter { font-family: ‘Archivo Narrow’; font-size: 56px; line-height: 0.99; font-weight: 700; float: left; padding: 0 6px 0 0; margin-bottom: -6px; }

    /* drop cap – post – desktop */

    .drop-cap:first-letter, .single-post .entry-content > p:first-child:first-letter { font-family: ‘Archivo Narrow’; font-size: 56px; line-height: 0.99; font-weight: 700; float: left; padding: 0 6px 0 0; margin-bottom: -6px; }

    I’m a noob so huge thanks for the help and patience.

    serkan
    Moderator
    29 April 2021 at 16:04
    #71674

    You are welcome :) We’d be very happy if you can spare a minute to rate the theme on ThemeForest. Your feedback will boost our motivation and help us to work harder on future updates.

    https://themeforest.net/downloads

    Thank you for your support.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
TheBlogger WordPress Theme
Login and Registration Log in · Register