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.