I CON TUTORIALS

To access these links:

Open your theme tray, find the "I CON" theme icon, then right click (or control + click) on the icon. Select "Reveal theme contents in Finder." Then open the file called "index.html" with an html editor (if you don't have one, Textwrangler is good - and free.)

Once open look for this section, then fill in the "#" with your own urls, and replace the filler titles. Save, and you're done.

To access these links:

Open your theme tray, find the "I CON" theme icon, then right click (or control + click) on the icon. Select "Reveal theme contents in Finder." Then open the file called "index.html" with an html editor (if you don't have one, Textwrangler is good - and free.)

Once open look for this section, then fill in the "#" with your own urls, and replace the filler titles. Save, and you're done.

First you must download (then install) the I CON Flash snippet pack, download it here.
To install the snippets, double click on each the snippet icon, then restart RapidWeaver after installation.

1) Open your snippets window, find "NCD - I CON - Flash (html)". Drag this title to your custom header box.

Once loaded, I CON displays a demo flash file. The flash source name is located within the html snippet, called "your-flash.swf". It's highlighted below in orange.




2) Next, you'll want to position your flash file. Open your snippets window, find "NCD - I CON - Flash (css)". Drag this title to your custom css box. When you add your own flash file, just change the right and top pixel values as needed.



If you click preview mode, you should see your newly positioned demo flash sequence.




3) Add your own swf file.

a) Open your theme tray and find the appropriate "I CON" theme icon.
b) Right click (or control + click) on the icon, then select "Reveal theme contents in Finder."
c) Follow the folder path images > flash
d) In the flash folder you see the demo "your-flash.swf" file, now add in your own .swf
e) Lastly, go back to your custom html box, and change the default swf name from "your-flash.swf" to your newly added file.



Congrats, your done!


* Note: You can only have one flash header per page; and you only have a banner header or flash header, not both at the same time. Also, header media will not appear on individual RapidWeaver blog page entries.

First you must download (then install) the I CON Banner snippet, download it here.
To install the snippets, double click on each the snippet icon, then restart RapidWeaver after installation.

1) Open your snippets window, find "NCD - I CON - Banner (css)". Drag this title to your custom css box.

Once loaded, I CON displays a demo banner file. The banner source name is located within the css snippet, called "your-banner.png". It's highlighted below in orange. When you add your own banner file, for positioning just change the right and top pixel values as needed. Same goes for the width and height values, adjust them according to your banner image dimensions.



If you click preview mode, you should see the default demo banner.




2) Add your own banner file.

a) Open your theme tray and find the appropriate "I CON" theme icon.
b) Right click (or control + click) on the icon, then select "Reveal theme contents in Finder."
c) Follow the folder path images > header_images
d) In the header_images folder you'll see the demo "your-banner.png" file, just add in your own banner image here.
e) Lastly, go back to your custom css box, and change the default "your-banner.png" to your newly added file.



Congrats, your done!


* Note: You can only have one banner header per page; and you only have a banner header or flash header, not both at the same time. Also, header media will not appear on individual RapidWeaver blog page entries.

To add subtle css line breaks after your content, as featured on the home page on this site, add the code below into your page after your content:

<div class="break"></div>

These line breaks can be color picker adjusted in the style options, just look for "Break" under Layout Colors.

Within I Con, you can extened PNG transparency to 10 (max) images per page. To do this you must assign a class of "png", then add it's order number from 1 to 10.

Example:

<img class="png1" src="http://domain.com/my-image.png" />

<img class="png2" src="http://domain.com/my-image.png" />

Many users either have the title / slogan or just a giant logo in place of it. If your going to use both, then you’d probably want some margin between them, to do so, add the code below into your custom css box:

#logo{ margin-right: 25px; }
Adjust the px value as needed.

.topImage { height: 120px }
Adjust the px value as needed, up to 275px.

#toolbarContainer { top: 57%; }
Adjust the percentage value as needed.

#titleSlogan { top: 57%; }
Adjust the percentage value as needed.

To make a smooth bullet list as shown below, copy and paste the code into your content or sidebar section.

• List item 1
• List item 2
• List item 3
• List item 4
• List item 5

<ul class="icon">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
Be sure to highlight your code and select Format > Ignore Formatting

h2.sideTitle { font-size: 1.5em; }
Adjust the em value as needed.

h2.slogan { font-size: 1.4em; }
Adjust the em value as needed.