EverWeb Widgets

Code Insertion & Syntax

This section is for more experienced users who want to create responsive items with HTML, CSS and Javascript and to publish code snippets for others to copy and use.
Important!
Please read the page about Code Insertion in the info section of this site. It is essential to know where the various types of code are inserted and how to add assets such as javascripts and stylesheets and create links to them.
Responsive Code
The default HTML Snippet widget is fine for many items but lacks some features for creating designs which perform properly in the following situations …
[1] Displaying items on the full site which still display properly when the visitor views it on a tablet device.
[2] For use on fully responsive webpage designs.
[3] For a fully responsive mobile version of the site which fills the screen of all sizes of smart phone in landscape and portrait mode.
The code insertion widgets add essential items like the viewport meta tag and the abilty to set a maximum width and center the item in the browser window.
The jQuery version of the widget inserts the correct version of this script and should be used for all items which use jQuery plugins.
Syntax Highlighting
For those who need to display code snippets on web pages there are two widgets for this purpose. Syntax display and highlighting requires javascript to convert each type of script language to enable it to be displayed in HTML and a stylesheet to highlight the various parts of the code in different colors. These widgets provide an easy way to accomplish this without have to resort to using miles of mind bending code.
The more experienced can tailor them to their own script language requirements and change the styles.
Click any widget icon to see the demo …

Insert Code In EverWeb

EverWeb provides various ways to insert code using a widget or the Head & Footer code boxes in the Page inspector and the Site Publishing Settings page.
Click the icon to go to the Info page to find out which types of code go where before attempting to create items using HTML, CSS and Javascript.

Code Insert

Responsive designs differ from a dynamic width design in that they do not occupy the full browser width. They have 100% width with a maximum width settings and are centered in the browser window.
The responsive code snippet widget allows the user to check the "Full Width" box in the Metrics inspector and to give the item a maximum width so that it doesn't spread out too wide and look ridiculous on large screens with a wide browser setting.

Using jQuery

There are literally thousands of scripts for creating website features using jQuery. This widget has the same features as the one above except it inserts the link to the hosted version of the jQuery script.
If a project requires jQuery - and there are no other widgets on the page which can insert the link - use this version to insert the correct version of the script.

Text Wrap Image Content

Create a full page of content with a built in footer using headings, text, text wrapped images floated left and right and centered images with variable width.
All the basic styles are in the widget settings and there is a large box for entering the HTML. The footer has auto update and smooth scroll to the top so jQuery is included.

Icon Maker

Create round or square icons which can be configured as an internal or external link to open in a new window if required. The tabs can be styled with a border and hover colors and have the option to add a title attribute.
The widget has buttons to open a page with the HTML entities and another to open a converter to quickly and easily turn them into their CSS equivalent.

Animated Tooltips

This is more like a plugin than a widget since it doesn't actually create an item for display on the web page. It inserts the scripts and styles for animated tooltips which work on hover when viewed on computers and tap when viewed on touch devices.
The widget allows the code to be created, copied and then pasted into the text field of any widget.

Convert Code

To allow code snippets to be displayed on a web page, all the < > need to be replaced with their HTML code and a <br> inserted for each line break. This can be very time consuming.
Using the Code Convertor, the code can be pasted into a box, converted with one button click and copied to the clipboard with a send button click - quick and simple!

Code Syntax Dark Theme

This version of the widget uses a theme which which has a black background and multiple colors for highlighting various types of elements in the script.
There are instructions at the bottom of the demo page for those who have the ability and want to modify the widget for different script language types and to change the stylesheet for a different theme.
NOTE: This should only be attempted by those who know how to handle code and how to escape when things go wrong in the event of EverWeb crashing!

Code Syntax Light Theme

This widget is used to display code snippets on a web page. The default options are for displaying CSS, Javascript, HTML and PHP.
The widget has some styling options which include adding a script language label tab and a border and displaying line numbers. The light theme has a white background and a generic highlighting for the different elements in the code.

© EverWeb Widgets -