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>