How to change the appearance of the calendar widget

Jazz Near You offers a calendar widget that can be embedded and displayed on any website or blog. And you can configure your widget to show events by city, venue, festival, or musician.

Go here to generate your widget, then embed the code on your web page.

Here's an example of the default widget theme which occupies 100% of the page width.

Default Theme / Four Column Example


A single column version of the widget will fit within a 300 pixel space.

You can change the appearance of the widget with CSS (Cascading Style Sheets) by overwriting the default styles with your own values.

In the example below we wrapped the widget 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").

Black Theme Example



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>

If you have a question or need help, let us know in the comments section below.

comments powered by Disqus

Sponsor: JANA PROJECT | LEARN MORE  

Support our sponsor

Join the staff. Writers Wanted!

Develop a column, write album reviews, cover live shows, or conduct interviews.