B STEALTH 2

From NCD THEMES…

Create a Custom Banner

Create a custom banner.

In stock form, B Stealth only allows you 10 selectable (1000px by 202px) banners in the style options.
To create your own, download and install the RW Multitool, then look for B Stealth 2 - and customize any of the headers from 11 to 25.

*Be sure to remember what header number you customized. Then in RapidWeaver, copy and paste the code below into your custom css box, this will show "header 11", change this number to whatever header you have customize. Once entered, your header will magically appear :)
#featureImage {background-image:url(%pathto(images/editable_images/header11.jpg)%);}

If you need to add more banners.

You can do this by opening your B Stealth 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);}

Create a Slideshow Banner


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 1


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 - B STEALTH - Slideshow (html)" snippet into your custom html box.


step 2

STEP 3: Add CSS Snippet

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


step 3

Adding your own slide images

a) Open your theme tray, find the "B Stealth 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.


step 4

Mediabox Advanced


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 1

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 2

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 3

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 4

STEP 5: Congrats, your done!

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


step 5

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.


step 6

Remove Banner Gap (CSS)

Copy and paste the code below into your custom css box:
#contentWrapper {margin-top:0px;}

Trim Top Site Height (CSS)

Copy and paste the code below into your custom css box:
body {margin-top:-20px;}

Adjust Sidebar Title Size (CSS)

Copy and paste the code below into your custom css box, then adjust the "em" value as needed.
h2.sideTitle {font-size:1.5em !important;}

Adjust Slogan Size (CSS)

Copy and paste the code below into your custom css box, then adjust the "em" and "px" value as needed.
h2#slogan {font-size: 1.9em; padding-top: 3px;}