<!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>
<!-- call -->
<script>
Revolvapp('#myemail', {
editor: {
path: '/your-path-to-revolvapp-folder/',
template: '/your-path-to-template-file.html'
},
image: {
upload: '/my-backend-upload/'
}
});
</script>
</body>
</html>
For almost every tag in the template, you can set a class attribute that can specify your own css for that tag.
CSS styles are specified using the style tag and placed between the re-head
tag, for example, like this:
<re-html>
<re-head>
<re-title>My Email</re-title>
<re-style>
.myclass {
border: 4px solid #111118;
}
@media all and (max-width:639px) {
.block-on-mobile {
padding: 20px 10px !important;
}
}
</re-style>
</re-head>
<re-body>
...
<re-main class="myclass">
<re-block padding="20px 60px" class="block-on-mobile">
...
</re-block>
</re-main>
...
</re-body>
</re-html>
In this example, myclass
affects the tag when the email is viewed on both desktop and mobile screens.
The block-on-mobile
class is specified with media queries and will only affect the style on mobile screens.