D Scribe 2

What's New & Improved:

• Built-in Google Search
• Built-in Rapidsearch
• Sliding jQuery drop-down navigation
• Drop down navigation can now extend below the banner window
• Mediabox has been upgraded to Mediabox Advanced
• Mediabox is now activated by snippet (less javascript conflicts)
• Slideshow is WAY easier to setup, and now locally hosted!
• Slideshow delay and fade time is adjustable in the style options
• Slideshow is now Extra Content 1
• Badge content is now Extra Content 2
• Banner content is now Extra Content 3
• Now Mootools 1.2 compatible, for Accordion, RapidCart2, etc..
• Banner count is now 25
• Navigation breaks automatically render
• Elegant breaks now correctly render in IE
• "Title Blurb" is now the Slogan output
• All theme images have been compressed for smaller files sizes.
• No need to align the page glow
• Banners are now RW Muiltool compatible
• Built-in list formatting has been fixed
• IE6 now renders background textures
• 8 Custom Styles now built-in
• New tutorial site featuring requested css modifications.

Options that have been removed:

• Logo Positioning
• Title Font (Now controlled by Header Font)
• Title Kerning (Now covered in Tutorials)
• Page Glow Alignment
• Slogan Text Alignment
• Content Padding (Now covered in Tutorials)
• Banner Height
• "You Are Here" - Breadcrumb text

There are many different reasons why some style options were removed, but in every case it was to ultimatly improve the overall user exprience.

Create a custom banner.

In stock form, D Scribe 2 allows you 25 selectable (925px by 265px) banners in the style options.
To create your own, download and install the RW Multitool, then look for D Scribe 2 - and customize any of the headers from 1 to 25.

If you need to add more banners.

In RapidWeaver, copy and paste the code below into your custom css box, this will show "header 11".#featureImage{ background-image:url(rw_common/themes/d_scribe_2/images/editable_images/header11.jpg);} So by this method you can tell RapidWeaver to look for images 26, 27, 28, etc.. Of course you'll then have to manually add in these new images. You can do this by opening your D Scribe 2 theme contents, click through "images > editable_images", then add in your own images. After that, just change the css code above to match your added image name.

If you want to pull server hosted banners.

This is very easy, just add the code below, but change the url to the correct file path:
#featureImage {background-image:url(http://my_website/images/my_image.jpg);}

For this tutorial, you'll need to have installed the D Scribe 2 slideshow snippet. If you don't have this, DOWNLOAD it here. To install, first unzip the file, then double click each snippet to auto install into RapidWeaver, then restart RapidWeaver. After this your new snippets should be available in the snippet panel.

STEP 1: Enable Slideshow

In your page inspector, open the "Slide Setup" panel in the style options. Select a desired slideshow playback setting. When you enable the slideshow, your static banner image should disappear.

STEP 2: Add HTML Snippet

Open your snippets panel, and open your custom header box in the page inspector. Next, drag and drop the "NCD - D Scribe - Slideshow (html)" snippet into your custom html box.

STEP 3: Add CSS Snippet

Now select your custom css box, then drag and drop the "NCD - D Scribe - Slideshow (css)" snippet into your custom css box. Once done, switch to preview mode to view your slideshow!

Adding your own slide images

a) Open your theme tray, find the "D Scribe 2" theme icon.
b) Right click (or control + click) on the icon, then select "Reveal theme contents in Finder."
c) Follow the path "images > editable_images > slideshow", then drag your images into the slideshow folder.
d) Once your images are added, just change the default image file names in your custom css box.

Built into D Scribe is an upper right badge to which you can add custom content (as shown).



To make use of this feature, copy and paste the code below into your sidebar: <div id="myExtraContent2">Your Custom Badge Content</div>After pasting, be sure to highlight the div elements and select "Format > Ignore Formatting". Below is an example screen shot of adding in custom banner content. Note that when ignore formatting has been applied, your content will be highlighted in pink.


In the screen shot, extra code has been added to center the text; to do this, use instead the code below:
<div id="myExtraContent2" style="text-align: center;">Your Custom Badge Content</div>Here align "center" is being used, but other values include "left" and "right".

Built into D Scribe is a unique feature to add custom content that overlays the main banner (as shown).

Step 1. Select a Banner Effect.

Open your page inspector and in the style options under "Banner Effects", select either a right or left tint percentage.

Step 2. Add Extra Content 3.

To make use of this feature, copy and paste the code below into your sidebar: <div id="myExtraContent3">Your Custom Banner Content</div>After pasting, be sure to highlight the div elements and select "Format > Ignore Formatting". Below is an example screen shot of adding in custom banner content. Notice how you can mix html code in with styled text, just make that you select ignore formatting for all code, and not for styled text. Note that when ignore formatting has been applied, your content will be highlighted in pink.

STEP 1: Enable Mediabox

Open your snippets window, and look for "NCD - Mediabox Advanced". Click and drag this title to your custom header box. If you don't have this snippet, download it here.

STEP 2: Create your Content

Create a Styled Text page (for this example), then type in some sample text (or an image) that you'll use to create your Mediabox link.
Highlight your text (or image), then click the add link button (bottom left corner of the edit page).

STEP 3: Link your Content

Type in the url (web address) of your video, or other media you wish to view. For a sample, you can use this YouTube link.
http://www.youtube.com/watch?v=d2oh0_e7Y9U

STEP 4: Set for Mediabox

Click the Custom Attributes arrow to expand your link options.
In the title row, under the Value column create a title for your content. Then click the + button to add a new row, and name it "rel", then type "lightbox[]" in the Value column. When done, click the Set Link button.

STEP 5: Congrats, your done!

Click Preview, click your link, sit back and enjoy.

Advanced: Create a Mediabox Gallery

Within your Custom Attributes window, under the "lightboxbox[]" value, add in your own custom gallery title for all media you wish to play together. For example, "lightbox[set1 600 400]" for your series of images or videos will create a gallery that will display a width of 600px, and height of 400px.

In the styles options, select "Google Search"

Open your site setup panel, and make sure the web address points exactly to the site you want to search. After adding your site, you're done! Now google will search only the adress you entered when visitors type their term in the search bar.

If you desire your search results to look seamless with the rest of your site (and who wouldn't), it's recommended you use Josh Lockhart's RapidSearch plug-in.

1) In the styles options, select "RapidSearch"

2) Open your site setup panel, and make sure the web address points exactly to the base of where your site is going to be published.



3) Add a RapidSearch plug-in page to your project, and add the url of the site you want to search.

4) Open the RapidSearch page inspector and rename the Page and Browser title to whatever you wish.

5) VERY IMPORTANT: Rename the folder to "search", and make sure the filename is "index.html".



That's it your done. When your site is published for the first time, it might take a while for google to index your site, but after that you're ready for search functionality.

Copy and paste the code below into your custom css box:
h1.title{ letter-spacing: 2px;}This code will adjust the letter spacing of the site title.

Copy and paste the code below into your custom css box:
#logo{ margin-top: 30px;}Adjust the top margin px value as needed.

Copy and paste the code below into your custom css box:
#wrapperOuter{background-attachment: fixed;}This code will give the background texture a "no-scroll" fixed position. While this is a cool effect, it is not IE6 compatible, and IE6 visiters will just have the normal scrolling background.

Copy and paste the code below into your custom css box:
#padding{ padding: 15px 20px 30px 20px;}This code will adjust the inner padding of the main content section. The padding order values go: top, right, bottom, left.

Copy and paste the code below into your custom css box:
#contentWrapper, #topWrapper{ background: #FF0000;}This code will turn your site border red, just change the hex color value as needed. For more colors, google "hex colors".

Copy and paste the code below into your custom css box:
#bottomInfo{background: #FF0000;}This code will turn your footer background red, just change the hex color value as needed. For more colors, google "hex colors".