Archive for Tips and Tricks

06 Jan 2017

All About the Blog Main and Archive Pages

No Comments EverWeb, Software, Tips and Tricks

If you’re familiar with blogging in iWeb, you’ll have a short learning curve when starting to blog in EverWeb version 2.0. Whilst the two products have many similarities, iWeb’s development stopped over five years ago. EverWeb on the other hand get’s regular updates throughout the year adding new features and enhancements to keep up with today’s technologies. In this blog we take a look at EverWeb’s blog main and archive pages, how to use them, how to get the best out of them and where there are differences for those used to iWeb.

EverWeb’s Blog Structure
Everweb 2.0s blogging environment is structured like iWeb with three page types: blog main, posts (called entries in iWeb) and archive. Each page has a specific purpose: the blog main page acts as the ‘index’ for the posts you create, the posts page contains all the blog posts you have created, and the archive page which lists older blog posts that you no longer want to see on the main blog page, or can be used as a reference catalog of all the blogs posts created. Whilst these pages look like any other pages in your Web Page List, each page has some unique functionality. In addition, you can create more than one blog for your website e.g. you may have one blog for desktop and one for mobile, or one for marketing & sales and second blog for technical posts, etc..

The Blog Main page
When you create a new blog in EverWeb, the blog main page is created as an open folder containing the posts and archive pages within it. The posts and archive pages cannot be deleted, only the blog itself. If you delete the blog main page you also delete all the posts you’ve created within it so caution is advised. If you delete the blog by accident, use cmd+Z to immediately undo the action. It’s also useful to set autosave and automatic backups on in your EverWeb-> Preferences menu just in case you need to roll back at any time.

The Blog Main/Archive Widget
The blog main page is the ‘index’ page of the blog displaying some, or all, of the blog posts you have created within the widget on the Editor Window. The widget can’t be deleted from the page. The same is also true for the archive page which has a similar widget which works in the same way as the blog main page. The blog main/archive page widget differs from ‘regular’ widgets as it only has selection handles on its vertical sides. Therefore, you can change the width of the widget whilst the length is automatically handled by EverWeb based on the Widget Settings e.g. the number of posts you wish to display, whether you include thumbnail images and where they are placed, as well as any extra spacing you may wish to add between posts.

The widget can be styled in a number of ways. If you’re familiar with iWeb or with EverWeb’s RSS Feed widget, you’ll find that the blog main and archive widgets are styled in the same way. The widget contains the blog post titles, optionally the date, and an extract of the post itself. To change the styling of the post titles, for example, just click on one of the titles in the widget. All the blog post titles in the widget become highlighted. Next, select the font type, size, weight and color you want to use from the Font Panel by clicking on the Fonts button in EverWeb’s Toolbar. The other sections of the widget work in the same way making it quick work to get the look you want.

Apart from the features outlined above, the blog main and archive pages work in the same way as any other pages so you can add Master pages to them or set other defaults using the page settings tab etc.

Adding the blog to the Nav Menu Widget
You can easily add the blog main page to your Navigation Menu widget. To do this, select the blog main page in the WPL, then go to the Inspector window and select the Page Settings Tab. Tick the box ‘include page in navigation menu’ in the Page Details section of to add the blog main page to the Navigation Menu widget.
If you also check the same box for the archive page, it will be included as a drop down menu option below the blog main page in the Navigation Menu. You cannot select only to have the archive pages or to have the posts pages in the Navigation Menu.

Hyperlinking Your Blog
You can add hyperlinks to the blog main, all blog posts and the archive page by hyperlinking using the Hyperlinks Inspector in exactly the same way as you would anywhere else in EverWeb e.g. if you want to link to some text to a blog post, create the text you want and then highlight it. Go to the Hyperlinks Inspector and ‘Enable as Hyperlink’. Make sure ‘Link To:’ is set to ‘One of My Pages’, then in the Page drop down menu, select the blog post you want to link to.

Linking Desktop and Mobile Blogs

Everweb allows you to link your desktop website blog to your mobile website blog if you have created one. You link from desktop to mobile in the same manner as you would do when linking regular desktop pages to mobile pages.

More about Blogging in EverWeb
The EverWeb YouTube channel has recently launched a series of videos on blogging that may be of interest so check out their YouTube Channel. Don’t forget to subscribe if you want to keep up with their latest vids!
For some further hints and tips on blogging checkout our EverWeb Blogging Hints and Tips article.

If you’ve got a question please let us know below, we’ll get back to you as soon as we can!

11 Dec 2016

EverWeb Blogging Hints and Tips

1 Comment Tips and Tricks

Blogging with EverWeb version 2.0 gives you a dynamic canvas to work with. Here are some hints and tips that we’ve found to share with you…

  1. Use the Page Settings Tab
  2. As you probably know by now, when you create a blog in EverWeb, it contains three pages: blog, posts and archive. Just like any other web page that you create in EverWeb you can apply page settings such as content width, content height, header and footer height and so on. Remember that you can also set the page and browser background as well.

    The Page Settings tab is especially important for the posts page, as all of your posts will adopt these settings as you can see by looking at the blog posts preview window.

  3. Master Page or No Master Page?
  4. You can set defaults for the posts page using Page Settings and you can also add objects to the blog posts preview window that are then applied to all of your blog posts as well. So, what about Master Pages? Where do they fit it?

    The answer to this question is that it depends on how you want to work. If you use a Master Page, you will have to edit the Master Page to make changes. If you use the blog posts preview window instead, objects can be edited ‘live’ so any changes you make are instantly reflected on all blog posts. You may prefer one way of working over the other. You may find that using a combination of the two is best e.g. you use a Master Page to apply certain website defaults, such as content width and height, background colors etc. to your blog posts. You then add specific objects to the blog post preview window to customize the blog to make it appear as a special part of your website.

  5. How to Add a Thumbnail
  6. You can add a thumbnail image to your blog post when it is displays on the blog main or archive pages. To do this:

    1. Select the post you want to attach the thumbnail to in the blog posts list of the ‘posts’ page.
    2. Next go to ‘Post Image’ in the Post Options section of the Widget Settings.
    3. Select the image you want using the ‘Choose…’ button. When you select a Post Image it can then be used as a thumbnail for the post in the blog main/archive pages.
    4. The image appears in the Preview window of the post. If you do not want to display the image in the post itself, select ‘No Image’ as the ‘Style’.
    5. Next, go to either the blog or archive page.
    6. If you do not see the thumbnail displayed next to the post, select the widget. Next, go to the Widget Settings and set the ‘Style’ to something other than ‘Just Text’. The thumbnail will appear.
  7. Using Extra Space
  8. If you want to add extra space between your blog post listings in the blog main and/or archive pages, you can use ‘Extra Space’. If this does not seem to work, check to see if you have a thumbnail image included. If the thumbnail is higher than 50px the ‘extra space’ will not appear as it’s been used by the thumbnail.

  9. Setting a left hand margin when using Full Width
  10. If you’ve set the blog posts preview window widget to ‘Full Width’, you’ll see that your text appears flush against the left hand margin of the browser window. To create a margin on the left hand side, make sure the ‘posts’ page is selected then go to the Text Inspector tab and use ‘Insert Margin’ to create the left hand margin you require.

  11. Resolving gaps between shapes in your blog
  12. Shapes are often used to define specific specific areas of a web page e.g. a horizontal, colored rectangle is often used in the footer. A vertical rectangle shape is sometimes used down the side of the page e.g. to define a sidebar or navigation menu. You may want the vertical and horizontal shapes to meet to give the page a continuous appearance. That’s usually easy to do, but in blog pages you may see a gap where the vertical shape should meet the horizontal shape. This happens because the blog widget automatically adjusts vertically on publishing so pushing the footer down. To stop the ‘gap’ appearing set ‘Allow Free Dragging’ ON for the vertical shape and extend the shape down enough so that some of it encroaches into the Footer shape. This will ‘cover’ the gap (see screenshots below).

    Body footer gap

    On the right is the blog main page with where the yellow column meets the blue column. To the left if the preview, showing the gap between the object in the body area and the object in the footer.

    Body Footer no gap

    On the right hand side, the yellow column has ‘allow free dragging’ set on an the object encroaches into the footer underneath the blue object. The result to the left is no gap between the objects when previewed.

    Remember to first test using Preview to make sure the gap is filled before publishing!

  13. How to duplicate a blog post
  14. If ever you need to duplicate a blog post, select the post you want to duplicate in the blog post list. Right click on the post name and select ‘Duplicate’ from the menu. EverWeb will make a copy of the post for you!

And finally…

EverWeb version 2.0.2 is now available!
EverWeb had a maintenance update last week with the release of version 2.0.2. It’s a bug fix release and also includes some minor enhancements to the product. Check on the EverWeb-> Check for Updates… menu to update your version. For more information check out the blog on the EverWeb website!

Got your own tips about blogging in EverWeb to share? Don’t keep it to yourself, let us know in the Comments section below!

25 Oct 2016

Improve Your Workflow with EverWeb and Mac OS

No Comments Tips and Tricks

If you work on a laptop, screen real estate is often a precious commodity, especially if you’re using an 11 or 13″ MacBook. Website developers often feel the pinch when working on the go. You’ll probably want to have email available, a browser window open, and all your website development apps to hand. You can use your Mac OS to better manage your workflow better. If you’re using EverWeb there are also a few ways to get more screen real estate back. Let’s start with what can be done in your Mac OS…

Use Spaces
Using Spaces is a real boon. Spaces lets you have up to 16 different desktops available for use at any one time. In this way you can set up a specific ‘Space’ for a specific use e.g. if you take a lot of screenshots you may want to set up a Space that has a just plain white background so you don’t need to change your screen backdrop every time you want to take a screenshot.

Spaces also allows you to allocate which apps are available in which Space. You can choose either ‘All Desktops’, ‘This Desktop’ (which is the current desktop) or ‘None’ which makes the app available only to the desktop it gets opened on.

bear in mind that Spaces aren’t totally flexible though. If you have four desktops set up and want an app to appear on desktops 2 and 3 only, you can’t do it, which is a pity.

Setting Up a New Space
To setup a new Space, you need to use Mission Control. On a laptop use the F3 function key, or use a three finder upward swipe on the trackpad. You’ll see a menubar at the top. In the center of the menubar you’ll see the Spaces that have already been set up (e.g. Desktop 1). To add a new Space, click on the ‘+’ sign in the top right hand corner.

Now configure your new Space with the background that you want. To add the apps that you want to the Space you just added, right click on the App in the Dock. From the submenu, select ‘Options’ and then in the ‘Assign to…’ section choose the desktop that you want the app to be available on. That’s it!

Using Spaces
To switch between Spaces call up Mission Control using a three or four finger left/right swipe on your trackpad. Click on the Space of your choice.

Group apps together that fit nicely depending on your workflow e.g. I always make sure that I have EverWeb, Safari, Pixelmator, Pages and iTunes available when I’m working on website development. Everything else goes on different Spaces keeping me focused on one thing at one time!

Use Split Screen
Apple introduced split screen capability to the Mac in OS X El Capitan. This can be useful if you want, for example, to write a long piece of text in Pages, then copy it to EverWeb.

To split the screen, open both the apps that you want to share the screen. In the first app, click on hold on the green button in the top right hand corner of the window. The app shrinks to half the screen with your other apps showing on the right hand side. Click on the second app and it will fill the rest of the screen.

Use the vertical splitter line that separates the apps to increase or decrease the amount of screen space each app takes up (see screenshot below).

Split screen with EverWeb and Pages

The split screen on a Mac lets you have two apps side by side. Use the splitter to give one app more or less screen space

You can switch which side the apps are on by just clicking and holding the top of the app window and dragging it left or right to switch side. If you want to unspoilt the window, just click on the green button in the top left of the app.

Be Smart Working With Your Apps
Getting to know the apps that you use can also help you save screen real estate. Apple’s Preview program is often the Swiss Army knife app that can save you having multiple apps open when you only really need one open. The same is true of word processing or presentation apps that often have cross product features that can save you loading two or three apps when only having one open gets the job done.

EverWeb and Screen Real Estate
EverWeb has some good ways to help get more screen canvas back. The Window Menu is where you need to be for this. Before EverWeb version 1.9 you could only use the Window-> Hide Inspector (Cmd+Option+I) menu to get more space back by hiding the Inspector Window. In EverWeb version 1.9 and later, you have this and the ability to hide the Toolbar (Cmd+Option+T). Use both the aforementioned commands if you just want the Web Page List visible. Finally, if you want to hide the whole EverWeb UI, use Presentation Mode (Cmd+.)

These easy to set up and use features of your Mac OS and EverWeb help you get the most out of limited screen workspace. They also help you to focus on the tasks to hand and be less distracted with other things if you organise your desktop Spaces wisely!

If you have a question about this blog article, let us know in the Comments section below!

06 Oct 2016

iWeb and macOS Sierra Compatibility

4 Comments iWeb 101, Software, Tips and Tricks, Web Design

iweb-dead

As you may already know, Apple has recently released the new MacOS Sierra Operating System (10.12) to the general public. If you’re thinking of upgrading and also have iWeb installed on your computer read on…

Is my hardware capable of Supporting macOS Sierra?

macOS Sierra can only be installed on the following Macs with a minimum of 2GB memory and 8GB storage space free…

  • iMac (Late 2009 or newer)
  • MacBook (Late 2009 or newer)
  • MacBook Pro (Mid 2010 or newer)
  • MacBook Air (Late 2010 or newer)
  • Mac mini (Mid 2010 or newer)
  • Mac Pro (Mid 2010 or newer)

If your Mac is older than those listed you won’t get offered an update to the new OS if you run the App Store.
As well as the above hardware compliance you’ll need to have one of these Mac operating systems installed…

  • OS X El Capitan v10.11
  • OS X Yosemite v10.10
  • OS X Mavericks v10.9
  • OS X Mountain Lion v10.8
  • OS X Lion v10.7

Is iWeb compatible if I upgrade to macOS Sierra?
So far it’s early days for the new OS, but reports coming in from various sources, including our own testing, point to some issues with iWeb such as

  1. The blog post list is too small so can’t be used at all as you can’t see any blog posts!
  2. Intermittent and inconsistent crashing when publishing websites leading to Force Quit scenarios
  3. Images sometimes fail to publish at all
  4. Sometimes code appears on published pages
  5. Lack of support for retina images within iWeb and no Retina display support for published websites.

Conclusions
You can probably still use iWeb on macOS Sierra as long as you don’t mind putting up with some, or all, of the problems listed above. Apple’s new APFS file system, introduced in macOS Sierra, is built for the future as it underpins and unites macOS, iOS, watchOS and tvOS. However, for legacy applications such as iWeb, it may prove to be the cause of crashes and other compatibility issues.

There’s also the ongoing issues caused by iWeb not being updated, or maintained, for over five years now. Technology moves on so our recommendation is to look out for the upcoming EverWeb 2.0 release. The new version is in beta test at the moment and is expected to include blogging as it’s headline feature. iWeb users will feel right at home with EverWeb’s easy to use iWeb like interface that brings today’s technology with it. We’ll update you on this exciting new release as more details emerge and a launch date is announced!

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? You have EverWeb’s own website as a resource to start with which includes links to the EverWeb Knowledgeable and the EverWeb Discussion Forum.

Let us know in the comments section below if you have any questions!