EverWeb Codebox logo

EverWeb Widgetbox 3

Slim Scroll HTML widget

Slim Scroll HTML

Slim Scroll HTML Widget

Slim Scroll HTML Widget

The default paragraph and h1, h2, h3, h4 styles are set in the widget settings. Extra styles can be entered as inline styles like this...

<h4 style="font-size:17px;color:#000FFF;text-align:center;font-style:italic">Heading Text</h4>
... and will look like this...

Heading Text

Paragraphs are added like this...
<p>Paragraph text.</p>
... and can aso have inline styles. Use <br> to create line breaks.

Inserting Images

alt text
Image Caption

Images are inserted in a figure element - with or without the <figcaption> - like this...
<figure style="width:97%;float:none">
<img src="ewExternalFiles/image-name.jpg" alt="alt text">
<figcaption>Image Caption</figcaption>
Delete this line if the caption isn't required...
<figcaption>Image Caption</figcaption>
Note the inline styles where the image has been given the maximum width of 97% and the float set to "none".
The hyperlink to the image file is obtained by control (right) clicking the image in the Assets list and selecting "Copy Relative File Path" This is pasted into the code where marked in red.


A Styled List With Inset Margin...

  • Item One
  • Item Two
  • Item Three

The list styles are set in the widget settings panel and the HTML looks like this...
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>

Centered Image

alt text

A centered image - which is a percentage of the width of the container - is set up with an inline style like this with the float set to "none" and the margin set to "0 auto"...
<figure style="width:60%;float:none;margin:0 auto">
<img src="ewExternalFiles/image-name.jpg" alt="alt text">
Note how the figcaption has been removed.

Image Text Wrap

alt text

To wrap text around an image, enter the figure like this...
<figure style="width:40%;float:left;">
<img src="ewExternalFiles/image-name.jpg" alt="alt text">
... and follow it with a paragraph element.
In this case the image width is expressed as a percentage and it is floated left. The way in which the text wraps around the image can be adjusted using the value for "line-height".

Hyperlink Styles & Special Characters

Hyperlinks can be added using HTML like this...
<a href="#">Hyperlink Text</a>
The hash sign (#) is replaced with a relative or absolute file path. See File Path page for more info.
To open the link in a new window, add target="_blank" like this...
<a href="#" target="_blank">Hyperlink Text</a>
The hyperlink text color and hover color are styled in the widget settings.
Be sure to the read the info about using special characters & creating line breaks.

Please note that only one of these widgets should be used per page.

Widget Settings

The widget settings are shown in the screenshots below.
When adding the content, it helps to increase the widget height to expose it all since the scrolling action does not work in EverWeb. The widget can then be reduced to the required height prior to publishing the page.
Adjust the widget size using the drag handles or the Metrics insector.
Set the background color or check the box for no background so that the widget inherits the color of the page or any item placed behing it.
Set the scrollbar color.
Set the border width, color and radius if required.
Enter the font family name, check the box if it is Google hosted and select a suitable web safe fallback font.
Set the heading font size, the text font size and its line height.
Choose the text color, link color and the hover color.
If a list is required, set its style type, inset margin and adjust the list item spacing.
Enter the HTML and click the "Apply" button.

Slim Scroll HTML Widget
Slim Scroll HTML Widget

These widgets are included in the More-2 widget pack.