More CSS styles are described below.
Currently, these styles are displayed in a random order. Although, as the number of styles displayed and described at the site increases, they will be organised, indexed, listed, and linked to a logical order.
Hiding a column on a page.
You may sometimes want to hide a right-hand column on a page, in order to accommodate displaying an extra-wide image or a video in the main column.
You can hide the right hand column on an individual page by clicking the minus sysmbol - displayed at the top of the column in the BB2 editor. Click the plus symbol + to re display the right hand column on the page.
The same result can also be achieved by pasting the following style code into a Raw html block on the page.
The display: none; declaration hides the #ExtraColumn div and its contents from view.
You can then add an extra-wide item such as a large photograph to the main column. The displayed text in the main column, will still display at the normal column width, although the image or video will extend beyond the normal column width, as demonstrated below.
Creating a space in the right-hand column
You can continue to display the right-hand column and use HTML code to add a vertical space to the right-hand column. The vertical space will push the column contents further down that column, so that the extra wide image or video is not overlayed by the contents of the right-hand column.
You can split the right hand column into two text blocks and then add a Raw html block in between those text blocks. Then, in the Raw html block insert a div tag which includes a height dimension. See the code below.
<div style="height: 35em;"> </div>
The div will push any following content down the right-hand column by the div height, which can be adjusted to create an empty space in the column where the div is located.
You cannot see the inserted div in the editor view, so preview the page and then return to the editor page to make adjustments.
Alternatively, you could simply use the enter key to add empty paragraphs to the right-hand column to create a vertical space.
Note that the right-hand column displays in front of the extra wide image or video. Meaning that any control buttons displayed in a video control bar, which are positioned behind the right-hand column may possibly not be clickable in the published page.
Always check that your published pages display as inteneded, by viewing them in multiple browsers.
More CSS styles can be applied to your pages, although these are often not needed. This is because the BB2 editor enables you to create many effects simply by clicking relevant buttons witin the editor interface, as described below.
Hiding the navigation bar on a page
You can hide the navigation bar in the left hand column of an individual page by clicking the appropriate nav bar site wide dot minus symbol -. This will hide the navigation bar on the page you are currently editing.
Click the plus symbol + which replaces the minus symbol, to re display the navigation bar on the page.
More CSS styles and editing techniques are described and displayed throughout this website.
Return to the top of the More CSS styles page.
Return to the website styles page.
End the text here.
Re start the text here.
Be cautious about doing the above as it can lead to alignment problems if the contents in either of the two columns are added to or deleted from.
Plus, the vertical alignment of text in the two columns may possibly differ between different web browsers such as IE and Firefox or Chrome.
The image, or a video height and width will need to be specified in pixels to ensure compatability with different browsers.
Always check your pages in different browsers to ensure that anything you do which is non standard, looks OK in each browser.
More CSS styles are displayed throughout this website.