WebKarnage.net

Part 1:- Styled Text Tricks Intro.

Hi all, and welcome to another WebKarnage tutorial. As the title states, this is all about little HTML and CSS tricks that can be used to help you get more control and flexibility from your RapidWeaver Styled Text pages. We are not going to be going for the jugular with reems of complex code, but showing how some basic knowledge of lightweight code can make the difference.

The Styled Text page type, is RapidWeaver’s standard page type, and has so much going for it in terms of both simplicity and hidden power. I feel it is the essence of RapidWeaver in that sense, as we would describe RapidWeaver in just the same way. You can simply type some text into the page, drop an image onto it, click once on the image, choose Format>HTML>Align Image Right and your text wraps around the image! Brilliant!

A Few Simple Rules.

These are rules for following this tutorial, but not hard and fast rules when making your own pages.

• Paste any text or code used using ‘Paste As Plain Text’ (Command>Option>V) to prevent any unexpected formatting code creeping in.
• Be careful to highlight everything between start and end HTML tags when applying ‘Ignore Formatting’.
• Take you time, and try changing the code to see the effects. It will improve your ‘feel’ for what is going on.
• Do ask questions on the RapidWeaver forum. The only daft question is the one you didn’t ask!

HTML and CSS, What’s The Basic Difference?

OK, so we know they are both types of code, and they even share a some things, but why is some code called HTML, and some CSS? Here is a simplistic view of the difference.

HTML is code that acts exactly where it is written and generates elements,ie. content. If it is written in the content container (main edit window in RapidWeaver), that’s where is is applied. It is also ‘run’ by the browser generally in the order it is written.

CSS code is written in sheets to be referred to, to be applied later to HTML elements as they appear changing how they look, and also inside HTML tags where it is referred to as ‘Inline Styling’. CSS stads for ‘Cascading Style Sheets’. This means CSS in different places has different levels of precedence. The ‘closer’ the CSS is to the element, or the later on the same sheet even, the greater the precedence. Therefore, we start with the styles.css sheet in the theme, with the Custom CSS box in the Page Inspector taking precedence over that, and inline styling taking ultimate precedence. We can override later CSS with the ‘!important’ declaration. For example, this allows us to be sure that when we put CSS in the Custom CSS box, inline styling can be overridden.

Past The Basic Settings.

We are not going to be covering how the basic HTML commands already available from the RapidWeaver formatting menu, and we will assume that all of you are familiar with the basics such as using ‘Align Image Right’ to let your text wrap around the image on the left. This is well covered in the manual for RapidWeaver 4. It also mentions using an HTML div (an area or division of an HTML document) with the class of ‘image-right’ to do the same job. There is some CSS in the styles.css file in the theme used that will then be applied to this class. It starts with ‘.image-right’. The period says this styling will be applied to a class of div, if we used id=”image-right” the CSS would need to start with a hash instead of the period. We will be expanding on this use of HTML.

Part 2:- Getting to the nitty gritty..

We have all used the ‘Align Image Right’ (or left) command to place an image to one side and wrap the text around it. Why don’t we add some more functionality to this? Many of you will have seen this done on the RapidWeaver Forum by such gurus as Sundog (Larry) and Phil Warrender.

Image Styling.

Firstly, create an HTML div around the image, then we can apply some CSS to it for styling.

<div class ="myimage">

your image goes in here

</div>

We now add some CSS for styling.

.myimage{
display: block;
float: right;
background-color: #EC9030;
padding-right: 10px;
padding-left:10px;
padding-bottom: 20px;
margin-right: 50px;
margin-left: 14px;
padding-top: 20px;
border-left: 4px solid lightblue;
}

This code is to be placed in the Custom CSS box in the Page Inspector’s Header tab. This produces the effect to the right of the HTML code. Try enlarging the text on this page, and see what happens. Because the divs with the text and picture in do not have absolute positions attached as the would in iWeb or Blocks, you will see that their positions move to accommodate this enlargement. It also stops any issues with fonts requiring different spaces in different browsers.

Taking It Further.

Maybe we now want a caption for the image? We will want it to stay with the image, so we create a new div for the caption, and place it inside the div for the image. We will make the div for the caption the same size as the image, then the text align center command for the caption, will center the caption under the image.

Again before the image we have

<div class ="myimage">

but after the image we have

<div class ="caption">This is our caption</div></div>

The CSS code for the caption is

.caption{
font-size: 16px;
font-weight: bold;
height: 18px;
margin-top: 10px;
display: block;
color: black;
background-color: lightblue;
width:330px;
text-align: center;
}

Removing the background colors can provide you with something that looks so much more ‘seamless’, but wouldn’t make it as clear here what we were doing, hence our use of them for the examples.

Part 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.