EverWeb ThemeKit

Installing ThemeKit

The ThemeKit Themes are for those who want a ready set up website with all the required widgets and some extra ones for those less used items.
Each theme has …

  • Open the Finder's Go menu while holding down the option key and click on "Library"
  • Open the Application Support folder and then the EverWeb folder
  • Locate the ThemeKit project file which has a .everweb extension and drag it into the EverWeb folder
  • Open EverWeb and the ThemeKit project will be in the list
  • Create a new category in the Widgets section of EverWeb and drag the widgets into it.
  • Select the ThemeKit project in the Projects Window and click the little up/down arrows to the right
  • Select "Duplicate …" from the list to make a copy to use for the project
  • Open the duplicate file in EverWeb by double clicking it and give it a suitable name
  • Keep the original ThemeKit file - with all its original settings - as a reference

EverWeb Design Canvas

EverWeb cannot render any animated or active items, slideshows, audio or video on the design canvas.
Animation
When using a ThemeKit project file, select an item that appears to be blank and look for any animation checkboxes. Turn these off to see the widget's content.
Lazy Loading
Media widgets have a lazy loading function to allow the items to load fast on all devices. If the media is not visible on the EverWeb design canvas turn the lazy loading function off while making changes.

Template & Basic Items

The "template" page is a blank page set up with the necessary settings. This page can be duplicated any time a new page is required.
Items
To save time when startimg a new page, duplicate the "template" page, name it "items" and insert the frequently used items like header, footer, heading and text box with your default styles.
NOTE
ThemeKit widgets do NOT require the EverWeb responsive row. Get rid of it and build better web pages!

Additional Items

Phone Simulator
Download the ThemeKit Phone Simulator widget from the link in the Read Me file, install it and add to all website projects.
SVG Icons
Download the ThemeKit SVG icons from the link in the Read Me file.
To use an SVG …

  • Find the icon and double click it to launch it in TextEdit set to plain text mode
  • Copy the code
  • Paste it into the SVG Code box in the widget settings

Inserting Widgets

Phone Simulator
Download the ThemeKit Phone Simulator widget from the link in the Read Me file, install it and add to all website projects.
SVG Icons
Download the ThemeKit SVG icons from the link in the Read Me file.
To use an SVG …

  • Responsive widgets are relatively positioned and are stacked vertically
  • Drag a widget onto the page
  • The widget outline will show and it will position itself below any previous widget(s)
  • Rearrange widgets by dragging them up or down the page
  • NOTE: The EverWeb Responsive Row widget is NOT required when using these widgets.

Important Notes

Responsive widgets are centered in the browser and must have an appropriate setting for maximum width.
The maximum width for inline text should not exceed 1000px and should ideally be less. Otherwise it becomes difficult for the eye to follow through from the end of one line to the begining of the next.
Media files such as images slideshows and video should have their maximum width set to that of the actual media file to allow for reasonable quality when viewed on computers. If media files are wider than 800px they will be far too large for downloading over cell phone networks when the visitor is using a smart phone.