Columbus » Calendar » Plug-in Help | Generate Widget
How to change the appearance of the calendar plug-in
Jazz Near You offers a calendar plug-in that can be embedded and displayed on any website or blog. And you can configure your plug-in to show events by city, venue, festival, or musician.
Go here to generate your calendar, then embed the code on your web page.
Here's an example of the default plug-in theme which occupies 100% of the page width.
Default Theme / Four Column Example
A single column version of the plug-in will fit within a 300 pixel space.
You can change the appearance of the plug-in with CSS (Cascading Style Sheets) by overwriting the default styles with your own values.
In the example below we wrapped the plug-in code in a container with CSS class sample_style. In your CSS you refer each element of the widget code via this selector (class "sample_style").
Below are CSS styles that present alternating black and grays colors and the Trebuchet font style. These rules can be included on the page with a <link> tag or can be a part of your style sheet file. In any case the site owner has full control over these styles.
Custom CSS code example
<style>
.sample_style #jny-calendar { color: #fff; background: #333; font: 14px Arial; }
.sample_style #jny-calendar a { color: #9fe5e7; }
.sample_style #jny-calendar-table th { background: #000; font: 14px "Arial Black"; }
.sample_style #jny-calendar-table tr { background: #333; }
.sample_style #jny-calendar-table .tr_odd { background: #555; }
.sample_style #jny-calendar-table td { font: 14px/18px Trebuchet MS; vertical-align: top; }
.sample_style #jny-calendar .cal-date-style { margin: 5px 20px 5px 10px; }
.sample_style #jny-calendar .cal-date-style span { width: 40px; }
.sample_style #jny-calendar .cal-month { background: red; border: 1px solid red;
font: bold 12px/20px "Arial Black"; }
.sample_style #jny-calendar .cal-date { background: #ccc; border: 1px solid #ccc; }
.sample_style #jny-calendar-table .buy_link { background: red; color: #fff; }
</style>
