Archive for Software

24 Sep 2016

macOS Sierra Support Comes to EverWeb version 1.9.7

No Comments EverWeb, Software

Apple has just released macOS Sierra (10.12) to the general public. The new operating system has a great many new features such as support for Siri built in, universal clipboard. login to your Mac with Apple Watch, greater iCloud Drive support and more. Numerous under the hood enhancements have been made including the macOS file system which has been updated to Apple File System, or APFS. The new file system unifies macOS, iOS, tvOS and watchOS. It also has technically advanced features to take advantage of today’s and tomorrow’s technology.

To be compatible with the new OS, EverWeb has an update specifically for macOS Sierra: EverWeb version 1.9.7. If you’re currently using EverWeb version 1.9.6 or older, and have updated to macOS Sierra you may have issues using EverWeb’s Preview feature. If you have a current EverWeb support and maintenance license the update to version 1.9.7 is recommended!

To check if your EverWeb license is active go to the Accounts tab in the EverWeb-> Preferences menu. If your license has lapsed and you want to renew it for another year of software updates and support, click on the Manage Account button to go to your EverWeb account where you can renew.

To update your version of EverWeb to version 1.9.7 go to the EverWeb-> Check for Updates… menu in EverWeb itself. EverWeb will check that you’re running macOS Sierra. If you are you will see the Software Update window which will let you download the update. If you are not running macOS Sierra you won’t see the Software Update window.

The EverWeb 1.9.7 update is only for macOS Sierra compatibility. The big update, including an all new Blogging feature, is expected to debut in EverWeb 2.0 which is currently in beta testing at the moment!

Got a question? Just ask and we’ll do our best! 🙂

06 Sep 2016

New to EverWeb? Your FAQ’s Answered!

No Comments EverWeb, Software, Tips and Tricks

If you’re new to EverWeb, you’ll probably find that it’s really easy to use and you’re creating web pages in next to no time. You may also find that there are times where you’re asking yourself those simple but maddening ‘how do I do…?’ type questions. Well here’s how, with our list of frequently asked EverWeb questions for those just starting out with the product…

  1. How do I rename my project name from NEW WEBSITE to something else?
    You’ll see the name ‘NEW WEBSITE’ at the top of the list of pages you’ve created in the Web Page List in the left hand column of EverWeb. All you need to do is double click on the name ‘NEW WEBSITE and overtype it with the name you want. Press Enter when you’re finished. It’s the same as if you were renaming a page in your Project.
  2. How do I convert a web page in to a directory?
    To change a web page in to a directory, right click on the page name in the Web Page List. You’ll see a popup menu. Choose the option ‘Convert To Directory’. You’ll notice that the page icon will change to a folder icon.
  3. Can I change my directory page back in to a normal web page?
    Once you’ve converted a web page to a directory you can’t change it back. The best thing to do is create a new web page, select all objects in the directory page (using Cmd+A) then copy and paste the objects in to the new page that you just created. Once you’ve finsished, delete the directory page. Be careful when deleting the directory page in case you have pages inside it. If you delete the directory, the pages inside it get deleted too!
  4. I just deleted the page by mistake! Can I get it back?
    Yes, just press Cmd+Z to undo your action as you would in most programs.
  5. I’ve made a web page but I now want to use it as a Master Page. How can I convert it?
    To make a web page in to a Master Page drag the page name in the Web Page List from the grey section in to the blue section and then drop it there. This create a copy of the wen page as a Master Page.
  6. I can’t move anything into, or out of, the header or footer area of my page.
    To move any object in to, or out of, the header or footer area, hold down the Command key whilst dragging the object.
  7. I’ve created a drop down menu using the Navigation Menu Widget, but I don’t want the top menu item to be selectable, just the drop down menu items themselves.
    To do this, select the directory page in the Web Page List which acts as the top menu title. Then go to the Page Settings Tab in the Inspector Window. You’ll see an item ‘redirect to first child page’ at the bottom of the Page Details section. Tick this option then republish your website.
  8. I’m working on a laptop, how can I get more ‘real estate’?
    You can use the vertical splitter on the right hand edge of the Web Page List to reduce it’s width, you can hide the Inspector Window on the right hand side using the Alt+Cmd+I keyboard shortcut or you can hide all of EverWeb’s user interface ‘furniture’ using Presentation Mode (Cmd+.) If using Presentation Mode you can add EverWeb’s sidebars back as you like via the Window Menu or just add the Inspector Window back in using the Alt+Cmd+I shortcut.
  9. How do I duplicate a website Project?
    To duplicate an EverWeb Project first go to the Projects Window. That’s the first window that appears when you launch EverWeb that shows all the projects you’ve created. Click on the up/down arrows to the right of the project you want to duplicate. From the popup menu select Duplicate to make a copy.
  10. I’ve added a Navigation Menu Widget to my page. How do I change the order of the menu items?
    The Navigation Menu Widget uses the order of the pages in the Web Page List. The top to bottom order in the Web Page List translate to a left to right order in your Navigation Menu. So, to change the order of your menu items just drag and drop the pages in the Web Page List to where you want them. The Navigation Menu widget will automatically update as you move pages up and down the Web Page List.
  11. How do I change the Navigation Menu’s default blue color and underlining?
    The items in the Navigation Menu Widget are Hyperlinks to other pages in your project. So, to change the colors and underlines first select the Navigation Menu Widget on your web page. Next, go to the Hyperlinks Tab in the Inspector Window and change the colors and underlining in the Hyperlink Formatting section as you want them to be displayed.
  12. …and finally
    EverWeb always has handy Youtube videos available throughout the product. Wherever you see a “?” inside a circle, you’ll find a video associated with the feature it’s next to!

Just started with EverWeb and have a question? let us know in the comments section below!

05 Aug 2016

From Desktop to Mobile and Back in EverWeb

4 Comments Software, Tips and Tricks, Tutorials, Web Design

When you create a website in EverWeb you should always create pages for desktop/tablet devices and equivalent pages for mobile devices. It’s important to have a mobile presence as our phones are now the primary way in which we access the Internet.

Once you’ve developed your website, you’ll want to make it so that your website visitor will be automatically directed to the correct page style on whichever device they’re using at the time: your mobile website pages when using a mobile phone and the desktop website when using a desktop or tablet device.

Redirecting From Desktop To Mobile Websites

In EverWeb it’s easy to set up this automatic redirection within your Project file.

  1. You first need to tell EverWeb which pages in your Project are specifically for use on a mobile device. To do this, select your mobile page and go to the Page Inspector. Scroll down to the ‘Mobile Settings’ section. If the section is closed, click on the arrow symbol to the left of ‘Mobile Settings’ to expand it.
  2. Check that the drop down box for ‘Mobile Pages’ is set to ‘None’, then tick the box ‘This page is for mobile devices’. That’s all you need to do to set up your mobile page. Repeat this step for all of your ‘mobile’ type pages.
  3. Next, link the corresponding desktop page to the mobile page. For example, you may a ‘Contact’ page for desktop and one for mobile. You need to link the pages together so that when a visitor goes to the Contact page they get the right experience for the device they are using.
  4. in our scenario, to link the desktop page to the mobile page, you would go to the desktop version of the ‘Contact’ page. Scroll down to the Mobile settings section. This time, under ‘Mobile Page’ click on the drop down and choose one of the following options:
    • Select ‘One of My Pages’ if the mobile ‘Contact’ page is in the same Project file as the desktop page. When you select this option, select the page you want in the ‘Page’ dropdown that appears. In our case it is called ‘Mobile Contact Page’.
    • Select ‘External URL’ if the page you are linking to is in a separate Project file. If you are using this option remember to enter the full URL of the ‘Contact’ page you are linking to in the ‘URL’ box.
    • Remember that you should only select ‘None’ for a mobile page, not on a desktop page.

    Your desktop and mobile pages are now linked. Once you have completed this for all pages that have desktop and mobile counterparts, publish your website and test the redirection on different types of device. It’s good practice to test as you can see that the redirection works and that you have linked to the right corresponding page.

    Redirecting Back From Mobile To Desktop Websites

    There may be times where your visitor actually wants to use the desktop website in preference to the mobile website, when they are using a mobile device. It may be that there’s more detailed information available on the desktop website.
    If you have set up your redirection as outlined above, you will always go to the mobile website if on a mobile device. To stop this automatic redirection and force the use of the desktop website on a mobile device take the following steps…

    1. Add a piece of text or a button to your mobile website pages to act as a link to your desktop website e.g. a button labelled as ‘Go to Desktop Website’. You may just want to this only on the ‘Home’ page or on all of your mobile pages. The choice is yours.
    2. Once you have added the linking piece of text or button to your page(s), select it and go to the Hyperlinks Inspector. Enable the Hyperlink and then set the ‘Link To:’ drop down as ‘An External Page’.
    3. In the ‘URL’ box enter the full URL of the desktop web page you want to link to. It’s easier and more accurate if you cut and paste the desktop page’s URL from the browser’s search box in to the URL section in the Hyperlinks Inspector.
    4. Once you have the URL added, go to the end of the URL address and add in ‘?fullsite=true’ e.g. http://mywebsite.com/home-pagre.html?fullsite=true
    5. Once you have completed the Hyperlink, publish your website.
    6. On a mobile phone go to the mobile page with the redirection text or button. Click on the link to test that it redirects you to the desktop website.

    Your website is now complete and will direct your visitors to the mobile website automatically as needed with the option to override if needed!

    If you have a question about this blog article, let us know below! Thanks!

21 Jul 2016

15 EverWeb Navigation Menu Styling Tips

No Comments EverWeb, Software, Tips and Tricks, Widgets

EverWeb’s Navigation Menu Widget is very flexible in how you can style it to create the right effect to suit your website’s design and style. Sometimes the wealth of available options can be a bit bewildering if you’re new to EverWeb… Here’s 15 quick tips to get your Navigation Menu styled how you want it, quick and easy!

  1. Changing the Navigation Widget’s Default Styling
    When you first drop the Navigation Menu Widget on to your page it always displays in blue, underlined text using a Helvetica Regular 12 point font. The Nav Menu Widget doesn’t adopt any ‘Default Styles’ you may have applied using the Format-> Default Styles menu. Only when the Widget’s on the page can you style it as you please.
  2. Removing the Underlined Text
    The reason why the Nav Menu Widget initially displays as it does is because it’s built from Hyperlinks. The colors and underlined appearance are taken from EverWeb’s ‘factory settings’… To remove the underlines and change the text color, select the Nav Menu Widget then go to the Hyperlinks Tab. Change the settings for Normal, Rollover and Visited to what you want them to be. Don’t select the Nav Menu Widget and use Cmd+U to remove the underline as it doesn’t do the job properly.
  3. Use the Fonts Panel
    For styling your Nav Menu’s text, the Fonts Panel is the best tool to use. All the text styling options you need are in one place: System fonts, Google fonts (if installed), font styles (e.g.bold and italic), font size, color and so on.
  4. Make Your Nav Menu Easy on the Eye
    Your Nav Menu should use an easy to read font. Web safe Sans Serif fonts, such as Helvetica, are a good choice. Remember that the font size you choose should also be large enough to cope with any device it will appear on such as mobile phone or desktop. A 16 point, or higher, font size is recommended.
  5. Text Background Styling
    Use the ‘Fill’ option on the ‘Shape Options’ tab for the text background of the Nav Menu. Using the ‘Background Fill’ on the Text Inspector Tab won’t work.
  6. Fill Color Gaps Between Menu Items
    If you’ve styled the text background, there’ll likely be gaps between each menu item. The easiest solution is to place a rectangle shape, color matched to the text background, behind the Nav Menu Widget. Size the rectangle to cover the gaps. Alternatively use Padding, Spacing and Minimum Width options from the Widget Settings Tab although this isn’t as quick, or as easy, as using the backing rectangle. The screenshot below illustrates this and also settings such as Spacing and Minimum Width.
  7. Navigation Menu Widget Settings

    Use Padding, Spacing and Minimum Width options from the Widget Settings Tab to create the right spacing for your Nav Menu.

  8. Avoid Using Gradients Fills
    Avoid using any form of gradient filled background in your Nav Menu. They’re generally more difficult to read. Either use a solid ‘Color Fill’ or none at all if possible.
  9. Use Normal, Mouse Over, Mouse Down in Shape Options
    Combining Hyperlink formatting with Shape Options Fills can help you create different effects for Normal, Mouse Over and Mouse Down states. Hyperlink formatting will set the text color, Shape Options Fill states set the background color for ‘Normal’, ‘Mouse Over’ and ‘Mouse Down’.
  10. Go Full Width
    Check ‘Full Width’ in the Metrics Inspector to have the Nav Menu dynamically resize horizontally when you resize the browser window.
  11. Nav Menu Text Alignment
    Using the Text Inspector to change the Nav Menu items alignment to be either left, center or right justified. The other Text Inspector options don’t have any effect on the Nav Menu. Some of the other tips in this blog may help instead!
  12. Left, Center or Right Align the Nav Menu Itself
    The Text Inspector aligns menu items, whilst the ‘Alignment’ option in the Widget Settings Tab left, center or right aligns the Nav Menu itself within it’s selection box.
  13. Padding, Spacing and Minimum Width
    ‘Padding’ adds horizontal AND vertical spacing to the Nav Menu. As you increase the value, the Nav Menu adjusts accordingly. It’s useful especially if you have a right aligned, full width, Nav Menu where the menu item bumps up against the browser window edge. A bit of Padding gives the some extra space so the ‘bumping’ doesn’t happen.
    ‘Spacing’ sets the amount of space between each nav Menu item.
    ‘Minimum Width’ spaces all Nav Menu items equally. In the screenshot you see the Minimum Width set to 150 as you need to set this value higher than the minimum width of the longest menu item name (in the example ‘Miscellaneous’). Taking this into account makes all menu items appear evenly spaced.
    See the screenshot above for some illustrations of these features.
  14. Change Drop Down Menu Colors
    Use the Widget Settings tab to change the drop down menu’s background, separator line and mouse over colors.
  15. Use Bold and Italic Short Cut Keys but Not Underline
    The bold (Cmd+B) and italic keyboard shortcuts can quickly change the Nav Menu style if desired. It’s not recommended to use underline though as the Internet generally uses it to indicate Hyperlinks!
  16. Quickly Change Nav Menu Text Color
    If you only need to change the text color of the Nav Menu, you can do this using the Text Inspector instead of the Fonts Panel.

There are many ways you can get the results you want from the Navigation Menu widget. If it’s your first time using the Widget just experiment a bit to get used to what’s possible! Good luck, and let us know if there’s anything you need to know, or if you have a tip to share, in the Comments section below!

07 Jul 2016

Using Font Awesome with EverWeb

No Comments EverWeb, Software, Tips and Tricks, Tutorials, Web Design, Widgets

You can easily add professional, up to date, icons such as Facebook, Google+, Pinterest and linkedIn to you EverWeb website with the minimum of effort. All you need to start with is Font Awesome, a free collection of over 630 scaleable icons that will probably have an icon for everyone.

About Font Awesome
Font Awesome can be used by everyone, from those new to website building right through to experienced coders. The set of icons is extensive, including product brands such as those mentioned above, accessibility icons, web application icons, file type icons and more. Font Awesome icons are updated regularly. If you use an icon and it’s updated in Font Awesome, your website icon will automatically update without you having to do anything! And, if there’s an icon you want that’s not in Font Awesome yet you can request that it be included.

Font Awesome icons are vector based and so scaleable for your needs. You won’t have to worry about how your icons will look on different displays anymore. It’s already Retina ready!

Setting Up Font Awesome To Use in EverWeb
To use Font Awesome icons in EverWeb, there are a couple of steps you need to take to set up it up for use. The first step is to place some code in the Header section of your EverWeb website Project. The code used points to the source of the icon set so it can be accessed and displayed correctly on your web pages. To get the code…

  1. Go to the Font Awesome website http:www.fontawesome.io
  2. Click on the link to get your own embed code
  3. In your EverWeb website project, go to the Site Publishing Settings.
  4. In the ‘Head/Footer Code’ section, paste the embed code in to the ‘Head Code’ section.

You’re now ready to start using Font Awesome fonts in your website!

What You Can Do With Font Awesome
Font Awesome offers a very flexible way to use icons your website. You can display icons in different sizes, stack them on top of each other (e.g. you can place the Facebook icon in a square), have animated icons etc.

There are a couple of ways you can use Font Awesome icons in EverWeb. In the example below we are going to add a Facebook icon to a website:

Using the HTML Snippet Widget

  1. Drag and drop the HTML Snippet Widget on to your page.
  2. Insert the HTML code you want to use and the Font Awesome icon name as desired. The Font Awesome website has many examples on their Examples Page http://fontawesome.io/examples/
  3. e.g. to add a Facebook icon in a square, enter the following code in to the HTML Snippet Widget. ‘2x’ denotes a doubling of the size of the square.






    fa-facebook on fa-square-o

  4. When you have pasted in the code, click ‘Apply’. If the HTML snippet appears not to have updated, try resizing the selection box a little to force a refresh.

Font Awesome is used with HTML code so if you’re new to HTML or interested in learning, the examples on their website will give you a good start. Here’s how you add a hyperlink to a Facebook page using the HTML Snippet Widget

In the example above replace ‘yourpagename’ with the Facebook page name you want.

football forever 1

In this example, EverWeb’s own HTML Snippet Widget is used to add code to produce the hyperlinked Facebook icon.

Using Widgets From The EverWeb CodeBox
The second method of inserting Font Awesome icons uses Widgets from the EverWebCodeBox. These widgets are produced by third party provider Roddy McKay. Find out more at www.everwebcodebox.com where there are plenty of widgets to purchase that take advantage of Font Awesome. The Touch Share Tab Widget illustrated below is just one example:

Using the Touch Share Tab Widget
The Touch Share Tab Widget takes the trouble out of coding buttons with links, background colors and so on which you have to do if use the HTML Snippet Widget.

  1. First you will need to purchase the widget pack you want to use – in this example the Touch Widgets pack.
  2. once installed, drag the Touch Share Tab Widget from the Widgets Tab on to your web page.
  3. In the Widget Settings, enter the name of the Font Awesome icon in the ‘Icon’ field. For Facebook, it’s just ‘Facebook’ There’s a full list of icons and their names on the Font Awesome website.
  4. For the background color of the Facebook icon use the value Hex # 3B5999 which is the deep blue color used by Facebook. There are plenty of Hex #’s on the Internet for the background colors of most brand icons.
  5. Change the shape of the background from square through to round using the ‘Corner Radius’ option.
  6. Shadow and border colors options are also available to produce the effect you want.
  7. Add the URL Link to your Facebook page and you’re done! Remember to test that the button and link work correctly!
  8. Touch Share Widget

    This example uses the Touch Share Tab Widget from the EverWebCodeBox. There are plenty of customisation options in the Widget so there is no need to code.

    Troubleshooting Font Awesome
    If your Font Awesome icons don’t appear on some or all of your website pages, you may need to replace your embed code with the following…

    The above code explicitly refers to the latest version of Font Awesome (version 4.6.3). When Font Awesome is updated, you’ll need to update this HTML reference to point to the new version.

    Also be aware that if you or your visitors use AdBlock Plus you may find some brand icons are not visible. In this case please refer to the http://fontawesome.io/icons/ page for more information.

    Finally, if you make changes to your Font Aware icons in EverWeb and they don’t appear to update in the Editor Window, just resize the selection box a bit to refresh it!

    Font Awesome and the EverWebCodeBox are great tools to extend your EverWeb websites. Have fun with them!