change font style and color in widget

  • Resolved pandalino

    (@pandalino)


    8 years, 9 months ago

    Hello,
    since I’m an absolute novice with WP please be a little patient and not too strict withe me.

    1) I’d like to integrate the upcoming events of spiffy calendar in my right bar. Where in the default.css do I have to adjust the font color/style and size?
    2) I’ve managed to change the popup background (postit yellow) into my desired color – exept the little “nose” of the postit popup. Where are those settings to be found?
    3) I’d like to change the font in the popup. Where can I manage it?

    Thanks in advance for your help and advice

    https://www.ads-software.com/plugins/spiffy-calendar/

Viewing 4 replies - 1 through 4 (of 4 total)

  • 1) Do not edit the default CSS, instead add new rules. You can target the upcoming events widget by adding styles to .widget_spiffy_upcoming_widget. There are several sub-classes provided for the different pieces of the listing.

    2) The arrow colour on the popup is targeted by:

    div.spiffy-popup:after {
    border-bottom-color: #FFFFC0;
    }

    3) The font can by changed by adding a rule for .spiffy-popup

    Thread Starter pandalino

    (@pandalino)

    Thanks for the quick response. Ist seems to work fine except:

    1) Color can be addressed but apparently no other properties (font, size, etc.)
    Is there any way to target the indent text (link) in as well?
    2)Brilliant. Thanks
    3) Same phenomena as 1). This time the font size can be addressed but no color?

    For better understandig: I added in the customs css styles box as follows:
    —————-
    .widget_spiffy_upcoming_widget {
    color: #da1452 ;
    font-size: 12px;
    .spiffy-popup {
    font-size: 11px;
    text-align: left;
    color: #003366
    }

    Greateful for help!

    You will probably need to target your text more specifically, depending on your theme styles. The Chrome inspector tool is helpful for this.

    For example, you might need to target “.widget_spiffy_upcoming_widget .spiffy-title”

    The title in the popup would be “.spiffy-popup .event-title”

    Thread Starter pandalino

    (@pandalino)

    Thanks a lot. Great help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘change font style and color in widget’ is closed to new replies.