Tutorials

Parallaxis + UIkit



Comments

Parallaxis - Section and Content



Comments

Parallaxis - Banner



Comments

Parallaxis update

A new revision of Parallaxis is available adding an option for the menu position. An example of this new option has been added to the tutorial project.Read more
Comments

Foundation Reveal Modal tricks

Here's a small tutorial on how to implement the Reveal Modal on a Foundation based theme like Phaedra or Estiasis. We know how to do it with a stack in a Stacks page, but what about implementing a modal into a Blog or Photo Album page?

Here's the example that we'll try to reproduce:
http://www.archetypon.net/preview/phaedra/plugins/Foundation-Reveal-Modal/

All we have to do is:
1. Add the modal markup to the sidebar.
2. Use the data-reveal trigger on a button.
3. Add the Foundation script call to the Custom Header field.
4. Add the Foundation trigger to the Custom Javascript field.

If you're not familiar to the Foundation Reveal Modal or any of Foundation docs, this is a good place to read more about it and where I went to grab the markup: http://foundation.zurb.com/docs/components/reveal.html

1. So let's start by using the markup for the Modal - copy & paste to the sidebar:

<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Awesome. I have it.<p class="lead">Your couch. It is mine.<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!<a class="close-reveal-modal" aria-label="Close">×</div>

After you pasted the snippet, select it an Ignore Format (CMD + .)

2. Now add the Modal call to a button. This is an example for the Phaedra theme button, but can be applied to any button:

<a href="#" data-reveal-id="myModal" class="button-2 envelope"></a>


3. Call jQuery and Foundation from the Custom Header:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/js/foundation.min.js"></script>


4. Lastly trigger Foundation from the JavaScript field:

$(document).foundation();


That's all to it. You try the demo here:
http://www.archetypon.net/preview/phaedra/plugins/Foundation-Reveal-Modal/


Auto Display

We may also get the modal to display without clicking a button, handy to show any alerts or promotions. In order to accomplish this follow all the steps above and add this piece of code to the Custom JavaScript field, just after the Foundation trigger:

$('#myModal').delay(5000).foundation('reveal', 'open');



Comments

Tutorial: upgrading to RapidWeaver 6

Here's really nice tutorial from Ryan Smith of RapidWeaver Classroom (http://www.rapidweaverclassroom.com) on upgrading from RapidWeaver 5 to RapidWeaver 6:

Comments

Parallaxis + Frameworks Integration

In an experimental mode Parallaxis can be adapted to work with Bootstrap or Foundation frameworks. 
foundation
Visit the frameworks demo sites: 
http://archetypon.net/preview/parallaxis/frameworks/

There are two main drawbacks to this approach:
  1. the page will take a few more seconds to load both style sheet and JavaScript files needed
  2. the simulator will not work properly

Also note that although both frameworks integrate fine with Parallaxis, this approach is an experiment only and no support can be given on any framework requirements, application and editing whatsoever.

I’ve prepared a dedicated tutorial project to help you getting started, download it here: 
http://goo.gl/DLqj3k

More info and docs for both frameworks:
http://getbootstrap.com/css/
http://foundation.zurb.com/docs

As always…have fun!
Comments

BigVideo + Parallaxis

I've just finished an experiment using BigVideo and Parallaxis theme, after a customer request, and thought it could be of interest for other customers as well. It looks really great in Chrome and Safari, not so in Firefox. Did not tested in Internet Explorers at all. For best results we may use mp4, mov or Vimeo videos.
BV
An example can be seen here: http://archetypon.net/preview/parallaxis/BV/

How to do it using Parallaxis theme:
  1. Download the RapidWeaver project from this location: http://goo.gl/ICCNnV
  2. Open the page in edit mode and double click on the very first element, the HTML element, to edit it's contents
  3. Replace the link on the little script with a link to your own video

That's all. Note that this is given without any guaranties or support from my part.
Have fun!
Comments

Social Media


How to embed social media in Photographos themes II, III and IV.

You will need:
Joe Workman's Like It stack
Stacks and Pluskit plugins

Still don’t have Stacks and Pluskit? Go get them, both are “must have” plugins for Rapidweaver:
Stacks
Pluskit

You can also find the Like It stack here:
Joe Workman’s Like It stack
Comments

Flickr Tutorial Video


Pulling images from Flickr sets is drop dead easy with Photographos theme for Rapidweaver, just watch this tutorial video.
Ready available on Photographos III.
Comments

Video Player Tutorial Video


Video playback was added in latest versions of Photographos themes (except for Photographos IV).
Implementation is ultra easy, just watch this tutorial video.
Comments
© Archetypon 2020
Choose a theme


Revisiting the Blog

Our stories and lessons, since 2012.









Follow us


Archetypon

Newsletter

We cover RapidWeaver, Themes, Blocs, guides, promotions and other fun stuff. Plus you get a sweet 15% off discount on new product releases.