=][= BUTTONS ADDED TO EDITOR TOOLBAR =][=

[Brother Tyler]

As we continue preparing for the Articles function (what some of you will refer to as the Librarium), we are looking at the editing tools available for content. Many of you will remember the range of BBCodes that were available prior to the software update. Since Invision removed BBCodes, we were left with the default formatting options. Our Sacristans were able to add headers to the mix, but a few of the more interesting BBCodes such as captions, sidebars, and buttons were lost. We are playing with things to see what we can restore, especially as effective use of BBCodes can enhance the presentation of articles. In the meantime, we found a few editing buttons that had been left off and have added those. These buttons allow you to superscript¹, subscript₂, and use justified alignment (see below). These buttons appear on your editing toolbar as shown below, in the orange ovals.

 

 

The four paragraphs below use different alignments: left (default), centered, right, and justified:

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non velit et sem tempus pellentesque. Donec vel ullamcorper ligula. Proin nec nisl nec lorem tristique euismod. Vestibulum eu diam lectus. In interdum elit lacinia, eleifend lacus eu, molestie augue. Mauris nibh lorem, scelerisque quis dictum non, volutpat sed dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque volutpat, sem sed pretium rhoncus, nunc orci tristique magna, eget rutrum dolor risus non nisl. Etiam lectus lacus, pulvinar vitae neque nec, fringilla faucibus turpis.

 

In sit amet pretium eros. Mauris pretium scelerisque urna, id tincidunt nisi porttitor in. Curabitur tempor, orci vel placerat mollis, ex ligula semper nibh, a ultrices nunc felis a risus. Curabitur viverra tortor a ipsum sodales auctor. Suspendisse sit amet dolor ex. Proin hendrerit lacus a convallis finibus. Curabitur molestie porttitor maximus.

 

Cras enim erat, volutpat at ante nec, rhoncus cursus sem. Etiam metus nisi, lobortis nec mi eu, cursus egestas ante. Aenean convallis, felis pharetra elementum molestie, sem turpis ornare neque, sed facilisis velit velit at odio. Quisque sed aliquet justo. Nullam viverra tortor sed ligula euismod, vitae eleifend nibh cursus. Vivamus libero enim, molestie id tellus nec, lobortis euismod felis. Donec a eros sit amet leo maximus condimentum. Ut id pulvinar lectus.

 

Vivamus eleifend posuere mi. Fusce ac augue quis velit accumsan ullamcorper in id tortor. Mauris suscipit porta lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam massa lorem, commodo vel iaculis vitae, malesuada viverra sem. Curabitur finibus, neque ut dapibus bibendum, nisl lectus mollis arcu, a mollis leo ipsum dapibus dolor. Proin aliquam posuere mi, eget dapibus metus pellentesque ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam ullamcorper malesuada tellus. Praesent consectetur arcu in orci porttitor vehicula at bibendum mauris. Cras convallis rhoncus ipsum eu varius. Duis non ante lorem. Suspendisse semper dui ac lectus bibendum, at congue urna ultricies. Vivamus sollicitudin nisl et enim vehicula fermentum. Cras sodales egestas consectetur.

 

My immediate goal is to expand the headers so members have non-skull options. We'll see what else we can do.

 

[Doctor Perils]

Justified text is a cool one. Didn't even know Headers had their own button now (what with only using the site on mobile these days). Nice additions thanks

[Brother Tyler]

We'll probably be getting rid of the skull headers, replacing them with basic headers. Here's a preview (still in the works so not available for use by anyone else).

 

Skull Header

(current, to be deleted, note the height)

 

Header

(planned, less padding, shorter)

 

Both versions force the font to 130% size, though you can change that, as...

 

Header

(text changed to 48 pt)

 

Header

(text changed to 10 pt)

 

Header

(text left at 130%, but italic, underlined, and forcing the font to Courier New)

 

 Header

(and you can add your own image)

 

 Header

(and here's another image, note that the height of the header is based on the tallest element within, either image or text)

 

 Header

(and here's the same image, this time shrunk down to 12 pixels high)

 

Header 

(and if you want a taller header, like the current skull versions, you can simply include a transparent spacer image after the text - this one is 48 pixels high)

 

Half Skull Header

(current, to be deleted, note the height)

 

Half Header

(planned, less padding, shorter)

 

 Half Header

(you can edit this just like the full header)

 

Oh, and I forgot to mention that you can adjust the alignment of the content within the header...

 THE BEST LEGION  

 

We're still tweaking things, but once the Moderati are happy, I'll pull the trigger.

[Brother Tyler]

We tweaked the header styling a bit, creating a little more horizontal spacing between the border and the text.

 

Header

 

Half Header

 

Header

 

Half Header

 

The bottom two show that you can align the content of the header to the right, in addition to the center (as shown in my previous post).

[Brother Tyler]

Okay, the editor toolbar has been updated for now. Some of the buttons were rearranged in what I hope is a logical manner (I may have been sniffing too many paint fumes, though, so let me know if you think the new sequencing doesn't make sense to you). In addition, a variety of new buttons were added, giving you more formatting options. The skull header buttons were also removed.

 

If you're viewing the site using the Carbon skin (the dark one) on a large device (e.g., a computer monitor), the new arrangement of buttons can be seen below, with the new buttons outlined in orange.

 

 

Starting at the top and moving from left to right...

• Undo and Redo should be familiar to everyone.
• Subscript allows you to change the selected text to subscripted. This is good for showing numbering systems (e.g., CE₁₆ means CE in hexadecimal, which equals 206 in decimal).
• Superscript allows you to change the selected text to superscripted. This is good for showing exponents (e.g., 2² means 2 squared, which equals 4) and also for identifying notes, especially when one is using footnotes, endnotes, or reference citations.
• Justify is an alignment style where the text spacing is adjusted so that it stretches from the left margin to the right margin, giving a more uniform appearance to text blocks.
• Increase indent tabs text blocks over incrementally. Note that the entire text block will be tabbed, not just the first line.
• Decrease indent untabs text blocks incrementally.
• Header creates headers that stretch the full width of the screen. The vertical size of the header has been reduced from our previous version. The vertical size will adjust based on the height of the tallest content, whether text or image. You can also create more height by including a transparent spacer image in the content. Headers will have a white border that can't be changed and will default to white text that is aligned to the left and 130% of the size when the text was selected. You can edit the text, however, and you can include images.
• Half Header is identical to the [full] Header, but only covers half of the screen. While the content within can have its alignment adjusted, the Half Header will always be aligned to the left.

Here are some examples of a few that couldn't be shown in the bullet list above.

 

Header (text changed to black, text set at 20 pts, content center aligned)

 

 Half Header (text set at 12 pts, image added and left at 20 pixels high)

 

Text not indented

Text indented 1 time

Text indented 2 times

Text indented 3 times

and so on...

 

I may tweak the Header/Half Header codes to give a bit more padding on the bottom.

 

(The next three paragraphs all have the justify format applied.)

 

When applying the Header/Half Header formatting, you'll see a dialog box directing you to select the background color in RRGGBB format. You can enter either six or three characters, the latter only if each character is doubled (e.g., 9A5 would be the same as 99AA55). Unfortunately, the software doesn't pull up a typical color selection chart, only providing a cell in which you must enter the color code. This is unlike the font color and background color formatting buttons, which pull up a color selection chart. If you don't have a color selection tool available, we have an [incomplete] index of Games Workshop's paint range colors here.

 

If you are viewing the site on a smaller device such as a tablet or mobile device, you'll see far fewer of the buttons. I'm open to expanding the range of editing options available to members on smaller devices, but [I think] the thought process (on the part of Invision who set the defaults) is that users of smaller devices want less stuff on the screen. If sufficient numbers of smaller device users disagree with that concept and would prefer to have more, or even all, of the buttons available, we can make those changes.

 

There are some additional buttons that I would like to make available, but I haven't quite figured out how to make them work. It has been a long time since I wrote HTML or CSS and the code used for these, while working a lot like CSS, is a bit different (and they have probably updated CSS since I played around with it). We lost a lot with the removal of BBCode (I wrote a couple of nifty custom codes that I'd like to reintroduce), but we'll continue trying to expand the options.

 

I am preparing tutorials for each of the formatting buttons, but I wanted to give everyone a quick introduction to the new buttons.

[Brother Tyler]

We plan to have a library of icons that members can use for headers if they desire. Members can use any icons that they want, but a few that are readily available should be handy. These icons will probably be larger than their intended use, allowing members to shrink them down to suit their needs.

[Brother Tyler]

With the Articles function going live and work being done to provide basic guidance for prospective authors, I plan to create five more formatting buttons. Actually, there are a lot of buttons that I'd like to add, but the technical complexities behind making most of them happen are [so far] beyond my meager intellect. The ones I think I can add for now, however, will facilitate articles. These will be different sizes of headings.

 

Headings? We already have headers.

 

Ah, but headings will be different.

 

These are the headers that we currently have:

 

full header

 

half header

 

These allow you to select content and then a 3- or 6-character hexadecimal RGB color code. The full header is automatically 100% of the content area width while the half header is automatically 50% of the content width area. Both create a 1 px thick white border and the text is 130% the default size. In both cases, you can edit the text, changing its size, color, bold, italics, etc.; and you can add images within the headers (see the posts above).

 

The headers are really distinguished by the background colors and borders.

 

What I'm talking about creating now are headings.

 

These will be similar functionally in that they will distinguish the formatted text from other text, but they will probably only affect the font size and make it bold. Headings won't affect color, either of the background or the text (though you will be able to apply those changes, too, if you desire).

 

What value do these add?

 

In a nutshell, headings allow text to be formatted to distinguish it from the main body text and to help identify different bodies of text, providing visual cues to the organizational structure of the work. Different style guides have different definitions and requirements for different heading levels; and while we don't want to be too prescriptive or promote one particular style over others, we want to enable as many as possible.

 

From an accessibility standpoint, using headings (or headers) instead of just changing font sizes, bolding, etc. allows for reader-defined settings to remain in effect. For example, the default font size at the B&C is 16 pts. If you don't manually format the font size, it will appear the same size as if you were to manually format it to 16 pts. However, some viewers adjust the size of font in their viewing, changing the default in their browser. So if you don't manually format the font size, the font size will increase or decrease based on the viewer's preferences. Meanwhile, if you manually set the font size, it will remain at that size regardless of the viewer's preferences. This can be problematic if the font size appears too small. So by using the header and heading formatting buttons to adjust font size by percentage, the header and heading fonts adjust based on the viewer's preferences.

 

Lastly, a basic level of standardization can be created. Authors can still adjust from the standard, but creating buttons facilitates consistency and simplifies things for content authors.

 

I'm starting with five levels of headings, with H1 being the largest and H5 being the smallest. All heading levels will make the text bold, with the size of the text being the main distinguishing feature between each level. Authors can then apply other elements (all caps, italics, underlines, periods, etc.) as they desire. I'll start my experiments with font sizes being:

• H1 - 180%
• H2 - 160%
• H3 - 140%
• H4 - 120%
• H5 - 100% (remember, all headings will have bold text, automatically setting H5 text apart from other text)

To differentiate the headings from the headers, I'll use a lowercase "h" followed by the number for the level.