Today I played a bit with the All-in-One Event Calendar plugin and I must say it is pretty good right out-of-the-box. My favorite view is the stream view, that is not available by default, but can be freely downloaded in the extended view add-on from the time.ly website, but only after creating an account. By default it looks something like this:
It is nice, but not so much to my liking, looking a bit cut off and too pale. So I investigated a bit the CSS code and prettified it a bit to look like this:
Feel free to tweak the options to your liking and to discover new ones:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
.timely { font-family: "Open Sans",Arial,sans-serif; } .ai1ec-stream-view .ai1ec-date-title { padding: 4px; background-color: rgb(113, 110, 255); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); font-size: 16px; font-weight: bold; text-align: center; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4); border-radius: 0; margin-bottom: 0; text-transform: none; } .ai1ec-stream-view .ai1ec-event { background-color: #F9F9F9; height: 150px; line-height: 18px; margin-bottom: 15px; font-size: 14px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); border: none; border-radius: 0; opacity: 1; } .ai1ec-stream-view .ai1ec-event-inner { height: 130px; margin: 10px 20px 10px 170px; } .ai1ec-stream-view .ai1ec-event-title { margin-bottom: 10px; font-weight: normal; font-size: 17px; } .ai1ec-stream-view .ai1ec-event-avatar { border-radius: 0; width: 150px; } .ai1ec-stream-view .ai1ec-event .ai1ec-event-avatar img { opacity: 1; vertical-align: middle; } .ai1ec-stream-view .ai1ec-event .ai1ec-event-avatar img:hover { opacity: 0.8; } .ai1ec-stream-view .ai1ec-event-meta { color: #666; font-weight: bold; font-size: 11px; margin-bottom: 8px; } .ai1ec-stream-view .ai1ec-event-description { max-height: 80px; } |
Like this customization? Found some additions? Or time passed by and it doesn’t work any longer as expected? Let us know.
This looks nice, however, I am unsure where you put this css code. Which file did you modify to make these changes?
You can use a child theme (you find a lot of tutorials in the net if you never heard of) or you can also enter it directly into the DIVI Theme Options / General Tab, at the bottom in the Custom CSS field.