theimagefile
Control Panel -> Help and Support -> Inputs using the modern, rounded style
User anonymous - click to sign in


Inputs using the modern, rounded style


Your website's input style is chosen at the bottom of Control Panel -> My Web Site -> Site Layout -> Embed Custom HTML/CSS.

The form inputs on your website — text inputs, checkboxes, radio buttons, textareas, select dropdowns, and buttons — typically use a visual style defined by the visitor's browser and operating system. These inputs are typically rectangular.

Typical browser default inputs look like this:

You may want to upgrade your inputs to use a more "modern" and rounded style. This option can be selected at My Web Site -> Site Layout -> Embed Custom HTML/CSS. On that page you may also tweak your buttons using custom CSS.

Typical rounded modern inputs look like:

Our rounded modern inputs are created by loading this custom CSS:

<style type="text/css">
input, select, textarea { background-color:#eeeeee; }
input[type="submit"], input[type="file"], input[type="text"], input[type="password"], input:not([type]), select, textarea {
border: 1px solid #aaaaaa; color: #000000; padding: 4px; border-radius: 4px; }
</style>

Feel free to copy this custom CSS to your own website (in the HEAD section) and then experiment with different borders, border radius (curvature), and colours.

At My Web Site -> Colours, Backgrounds and Overlays there is a control to set the background and foreground colours of submit buttons. These colours are set with slightly higher priority than the CSS rules applied here. This allows you to easily make your submit buttons stand out from the other input fields. If you want everything to use the same colours, just make sure the CSS and the custom submit colours agree.


Tip: use the "60% opacity" versions to make your inputs partially transparent. This will cause background images and textures to shine through. This can also help soften the harsh white inputs by blending them with dark background colours.



v6.00
theimagefile
  Log Out | Home | Terms | Help | About | Contact | © theimagefile.com Ltd