EverWeb Codebox logo

EverWeb Widgetbox 3

Touch Text Widget

Touch Device Text

h1 Heading | Color Background

The HTML5 container type can be selected from article, aside or section.
The font can be web safe, goole hosted with web safe fallback or a non web safe font with fallback.
Since it is in a container, the heading type is h1 and can be styled for size, color, background color, text align, style, weight and line height to adjust the overall heading area height.
The paragraph text can be styled for font size, color, background color, line height and text align.
Line breaks are created using the HTML <br>
The container can be given a radiused border and/or a box shadow.
The overall container padding can be adjusted.
The widget has options for styling text hyperlinks. These include a control for adding vertical padding when used on a page designed for touch devices to increase the target area for fingertip stabbing. The minimum value for this should be 7 to 8px.
Links for touch devices should use the Touch Link Tab Widget if possible.

Touch Text Widget
Touch Text Widget

Container Type

How to choose the container type?
The <article> element specifies independent, self-contained content. An article makes sense on its own and it should be possible to distribute it independently from the rest of the web site.

An <aside> is like a sidebar and contains content related, but not essential, to the main page content.

The <section> element is just what it says. It defines a section of a document containing related content. A section can have a header, h1, h2, h3 headings, text content, figure with figcaption and a footer if required.

Bold Underline Italic & Colored Text

Widgets that use HTML headings and paragraphs can have words emphasized using the italic <i></i> tag and bold <b></b> tag.
Instead of using &quot; for double quotes, the text can be inserted in the <q></q> tag.
All of the above can be styled using inline styles as shown in the example of the above h4 HTML heading which has a base font color of #FFFFFF and is written like this...

<h4><b style="color:1669FF">Bold</b> <u style="color:#FF0000">Underline</u> <i style="color:#FF7F00">Italic</i> &amp; <span style="color:#00FF00">Colored</span> <q>Text</q></h4>

NOTE: If you are using, for example, an HTML heading widget, the <h4></h4> tags are not required.

This widget is included in the Touch widget pack.

Touch Widgets Bulk Pack Discount Deal

Buy all 4 Touch Widget packs for $30.00 …