WebKarnage.com

Projects and Web Design

Navigation

Styled Text Tricks Page 3


A Few Little RapidWeaver Extras.

I have found that using some HTML code, doesn’t remove you from using some nice RapidWeaver features! If you are going to generate a paragraph of text you wish to place to one side (as we did with the paragraph of text below the first image example), you can use the built functions on parts of that text, then once you have HTML code before and after the text, highlight it all and Ignore Formatting (Command>period). This doesn’t remove the code RapidWeaver will add for you! One clever application this RapidWeaver. We added the heading 3 formatting to the title ‘Description.’ but it doesn’t stop there. Try adding links and other built in formatting tools, and results are still there. Taking this route doesn’t mean we have to resort to total hand coding for these sections or the page.

I hope this start will get some of you more interested it what can be accomplished with this page style. It produces robust pages, that stay looking good in many cirumstances where other pages might not, but don’t forget where Styled Text areas appear...

Using This With Plugins.

Now, very few of us have no 3rd party plugins, so let’s have a quick look how this plays with a few of them too! If we take a quick look at the now free Collage 1 (thanks Isaiah!), this has a Styled Text Header and Footer! Whoa! Now can you see even more chances to make awesome pages?? How about some cool collage links at the bottom of a Styled Text page? Just place the text and code etc. into the Header in the edit view of the Collage page. Awesome. The same can be done not just with the Header and Footer areas in an Accordion, but how about the contents too! Now maybe you can see why Isaiah at Yourhead was asked for the Header and Footer to come back in Collage 2, and why so many were grateful they did. Many more plugins can be expanded in this way. Blogs can also make use of these techniques, giving you a very stylish Blog.

Using The Work On Many Pages.

Now we have done this wonderful styling, wouldn’t we want to use this on many pages? Definitely! We can do the obvious, and copy the Custom CSS from page to page, but that sounds cumbersome. As the CSS is ready to be applied to a ‘class’, we can add this too the styles.css of your chosen theme, and any time you use a div with the class for the CSS, it will get styled accordingly! If you look at the styles.css carefully, you will see this going on already with classes like ‘image-right’ as we spoke about at the beginning. This is written by RapidWeaver when we use the command from the HTML formatting menu. For more instructions on this, please see our tutorial Theme Editing Basics, and add the code to the end of the styles.css.

We will be expanding on this as time allows, but it is such a strong part of what RapidWeaver can do for us I had to start somewhere! All sorts of code can be used in a Styled Text page, as Ben Counsell pointed out in the WebShed blog.

You can view this as a PDF file for easy printing HERE. It will not have the layout displayed exactly as the web pages.

WebKarnage.