avante manual - weaverthemes · 2013-11-21 · 1 lessons 1.1 how to change the headings text in...

Avante Manual

1 Lessons

1.1 How to change the headings text in sidebar? 4

1.2 Using the built in pagination in a RapidWeaver photo album page 7

1.3 Using and Implementing the built-in slideshow in your project 11

1.4 Using Avante [Social Network Icons (HTML)] snippet 15

1.5 Using the Built in prettyPhoto Script! 20

1.6 How to replace the default images for your own! 25

1.7 Using Extra Content (EC) 1&2 28

Lessons

Avante 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 just incase you need to use your ownlanguage...

Open Avante Theme Contents

First open your Theme Contents folder, you need to right click the Theme and choose Reveal Theme Contentsin Finder...


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 scroll down and search for this function, then all we need to do is edit those text inside the<h3></h3> Tags, Save and your done.


Using the built in pagination in a RapidWeaver photo album page

An easy way to use the photo album page with pagination.


Open the Page Inspector > Styles

You can see above that after adding your own images to the Photo Album type page you just need to enable theabove option, so that you can have a neat pagination effect in your page albums.

By default the pagination is enabled for 18 items/photos but this can be easily changed.


Change the number of pagination items/photos

As you can see highlighted above I've added some code to the Javascript box, it shows us the items that wewant to paginate, so if we need to increase or even decrease the value we just need to edit the value above towhatever suits our needs best:


Just try it yourself, here is the snippet, that you need to copy/paste in your Photo Album page Javascript section.

var photoCount = 18;


Using and Implementing the built-in slideshow in your project

This instructions will help you how to use the built-in slideshow functionality in your own project.

Open the Resources Folder

After opening the Resources folder you will see that there is a Snippets folder, the ones we need for this are theabove ones.So go ahead and install them, just double click them and you are good to go.


Enabling the built-in slideshow in the Inspector

As you can see in this step title first we need to enable the built in slideshow scripts, for that just tick the option inthe Page Inspector much in the same way you can see above.


Working in RapidWeaver - using the Avante [EC Code Banner (HTML)] snippet

As you can see in the reference image above, we just need to drag and drop the snippet in to our Page Inspector> Header > Javascript TabAlso if you check the code you can change text to mach your needs and images, or you could remove somelines so that in case you don't need to use all banner slots, it's up to you :)

I'm using the sidebar to place that code but you use it wherever you think is more comfortable for you, like thecontent page.

Very Important: After dropping the snippet into your project, please highlight the code and apply > IgnoreFormatting from the Format Menu.


You can see in the snippet some captions that are optional.

Working in RapidWeaver - using the Avante [Banner Initialization (JAVASCRIPT)] snippet.

Ok, now we have made some necessary configurations, now let's bring our "Javascript" on board, this is neededto activate the slides.Open your Page Inspector > Header > Javascript tab and drag and drop the Avante [Banner Initialization(JAVASCRIPT)] there.

Now preview your site and you should see the slideshow effect on your page.

There are several configuratios you can do, for instance if you do not want to slide the images but rather have afading slideshow between them, you need to change the effect that by default is effect: 'slide', to effect: 'fade',


Using Avante [Social Network Icons (HTML)] snippet

This lesson will give you some orientation on how to use the Social Network snippet

Install the Avante [Social Network Icons (HTML)] snippet

After opening the Resources folder you will see that there is a Snippets folder, the ones we need for this are theabove ones.So go ahead and install them, just double click them and you are good to go.

Is this particular case we need the one highlighted above.


Copying the code snippet into your project!

As you can see above you need to drop the snippet in to the area of our project, those can be place in any placeyou want, it could be the sidebar in Page Inspector or in your Page Content.

Very Important: After dropping the snippet into your project, please highlight the code and apply > IgnoreFormatting from the Format Menu.


Changing the icon size!

As you can see highlighted the value 24xp, is the default size that will going to be applied to your icons, you canchange this by editing that value to something different, like the values below:

16px


24px48px60px

Also you need to edit the URL to point to your social network changing the # value, as an example if I want toinsert my Twitter URL I just need to change the # value and replace it with my Twitter page,http://twitter.com/weaverthemes


Social Network services icons available!

These are the Social Network icons available in the Theme you can use the ones you need in your project file,with the snippet provided.


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 RW4 Assests or RW5 Resources

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.


Changing the prettyPhoto Theme in Page Inspector

As you can see above, this Theme enables you to change the Theme of prettyPhoto script, to do so just changethe Inspector option and you will have a new and shiny prettyPhoto Theme to macth your website, or you candisable it, if you don't want that option by choosing "None" in the options above.


How to replace the default images for your own!

This is intended to give you some instructions on how to change the dummy images that cames with the Theme,please contact us if you need the ones used in our demo website.

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 should bring up your Theme drawer!

Find the Theme you need to add your images to and right click it, this should open a context box, (see above)where you can see 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_20.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 Extra Content (EC) 1&2

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 Avante, 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.

Avante has 2 Extra Content Slots, the first (ec1) is only used for the Banner Images, the second (ec2) rendersjust below the main content in the footer.

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 in the bottom, you need to change <div id="myExtraContent1"> to <div id="myExtraContent2">.


Very Important: After droping the snippet into your project, please highlight the code and apply > IgnoreFormating from the Format Menu.

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/

avante manual - weaverthemes · 2013-11-21 · 1 lessons 1.1 how to change the headings text in...

Documents