Menu

Examples

Use CSS styles

This example shows how to use CSS styles in the email template.

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>

        <!-- 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>

Usage

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.