Style
The Style plugin creates a dropdown list of predefined styles that can be applied to blocks or elements.
Click on a block or heading and change their style.
Code
<!DOCTYPE html>
<html>
<head>
<title>Revolvapp</title>
<meta charset="utf-8">
<!-- css -->
<link rel="stylesheet" href="/your-folder/revolvapp.css" />
</head>
<body>
<!-- element -->
<div id="myemail">...</div>
<!-- js -->
<script src="/your-folder/revolvapp.js"></script>
<script src="/your-folder/plugins/style.js"></script>
<!-- call -->
<script>
Revolvapp('#myemail', {
plugins: ['style'],
style: {
styles: {
block: {
shadow: {
title: "Shadow",
css: {
'box-shadow': '0 20px 30px rgba(0, 0, 0, .3)'
}
},
dark: {
title: "Dark",
css: {
'background-color': '#111',
'color': '#eee',
'link-color': '#fff'
}
}
},
heading: {
subheading: {
title: 'Subheading',
css: {
'text-transform': 'uppercase',
'letter-spacing': '0.015em',
'color': '#6DD400',
'font-weight': 'bold',
'font-size': '13px'
}
},
red: {
title: 'Red',
css: {
'color': '#EB4E2E',
}
}
}
}
},
editor: {
font: 'Roboto, Helvetica, Arial, sans-serif',
path: '/your-path-to-revolvapp-folder/',
template: '/your-path-to-template-file.html'
}
});
</script>
</body>
</html>