How do I customize the calendar widget for the events+ plugin?

I am trying to customize the looks of the calendar widget. Do you advise tinkering the css code for this plugin? or there is another way to do it?

I would like to customize the calendar widget to look something like the one on the attached screenshot file.

the website is kindingsindaw.org

  • supergoyong
    • Site Builder, Child of Zeus

    When you go to the homepage, just below the slider are the sidebar widgets - three of them. The first one is for the events+ calendar widget. I know I have to edit the css but i tried changing it but to no avail it still shows the same thing.

    Thanks again for your time. In most cases this is beyond what this support forum is for but i really appreciate you taking the time to help me.

  • Paul Barthmaier
    • Code Wrangler

    Hi Greggy,

    Well, I'm not completely sure how deeply you are looking to go into this. Just quickly playing with the CSS, though, you can try adding the following to the end of your Child theme's css

    #eab_calendarupcoming_widget-2 {
    background: wheat;
    }
    table.eab-upcoming_calendar_widget {
    background: yellow;
    }
    table.eab-upcoming_calendar_widget th, table.eab-upcoming_calendar_widget td {
    padding: 3px;
    }
    table.eab-upcoming_calendar_widget p {
    background: white;
    }
  • supergoyong
    • Site Builder, Child of Zeus

    @Pali Baacsi

    Thank you Pali! I am playing around with the code to achieve a better color combination. Do you happen to know how to make the "Dec 2012" font bolder and bigger?

    I really need to learn more about php and css.

    But thanks you solved my problem.

  • Paul Barthmaier
    • Code Wrangler

    Hi there!

    Of course, I figured that you would want to change the color codes to match your site. I just chose something that was easy for you to recognize. You can change the colors to what every looks good to you. You know, too, that yellow=#FFFF00, or something like that, so feel free to use the hex codes.

    As for the size of the date, try something like:

    table.eab-upcoming_calendar_widget tbody tr td a.eab-upcoming_calendar_widget-navigation-link {
    font-size: 1.3em;
    font-weight: bold;
    }

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.