Archive for Software

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!

17 Jun 2016

Using EverWeb in The Cloud

No Comments EverWeb, Software, Tips and Tricks, Tutorials

The growth of Internet Cloud based services has been a boon to many people who now have the flexibility to work either in the office, at home or on the road. Cloud based services also make collaboration easier than ever. EverWeb developers who work in a mobile-centric way, or need to collaborate on website projects with others, can take advantage of Cloud based services. Working where you want has never been easier…

The best way to collaborate or share EverWeb project files is by using Cloud based drives such as Dropbox or iCloud as both offer easy, flexible and cost effective ways to work in anywhere, anytime.

Sharing EverWeb Project Files in The Cloud

  1. If you are going to be using Dropbox it must be installed on all the computers you want to share EverWeb Project files with. If you try to open an EverWeb Project file through www.dropbox.com in a browser window it won’t work properly. Once you’ve installed Dropbox on your computer, the Dropbox folder location is added to your Favourites in OS X’s Finder window (see screenshot below.)
  2. If you’re using other Cloud services, such as Apple’s iCloud Drive, make sure it’s been installed and configured properly, then log in to the service.
  3. After installing and logging in to your Cloud service, the next step is to locate the EverWeb Project file you want to share. When you create an EverWeb Project you give it a name, but this is really only an alias. The actual Project filename is a randomly generated alphanumeric name with a ‘.everweb’ file extension.
  4. To locate the Project file, go to the EverWeb Projects Window where all your Project files are listed. Click on the up/down arrows to the right of your Project’s name.
  5. From the menu select ‘Show On Disk…’
  6. You’ll see the Project file selected in the Finder window. Drag and drop the file to your the Cloud storage location. Typically the location is automatically added as a Favorite to the Finder window in OS X when you install your Cloud based service e.g. ‘Dropbox’, ‘iCould Drive’ etc.
  7. Once you have dragged and dropped the file in it’s new location, go back to EverWeb, close the application and relaunch it (or just close and reopen the Projects Window.) This refreshes the Projects Window and you’ll notice that the Project file you just moved is no longer listed.
  8. To access the Project file you just moved, go to it’s new Cloud location using OS X’s Finder window. Double click on the Project file name and it will open in EverWeb.
EverWeb in the Cloud

When moving EverWeb Project Files into the Cloud, it’s a good idea to first create a folder for it using the Project File’s (alias) name.

Tips on using EverWeb Projects in The Cloud

  1. EverWeb Project filenames are randomly generated when you create a new Project. In EverWeb itself an alias is used, initially ‘NEW WEBSITE’ until you change it. When accessing the Project file from The Cloud, you want an easy way to find the Project file using it’s alias rather than it’s real file name. To do this, create a folder in The Cloud using the Project’s alias name. Drag and drop the Project file in to this folder using the instructions above. This approach makes Project file easier to find especially when you have more than one Project stored in the Cloud. In the screenshot above, our Project alias is ‘Recruitment Co’ so we created a folder with the same name and dropped the Project file there for ease of use.
  2. When sharing a Project file, or when using it yourself on more than one computer, only have it open on one computer at one time. If you move to another computer, close the Project file on the first machine before opening it on the next computer.
  3. If you’re using any third party widgets install them on all the computers you are going to be using. If collaborating with others, check with your third party vendor about licensing and sharing third party widgets!
  4. The Project File may look different on different computers due to differences in screen sizes and resolutions. You may need to expand or contract the Project file window when you open it.
  5. If your Project file uses widgets, you may need to manually refresh the widget if it doesn’t automatically refresh (i.e. looks too large or small) on screen.
  6. Putting your EverWeb Project file in The Cloud allows you to work from almost anywhere as long as you have an Internet connection. Whilst there are some caveats to it’s use, it’s a great way to remain productive when in the office, at home or one the road!

    Got a question or comment about using EverWeb Project files in The Cloud? Let us know below!

30 May 2016

Easy PDF File Downloading in EverWeb

No Comments EverWeb, Software, Tips and Tricks, Tutorials

One of the ways in which you can attract more visitors to your website is by offering an incentive – something that’s free and of value to your visitor, but easy and cost effective for you to produce. Many websites offer PDF file downloads as such incentives to attract and retain visitors. Electronic incentives are also great marketing and promotional tools to use in social media to attract visitors to your website!

Creating PDF File Download Link in EverWeb
Creating download links to your EverWeb designed website in itself is the easy part. Most of your time and effort will be devoted to creating your content and preparing it in a format that’s suitable for downloading. Here’s how to create a PDF file download link with EverWeb…

Create Your Content

  • First of all create the content you want to use as download content. The content should be something that easily hooks your visitor to wanting to download the file. The content of the download itself also needs to be good. If you create poor content people won’t come back to your website!
  • Make sure the content is your own. Only use the work of others if you have express permission in writing to use their content in your work. If in doubt check first before proceeding as you won’t want to get sued later for breaching someone else’s copyright! Your own content that you create should be copyrighted with the copyright symbol, the year and your name or company name as appropriate.

Convert and ZIP Your Content

  • Once you’ve created your content, save a copy of it in PDF file format if appropriate to your content. Most word processing, spreadsheet and presentation apps export to PDF as an option. Once you’ve converted your content to PDF, open the resulting PDF file to check that the contents have converted properly!
  • PDF stands for Portable Document File and for good reason too as it can be downloaded, opened and read on either MS Windows or Apple OS X without needing any additional software.
  • Whether your content is in a PDF or another format (e.g. video or audio content) it’s best to ZIP the file that the download is as small as possible. Zipping a file will result in a faster download for your visitors and will use less bandwidth.
  • To create a ZIP file in OS X secondary click (i.e. a two finger tap) on the PDF file you’ve created and select ‘Compress’. This will create a ZIP file of the PDF in the same location as the original content file using the same file name as the PDF together with a ‘.ZIP’ extension.
EverWeb Hyperlinking

Hyperlinking in EverWeb

Creating Your Download Link in EverWeb

  • Now the ZIP file has been created we are ready to create the download link in EverWeb. Go to the page in your EverWeb Project where you want the download link to be. The download link object can be either text, graphic, button or even an image. Whatever you choose, make sure that your visitor can easily access the download link!
  • If you’re going to use text as your link remember your SEO. Try to avoid using stock phrases such as ‘Download your free file HERE’ (with ‘HERE’ being the link word in this instance). Try using text that’s related to the content itself e.g. “Download my ‘Guide to SEO’” where ‘Guide to SEO’ is the link text. If using an image file, remember to complete the ALT-Text with a description of the link.
  • Select your download link object and create a Hyperlink by ticking ‘Enable as Hyperlink’ from the Hyperlink Inspector. If you’re using text select the text inside the text box and not the text box itself.
  • In the ‘Link To’ box select ‘A File’. You’ll see that under ‘Name: No File Selected’ is the ‘Choose…’ button. Select this and then select ‘Choose…’ again. Select your ZIP file and select ‘Open’.
  • If using text as your download link object, you may want to adjust the colors and underlining in the Hyperlink Formatting section of the Inspector.

Always Test Your Work

  • Your download link is complete! The best way to test that the download link works properly is to publish the website to your server then try the link. When you publish in this way the ZIP file gets uploaded to your server and will get downloaded to your visitors PC when they click on the download link. If you try to test the download using EverWeb’s Preview or Folder option, you may get unexpected results.
  • If you want to play safe, create a test download link in an obscure part of a web page, publish to your server and see if it works from there first before trying it for real

Having downloadable content on your website is a great way to attract visitors to your website. Setting up PDF file download links in EverWeb is super easy so take time creating effective content for your downloadable freebie that incentivizes your visitors to come back to your website again and again!

22 May 2016

10 Tips for Trouble Free Publishing in EverWeb

No Comments EverWeb, Software, Tips and Tricks

Publishing your website to the Internet takes just the click of a button with EverWeb. It’s satisfying knowing that your hard work’s almost paid off and your website soon to go live for the world to see. But what happens if it doesn’t work or its taking so long that you think the publishing process has stalled completely? Our Q&A session below takes a look at some common questions that get asked about publishing with EverWeb, and the steps you can take to help resolve such issues.

Q. How do I know that my website’s still publishing and not stalled?
A. There are a couple of ways to check that your website is still publishing. Once EverWeb has processed the website project file, the upload to server process continues in background. You’ll notice a progress circle indicator appearing to the right of your website name in the Web Page List. The circle should fill as publishing progresses. Alternatively, go to the Site Publishing Settings (use the File-> Edit Publishing Settings menu) where you can see each file being uploaded to the server.

Q. When I publish my website it doesn’t appear on the Internet.
A. Check that you’ve published your website to the right location. It could be that you’ve published to your local hard disk instead of the Internet. In the File-> Edit Publishing Settings menu check that ‘Publish To’ is set to ‘EverWeb’ or ‘FTP Server’ and not ‘Folder’, then try publishing again.

Q. I’ve updated my website project and published it but the changes don’t appear on the Internet.
A. Clear your browser history or try refresh the page a few times. In some cases you may need to quit and relaunch your browser.

Q. Can I publish my website to the Internet using a trial version of EverWeb?
A. The only difference between a trial version of EverWeb and a purchased version is that you cannot publish either locally or to the Internet with the trial version. You’ll need to purchase EverWeb to publish.

Q. I’ve uploaded a website using FTP but EverWeb publishes pages I’ve recently deleted. If I publish to ‘Folder’ it works fine. However, when trying to publish via FTP again the deleted pages get published!

A. Use File -> Publish Entire Site to republish the whole website again. You may have been using the ‘Publish’ button which only publishes changes. In this instance, a complete publish of the website may be needed.

Q. I’ve just switched to an EverWeb+Hosting account, but when I publish my website I still see the old one in my browser.

A. When switching to EverWeb+Hosting you need to update the ‘nameservers’ as they tell a domain which server to point to. The process can take up to 72 hours to completely update so bear this in mind when you are planning your switch over. An EverWeb tech note on nameservers will walk you through the process…

The second possibility is that you may be looking at an old URL for your old website. browsers often have autofill enabled when you start typing

Last but not least, quit and restart your browser as this will clear the browser cache.

Q. When I try to publish my website it gets stuck part way through.

A. This could be a firewall related issue. It could also be related to using networks in hotels or public places where certain types of Internet connection may be blocked or restricted.

Alternatively check to see if you are publishing via FTP over SSH. EverWeb only supports publishing via regular FTP or via FTP over SSL. In EverWeb go to the EverWeb-> Preferences… menu. In the Account tab deselect ‘Use Secure Publishing’. If you still have problems, uncheck ‘Use passive publishing connections’ in the ‘Publishing’ tab of the Preferences.

Q. I’ve published my website via FTP but hours later it’s still not visible on the Internet.

A. It’s possible that the directory/pathname is incorrect so the files don’t go to where they should go! Check the Directory/Path details in the File -> Edit Publishing Settings menu then try again.

Q. My website publishes but really slowly!

A. If you have a large number of images or if the image files you use are large, this may slow publishing. Large image files could also result in slow page loading in browsers. Optimize large image files before importing them in. When importing a large TIFF PSD or PDF file, EverWeb asks if you want to optimize it to web resolution.

If you’ve already imported large image files, remove them from the Assets List. This will keep the image place holder on the page. Drag and drop the optimised version of the image on to the placeholder to complete the task.

Q. Any general tips on publishing with EverWeb

A. Always keep your copy of EverWeb up to date with the latest release. There are always improvements, enhancements and optimisations with every release.

If you do experience problems with publishing, check the EverWeb forums to see if others have had the same or similar problems.

Check to see if the problem is related to your Hosting Provider

There’s always the option to log a ticket with EverWeb Support.

Do you have any publishing hints and tips that you’d like to share with the community? Let us know in the comments section below!