Three Types of Styles
There are three types of styles in RapidWeaver:
- Normal – rendered into edit mode — for basic text styling.
- Ignored – pink in edit mode — for including code directly.
- HTML – green in edit mode — for adding HTML styles to your text.
Normal (rendered)
As you are probably aware, you can add simple text styles to any Styled Text page or Styled Text area inside of RapidWeaver. These styles include character styles like Bold, Italic, and Underline. And paragraph styles like Center and Right paragraph alignment. And they also include some styles that I would really recommend strongly that you stay away from: Fonts – Alway always always use your theme to select the fonts for your document. Forcing fonts into your document through the Format menu exists IMHO only for backwards compatibility. Using that tool on today’s web is asking for trouble. Don’t do it. (the reasons why are many, and outside the scope of this little tutorial)
Styled Text is a fundamental part of RapidWeaver. You can use it in a lot of different places. Obviously in Styled Text documents, but also in Blogs, your sidebar, and even Stacks Text blocks. It’s everywhere and it works exactly the same which is awesome!
You can’t use styled text in a couple areas that I hope are pretty obvious: Markdown pages/stacks and HTML/Code pages/stacks. Those sorts of pages are designed to work with their specific type of language – so just stick to that.
You can tell when you’re using normal styled text because the styles render right into Edit mode. Bold text looks bold and Italic text looks italic. This is pretty expected, but not the way the other special styles (see below) work – so it’s a good thing to keep in mind.
NB: You can use the Format > Clear Formatting menu option to clear any Normal style. Selecting text and clearing the formatting will remove all of the normal styles from it. It’s a good way to get your text back to the plain vanilla default style and let your theme render the text accordingly. Clear Formatting does not remove any of the special styles listed below.
Ignored (Pink)
There are times when you’d like to include some code or other text that confuses RapidWeaver rendering engine. To do this we can temporarily disable the RW rendering engine. This is great if you want to include a tiny bit of HTML in the middle of some styled text. To make it happen, select the text and choose Format > Ignore Formatting. In Edit mode the text you’ve selected to will turn Pink to show that it will be ignored.
Here’s what it looks like in Edit mode:
HTML (Green)
All of the items in the Format > HTML menu apply an invisible style to the selected text. This menu is also available in the bottom text toolbar, it looks like <>. These special HTML styles allow you to add things like <H3> header tags to your text – and a bunch of others.
But HTML isn’t rendered in Edit mode. Instead these styles will show up as highlighted in light green like this:
When you Preview or Publish the page the HTML styles will be exported to nice well formed HTML and applied to the text to become part of your web page. In this case I applied the StrikeThrough style, so the web page looks like this:
To remove one of the HTML styles you select the green highlighted text and choose None from the Format > HTML menu.
One More Thing
NB: You can NOT use the Format > Clear Formatting menu to remove HTML styles (green) or an Ignored style (pink). Clear formatting works for regular styles, but not the green/pink special styles.