RavenNuke2:Block Functionality and Styling

Problems

Inflexible Layouts

Many of the blocks included with RavenNuke™ prior to the 2.5 release were formatted for narrow block columns, and since unordered <ul> and ordered <ol> lists were rarely used; there was little that a theme designer or site owner could do to restyle them via CSS. At the time many of these blocks were originally written, there were huge inconsistencies with how the major browsers displayed unordered <ul> and ordered <ol> lists. For this reason, blocks often used a combination of &middot; and <br /> to simulate lists. The resulting HTML that was produced was full of line-breaks and nearly impossible to restyle short of modifying the block files themselves.

Lack of Positional Awareness

Prior to RavenNuke™ 2.5 there was no established method for a block to determine it's position on the page; which has applications from selective CSS styling to JavaScript functionality, and more. The most obvious use for such "Positional Awareness" is restyling a block to a wider layout if it used in any of the center positions. Another example would be block-nukeNAV.php from the 2.4 release, which uses a JavaScript based sub-menu that is displayed on the right side of the block. This works fine unless you want the block in the right column which could potentially leave the menu out of view.

Unique Block ID's

Lacking a reliable method to generate a unique CSS ID that can be associated with a given block, it becomes difficult to target specific blocks via CSS, or to add some JavaScript functionality; such as hiding a block if JavaScript is disabled, or presenting a block in a Colorbox modal.

Center Blocks above Messages

Prior to RavenNuke™ 2.5, it was not possible to display center blocks above messages without modifying core files to change the order that they are displayed.

Approach

• Establish a core methodology that is used by all blocks that list content, utilizing unordered <ul> and ordered <ol> lists.
• Declare default styling for unordered <ul> and ordered <ol> lists used in blocks, while allowing for overrides by a theme's style.css file.
  • Note: It is highly recommended that you override the default CSS statements rather than edit ravennuke.css
• Add "Positional Awareness" so that blocks can adjust their layouts or JavaScript functionality as needed.
• Establish a method to produce unique CSS ID's that can be associated with specific blocks
• Add an additional block position of Center Top (above msg)

Solution

HTML Lists and Default Styling

Whenever appropriate, blocks were converted to use unordered <ul> and ordered <ol> lists, including logic to prevent empty <ul> and <ol> elements from being generated. One of several CSS classes is added to a given list, depending on the type of content being listed.

• class rn-ul for unordered <ul> lists of the list-style-type:disc
• class ul-circle for unordered <ul> lists of the list-style-type:circle
• class rn-list for unordered <ul> lists of the list-style-type:none
• class ul-none for unordered <ul> lists of the list-style-type:none
• class rn-ol for ordered <ol> lists of the list-style-type:decimal

Default styling is declared in ravennuke.css, including additional styling for nested lists and individual blocks; as well as optimization for display as side and/or center blocks.

Positional Awareness

Positional Awareness was added to many, but not all, blocks within the distribution; however the method for adding such awareness is relatively easy. All that needs to be done is to key off the $side variable which is available internally when any of the block related functions are called. This is a basic example of detecting center or side position from within a block file, and the $ListClass variable is later used to wrap the block content so that the block can be styled accordingly.

if (!isset($side)) { $side = ''; }
if ($side == 'c' || $side == 'd' || $side == 't') {
	// center positions
	$ListClass = 'ul-box-center';
	} else {
	// side block
	$ListClass = 'ul-box';
}

NOTE: Positional Awareness can only be added to blocks of the type "file", as there is no method for adding logic to a HTML block created with the FCKeditor. In most cases testing for center versus side position is enough, however the above logic could certainly be adjusted to test for left 'l' or right 'r' positions if desired. Just keep in mind the left column isn't necessarily located on the left in all themes, so the basic approach within the distribution was to use CSS selectors to target specific block columns; on a theme by theme basis.

An example of block-nukeNAV used in the center position

Taking a look back at block-nukeNAV.php after the 2.5 release, we can find examples of adapting both layout and Javascript functionality depending on position. In this case the Javascript functionality is CSS driven, and since each theme can define it's own nukeNAV.css; only some minor CSS additions were required. Although this same logic could be used to selectively alter inline JavaScripts, or load JavaScript files via the addJSToBody array (see block-User_Info.php for an example).

As mentioned previously, altering the sub-menu behavior of block-nukeNAV.php for the left and right block columns requires edits on a theme by theme basis. Adding this functionality to third party themes is relatively easy, provided your theme has a unique CSS id or class for the left and right block columns. Refer to the nukeNAV.css file of the included themes for examples.

An example of block-nukeNAV.php using positional awareness to alter sub-menu layout

Additional Block Position

In Ravennuke 2.5, with the center top position, you will have the ability to create a block (or blocks) that go below the header area and BEFORE any active message blocks. This might be particularly useful if you want to have a "dynamic" block (one that selects images randomly from a picture gallery for instance) near the top of your page. But basically, the capability is there to give you, as administrator of your site, further choice in layout. More information regarding block postions can be found in the Block Administration section of the wiki.

Theme Block Functions

When each block is created it is assigned an ID which is used internally to identify that particular block. In RavenNuke™ 2.5 this ID is now passed to the themesidebox and themecenterbox functions of a given theme. The usage of these ID's optional, and it's up to the individual theme designer whether or not they choose to implement them. One example of use would be the themecenterbox function of the included themes, which will display an edit link to admins at the bottom of center blocks.

It is important to note that there are times these functions may be called without a block ID, such as modules that present content in "simulated" blocks using themesidebox. This text file shows an example themesidebox which will create unique CSS ID's for all side blocks, with additional logic to avoid empty or duplicate values; which would produce html validation errors.

Customization

Default CSS styling for the unordered <ul> and ordered <ol> lists used in side and center blocks is declared in ravennuke.css. It is highly recommended that you ALWAYS override the default CSS statements rather than edit ravennuke.css. Since ravennuke.css is loaded prior to the style.css of any given theme, CSS overrides should be placed in style.css so that changes do not effect other themes or core functionality. Refer to the default themes in the RavenNuke™ distribution for some examples of using CSS overrides for block lists, usually located at or near the bottom of the respective style.css file(s).

Full Width Fluid Themes

A max-width of 1600px was added to the full width fluid themes within the distribution, to help control some center block styling issues, as many of the blocks will change layout when used in the center position. With the increasing resolutions of pc displays full-width themes can also become too stretched out, as well as block columns becoming too narrow in proportion to the main content.

.minmax{min-width:800px; max-width:1600px; margin:0 auto}

This can be overridden within your theme, just be aware that these block layouts are not optimized for display greater than 1600px.

.minmax{max-width:none;}

Third Party Themes

Most themes within the 2.5 release required some minimal tweaking to the default styling that is declared in ravennuke.css; which you can find at the bottom of the respective style.css files. It's expected that the same would be true of themes from outside the distribution. In most cases it could be as simple as adjusting the width of the side block lists to correspond to your theme; in other cases more customizations may be required. Most blocks feature unique classes so targeting a specific block for corrections or an alternate layout is relatively easy for those with some CSS experience.

Dark colored themes will need to adjust the background images and sprites that were required for IE7 compatibility, see below

Side Blocks

Side block lists are nested in a fixed-size <div> of the class ul-box or ol-box depending on the type of list. This was done to maintain IE7 compatibility because of broken list margins in IE7. Due to the abundance of older third party themes available, which almost all use narrow block columns, this was set at a relatively narrow default width of 140px for unordered lists, and 120px for ordered. This may need to be adjusted depending on your theme and a variety of other factors, and can be overridden within your style.css file as needed.

.ul-box{width:140px}
.ol-box{width:120px}

Generally a width slightly less than the available space worked best for unordered <ul> lists, and a little smaller still for the container for ordered <ol> lists; taking into account any padding on the parent element.

An example of block-Old_Articles using an alternate layout

Center Blocks

Center block lists are nested in a <div> of the class ul-box-center or ol-box-center depending on the type of list. Many blocks will automatically break into two (or more columns) when used in the center position, in an attempt to fill the available space more effectively. There are times when this produces undesirable results, depending on the block and how a given site has constructed it's content.

For instance block-Old_Articles.php which groups it's content by the day posted. If you post no more than one story a day the two column approach should balance nicely, but what if you post one story one day, and eight stories the next, and so on? You end up with gaps in the two column layout. So here's an example of overriding this block into a horizontal layout, by adding to your style.css file

.block-old_articles.ul-box-center ul.rn-list li.rn-list.li-even,
.block-old_articles.ul-box-center ul.rn-list li.rn-list.li-odd,
.block-old_articles.ul-box-center ul.rn-list li.rn-list.li-first{
clear:both; margin-left:2%; padding-left:0; width: 100%;
}

For those not familiar with CSS selectors this isn't as imposing as it might look. It is basically three grouped CSS selector chains (separated by commas). To examine the first selector chain, which will match: <li> of the class rn-list and li-even, nested in a <ul> of the class rn-list, nested in a container of the class block-old_articles and ul-box-center. These selector chains are fairly specific to avoid restyling other blocks, as well as, in this case, the nested lists of the block itself (the lists containing "Story Title" below-left). Also note that the side block example (below-right) would be unaffected by these CSS selector chains since it is uses class ul-box not ul-box-center

// Sample Center Block

// Sample Side Block

<div class="ul-box-center block-old_articles">    <ul class="rn-list">    <li class="rn-list li-first">Date        <ul class="rn-ul"><li>Story Title</li></ul></li>    <li class="rn-list li-even">Date        <ul class="rn-ul"><li>Story Title</li></ul></li>    <li class="rn-list li-odd">Date        <ul class="rn-ul"><li>Story Title</li></ul></li>    <li class="rn-list li-even">Date        <ul class="rn-ul"><li>Story Title</li></ul></li>    </ul> </div>

<div class="ul-box block-old_articles">    <ul class="rn-list">    <li class="rn-list li-first">Date        <ul class="rn-ul"><li>Story Title</li></ul></li>    <li class="rn-list li-even">Date        <ul class="rn-ul"><li>Story Title</li></ul></li>    <li class="rn-list li-odd">Date        <ul class="rn-ul"><li>Story Title</li></ul></li>    <li class="rn-list li-even">Date        <ul class="rn-ul"><li>Story Title</li></ul></li>    </ul> </div>

The methodology for altering other center blocks is fairly similar, but will depend on the block, the type of list, and whether the block uses nested lists. Refer to the default themes in the RavenNuke™ distribution for some examples of customizing blocks by theme.

Custom Images and Sprites

Background image(s) and/or CSS Sprites are used in place of standard list markers/numbers to maintain IE7 compatibility. There are two different unordered <ul> list types that use background images, which are equivelent to list-style-type:circle and list-style-type:disc. Ordered <ol> lists use CSS sprites for efficiency, although not without some limitations. The default set of images are intended for use with light colored backgrounds, so custom background images and sprites will be needed or desired for some themes. Assuming you have a dark colored theme, here is a basic example of replacing the default list item markers; using the "Off White" set included in the distribution.

/* DO NOT EDIT ravennuke.css! themes/YOUR_THEME/style/style.css */ /* Block LI List Dot */ ul.rn-ul li{ background-image: url(../../../images/blocks/bullet-offwhite.png); background-repeat: no-repeat; background-position: 2px 5px } /* Block LI List Circle */ ul.ul-circle li, ul.rn-ul ul.ul-circle li{ background-image: url(../../../images/blocks/bullet-circle-offwhite.png); background-repeat: no-repeat; background-position: 0 2px } /* Block OL List styling */ .ol-num{ background-image: url(../../../images/blocks/numbers-offwhite.png); background-repeat: no-repeat; }

Ordered Lists

When customizing the ordered list sprites make sure to use the CSS property background-image. Do not use the shorthand property background, as you would have to redeclare the background-position for all of the number sprites. Although it is important to note that some fine tuning to sprite positions may be required due to a variety of factors, most notably: font-size, line-height, and font-family. To override default styling refer to ravennuke.css and copy/paste the sprite positions to your style.css after you have declared your sprite, as above; then adjust as needed.

For those that need a custom colored number sprite, this download includes 70+ colors, PSD file, and a Sprite Picker demo that will help you pick a sprite and output the appropriate CSS to your theme.

Unordered Lists

The two different unordered <ul> list types use a simple background-image to simulate bullets, and background-position is only used to fine tune the alignment of the list bullets. For those who desire custom bullets, there are many freely available icons on the net, or use this simple bullet PSD to create your own.

Limitations

Developing a default styling for lists that looks consistent in all recent browsers isn't particularly difficult, it's when you attempt to support older browsers such as IE7 that the task becomes more complex. Without proper pseudo-class support and working within the constraints of a broken float model, certain compatibilty adjustements were needed such as the use of background images and sprites. Also note that the simple act of converting content to use unordered <ul> and ordered <ol> lists may cause conflicts with some themes. For instance, themes that use margin or padding for links may need to be adjusted, as linked and unlinked elements in lists will be misaligned.

Internet Explorer 7

Release 2.5 ends our official support for Internet Explorer 6, although we will continue to support Internet Explorer 7 (IE7) for the immediate future. Maintaining IE7 compatibility certainly shaped the way the HTML and CSS was constructed, and overall the system isn't as elegant and clean as it could be otherwise. Many of the limitations of the default unordered/ordered list setup are related to this continued support.

No pseudo-class support

Since IE7 does not support nth-child, in many cases extra classes were added so we can target specific columns via CSS

<ul class="rn-ul">
   <li class="li-first">A</li>
   <li class="li-even">B</li>
   <li class="li-odd">C</li>
   <li class="li-even">D</li>
</ul>

ul.rn-ul li{float:left; width:41%; margin-left:2%}
ul.rn-ul li.li-even{margin-left:3%}
ul.rn-ul li.li-odd{clear:both}

Case of the Missing Bullets

Issues within the float model of IE7 cause floating <li> to lose their list markers, in both ordered and unordered lists. The remedy for this is to use your bullet as a background image, which has some advantages/disadvantages.

• Advantages:
  • Support for CSS sprites and mouseover effects
  • Consistent look and feel of your lists regardless of browser. Tested in IE7-IE9, Firefox, Chrome, Opera, and Safari.
• Disadvantages:
  • CSS sprites are required for ordered lists. The default sprites provided only cover numbers 1-20, and the height of <li> must be limited to approximately 100px or the next number in line may appear in the background.
    • Provided sprites in Black, Off White, and an example of number icons for Simply Blue. This download includes additional colors.
  • Some shifting of the background-position of your bullets/numbers may be required, depending on your font-size, font-family, and line-height. Themes included in RN come pre-configured.
  • Those using a font-size greater than 16px may need to customize a larger sprite setup to fit their text size.

No Margin for Error

IE7 doesn't properly apply margin/padding to both ordered and unordered lists inside of table cells, unless they are nested in a fixed-size container. When blocks featuring the core RN UL/OL system are in the center position, they cannot use a fixed size container because of fluid full-width themes. There is no compliant HTML or CSS method to correct this issue, so included in the distro is a small JavaScript file that loads if any of the block(s) are in the center position, and only executes in IE7 to add the missing margins. This uses the recommended jQuery.support approach of "feature detection" to detect the broken layout model which is unique to IE7, instead of browser/user-agent sniffing which is generally discouraged in cases such as this.

Future enhancements

Future enhancements will have to wait until support for Internet Explorer 7 within the RavenNuke™ distribution has ended, but some things to look forward to:

• Use standard bulleted/numbered lists, dropping requirements for (while still supporting) CSS sprites and background images for list items.
• Removal of fixed size containers for side block lists and any IE7 related fixes
• Removal of unneeded classes and cleaner html markup with proper support for pseudo-classes such as nth-child, for example:

<ul class="rn-ul">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
</ul>

ul.rn-ul li{float:left; width:41%; margin-left:2%}
ul.rn-ul li:nth-child(even){margin-left:3%}
ul.rn-ul li:nth-child(odd){clear:both}
ul.rn-ul li:first-child{clear:none}

Another advantage of nth-child is that it accepts expressions, so you can target just about any "child" you want. Making it possible to break lists into multiple columns (more than two)

ul.rn-ul li:nth-child(3n+3){do stuff} /*3rd, 6th, 9th, 12th, etc*/