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

Elegance 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 Adavanced built-in slideshow in your project 11

1.4 Using the [Social Network Icons (HTML)] snippet 16

1.5 Using the Built in prettyPhoto Script! 21

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

1.7 Using Extra Content (EC) 1&2 28

Lessons

Elegance 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 your Theme Contents Folder

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 Adavanced built-in slideshow in your project

This instructions will help you how to use the built-in advanced slideshow functionality in your own project, thatlets you add captions to your slides.

Open the Resources Folder

After opening the Resources folder that you've downloaded with the Theme you will see that there is a Snippetsfolder, the one we need for this is the above one.


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 Elegance Adavanced [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 add some morelines so that in case you want to use more banner images, it's up to you :)

Also note that you need to add your images to the Resources Panel on the left, for the Banner to work.


I'm using the sidebar to place that code but you use it wherever you think is more comfortable for you, in 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.


Changing the Banner Slide Effect.

Ok, now we have made some necessary configurations, now let's bring our Page Inspector up. There you canchange the Banner Slide Effect and Transition Speed.


Using the [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 one we need for this is theabove one.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!

Add Original image to RW5 Resources or RW4 Assets

Click Add Files to insert the original image in the assets panel in RW4 or drag and drop an image into theResources Panel in RW5!


Link to the image / photo!

Select the image or text and then click the link button below (nº 2).


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/

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

Documents