Widget is to be compatible with all themes

Question

I am developing login widget. I want my widget look good in any theme. At the moment it is not perfect, as soon as you start testing it on different themes some things slip to each other, the entire text does not fit into one line and so on.

So, I need advice on how to make it 100% compatible with all themes.

You can see my plugin with a widget here: http://rb-pravo.ru/

You can download the working plugin with widget here, there is only widget and HTML for it there, nothing else: http://rb-pravo.ru/wp-content/uploads/2016/11/simple.zip

Or here it is the code:

<!-- HTML for the widget -->

    <div class="lwa lwa-default">
    <form class="lwa-form" action="" method="post">
        <div>
        <table>
            <tr>
                <td colspan="2">
                <span class="lwa-status">Login successful...</span>
                </td>
            </tr>
            <tr class="lwa-username">
                <td class="lwa-username-label">
                    <label>Username</label>
                </td>
                <td class="lwa-username-input">
                    <input type="text" name="log" />
                </td>
            </tr>
            <tr class="lwa-password">
                <td class="lwa-password-label">
                    <label>Password</label>
                </td>
                <td class="lwa-password-input">
                    <input type="password" name="pwd" />
                </td>
            </tr>
            <tr class="lwa-submit">
                <td class="lwa-submit-button">
                    <input type="submit" name="wp-submit" id="lwa_wp-submit" value="Log In" tabindex="100" />                       
                </td>
                <td class="lwa-submit-links">
                    <a class="lwa-links-remember" href="" title="">Lost password?</a><br />
                    <a href="" class="lwa-links-register lwa-links-modal">Register</a>
                </td>
            </tr>
        </table>
        </div>
      </form>
    </div>

    <!-- End of HTML for the widget -->

I need any advice how to make so:

• the textwill fit into sidebar, even if it is narrow
• so that widget match color of the theme
• when you login the height of widget stays same, although the input fields are replaced with avatar and links

Please write me something on this topic.

Any advice is welcome on how to make widget look good with any theme

Answer 1

If you want your widget to fit any theme with the colours you need to add some plugin (or widget) options that your widget will get easily.

In another thinking, if you use less colour in your css, default tag theme colours will be display. Working with div instead of table, is easier, and will save time about css reset, media queries (if needed).

Look at the Twenty Seventeen (available since WordPress 4.7 beta 2), there is the same login widget available .