New to Kendo UI for jQuery? Download free 30-day trial

jQuery Editor Styles

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
default
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Material 2

Material 2 Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main
Launch Theme Builder

styles.html

Also available for:

One of the Most Beautiful Islands on Earth - Tenerife
 
 
 
 Overview
 
 
 
 Tenerife is the largest and most populated island of the eight <a href="https://en.wikipedia.org/wiki/Canary_Islands" target="_blank">Canary Islands</a>. It is also the most populated island of Spain, with a land area of 2,034.38 square kilometers (785 sq mi) and 904,713 inhabitants, 43% of the total population of the Canary Islands.&nbsp;The archipelago's beaches, climate, and important natural attractions make it a major tourist destination with over 12 million visitors per year.
 
 
 <img src="../content/web/editor/tenerife.png" style="float: right;" alt="Kendo UI for jQuery Editor Tenerife Island" width="350" height="206" />

Trip Highlights in Tenerife
 <ul>
 <li>
 Trip to Loro Parque Our top tip is to visit the famous Loro Parque or 'Loro Park. It is a 13.5-hectare zoo on the outskirts of Puerto de la Cruz in Tenerife, Spain where it houses an extensive and diverse reserve of animal and plant species. 
 
 
 </li>
 <li>
 Whale and Dolphin Watching Tour&nbsp; Another great option is to take boat excursion with almost guaranteed sightings of whales and dolphins. This is a day-long trip that includes lunch, island visits, fishing, and amazing views of ocean sceneries.
 
 
 </li>
 <li>
 Teide National Park Stargazing Last, but not least you can take a stargazing trip to Teide National Park, the 3rd best place in the world to view stars and described by NASA as a window to the universe.
 
 </li>
 </ul>
 
 
 Climate
 
 
 <table style="width:100%;height:225px;text-align:center;">
 <tbody>
 <tr style="height:20%;background-color: rgb(96,173,94);">
 <td style="width:473px;text-align:center; font-size:medium; color: rgb(255,255,255);" colspan="14">Climate Data for <a href="https://en.wikipedia.org/wiki/Santa_Cruz_de_Tenerife" target="_blank">Santa Cruz de Tenerife</a> 
 </td>
 </tr>
 <tr style="height:9.33333%;">
 <td style="width:230px;">
 
 Month
 
 </td>
 <td>Jan</td>
 <td>Feb</td>
 <td>Mar</td>
 <td>Apr</td>
 <td>May</td>
 <td>Jun</td>
 <td>Jul</td>
 <td>Aug</td>
 <td>Sep</td>
 <td>Oct</td>
 <td>Nov</td>
 <td>Dec</td>
 <td>Year</td>
 </tr>
 <tr style="height:23%;">
 <td style="width:230px; color: rgb(46,125,50);">Daily mean &deg;C (&deg;F)</td>
 <td style="">18.2 (64.8) </td>
 <td style="">18.3 (64.9) </td>
 <td style="">19.0 (66.2) </td>
 <td style="">19.7 (67.5) </td>
 <td style="">21.0 (69.8) </td>
 <td style="">22.9 (73.2) </td>
 <td style="">25.0 (77.0) </td>
 <td style="">25.5 (77.9) </td>
 <td style="">24.9 (76.8) </td>
 <td style="">23.4 (74.1) </td>
 <td style="">21.3 (70.3) </td>
 <td style="">19.4 (66.9) </td>
 <td style="">21.5 (70.7) </td>
 </tr>
 <tr style="height:23%;">
 <td style="width:230px; color: rgb(46,125,50);">Average rainy days (&ge; 1.0 mm)</td>
 <td style="">8.0</td>
 <td style="">7.2</td>
 <td style="">6.9</td>
 <td style="">5.5 </td>
 <td style="">2.9</td>
 <td style="">0.9</td>
 <td style="">0.2</td>
 <td style="">0.8 </td>
 <td style="">2.7</td>
 <td style="">6.1</td>
 <td style="">8.8</td>
 <td style="">9.4</td>
 <td style="">59.4</td>
 </tr>
 <tr style="height:23%;">
 <td style="width:230px; color: rgb(46,125,50);">Mean monthly <a href="https://en.wikipedia.org/wiki/Sunshine_duration" target="_blank">sunshine hours</a> </td>
 <td style="">178</td>
 <td style="">186</td>
 <td style="">221</td>
 <td style="">237</td>
 <td style="">282</td>
 <td style="">306</td>
 <td style="">337</td>
 <td style="">319</td>
 <td style="">253</td>
 <td style="">222</td>
 <td style="">178</td>
 <td style="">168</td>
 <td style="">2,887</td>
 </tr>
 </tbody>
 </table>
 
 * The data used in this demo is taken from <a href="https://wikipedia.com" target="_blank">wikipedia.com</a>. 
 ** The displayed photos are sourced from <a href="https://pixabay.com" target="_blank">pixabay.com</a>

Description

This jQuery Editor demo outlines how to use the style tool of the component which enables you to customize the content through custom CSS classes and styling, and a CSS file registered in the Editor iframe document. You can register and import your own CSS file into the content area through the stylesheets option. Use the tools > name > text and value options to populate the Format drop-down with options. Note that the specified CSS class has to exist in the CSS file imported in the content area through the stylesheets attribute.

This Editor example is part of a unique collection of hundreds of jQuery demos, with which you can see all Kendo UI for jQuery components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Kendo UI for jQuery Dojo or ThemeBuilder.

jQuery Editor Styles

Description

Support & Learning Resources

Additional Resources