Design Ninja Blog

It's been pretty busy around here at Sitemasher. Our product was released for public consumption at the start of October, so there's been a lot to do.

Now that it's out there, I'd like to give you a quick tour of how CSS works in there. Basically, in Sitemasher, CSS can be approached in three ways:

1. import it from a CSS file on your computer
2. write it from scratch using our Style Sheet editor
3. as you build your page, you can also use our Visual CSS editor to create inline styles.

Importing Your CSS

If you've already got a CSS file you want to use, #1 is the way to go. Just use our upload tool and you'll be good to go. Your styles will appear in the right-side properties and CSS tabs when an object is selected.

There are a couple of things to note here:

1. Because of the way our product was built, there is no use of ID's when building pages. You'll have to stick with classes for now.
2. Make sure you have properly mapped the image path in our file before importing. Currently, the image path would be in the same folder as the CSS - ie. url(image/imageName.png).

Both of these issues can be fixed with simple Find & Replace in your current editor.

Writing Your CSS from Scratch

If you're starting fresh and want to write your CSS code in our product, you can do that as well. Once in Studio, click the "Style Sheet" tab and you have 2 options:

1. Code up the CSS in the text editor. First, click the "New" button on the lower left of the screen, then choose "Insert Style Item".

    

   Your class or element will then appear on the left side. Highlight it by clicking on it, then code away in the CSS text area to the right. Click "Apply" to save the style once you're done.

   

2. Your other option is to make the new style using step 1 from above, then to use the the nifty Visual CSS editor over on the right.

   Make sure your new style is highlighted on the left, then go to town. As you add or change styles, they will appear in the text area in the middle of the Style Sheet editor. You can then make further changes using either the Visual CSS editor or change the code in the text area.

   

Creating Inline Styles Using the Visual CSS Editor

If you're not a stickler for hand-coding your CSS, our Visual Editor gives you an easy way to customize your page. Go through each of the sub-tabs and set the appropriate styles. You're done. Almost easy as pie. The summary of the styles you've created will then appear in the "Summary" tab, which also allows you to clear the styles if you'd like to start over.

What do you folks think? Does it look usable to you? Visit Sitemasher, sign up and give it a try for yourself.