Notez.
First off, thanks for purchasing my first ever Rapidweaver theme - Portfolio theme. I appreciate your support and hope this helps you rule your next web project like a boss or revamp your homepage. This is a very customisable theme with lots of colour options and is great for creative portfolio sites including agencies, freelancers, photographers, studios and artists.
1. The package contents are as follows:
A. Within the snippets folder drag the “Portfolio Projects Grid" snippet in to any text or html stack, styled page or html page:
<ul id="projects" class="aligncenter"><li><a href="#" title=""><img src="resources/1.jpg" alt=""/></a></li><li><a href="#" title=""><img src="resources/2.jpg" alt=""/></a></li><li><a href="#" title=""><img src="resources/3.jpg" alt=""/></a></li><li><a href="#" title=""><img src="resources/4.jpg" alt=""/></a></li><ul>
Add your photos to the resources section of your Rapidweaver project and change the filenames in the code to display your images. Copy & paste the snippet to make 8, 12, 16 project grids. Make as many as you need. You can even change the colour of the roll-over in the styles panel.
Ideal size is 200 x 145 pixels for these.
*Top tip*: use one projects grid like in the included demo and then use the Pluskit plugin from Loghound to import it into every page when making portfolio page menus like in the demo. It’s not essential to create this effect but makes life easier when editing or adding new portfolio pieces as there’ll only be 1 project grid to amend. Use the @import hook for this.
3. Buttons
A. Blue, green, black, light - just drag in the snippet, add the link for the button in "#" and delete the other 3 colours that you don’t need. That's it really. Should look like this:
<div class="button"><a href="#" class="button-black">Button Text</a></div>
4. Social Icons
A. These work best in the footer but can be put in the body, sidebar or anywhere. Drag in the snippet to the footer under show site setup > footer. Paste it before the copyright information. Use all or just the social networks you want to link to. 6 social networks to choose from and swap the "#" with the link to the social media page.
5. Testimonials
A. You can have as many of these on the page as you’d like. Drag in the snippet and change the Testimonial photo / avatar link; content - comment; name or link to who said it for it to work completely. The font colour can be customised in the options too.
6. Slider
A. This one is huge! Add in photos, text, html code (maps; testimonials; project grids), video embed code from youtube or vimeo - the limit is your imagination. There’s 3 snippets to pull in for this:
It’s important in the CSS snippet to label the height and width of the slider - depending on the content:
.slider { width:; /* specify width and height values */ height:; }
.sliderContent { width:; /* specify width and height values */ height:; }
You would specify in pixels. So, in the demo there’s slides which are full width (940px) and height (529px) for the front page with slider demo. Also (640px x 600px) for the projects portfolio demo when linked to from the projects grid and placed in the extra content 1 section. See the demo for implementation ideas and feel free to copy and paste what you need. Add your photos to the resources section of the your site and then set the slider to whatever size you need. Then Robert is your Father’s brother.
It’s possible to make some configurations based on changing the below elements - notes written next to each. This is the Javascript snippet. But this is only recommend for those comfortable with doing that. It’s not really needed as there’s a great slider configured out of the box so why go fiddling with the options?:
$(function(){ $('.slider').mobilyslider({
content: '.sliderContent',
children: 'div',
transition: 'horizontal', // transition: horizontal, vertical, fade
animationSpeed: 300, // slide transition speed (miliseconds)
autoplay: false,
autoplaySpeed: 6000, // time between transitions (miliseconds)
pauseOnHover: false,
bullets: true,
arrows: true,
arrowsHide: true,
prev: 'prev',
next: 'next',
animationStart: function(){},
animationComplete: function(){}
}); });7. Maps
A. 2 snippets to drop in to make this work:
B. The map snippet above is three random locations that don’t even exist! You can edit those and if you feel comfortable adding GPS co-ordinates, be my guest! If not, go to the Generating Maps app in the sidebar of this doc, setup your locations and details, generate the code and then copy&paste it in to the body of your site - this will save your bacon.
8. Styles and other snippets
9. Tips for editing
A. If things are not playing nice, highlight the snippet in the page and then Format and "ignore formatting"
B. With the slider, if you're adding video, set the video javascript to auto play: false, otherwise it will keep on rolling!
C. This theme is optimised for speed. To keep things snappy, before you export go to Rapidweaver preferences and select Enable smart publishing; consolidate common files; consolidate CSS files then export / publish and your site should be as fast as it gets.
D. The original CSS and Javascript files are included in the theme under "originals" should you need to edit them; the ones used in the theme are minified.
10. Need some help?
Enjoy this theme, and if you have any questions, need further assistance, have comments or what not, please contact me at support.yuzoolthemes.com. There’ll be amends posted there to themes and update information as well as any bug fixes and your chance to raise a support ticket too.
Cheers and happy weaving,
Michael Frankland
Yuzoolthemes.com