Important Information - RapidWeaver 5 Compatibility
This theme is fully compatible with RapidWeaver 5. New aspects like last published dates, consolidation of files and CSS compression are very well supported by this theme. However, RapidWeaver 5 doesn't have support for HTML5 syntax yet, this will be added shortly in a .0 update in early 2011. For the time being, you will need to make sure your page output is set to 'Default' under the page inspector (which it should be already). If tidied or optimised is used, this may result in layout breakage, due to tags being stripped out.
If validating the HTML code of your website using the W3C validator, make sure you select HTML5 - Experimental as the DOCTYPE and UTF-8 as the encoding.
Theme Compatibility
Plugin Compatibility
Black & White has been extensively tested with the following RapidWeaver plugins:
Styled Text, Blog, HTML Code, Styled Text+, Carousel, Collage 1, Collage 2, Stacks, PlusKit, Accordion, Columns, Photo Album, Movie Album, Rapid Album, WeaverPix, WeaverFM, Kwix, Rapid Blog, FAQmaker, Partitions, Sitemap, Tabloom, TabMate, EasyTube Gallery, ContentPager, Formloom, PayLoom, GoogleLoom and CartLoom.
It should be assumed that Black & White will work with other third-party plugins as well. However, some third-party plugins do not use valid XHTML or CSS code and may not be compatible with certain web browsers. In such instances, you will need to contact the plugin developer for updates or support or use alternative plugins. Demo versions of Black & White are available for free download, so you can test and evaluate specific plugins yourself before purchasing the theme.
Theme Colour Settings
Black & White has a wide range of theme colour settings, available for use under the style tab in the theme settings. Most main colour settings are listed under the 'Colours' disclosure tab. Other groups of theme settings may also include colour settings. Clicking on a coloured square reveals the Mac OS X colour picker window, where you can select new colours using a range of different palette tools.
Body Background Settings
In Black & White, you can choose between a solid colour background (default), a noise texture or insert up to 10 custom background images. With the body background colour set, you also have an option to apply a vertical gradient running from the top towards the bottom. See details below of how to import your own background images.
Title Bar Settings
To cater for different preferences, a selection of title bar settings are provided. You can choose between a fixed title bar (which does not scroll with the rest of the page) or a scrolling title bar which does scroll. Height settings are provided, so the title bar can be changed between 50px tall and 100px tall. You can also decide whether to display a drop-shadow or not. A couple of colour pickers are provided under the title bar settings, to change aspects like the title bar colour, the site title background and the site title text.
Header Font Settings
A choice of 20 web-safe and semi web-safe font face options are provided in the theme. Header font settings are applicable to the site title, site slogan, sidebar title, blog entry titles, photo album titles, video album titles and header tags. A font stack is used for each font setting, ensuring that if a person viewing a site does not have a particular font installed, their web browser will default to a close alternative. For example, if Palatino is not available, Times New Roman will be used instead.
Navigation Font Settings
A choice of 20 web-safe and semi web-safe font face options are provided in the theme. Navigation font settings are applicable to the block navigation links within the sidebar. A font stack is used for each font setting, ensuring that if a person viewing a site does not have a particular font installed, their web browser will default to a close alternative. For example, if Palatino is not available, Times New Roman will be used instead.
Content Font Settings
A choice of 20 web-safe and semi web-safe font face options are provided in the theme. Content font settings are applicable to all elements of a page not covered by header font settings. Again, a font stack system is used for the font settings, ensuring that if a person viewing a site does not have a particular font installed, their web browser will default to a close alternative. For example, if Palatino is not available, Times New Roman will be used instead.
Note: Some RapidWeaver plugins will force their own font settings into a page. Sometimes these may not match your preferred fonts. In such cases, you may need to change plugin settings or use custom CSS to obtain a more desirable style. Contact the plugin developer for further information. In addition, some web browsers do not permit elements like form fields or buttons to have their font face changed. This is more noticeable in PC web browsers.
Import Via GFD
This theme has support for embedding your own fonts using the Google Fonts Directory service, or your own custom code. Embedded fonts are supported in each set of font settings within the theme (e.g. header and content). Typically embedded fonts have an advantage of looking more attractive compared with some standard web fonts, and can really improve the professionalism of a website. Unlike image text, all lettering can be selected or printed as normal with no detrimental effects on search engines.
Setting up embedded fonts requires some minor modifications to the theme. To use embedded fonts in this theme, open the theme contents and open the css folder within. Open the desired font setting folder (e.g. header-font), depending which set of font settings you want to add an embedded font face to. Open the import.css file in your preferred code editor. You will need to refer to the Google Font Directory online, to choose a suitable font face. On the "Get Code" page, make a note of the font name (short name and full name).
The first stage is to import the font into the stylesheet using the @import CSS declaration. This is somewhat similar to the function in PlusKit, but is designed specifically for importing other stylesheets or fonts (as a result it does not use PlusKit). You can modify the example code already provided. Next you need to add your font name to the 'font-family' settings. Again you can use the existing code as a point of reference and modify it accordingly. Save changes to the import.css file when done. Select the '@import' theme setting to use your newly embedded font face. Please note that you often need to preview or export a website outside of RapidWeaver, to see the embedded font working. It should also be pointed out that using embedded fonts may slow down page rendering.
Letter Spacing, Line Height and Font Size
These settings (accessed under the theme settings) allow you to carefully customise the appearance of text within the theme. This enables you to customise text in areas such as content or sidebar.
Navigation Settings
Black & White contains a selection of basic navigation settings which enable you to have site navigation links positioned in different parts of the page, depending on your preference. By default, top-level links are listed in the site title bar and subpages are listed in the sidebar container. This type of layout is commonly referred to as a 'split navigation' layout, as the links are split and displayed in different parts of a page.
Colour settings are provided so that you can change the colour scheme of navigation links. Horizontal link colours refer to links in the title bar at the top of a page. Vertical link colours enable styling of subpage links within the sidebar. Colour settings for breadcrumb links are also provided in this list.
Logo and Logo Links
Logo images can be inserted into the site setup window as normal in RapidWeaver. Logo images will automatically link back to your homepage. The homepage address is the same address you provide in the ‘Web Address’ box within the Site Setup window. If you need a logo to link somewhere else, open the index.html file within the theme contents and find the logo tags. Change the ‘base_url’ tag to a URL of your choice. Black & White just supports a single logo placement option – the logo is placed above the site slogan and will automatically push content down if you opt to use a larger logo image.
Sidebar Settings
Black & White has numerous sidebar options, making the sidebar region easily customisable to your requirements. All sidebar settings can be accessed under the theme settings. Alongside some colour settings, you can pick a sidebar width or position based on the type of content you wish to display. Settings exist for a single sidebar floated left or right. All sidebar position settings are available in a choice of widths. Care should be taken that any wide items inserted into a sidebar or extra content container do not extend outside the sidebar boundary – which could potentially cause layout problems (container wrapping) in Internet Explorer.
Width Settings
Several theme width settings exist in this theme, enabling you to customise the main container width. Some users prefer narrower widths, whereas other prefer wider page widths to fit more content in. Your choice of theme width should be governed by the type of content you wish to display and plugins you want to use (plugins such as WeaverPix and RapidAlbum require wider pages). When designing your website, remember that quite a large proportion of internet users have screen sizes of no more than 1024px by 768px. This is a trend which has stabilised since the introduction of new devices such as netbooks and tablet PC's. Black & White has been tested and will work very well on devices such as the iPhone and iPod Touch.
Last Published Stamp (Miscellaneous Settings
This option will display the date a page was last updated. This is very useful for readers of your website to gauge when content was last updated and is an essential requirement in educational or informational websites. RapidWeaver will automatically write the date into the footer when this option is ticked. If you are using RapidWeaver 4.4 or less, the date will always be presented in mm/dd/yy format. In RapidWeaver 5.0 and later, the date will be localised to that of your computer. So for example outside of the US, the date may be shown as dd/mm/yy. If you need to change the 'Page last updated' text, this can be done by opening the theme contents and opening the index.html file in a code editor. Scroll down towards the bottom and make the necessary change.
Capitalise Site Title, Navigation Links, Slogan, Headings (Miscellaneous Settings)
When ticked, these options will convert text in certain parts of the theme to uppercase using CSS. Using CSS is very useful, because it ensures the original text is left unaltered for the benefit of search engines.
Fade In Title Bar (Miscellaneous Settings)
Ticking this option will fade in the title bar container on page load. This is done using jQuery Javascript. The effect duration can be changed in the head section of the index.html file, within the theme contents.
Fade In Content Container (Miscellaneous Settings)
Ticking this option will fade in the title bar container on page load. This is done using jQuery Javascript. The effect duration can be changed in the head section of the index.html file, within the theme contents.
RapidSearch Search Bar (Miscellaneous Settings)
The optional search bar is powered using the RapidSearch plugin (not included) by Josh Lockhart. RapidSearch uses Google to fetch and display search results. When a user enters search keywords and presses return, they are forwarded onto the RapidSearch page within your website. This RapidSearch page should be named search.html and stored in the top level ( / ) of your website directory. If the page is missing or not named correctly, the search function will not work. The quality of the search results you get back depends on how well Google has previously indexed your website. New websites may take several weeks to index fully, updates to existing websites may take several days. The page which search keywords are forwarded to can be changed in the index.html file (within the theme contents) if required. If a more advanced search function is required, the required code can be added into the index.html file. Some web host control panels used to administrate web servers may include the option for page indexing and site search ability, without relying on Google or other outsourced services.
If you need to change the label on the search button, this can be done in the index.html file contained within the theme contents. Open this file in your preferred code editor and scroll down to the point commented 'Search Function'. The submit input label can be changed here. It is recommended you keep the search button label roughly the same size as it currently is, to avoid breakage of the search form field.
Fixed Width Parent Links (Miscellaneous Settings)
By default, navigation links displayed in the title bar have a variable width, depending on the length of each link title. However ticking this option will give each link a fixed with of 100px. Some users may prefer this. It would be possible to further extend this functionality by using custom CSS to apply a coloured background behind links, like this:
#nav li a {
background: #000000;
}
#nav li a:hover {
background: #333333;
}
#nav li a.current,
#nav li a.currentAncestor {
background: #000000;
}
The stylesheet controlling the fixed width of links in the title bar can be found in css > misc > fixedwidth-links.css within the theme contents. This can be edited to include your own fixed width setting for parent navigation links.
Invert Title Bar Shadow (Miscellaneous Settings)
This option rotates the title bar shadow vertically so that it runs from light to dark, instead of dark to light. It lifts the shadow up the page by 10px, so that the shadow overlays the title bar, rather than the content container. This can be very useful if you are using a custom colour scheme and wish to apply a dark body background colour and light title bar background colour. Cosmetically the title bar shadow would look much better in this instance.
Hide Margin Below Sidebar Navigation (Miscellaneous Settings)
If you are not using block navigation links in the sidebar, ticking this option will clear the surplus margin below the container where navigation links would have formed. This in turn will lift the sidebar content higher up the page, so that a sidebar title is flush with the top of the content container.
Splash Screen Style (Miscellaneous Settings)
Splash screens have become a popular trend in recent years and can be used to create a vivid landing page on a website. Ticking this option will hide everything on a page, except the central content container which will become centre-aligned. Links onto other pages would need to be created manually. Consider combining the splash screen option with the content fade in option to create a very powerful and professional effect.
Adding icons to external links
Styling Header Tags
The header tags can be styled using CSS. You can ether style individual levels of headers, or style them all collectively as a group. To style individual headers, the CSS code you would use would look like this:
h3 {
text-transform: lowercase;
font: 200% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #5e5e5e;
}
This code above would convert all h3 tags to lowercase, increase the font size to 200% and convert the font face to a Helvetica font family with an iron grey colour. If you wanted to style all of your header tags the same, multiple selector names can be used in the CSS code, separated by commas like this:
h1, h2, h3, h4, h5, h6 {
text-transform: lowercase;
font: 200% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #5e5e5e;
}
The text size of header tags will still vary in size, depending on the specific header tag used. But all header tags would have lowercase lettering, a standardised font face and the same colour throughout. This custom CSS code can either go into the custom.css file within the theme contents, or you can enter it in the normal custom CSS box within the page inspector in RapidWeaver.
Extra Content
Black & White includes basic support for extra content. Eight extra content containers are available in this theme -- their positions and placement can be seen in the online demo version of Black & White. The code required to make extra content work is already provided in the theme, but extra content is not loaded by default in order to conserve bandwidth. To enable extra content in this theme, copy and paste the following code into the Custom Header box under the page inspector, on every page where you wnat to use extra content:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="%pathto(js/extracontent.min.js)%"></script>
This HTML code will load jQuery from Google API's and loads the extra content script from within the theme contents. To embed content within your extra content containers, use the standard extra content code snippet or the Stacks plugin. It is recommended that extra content 1 is only used when there are no links to display in the title bar, and it is recommended that extra content 3 is only used when the breadcrumb links are switched off. Text colour settings for all three extra content containers can be found under the theme colour settings. More information on using extra content (including free snippets and stacks) can be obtained from this website: http://extracontent.info/
Adding Custom Background Images Using Finder
Background images used by the theme are stored inside the theme contents. This ensures that the images become an embedded part of the theme and can be selected for use under the theme settings. For example, you may want to have a different image displayed on different pages of your website to add some variety.
The theme contents can be accessed by CTRL + Clicking (or right clicking) on the theme preview icon in RapidWeaver (the small picture of the theme which appears in your theme drawer). From the popup menu, select the 'Reveal theme contents in Finder' option. A new Finder window opens which contains a selection of files and folders. Open the folder marked 'images'. Then inside, open the folder marked 'editable_images'. This editable_images folder contains all of the images used by the theme, including placeholder images. Placeholder images are typically blank and named or numbered sequentially like bg1.jpg, bg2.jpg, bg3.jpg for example.
Any of these placeholder images can be replaced using your own images. When you add new custom images, name them so that they replace placeholder images. By replacing the placeholder images supplied in the theme, your custom images will be available for selection under the theme settings. When creating new images, it is advisable that these are optimised for the internet – typically this means they should not have any specific colour profiling applied and be of 72 DPI with a file size no greater that 75KB.
Adding Custom Background Images Using RapidWeaver MultiTool
RapidWeaver MultiTool is a third party application which runs separate to RapidWeaver. Both a free and premium version of this software is available. When open, RapidWeaver MultiTool presents a list of themes installed on your computer. Themes which are compatible with RapidWeaver MultiTool store all of their images inside a folder called editable_images. RapidWeaver MultiTool enables you to edit any of these images. The original images are safely backed-up within the theme so they can be retrieved at a later date if required.
It is recommended you start by editing placeholder images. Placeholder images are typically blank and named or numbered sequentially like bg1.jpg, bg2.jpg, bg3.jpg for example. Using RapidWeaver MultiTool, you can drag and drop new images onto the canvases. Many basic image editing techniques can also be performed on these images and text can be applied. Use the save button in RapidWeaver MultiTool to apply the customised image to your theme. RapidWeaver MultiTool is developed by a separate software company and support documentation is provided on the website.
Adding custom header images from a warehouse
If your images are already scaled to size and stored on the internet, it is possible to import them into the theme using CSS or jQuery Javascript. To use CSS, copy and paste this code into the Custom CSS box in the page inspector:
body {
background-image: url(http://www.example.com/image1.jpg);
}
Change the URL to point to your image stored on the internet. There are other CSS attributes you can add to this code to change image alignment and background repeat. Search on the internet for further details of this.
Applying Custom CSS
This theme features a very useful 'custom.css' file within the theme contents. Into this file, you can enter custom CSS code. Unlike the Custom CSS box under the Page Inspector in RapidWeaver, code entered into the custom.css file gets applied to all pages and enables you to edit CSS using a preferred editor like CSSedit or Text Wrangler. These types of editors often feature useful features like syntax colouring, auto-completion and validation, which combined make CSS editing much easier and safer. There are many free resources on the internet which cover CSS in detail. To open the custom.css file, right click (or CTRL + Click) the theme preview icon in RapidWeaver and select 'Reveal Theme Contents in Finder'. Open the custom.css file in your preferred code editor. If you only need to apply custom CSS code to a single page, enter this code under the Page Inspector custom CSS box as normal.
Saving Styles
After customising your theme, you may wish to apply the same set of styles to other pages. By far the easiest way to do this is to open the page inspector and click onto the styles tab. At the bottom, click the cog button and select 'Save Style As'. From now on, this saved style can be applied to other pages. Please note that saved styles are non-transferrable between other themes or theme versions, but you can share styles between other theme users and projects. More details on applying styles and saving styles can be found in the RapidWeaver user manual. Most users normally find it easier to use this above method to save styles, rather than relying on the 'Applied to this page only' or the 'Is the master style...' settings under the page inspector.
Theme Contents
Code, settings, files and graphics required by a theme live inside a package called Black & White.rwtheme or similar. If you are planning to modify the theme or add new elements to it, the 'theme contents' (package) is where you normally need to go. RapidWeaver themes are stored in ~/Library/Application Support/RapidWeaver/ where "~" is the name of your home directory. But you can also easily access the theme contents from within RapidWeaver. Just right-click (or control and click) the theme preview icon and select 'Reveal theme contents in Finder' from the pup window. The theme contents is revealed in a Finder window, from where you can access all the files which make-up the theme.
Duplicating Themes
If you are planning on making any modifications to the Black & White theme, it is highly recommended that you duplicate the theme -- that means making a copy of the theme to customise, leaving an original version in RapidWeaver unedited. Working from a duplicated theme ensures you can always return back to an original version at anytime. Themes can be easily duplicated by right-clicking (or control and clicking) the theme preview icon in RapidWeaver and selecting 'Duplicate' from the popup menu. Give the duplicated theme a new name and work from that version.
Customer Support
You can find links to various resources on the ThemeFlood website. Official RapidWeaver support resources such as the user manual, help desk and forums are available under the help menu in RapidWeaver. For issues relating to this theme or other problems, please get in contact via the ThemeFlood website. Unlike some other theme companies, customer support is free and is extended to cover themes which have been customised or modified. Facilities are available for you to upload customised themes and RapidWeaver sandwich (project) files. A custom theme and modification service is also available.
© Copyright 2010. All Rights Reserved. No part of this documentation may be copied, photocopied, reproduced, translated or otherwise duplicated on any medium without written consent. Use of ThemeFlood themes, plugins and documentation is subject to the EULA (End User License Agreement) which can be viewed on the ThemeFlood website. All trade names referenced herein are either trademarks or registered trademarks of their respective companies.