Simple way of altering title fonts

  • Resolved jimmythumbtack

    (@jimmythumbtack)


    2 years, 7 months ago

    Hi,

    I was wondering if there was a simple straightforward way of altering the fonts of the widget so it matches my site theme. Most of the customization is pretty simple but I can’t seem to figure that out. I’m not using a special theme like cards or anything, just standard and I want to change the font for the title as well as the font size.

    What I tried is to modify wpp.css like this: 

    /* Title styles */
        .wpp-post-title {
            font-family: Montserrat,sans-serif
            font-size: 14px
        }

    But sadly it didn’t change anything on the front end.

    Any help would be appreciated! Thank you!

    -D

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Hector Cabrera

    (@hcabrera)

    Hi @jimmythumbtack,

    That should work unless your custom CSS rules are being overwritten by the theme (which is likely) in which case you could use the !important clause to make sure that your rules take precedence over everything else, like so:

    /* Title styles */
.wpp-post-title {
    font-family: Montserrat,sans-serif !important;
    font-size: 14px
 }

    By the way, you were missing a semicolon (;) after font-family: Montserrat,sans-serif which may also explain why your rules were not being applied as expected ??

    Thread Starter jimmythumbtack

    (@jimmythumbtack)

    Thank you for your prompt answer! The Important clause did it!

    I have another quick question, I’m actually trying to match my theme’s widget style with this plugin. I almost managed to make it a 1 to 1 copy but I can’t figure out how to match the separators and even spacing between the articles.

    Here’s a page where you can see the tests I’m doing:

    https://tabooless.net/stories/pop-culture/7-things-learned-watching-netflixs-love-is-blind/

    I would essentially want to match the style of the popular posts widget with the latest post widget above. The only thing missing is the even centered spacing and separators.

    Plugin Author Hector Cabrera

    (@hcabrera)

    To add a “separator” similar to the one from your “Latest Posts” list you could try something like this:

    .wpp-list li {
    margin-bottom: 15px !important;
    padding-bottom: 15px;
    border-bottom: #ddd 1px dotted;
}

.wpp-list li:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0;
    border-bottom: none;
}
    Thread Starter jimmythumbtack

    (@jimmythumbtack)

    Amazing, it worked! I gotta tell you Héctor, this is some of the best prompt & useful support I’ve received!

    Plugin Author Hector Cabrera

    (@hcabrera)

    Thanks, I’m glad I was able to help!

    Have a nice weekend!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Simple way of altering title fonts’ is closed to new replies.

Tags