Thank you very much for your purchase of the Solo theme.
Here we go so hold on to your hats....
(this should be easier than previous themes - I've been listening! Less snippets, more fun with resources and easier to setup without compromising power). Nice.
Firstly... some general tips
1. Use the demo RW project file - copy and paste juiciness from there into your own project
2. Unlike some of my previous themes, keep the RW preferences set to the default so like this:
1. The DropBox
This is awesome and should make it easier to receive files from clients. No more attachments lost in junk folders or spam boxes.
Just drop in the "DropBox" snippet to your page and that's it. Upload your RW project and send clients to your dropbox page.
DropBox snippet
It's ready to go as is, but you can change the default colour (theme styles) and the icon or empty state text by changing the "drop files to upload" part of the snippet or the icon to another Font Awesome 3.0 icon (see Font Awesome stuff below on how to do that).
The only other thing is to set in the theme options "Images actual size - not 100% width" (this is set as default, so nothing to do here but just to let you know). Otherwise the previews of uploaded files won't work well in Safari.
Collecting your files
FTP to your domain and navigate to the "uploads folder" and all uploads will be there from your clients! Drag them to your desktop to download. Magic!
yourdomain.com/uploads/...
DropBox Filetypes
These are all the file types you can receive:
jpg','jpeg','png','gif','doc','docx','pdf','xls','xlsx','pptx','ppt','rtf','txt','zip','mov','mp4','mp3','m4a','psd','eps','svg','ai'
Anything else, ask the client to .zip it and drop it in.
DropBox Settings
Again - you can ignore this as it is optimised to be rolling as it is.
However, just so you know it's set for 20 files at a time and 64MB in total.
If you want more you'll have to edit the file "yuzoolthemes.js" in the theme folder as below. The messages to users will need editing to reflect your changes too.
Whether or not you can accept more than a total of 64MB depends on the settings with your hosting. Some hosts allow more, some don't. Best to check with them first if you want to increase it. 64MB is usually the maximum for most hosts but feel free to experiment.
2. Font Awesome
Add this snippet to your project:
<i class="icon-camera-retro"></i>
Then, just change the words "camera-retro" to the icon that you want to show from here:
http://fortawesome.github.io/Font-Awesome/
So for the flag it would be <i class="icon-flag"></i>
Check the examples (http://fortawesome.github.io/Font-Awesome/#examples) for how to make bigger icons:
<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
3. Full screen Video
To make videos full screen - responsive - just use this snippet:
<div class="video"><iframe src="http://player.vimeo.com/video/64090686?title=0&byline=0&portrait=0" width="960" height="540" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
Inbetween the bold parts, add your youtube or vimeo video embed code.
4. Buttons
<a href="departure.html"><button>View My Portfolio</button></a>
You can change the link to the title or your page so "mypage.html" and the title of the button from "View My Portfolio" as the bold parts above.
To change the button colours, use the page styles. You can do this for each extra content section. Alright!
5. Colours
You can customise anything in the theme and quite freely throughout each Extra Content Area. Go through the style options and you should find what you are looking for.
6. Blog
This has quite a unique set up for a RW blog.
Blog Round Images
Just add a square image (any size, but should be square) to the summary section and a title.
Then in the "Body" blog as usual. That's it!
You can switch the meta data (categories etc) on/off in the theme settings. In the demo I have it off but either way is fine.
7. Portfolio
Just drag in the Portfolio snippet to a Stacks page.
You don't need to customise the snippet
It's already ready and will take 7 portfolio pieces and animate them automatically.
You just have to add your 7 pieces as 1.jpg, 2.jpg etc to the resources section.
For the smaller images I'd recommend: 400x300px
And for the bigger (1.jpg and 7.jpg) I'd recommend: 800x600px
Portfolio Navigation
It's quite nice to then create a navigation within the Portfolio.
This can be created using the Font Awesome Icons.
See the project demo for the Stacks to do this and copy & paste them into your project. Then just change the "<" to link to the previous project and ">" to the next project.
My Departure project was called "departure.html" (filename) so just change the link to your filename. Label each a unique filename and keep them in the "/" root folder to keep it easy.
My demo should show you more clearly what I mean there.
8. Wire Laptop Shell
Paste in the Wire laptop snippet and add your image to the resources section called "laptop.jpg" at 1240 x 770. Hey presto!
9. Images
Full width 100% images can be switched on (check off to activate). This is nice for the Portfolio case study pieces but sometimes you may want it to be the original image size.
For example of the homepage the small circle avatar would be full screen unless I ticked this box, and we wouldn't want that for such a low res and small image.
10. Other Options
Centralising content
This puts all the content in a central and narrow column perfect for reading on all devices. Try it and your site will be the perfect reading distance for your eyes across all screens.
Extra content
There's 4 sections for extra content. Explore and play with these! Switch them off if you don't need them.
Animation
This can be switched off in the options.
Logo
Add your logo to the Site Setup section in the usual way and make sure it is at least 340px wide, or 680px to make it full HD Retina compatible for the HiDPI screens.
Fixed Header
To make the header "fixed", and the control scroll underneath, just tick this. If you don't activate EC1 then you may also need to add more padding to the top of the content so please also select "More Main Content Top Padding". This is particularly useful on the Portfolio or Contact Form pages for example. For this a logo of 80px by 80px is best.
11. PayPal Payments
Make collecting payments from clients and customers easy.
1. Drag in the "Solo Payment HTML" to your pages as below.
It's ready to go but you'd probably want to configure the amounts and Button text
Change the Currency
You can accept any currency that PayPal can accept.
Change the address to your email address linked with your PayPal account and then change the currency code from USD to JPY or EUR or your currency.
This snippet is "Solo Payment Prefix" and goes in the page inspector Prefix tab.
Make sure this page is also labelled "index.php" or "something.php". Like the contact form, it has to be ".php" to work.
And that's it!!
If you want to change the payment drop down colour or the payment box - there's options for those in the colour settings.
That's it
Don't hesitate to get in touch if you have any more specific questions and happy weaving.
Send me links of your finished projects with the Solo theme and I'll feature them on my blog. Can't wait to hear your feedback,
Cheers,
Michael
yuzoolthemes.com