Nilrog's place - Blog » Example

Some new styles for FlexibleList

nilrog — Sat, 29 Nov 2008 09:54:13 +0000

I had some fun a while back playing with FlexibleList and created some new styles, partly on user request. But I never got around to actually adding them to my site until today. They are quite simple but still useful so they are now available on the example page for you to download. They all involve displaying images with a description and works without any special tricks to add the image to FlexibleList.

Common for all these styles is that you can display a list of items containing an image and text. Adding the image to each item is very simple. Just drag the image into the content area and add the text after the image. There is no need to add special formatting and/or wrapping HTML tags inside the content. If you want to adjust the image you can use RapidWeavers built-in Media Inspector.

Product Description with Title, Left
This style displays a product description with an image, title and text description where the image is aligned to the left of the item and the title and text is aligned to the right. The style is configured for an image with a size of 48×48 pixles and a title size that fits inside 20 pixels height. But the CSS is commented so you can see where you need to make changes if you want bigger/smaller image and/or adjust the size of the title.
Product Description with Title, Right
This style displays a product description with an image, title and text description where the image is aligned to the right of the item and the title and text is aligned to the left. The style is configured for an image with a size of 48×48 pixles and a title size that fits inside 20 pixels height. But the CSS is commented so you can see where you need to make changes if you want bigger/smaller image and/or adjust the size of the title.
Columned Product Description
This style displays a product description with an image, title and text description in a column layout. The style is configured for 3 columns an an image with a size of 48×48 pixels. But the CSS is commented so you can see where you need to make changes if you want more/less columns and/or bigger/smaller image.

These styles have been tested in Firefox 2 & Safari 3 on Mac and Firefox 2 & IE6 on Windows. I leave no guarantees that they work in all browser on all platforms since I haven’t got the possibility to test them all. But if you discover some issues with any of my styles, except if you have heavily modified them, let me know and I will see if I can fix them.

That’s it for this time! I hope you enjoy playing with FlexibleList as much as I do :)

And don’t forget to go and grab a copy of these style if you like what you see…

Tabifier for FlexibleList updated

nilrog — Fri, 29 Aug 2008 20:30:37 +0000

The “Tabifier” example style for FlexibleList has been updated with a small CSS fix. It fixes an issue with images in items that have been “aligned” in RW which could be breaking out of the tabbed container.

This fix will be included in the next FlexibleList update. But until then you can
grab the updated style now.

Two new example styles for FlexibleList

nilrog — Sat, 03 May 2008 14:39:53 +0000

I have uploaded two new example styles for FlexibleList today. Well, one was kind of old (Odd/Even) it’s just that I had forgotten to add it as a downloadable file.

The really new example is Two Columns which shows you how to basically create a two column table. But it’s not a real HTML table. All is done with CSS and you can adjust the width of the leftmost column in the CSS.

Go have a look and download them if you think they may come in handy somewhere.

Tabifier update

nilrog — Tue, 29 Jan 2008 20:32:40 +0000

The “Tabifier” example style for FlexibleList has been updated with some IE related fixes to the CSS. The original style example had some redrawing problems with our “favorite” webbrowser…

If you have downloaded “Tabifier” before go grab the update now.

Tabifier – a style example for FlexibleList

nilrog — Thu, 24 Jan 2008 13:48:41 +0000

I have started to put some example styles for FlexibleList on my website to show you what you can do with this plugin besides using the default style. The examples are/will be available on the FlexibleList example page.

First out is “Tabifier”…use of a javascript that creates a “tabbed” interface, ready to have it’s looks modified by you.

It’s very easy to use, you import the .flstyle file into your FlexibleList page and add the javascript to that page in the page inspector. The javascript creates the “tabbed” look and you manage the content/name of the tabs with the items in your FlexibleList.

Examples of how to use @stash

nilrog — Sun, 04 Nov 2007 16:04:11 +0000

For those who want to know how you can use @stash in your RapidWeaver project but do not know where to start I have put some real-life examples up for download. I have started with two simple examples, one that imports some content onto a styled textarea and one that creates a small donation page using Collage where I keep the PayPal button code in @stash items so I can easily change them. I will be adding more advanced examples later that will show you how you can use @stash to really save time when you are making changes to a commonly used piece of code.

To look at these examples head on over to the @stash Example page and grab the ones you want.