Style

The Style plugin creates a dropdown list of predefined styles that can be applied to blocks or elements.

    Demo

    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>