Tutorials
33 replies to this thread. Most Recent
[VID] WebYep Series
The WebYep series is now completed and is available at my ScreenCast Store found through the link in the ‘yellow’ signature bar of this post. I’ve recorded 6 full episodes, roughly an hour each, on how to build an entire web site from a layered PhotoShop Document through to a finished web site using both Freeway and WebYep.
Here is a break down to each episode:
WebYep Episode 1
We discussed what WebYep is and how to install it, what features the CMS offers, plus how we plan to utilize them for our web site.
Read More: http://www.danjasker.com/store/premium/details/webyep-e1/
WebYep Episode 2
This episode revealed the design of the web site and we begin to build it. We reviewed how to utilize the Inline Box-Model layout style as well as how to properly cut out and save our images for the web. We also went through how to utilize some keyboard shortcuts to help maximize our workflow in both PhotoShop and Freeway.
Read More: http://www.danjasker.com/store/premium/details/webyep-e2/
WebYep Episode 3
We finished up the home page design, walked through on how to create a custom stylesheet, and how to best utilize the CSS Menu action to create menu’s for our site.
Read More: http://www.danjasker.com/store/premium/details/webyep-e3/
WebYep Episode 4
We corrected several layout issues as well as how to work with WebYep image elements. Also in this episode we learned how to name pages properly as well as provide proper page titles using the Retitle Page Action. This episode is crucial because it discusses how to take a design to the next step which involved creating additional pages that needed to match the original feel of the home page design.
Read More: http://www.danjasker.com/store/premium/details/webyep-e4/
WebYep Episode 5
This screencast built three more pages for the site and discussed how to properly build out our design when it comes to using repeated elements. We went through some of the unique action features and discussed more about the last episode.
Read More: http://www.danjasker.com/store/premium/details/webyep-e5/
WebYep Episode 6
This screencast was the final episode in the series, excluding a soon to be released bonus episode, that covered building a photo gallery and contact form for our WebYep based site. I discussed how to build the photo gallery but also how to customize it using some CSS to remove things like image captions and how to keep the formatting of our image widths stable. The contact form was customized using the Form Element CSS action as well as benefiting from some custom CSS to keep a consistent feel to it.
Read More: http://www.danjasker.com/store/premium/details/webyep-e6/
Overall this series is beneficial for people who want to build a simple website using a simple CMS system like WebYep. Each episode comes with a sample Freeway file that can be used to follow along with or to just check on how I designed a certain aspect of the site. Thank you to everyone who has purchased the series and I hope that you’ve found use out of it.
Just wanted everyone on the FreewayTalk board here to know about this as well as promote my site as a great place to go for Freeway ScreenCasts. If you’re interested in more screencasts or want to be simply notified about future screencasts make sure to subscribe to the RSS Feed or join the mailing list (never sold or shared to anyone) which enters in your email address to win free stuff.
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Everything has been moved to here:
http://www.danjasker.com/store/screencasts/
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Hello Dan
Thanks for the WebYep tutorials so far. They have been very helpful.
I have just downloaded the last tutorial Webyep 7 bonus episode where I was hoping to find out how to adjust the gallery lightbox ‘close’ button (which at the moment has a missing graphic) You said you would be explaining this in Episode 7 but I have not found it here.
Please could you let me know if you do have a tutorial for this?
Thanks
Mog
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
I saw your email today and just am getting to it now. If you look at the instructions on this page (found specifically under “Adding The Lightbox Effect”):
http://www.obdev.at/resources/webyep/documentation/WebYep_Documentation_1.5.0/reference/image.html
You have to edit the lightbox.js file to change the paths to the graphics. Then they will show up wherever you use it.
Hopefully that’s what you were looking for.
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Hi Dan
That’s brill thanks so much for that.
It’s all working now. I kept the ‘images loading’ path to the original as it didn’t work using the pat to the webyep system webyep. It just loaded in a new window.
so: fileLoadingImage: ‘images/loading.gif’,
And I changed the path for the close image to :
fileBottomNavCloseImage: ‘/webyep-system/program/opt/lightbox/images/close.gif’,
Thanks again
Mog
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
No problem. I’m always happy to help.
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Hi Dan,
I have uploaded a site I’m working on to a temporary address http://79.170.44.156/singoutbristol.com but I seem to be having trouble getting the Lightbox to work again. It is in the right folder (opt) and I’ve checked Permissions on the server for the files and that’s all ok.
See http://79.170.44.156/singoutbristol.com/webyep-system/program/opt/lightbox/js/lightbox.js
I also have changed the code in the file lightbox.js to:
fileLoadingImage: ‘images/loading.gif’,
fileBottomNavCloseImage = ‘/webyep-system/program/opt/lightbox/images/close.gif’;
But for some reason Lightbox is now not working on the gallery page. It just opens the photos in a blank window.
http://79.170.44.156/singoutbristol.com/singoutgallery.php
Can you see what might be affecting this?
Thanks for your help
Mog
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Hi Mog, The page is throwing a JavaScript error because on this server your path to the close box image is incorrect. You have it defined in the Lightbox.js file as; fileBottomNavCloseImage = ‘/webyep-system/program/opt/lightbox/images/close.gif’; and it should be (for this server at least); fileBottomNavCloseImage = ‘/singoutbristol.com/webyep-system/program/opt/lightbox/images/close.gif’;
Regards, Tim.
On 27 Jan 2011, at 10:55, mog wrote:
I also have changed the code in the file lightbox.js to:
fileLoadingImage: ‘images/loading.gif’,
fileBottomNavCloseImage = ‘/webyep-system/program/opt/lightbox/images/close.gif’;
FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro. ………………………………………………………………………… Protect your mailto links from being harvested by spambots with Anti Spam. Only available at FreewayActions.com ………………………………………………………………………… http://www.freewayactions.com
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Hi Tim
I’ve just changed the script in the lightbox.js but I’m still not having any luck. The photo is still opening in a blank page. I’m not sure what else I need to do. I’ve tried permissions which seems fine.
Thanks for your help
Mog
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Hi Mog, The comma at the end of this line needs to be a semi-colon:
fileLoadingImage: 'images/loading.gif',
like this:
fileLoadingImage: 'images/loading.gif';
Regards, Tim.
On 27 Jan 2011, at 12:04, mog wrote:
Hi Tim
I’ve just changed the script in the lightbox.js but I’m still not having any luck. The photo is still opening in a blank page. I’m not sure what else I need to do. I’ve tried permissions which seems fine.
Thanks for your help
Mog
FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro. ………………………………………………………………………… Protect your mailto links from being harvested by spambots with Anti Spam. Only available at FreewayActions.com ………………………………………………………………………… http://www.freewayactions.com
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Hi Tim,
I’ve changed that for semi-colon and I’ve quit the browser and emptied the cache and refreshed the page but it’s still not working.
Thanks again
Mog
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
OK looking at this support forum for the file format at http://www.huddletogether.com/forum/comments.php?DiscussionID=3014 I can see that the format of the JS file should be;
lightboxOptions = Object.extend({
fileLoadingImage: '/images/loading.gif',
fileBottomNavCloseImage: '/images/closelabel.gif',
Note the colon, then the single quoted value and finally a comma in each line.
Regards, Tim.
FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro. ………………………………………………………………………… Protect your mailto links from being harvested by spambots with Anti Spam. Only available at FreewayActions.com ………………………………………………………………………… http://www.freewayactions.com
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Thanks Tim,
I’ve tried this option and various other combinations. This option actually disables the photos from opening at all. I wonder if I need to delete everything from the server and re-upload my folders and see if this helps.
Or maybe it is something to do with using a temporary address on the server? Could that cause a problem?
Thanks
Mog
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
I don’t think that is the issue. If you right-click in Safari and select ‘Inspect Element’ then click on the red circle in the lower right hand corner of the Web Inspector you’ll see that there is a parse error in the JS file. Something is the formatting of that file is causing the browser headaches. Check the formatting against the documentation and you should be back on track. Regards, Tim.
On 27 Jan 2011, at 12:46, mog wrote:
Or maybe it is something to do with using a temporary address on the server? Could that cause a problem?
FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro. ………………………………………………………………………… Protect your mailto links from being harvested by spambots with Anti Spam. Only available at FreewayActions.com ………………………………………………………………………… http://www.freewayactions.com
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Brilliant! I have it now!
I had forgotten to delete the forward slash from the first fileLoadingImage:
fileLoadingImage: ‘images/loading.gif’,
fileBottomNavCloseImage: ‘/singoutbristol.com/webyep-system/program/opt/lightbox/images/close.gif’,
Thanks Tim for your help on this and thanks also for the tip for developer tools in Safari.
Best wishes
Mog
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Hi Dan,
I wondered if there was a way to disable the Gallery descriptions as shown in Screencast 6? Too much text pushes the photos out of place and some of the photos disappear off the page.
The gallery element seems to have a flexible width but I’d prefer it to keep the width consistent so I wondered if there was a way to either disable the gallery description text box or if there is a way to enable the text and stop the photo gallery stretching with it?
Thanks for your help
Mog
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Make a custom style
.webyepgallerytext {display: none}
David
On 16 Apr 2011, at 14:01, “mog” <email@hidden> wrote:
I wondered if there was a way to either disable the gallery description text box
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
www.ineedwebhosting.co.uk | Twitter Offers and Web Design News
Freeway Friendly web hosting and Domain Names. (Create an account it’s Free!)
PrintlineAdvertising.co.uk | The Printline Advertising Blog
Print Design, Digital and Litho Printers, Promotional Merchandise and Corporate Gifts.
Thanks David,
Any ideas how to enable the text while stooping the photos in the gallery from stretching off the page?
Thanks
Mog
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Hi
I’m hoping someone can answer this. I have been working on a website using a temporary server and finally resolved the lightbox issue but I moved a site over to the new server today and just testing a photo after changing the path in the lightbox javascript file.
I wondered if someone could check the site to see why lightbox is not working.
The url address is http://www.singoutbristol.com/gallery.php
There is a photo there to test lightbox.
I’ve changed the address in the path to:
fileLoadingImage: ‘/webyep-system/program/opt/lightbox/images/loading.gif’;
fileBottomNavCloseImage = ‘/webyep-system/program/opt/lightbox/images/close.gif’;
The permissions is set correctly so I’m now baffled as to why it’s not working.
Any help would be greatly appreciated
Thanks
Mog
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Your lightbox.js is within the webyep-system folder so you dont need that part in your path
Probably should be
/program/opt/lightbox/images/loading.gif
/program/opt/lightbox/images/close.gif
Remember paths are relative - alternatively you could use absolute paths
<http://www.singoutbristol.com/webyep-system/program/opt/lightbox/images/loading.gif>
David
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Glasgow, Scotland
iMac 27 Snow and Pro 5.6.3
Hi Dave,
Thanks for getting back to me.
I’ve tried both of these but neither seem to be working.
Just to check have I written this correctly for an absolute path?
fileLoadingImage: ‘http://www.singoutbristol.com/webyep-system/program/opt/lightbox/images/loading.gif’; fileBottomNavCloseImage = ‘http://www.singoutbristol.com/webyep-system/program/opt/lightbox/images/close.gif’;
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Yes - The easy way to check is to put either of these in the browser address bar - and they both work so the paths are correct.
There must be something else going wrong.
Try taking out the < and > at either end of the absolute paths in the JS file
D
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Glasgow, Scotland
iMac 27 Snow and Pro 5.6.3
Sorry I hadn’t realised that they (< & >) had appeared in my code in FWT
D
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Glasgow, Scotland
iMac 27 Snow and Pro 5.6.3
Hi Dan
I’ve tried this and still no luck.
There seems to be a syntax error / parse error and a window pops up saying
“Server said: /webyep-system/program/opt/lightbox/js: No such file or directory
Error -125: remote chdir failed”
It doesn’t seem to recognise the webyep system. The only thing I have changed for the new server is the path so I’ve no idea why it won’t work.
Mog
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Hi Dan
I found an earlier thread which has been useful:
http://www.freewaytalk.net/thread/view/58104#m_63897
Matt McArdle downloaded a fresh copy of lightbox. I’ve just done the same and entered the path: fileLoadingImage: ‘/webyep-system/program/opt/lightbox/images/loading.gif’,
fileBottomNavCloseImage: ‘/webyep-system/program/opt/lightbox/images/close.gif’,
This seems to have worked for me too.
Thanks again for your help
Mog
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Did you see that the new WebYep 1.6 uses Fancybox instead of Lightbox? Fancybox is a lot nicer than the now somewhat archaic Lightbox.
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
I am glad that it is now working - was it the lightbox.js file that was at fault?
D
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Glasgow, Scotland
iMac 27 Snow and Pro 5.6.3
Thanks Dan, I’ll check that out!
David,
It seems to be since I downloaded a fresh copy from huddletogether website and used the same path that it is working. Not sure why this would make a difference as I’m sure the files were exactly the same.
Thanks again
Mog
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
as I’m sure the files were exactly the same
I have just read the other thread that you linked to where Matt’s problem was the text encoding of the edited JS file.
You may have had exactly the same problem without realising.
What text editor did you use to edit the JS file? I can see that TextEdit could mess this up whereas something like TextWrangler or BBEdit is less likely to.
D
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Glasgow, Scotland
iMac 27 Snow and Pro 5.6.3
Hi David
I use Coda text editor. I checked the text encoding in preferences which was set to automatic. Should I be setting it to Unicode (UTF-8)?
Thanks
Mog
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Should I be setting it to Unicode (UTF-8)?
Yes for editing stuff like this ie JS files etc
D
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Glasgow, Scotland
iMac 27 Snow and Pro 5.6.3
Thanks again for your help
Mog
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Hi,
I seem to be having the same issues with LightBox again. I’m testing a gallery page for a new site on a folder here:
http://www.ukeydesign.co.uk/gallery-test.php
I’ve installed a fresh copy of Lightbox but it’s not working. I’ve tried going back through earlier advice on the forum but no luck. Uploading a fresh copy of Lightbox seemed to do the trick last time but not this time. I’ve also changed Coda’s preferences to Unicode UTF-8 and checked the URL link to the lightbox.js file to make sure the permissions are ok but I can’t figure out what else I need to do to make Lightbox work.
http://www.ukeydesign.co.uk/webyep-system/program/opt/lightbox/js/lightbox.js
Code I’ve changed:
fileLoadingImage: ‘images/loading.gif’;
fileBottomNavCloseImage: ‘webyep-system/program/opt/lightbox/images/close.gif’;
Also tried
fileLoadingImage: ‘webyep-system/images/loading.gif’;
fileBottomNavCloseImage: ‘webyep-system/program/opt/lightbox/images/close.gif’;
And
fileLoadingImage: ‘webyep-system/images/loading.gif”
fileBottomNavCloseImage: ‘webyep-system/program/opt/lightbox/images/close.gif’,
and a few more variations!
Any help would be gratefully appreciated
Thanks
Mog
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
Ok I’ve cracked it. Using Coda remotely to change the code was the best and quickest way to work out what was going on! Saves much more time than changing stuff on the desktop and then uploading!
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
