simplify manual - weaverthemes · 2013-11-21 · working in rapidweaver [simplify [header...

Simplify Manual

1 Lessons

1.1 How to change the headings text in sidebar? 4

1.2 Convert a RapidWeaver photo album into a PrettyPhoto lightbox gallery 7

1.3 Using the Built in prettyPhoto Script! 11

1.4 How to replace the default images for your own! 15

1.5 Using and Implementing CU3ER (cu3er-v0.9.2) in your project 18

1.6 Using Extra Content (EC) 2&3 27

Lessons

Simplify Manual - 3 ©2009 WeaverThemes All Rights Reserved

How to change the headings text in sidebar?

This is a simple step process to change the headings text of the sidebar...

Open Simplify Theme Contents


Open the file custom.js

The file we need to edit is in the "js" folder inside you will see the file custom.jsTo explain this process, I'm using Coda but you can use any HTML editor, likehttp://www.barebones.com/products/textwrangler/ wich is just fine for this.


Editing the text for sidebar

Ok, now we need to earch for this function, then all we need to do is edit those text inside the <h3></h3> Tags,Save and your done.


Convert a RapidWeaver photo album into a PrettyPhoto lightbox gallery

Open the Page Inspector > Header > Javascript tab

After opening you page isnspector you only need to copy / paste the below code in it:

// Without TitlesjQuery(document).ready(function($){ $('.thumbnail-frame').each(function(i,item){


$('a:first',this).attr( 'rel','prettyPhoto[gallery1]' ).attr( 'href', $('a:first',this).children('img')[0].src.replace(/\-thumb/,'-full') ); }); $('.thumbnail-frame a').prettyPhoto();});

// With TitlesjQuery(document).ready(function($){ $('.thumbnail-frame').each(function(i,item){ $('a:first',this).attr( 'rel','prettyPhoto[gallery1]' ).attr( 'href', $('a:first',this).children('img')[0].src.replace(/\-thumb/,'-full') ).attr( 'title', $('p.thumbnail-caption:first',this).text() ); }); $('.thumbnail-frame a').prettyPhoto();});

Note: The above code is from Josh Lockhart, so all credits goes to him!


http://www.joshlockhart.com/

Change the prettyPhoto lightbox Theme

As you can see highlighted above I've added some code to the end of the function:You can use 4 types of themes:

dark_roundeddark_squarelight_roundedlight_square


You just need to replace the value above for it to work.


Using the Built in prettyPhoto Script!

This is a tutorial on how to use the prettyPhoto script built in the theme!

Create a post or anything like a Styled type page

insert a image in the post or styled text page.


Add Original image to assets

Click Add Files to insert the original image in the assets panel!


Link to the bigger photo!

Select the image and then click the plus button above.


Adding/Changing Values

Now after you've inserted the big image to the assets panel, we need to change the values above, first click theplus button then add a Name = rel and Value = prettyPhoto like above, Done! just test it and see for yourself howsmooth this script is.


How to replace the default images for your own!

Open the Theme Contents "Reveal Theme Content in Finder"

In RapidWeaver, open your website file and view the Themes panel (View > Show Themes)This step shoud bring up your Theme folder!

Find the Theme you need to add your images to and right click it, this should open a context box where you cansee something like "Reveal Contents in Finder"


Open the Images folder and locate the folder named editable_images like bellow!

In the resultant Finder window, place your image(s) into the folder /images/editable_images/Ensure your images are named the same way as the ones in that folder "banner_1.jpg"..."banner_15.jpg".Capitalization is important. Ensure your file names use only lower-case letters.


Choose your new banner from the Inspector

In RapidWeaver, select "Banner_01", "Banner_02", "Banner_03", etc from the "Page Inspector > Styles > BannerImages" Theme Variations set.


Using and Implementing CU3ER (cu3er-v0.9.2) in your project

This instructions will help you how to install a Flash 3D Banner in your project, because of the license of theFlash Banner I cannot include it with the Theme, but of course if you want to use it just follow these instructionsand you be set to go.

First you need to download the package from here. or eventually if you want, you can download a demo projectwith the system in place, just make sure that you extract it to your Desktop, because the paths need to becorrect.

Important: If you wish to use the Free or Pro online version instead, check this URL http://support.getcu3er.com/entries/337421-guide-on-how-to-embed-cu3er-in-rapidweaver, that explains how toget it working in RapidWeaver, keep in mind that if you need to place the CU3ER generated files in the Banneryou need to wrap the CU3ER code in a Extra Content 1 Area, see below:

<div id="myExtraContent1">

Your CU3ER generated content here

</div>

Note: If you are receiving an error message or crashed when viewing embedded flash files you may need to addsome folders on your Mac to Adobe Flash Player's 'Safe List; / Viewing Flash files in Preview mode.


https://www.dropbox.com/s/gt0i0b1ym7cotyh/cu3er-v0.9.2.zip

https://www.dropbox.com/s/qe5mj8oco91sy1r/demo_project.zip

http://support.getcu3er.com/entries/337421-guide-on-how-to-embed-cu3er-in-rapidweaver

http://support.realmacsoftware.com/kb/rapidweaver/viewing-flash-files-in-rapidweaver-preview-mode

Disable the Default Image in your Theme

First lets disable the default image, that you see when you create a new page in RapidWeaver and select theSimplify Theme.


Unzip the files to your Desktop

After unziping the files you've downloaded to your desktop, you will need to open the folder cu3er-v0.9.2 > cu3er,and you will see the above files.


Adding the Files to your Resources panel

In you Resources Inspector, add the following files, you can see a snapshot of what you need to add:

cu3er.swfswfobject.jsconfig.xmlimages/


Working in RapidWeaver [Simplify [Header swfObject]]!

Ok, now we have made all necessary configurations, now let's bring our "Simplify Theme" on board, Open yourPage Inspector > Header > Header tab and copy / paste this code snippet below the lines:

------------------------------------------------------------------------------------


var flashvars = {};flashvars.xml = "%resource(cu3er/config.xml)%";var attributes = {};attributes.wmode = "transparent";attributes.id = "slider";swfobject.embedSWF("%resource(cu3er/cu3er.swf)%", "static", "960", "300", "9", "expressInstall.swf", flashvars,attributes);

Note that I'm using a folder in my Resources named cu3er, this is a good practice to keep things organized.


Make sure all pages you create (if using the cu3er banner) are in your Website root.

Very Important: The pages you create (if using the cu3er flash banner) needs to be in your Website root, justlook at this Page Inspector > General tab and then check the Folder and Filename fields, you need to makesure that the folder value is always a forward slash “ / “ then you can name your page anything you want.


Also after this you mostly will need to adjust the banner config.xml file to reflect your needs, add or remove moreimages add text etc, you can take a look at the cu3er docs here: http://progressivered.com/cu3er/docs/ foradicional info.

Just refresh and your done.


Using Extra Content (EC) 2&3

This lesson is intended to give you an idea of how you can activate Extra Content in you Theme.

Install the EC Snippets that are inside the package

As you can see above, after downloading your Theme you will see a Resources folder with the contents abovethe one that you need to use for Extra Content to work is the Snippets one, so go ahead open that folder andinstall those snippets.


Open the Snippets window

Now that you've created a new project and selected the Theme, is this case Simplify, we need to use thosesnippets above, by drag and drop them in to the area of our project, those can be place in any place you want, itcould be the sidebar in Page Inspector or in your Page Content.

Simplify has 3 Extra Content Slots, the first renders in the Banner for slideshows, another one just below theBanner area, and the second renders just below the main content.

If you see above, all of the Extra Content snippets starts with <div id="myExtraContent1"> so they will alwaysrender in the first slot, in the banner.If you want to render at the bottom, you need to change <div id="myExtraContent1"> to <div id="myExtraContent2"> or <div id="myExtraContent3">


See easy, you can even use stacks plugin to do this, but that's another story, I recomend you to check the ExtraContent tutorials to learn more.


http://extracontent.info/category/tutorial/

http://extracontent.info/category/tutorial/

simplify manual - weaverthemes · 2013-11-21 · working in rapidweaver [simplify [header...

Documents